/* ==========================================================================
   UAIII — Componentes compartidos
   Cabecera, menú, cápsulas, tarjetas, marquee, pie…
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition: transform 0.45s var(--ease), background-color 0.4s ease,
    box-shadow 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: var(--header-h);
  padding-inline: clamp(1rem, 3vw, 2.25rem);
  transition: height 0.4s var(--ease);
}

.cabecera.es-solida {
  background: rgba(251, 248, 243, 0.9);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--linea);
  box-shadow: 0 10px 40px -32px rgba(23, 18, 15, 0.9);
}

.cabecera.es-solida .cabecera__barra {
  height: calc(var(--header-h) - 14px);
}

.cabecera.es-oculta {
  transform: translateY(-102%);
}

.cabecera__logo {
  display: flex;
  align-items: center;
  flex: none;
}

.cabecera__logo img {
  height: clamp(42px, 4.2vw, 56px);
  width: auto;
  transition: height 0.4s var(--ease);
}

.cabecera.es-solida .cabecera__logo img {
  height: clamp(38px, 3.6vw, 48px);
}

/* Navegación principal */
.cabecera__nav {
  display: none;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.4rem);
}

.cabecera__nav a {
  position: relative;
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-medio);
  padding: 0.55rem 0.15rem;
  transition: color 0.3s ease;
}

.cabecera__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  height: 1px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.42s var(--ease);
}

.cabecera__nav a:hover,
.cabecera__nav a.activo {
  color: var(--rojo);
}

.cabecera__nav a:hover::after,
.cabecera__nav a.activo::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.cabecera__acciones .capsula {
  display: none;
}

@media (min-width: 1180px) {
  .cabecera__nav {
    display: flex;
  }

  .cabecera__acciones .capsula {
    display: inline-flex;
  }
}

/* Botón menú */
.menu-boton {
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-capsula);
  display: grid;
  place-items: center;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.menu-boton span {
  position: absolute;
  width: 17px;
  height: 1.5px;
  background: var(--texto);
  transition: transform 0.4s var(--ease), background-color 0.3s ease;
}

.menu-boton span:nth-child(1) {
  transform: translateY(-3.5px);
}

.menu-boton span:nth-child(2) {
  transform: translateY(3.5px);
}

.menu-boton:hover {
  background: var(--rojo);
  border-color: var(--rojo);
}

.menu-boton:hover span {
  background: #fff;
}

.menu-boton[aria-expanded="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
}

.menu-boton[aria-expanded="true"] span {
  background: var(--oro);
}

.menu-boton[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg);
}

.menu-boton[aria-expanded="true"] span:nth-child(2) {
  transform: rotate(-45deg);
}

@media (min-width: 1180px) {
  .menu-boton {
    display: none;
  }
}

/* Estado sobre fondo oscuro (portada de las páginas de sección) */
.cabecera-oscura:not(.es-solida) .cabecera__nav a {
  color: rgba(246, 241, 233, 0.78);
}

.cabecera-oscura:not(.es-solida) .cabecera__nav a:hover,
.cabecera-oscura:not(.es-solida) .cabecera__nav a.activo {
  color: var(--oro);
}

.cabecera-oscura:not(.es-solida) .cabecera__nav a::after {
  background: var(--oro);
}

.cabecera-oscura:not(.es-solida) .cabecera__logo img {
  filter: brightness(0) invert(1);
}

.cabecera-oscura:not(.es-solida) .menu-boton {
  border-color: var(--linea-oscura-fuerte);
}

.cabecera-oscura:not(.es-solida) .menu-boton span {
  background: var(--texto-invertido);
}

.cabecera-oscura:not(.es-solida) .menu-boton:hover {
  background: var(--oro);
  border-color: var(--oro);
}

.cabecera-oscura:not(.es-solida) .menu-boton:hover span {
  background: var(--tinta);
}

/* Barra de progreso de lectura */
.cabecera__progreso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}

.cabecera__progreso i {
  display: block;
  height: 100%;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   Menú móvil a pantalla completa
   -------------------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--tinta);
  color: var(--texto-invertido);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 1.5rem) clamp(1.25rem, 5vw, 3rem)
    clamp(1.5rem, 4vw, 3rem);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
  visibility: hidden;
  overflow-y: auto;
}

.menu.abierto {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

.menu__lista {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-block: auto;
}

.menu__lista li {
  overflow: hidden;
  border-bottom: 1px solid var(--linea-oscura);
}

.menu__lista a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.6rem, 2vw, 1rem) 0;
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 7vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  transform: translateY(110%);
  transition: transform 0.65s var(--ease), color 0.3s ease;
}

.menu.abierto .menu__lista a {
  transform: translateY(0);
}

.menu__lista a span {
  font-family: var(--ff-texto);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}

.menu__lista a:hover {
  color: var(--oro);
}

.menu__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea-oscura);
  font-size: var(--fs-mini);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-invertido-medio);
}

/* --------------------------------------------------------------------------
   Raíl de secciones (índice lateral)
   -------------------------------------------------------------------------- */

.rail {
  position: fixed;
  left: clamp(0.5rem, 1vw, 1.25rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-rail);
  display: none;
  flex-direction: column;
  gap: 0.95rem;
}

@media (min-width: 1400px) {
  .rail {
    display: flex;
  }
}

.rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
  transition: color 0.3s ease;
}

.rail a::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--linea-fuerte);
  transition: width 0.4s var(--ease), background-color 0.3s ease;
}

.rail a b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.rail__etiqueta {
  position: absolute;
  left: calc(100% + 0.55rem);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  padding: 0.32rem 0.7rem;
  border-radius: var(--r-capsula);
  background: var(--tinta);
  color: var(--texto-invertido);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s var(--ease);
}

.rail:hover .rail__etiqueta {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.rail a:hover,
.rail a.activo {
  color: var(--rojo);
}

.rail a.activo::before {
  width: 26px;
  background: var(--rojo);
}

.rail.on-dark a {
  color: rgba(246, 241, 233, 0.55);
}

.rail.on-dark a::before {
  background: rgba(246, 241, 233, 0.35);
}

.rail.on-dark a:hover,
.rail.on-dark a.activo {
  color: var(--oro);
}

.rail.on-dark .rail__etiqueta {
  background: var(--oro);
  color: var(--tinta);
}

.rail.on-dark a.activo::before {
  background: var(--oro);
}

/* --------------------------------------------------------------------------
   Cápsulas (botones y etiquetas)
   -------------------------------------------------------------------------- */

.capsula {
  --capsula-bg: var(--rojo);
  --capsula-fg: #fff;
  --capsula-bd: var(--rojo);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  isolation: isolate;
  overflow: hidden;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--capsula-bd);
  border-radius: var(--r-capsula);
  background: var(--capsula-bg);
  color: var(--capsula-fg);
  font-family: var(--ff-texto);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s ease,
    transform 0.4s var(--ease);
}

.capsula::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--capsula-hover, var(--tinta));
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}

.capsula:hover::before {
  transform: translateY(0);
}

.capsula:hover {
  color: var(--capsula-hover-fg, #fff);
}

.capsula svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.45s var(--ease);
}

.capsula:hover svg {
  transform: translateX(4px);
}

.capsula:active {
  transform: scale(0.98);
}

/* Variantes */
.capsula--rojo {
  --capsula-bg: var(--rojo);
  --capsula-fg: #fff;
  --capsula-bd: var(--rojo);
  --capsula-hover: var(--tinta);
  --capsula-hover-fg: var(--oro);
}

.capsula--tinta {
  --capsula-bg: var(--tinta);
  --capsula-fg: var(--texto-invertido);
  --capsula-bd: var(--tinta);
  --capsula-hover: var(--rojo);
  --capsula-hover-fg: #fff;
}

.capsula--oro {
  --capsula-bg: var(--oro);
  --capsula-fg: var(--tinta);
  --capsula-bd: var(--oro);
  --capsula-hover: var(--tinta);
  --capsula-hover-fg: var(--oro);
}

.capsula--linea {
  --capsula-bg: transparent;
  --capsula-fg: var(--texto);
  --capsula-bd: var(--linea-fuerte);
  --capsula-hover: var(--rojo);
  --capsula-hover-fg: #fff;
  --capsula-hover-bd: var(--rojo);
}

.capsula--linea:hover {
  border-color: var(--rojo);
}

.seccion--oscura .capsula--linea,
.seccion--rojo .capsula--linea,
.cabecera-oscura .capsula--linea,
.pie .capsula--linea {
  --capsula-fg: var(--texto-invertido);
  --capsula-bd: var(--linea-oscura-fuerte);
  --capsula-hover: var(--oro);
  --capsula-hover-fg: var(--tinta);
  --capsula-hover-bd: var(--oro);
}

.seccion--rojo .capsula--linea:hover {
  border-color: var(--oro);
}

.capsula--fantasma {
  --capsula-bg: transparent;
  --capsula-fg: var(--rojo);
  --capsula-bd: transparent;
  --capsula-hover: var(--rojo-tinte);
  --capsula-hover-fg: var(--rojo-hover);
}

.capsula--sm {
  padding: 0.62rem 1.15rem;
  font-size: 0.7rem;
}

.capsula--lg {
  padding: 1.05rem 2rem;
}

/* Etiqueta estática (tag) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-capsula);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-medio);
  background: transparent;
  transition: background-color 0.35s ease, color 0.35s ease,
    border-color 0.35s ease;
}

.tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rojo);
}

.tag:hover {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
}

.tag:hover::before {
  background: var(--oro);
}

.tag--oro::before {
  background: var(--oro);
}

.tag--sin-punto::before {
  display: none;
}

.seccion--oscura .tag,
.seccion--rojo .tag {
  border-color: var(--linea-oscura-fuerte);
  color: var(--texto-invertido);
}

.seccion--oscura .tag:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--tinta);
}

.seccion--rojo .tag:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--tinta);
}

/* Nube de etiquetas */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* --------------------------------------------------------------------------
   Enlace de texto con subrayado animado
   -------------------------------------------------------------------------- */

.enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rojo);
  padding-bottom: 0.35rem;
}

.enlace::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 0.45s var(--ease);
}

.enlace:hover::after {
  transform: scaleX(0);
}

.enlace svg {
  width: 13px;
  height: 13px;
  transition: transform 0.4s var(--ease);
}

.enlace:hover svg {
  transform: translateX(5px);
}

.seccion--oscura .enlace,
.seccion--rojo .enlace {
  color: var(--oro);
}

/* El oro solo funciona sobre tinta; sobre rojo el enlace va en crema (6,5:1) */
.tarjeta--oscura .enlace {
  color: var(--oro);
}

.tarjeta--roja .enlace {
  color: var(--texto-invertido);
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
}

.marquee__pista {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
  min-width: 100%;
  animation: marquee 38s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__pista {
  animation-play-state: paused;
}

.marquee--invertida .marquee__pista {
  animation-direction: reverse;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
  flex: none;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

.banda-roja {
  background: var(--rojo);
  color: #fff;
  padding-block: clamp(0.85rem, 1.6vw, 1.25rem);
  border-block: 1px solid var(--rojo-oscuro);
}

.banda-roja .marquee__item {
  font-family: var(--ff-texto);
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.banda-roja .marquee__item::after {
  background: var(--oro);
}

.banda-tinta {
  background: var(--tinta);
  color: var(--texto-invertido);
  padding-block: clamp(0.9rem, 1.6vw, 1.3rem);
}

.banda-tinta .marquee__item {
  font-family: var(--ff-texto);
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.banda-tinta .marquee__item::after {
  background: var(--oro);
}

/* --------------------------------------------------------------------------
   Cifras / datos
   -------------------------------------------------------------------------- */

.datos {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.dato {
  border-top: 1px solid var(--linea);
  padding-top: 1.1rem;
}

.seccion--oscura .dato,
.seccion--rojo .dato,
.dato.on-dark {
  border-color: var(--linea-oscura);
}

.dato__valor {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: var(--ff-display);
  font-size: var(--fs-num-md);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--rojo);
}

.seccion--oscura .dato__valor,
.dato.on-dark .dato__valor {
  color: var(--oro);
}

.seccion--rojo .dato__valor {
  color: var(--oro);
}

.dato__valor small {
  font-size: 0.4em;
  font-weight: 500;
}

.dato__rotulo {
  margin-top: 0.65rem;
  font-size: var(--fs-mini);
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-medio);
}

.seccion--oscura .dato__rotulo,
.dato.on-dark .dato__rotulo {
  color: var(--texto-invertido-medio);
}

.seccion--rojo .dato__rotulo {
  color: var(--texto-invertido);
}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  transition: transform 0.5s var(--ease), border-color 0.4s ease,
    box-shadow 0.5s var(--ease);
}

.tarjeta:hover {
  transform: translateY(-5px);
  border-color: var(--linea-fuerte);
  box-shadow: 0 30px 60px -50px rgba(23, 18, 15, 0.85);
}

.tarjeta__num {
  font-family: var(--ff-texto);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}

.tarjeta__titulo {
  font-family: var(--ff-display);
  font-size: var(--fs-3);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.tarjeta__texto {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--texto-medio);
}

.tarjeta__pie {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
}

/* Tarjeta sobre fondo oscuro */
.tarjeta--oscura {
  background: var(--tinta-2);
  border-color: var(--linea-oscura);
  color: var(--texto-invertido);
}

.tarjeta--oscura .tarjeta__texto {
  color: var(--texto-invertido-medio);
}

.tarjeta--oscura .tarjeta__num {
  color: var(--oro);
}

.tarjeta--oscura .tarjeta__pie {
  border-color: var(--linea-oscura);
}

.tarjeta--oscura:hover {
  border-color: var(--oro-linea);
}

/* Tarjeta con acento rojo */
.tarjeta--roja {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
}

.tarjeta--roja .tarjeta__num,
.tarjeta--roja .tarjeta__texto {
  color: rgba(255, 255, 255, 0.82);
}

.tarjeta--roja .tarjeta__num {
  color: var(--texto-invertido);
}

.tarjeta--roja .tarjeta__pie {
  border-color: rgba(255, 255, 255, 0.25);
}

.tarjeta--roja:hover {
  border-color: var(--oro);
}

/* Tarjeta con subrayado de color en el borde superior */
.tarjeta--acento::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
}

.tarjeta--acento:hover::before {
  transform: scaleX(1);
}

.rejilla-tarjetas {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

/* --------------------------------------------------------------------------
   Filas de lista (índices de programas)
   -------------------------------------------------------------------------- */

.filas {
  border-top: 1px solid var(--linea);
}

.fila {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 2rem);
  padding: clamp(1rem, 2vw, 1.6rem) clamp(0.5rem, 1.5vw, 1.5rem);
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s ease;
}

.fila::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rojo);
  transform: translateY(100%);
  transition: transform 0.55s var(--ease);
}

.fila:hover::before {
  transform: translateY(0);
}

.fila:hover {
  color: #fff;
}

.fila__num {
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
}

.fila:hover .fila__num {
  color: var(--oro);
}

.fila__titulo {
  font-family: var(--ff-texto);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.fila__flecha {
  width: 34px;
  height: 34px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: background-color 0.4s ease, border-color 0.4s ease,
    transform 0.5s var(--ease);
}

.fila__flecha svg {
  width: 13px;
  height: 13px;
}

.fila:hover .fila__flecha {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--tinta);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Citación / declaración
   -------------------------------------------------------------------------- */

.citacion {
  font-family: var(--ff-display);
  font-size: clamp(1.7rem, 3.6vw, 3.15rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.citacion cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--ff-texto);
  font-size: var(--fs-mini);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.seccion--oscura .citacion cite,
.seccion--rojo .citacion cite {
  color: var(--texto-invertido-medio);
}

/* --------------------------------------------------------------------------
   Nota destacada con filete
   -------------------------------------------------------------------------- */

.nota {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--oro);
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--r-card);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--texto-medio);
}

.nota__titulo {
  font-family: var(--ff-texto);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rojo);
}

.seccion--oscura .nota {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--linea-oscura);
  border-left-color: var(--oro);
  color: var(--texto-invertido-medio);
}

.seccion--oscura .nota__titulo {
  color: var(--oro);
}

/* --------------------------------------------------------------------------
   Pestañas en cápsulas
   -------------------------------------------------------------------------- */

.pestanas {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-capsula);
  background: var(--marfil-2);
}

.pestanas__indicador {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0;
  border-radius: var(--r-capsula);
  background: var(--rojo);
  transition: transform 0.55s var(--ease), width 0.55s var(--ease);
  pointer-events: none;
}

.pestanas button {
  position: relative;
  z-index: 1;
  padding: 0.6rem 1.15rem;
  border-radius: var(--r-capsula);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-medio);
  transition: color 0.35s ease;
}

.pestanas button.activa,
.pestanas button:hover {
  color: #fff;
}

.pestanas button.activa {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */

.pie {
  position: relative;
  background: var(--tinta);
  color: var(--texto-invertido);
  padding-top: clamp(3.5rem, 6vw, 6rem);
  overflow: hidden;
}

.pie__cta {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: end;
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--linea-oscura);
}

@media (min-width: 900px) {
  .pie__cta {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.pie__cta h2 {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
}

.pie__cta .eyebrow {
  margin-bottom: 1.25rem;
}

.pie__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pie__rejilla {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

@media (min-width: 760px) {
  .pie__rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .pie__rejilla {
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  }

  .pie__rejilla.pie__rejilla--fundu {
    grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
  }
}

.pie__marca img {
  height: 74px;
  width: auto;
  margin-bottom: 1.25rem;
}

.pie__marca p {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--texto-invertido-medio);
  max-width: 34ch;
}

.pie__fundu-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.pie__col--fundu p {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--texto-invertido-medio);
  margin-bottom: 0.65rem;
}

.pie__col h3 {
  font-family: var(--ff-texto);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1.15rem;
}

.pie__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pie__col a,
.pie__col span {
  font-size: var(--fs-small);
  color: var(--texto-invertido-medio);
  transition: color 0.3s ease, padding-left 0.35s var(--ease);
}

.pie__col a:hover {
  color: var(--oro);
  padding-left: 6px;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
  border-top: 1px solid var(--linea-oscura);
  font-size: var(--fs-mini);
  letter-spacing: 0.08em;
  color: rgba(246, 241, 233, 0.5);
  text-transform: uppercase;
}

.pie__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.pie__legal a:hover {
  color: var(--oro);
}

/* Marca de agua gigante en el pie */
.pie__fantasma {
  position: absolute;
  right: -3vw;
  bottom: -6vw;
  width: clamp(230px, 26vw, 420px);
  opacity: 0.06;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Revelados base (se activan sólo con JS)
   -------------------------------------------------------------------------- */

.animando [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}

.animando [data-reveal="izquierda"] {
  transform: translateX(-32px);
}

.animando [data-reveal="derecha"] {
  transform: translateX(32px);
}

/* En pantallas estrechas el desplazamiento lateral crearía scroll
   horizontal: se sustituye por un movimiento vertical. */
@media (max-width: 767px) {
  .animando [data-reveal="izquierda"],
  .animando [data-reveal="derecha"] {
    transform: translateY(26px);
  }
}

.animando [data-reveal="escala"] {
  transform: scale(0.96);
}

/* Revelado por recorte: el texto queda tapado hasta entrar en pantalla */
.animando [data-reveal="linea"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0% 0% 100% 0%);
}

/* Subrayado dorado pendiente de dibujar */
.animando .marca-oro {
  --marca-scale: 0;
}