/* ============================================================================
   Vitta — hero de portada (patrón patterns/home-hero.php)
   ----------------------------------------------------------------------------
   Construido sobre las variables de shared/tokens.css, igual que base.css.
   Se enganchan clases propias (.vitta-hero, .hero__*) por encima de las que
   ya pone el bloque Cover del núcleo (.wp-block-cover, .wp-block-cover__*):
   el vídeo y el degradado no salen de la configuración por defecto de
   Cover, hacen falta estas reglas.
   Solo se encola en la página de portada (is_front_page(), ver
   functions.php) — el resto de páginas no cargan este archivo.
   ========================================================================== */

/* ── Cabecera compartida (parts/header.html), variante superpuesta ──
   Solo en la home (body.home -- WordPress lo añade solo en is_front_page(),
   comprobado con curl): no se toca header.html ni shared/base.css, todo
   por selector de contexto, así que en el resto de páginas la cabecera
   sigue siendo la sólida de siempre. Es la ÚNICA barra de navegación de
   la home -- el hero ya no lleva la suya propia (duplicaba logo, menú,
   selector y botón, uno encima del otro).
   position:fixed la saca del flujo -- por eso el hero, justo debajo en el
   marcado, sigue empezando en y=0 y ocupando los 100dvh de siempre, sin
   que la cabecera le reste alto ninguno. Transparente y con el logo/menú/
   selector en blanco mientras se ve sobre el vídeo; .is-scrolled (la pone
   front-page.js al salir del alto del hero) la vuelve sólida y legible. */
body.home .app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color .2s ease, border-color .2s ease;
  /* Alto FIJADO por --header-h (shared/tokens.css), no la suma de
     relleno + contenido: antes era padding 20px+20px + contenido + borde,
     que daba 72px con el logo (30px) pero 77px en escritorio en cuanto el
     menú en pastilla "cristal" (35px) pasó a ser el hijo más alto -- y
     escenario.css y las anclas seguían compensando 72. Ahora la cabecera
     mide exactamente el token y centra su contenido en vertical; cualquier
     hijo de hasta 70px cabe sin cambiar nada. Solo en la home (la intranet
     y el resto de páginas no usan este token). */
  box-sizing: border-box;
  height: var(--header-h);
  padding: 0 1.5rem;
}
body.home .app-header .app-header__logo {
  /* Mismo criterio que el resto de logos sobre fondo oscuro del proyecto:
     el SVG es azul marino sólido, se fuerza a blanco en vez de duplicar
     el archivo -- SIEMPRE blanco ahora (antes solo mientras transparente,
     volvía a su color al hacerse sólida; ahora sólida = navy, así que el
     logo se queda en blanco en los dos estados). */
  filter: brightness(0) invert(1);
}

/* Enlaces del menú: blanco al 70% de opacidad, el de la página actual al
   100% -- sustituye cualquier subrayado/fondo del bloque Navigation en el
   ítem activo (current-menu-item), anulado aquí explícitamente. Mismo
   tratamiento en los dos estados de la cabecera (transparente sobre
   vídeo, sólida en navy): las dos son fondos oscuros, el texto blanco
   funciona igual en las dos -- ya no depende de .is-scrolled. Contraste
   comprobado sobre píxeles renderizados (ver verificación de esta
   tanda): las dos opacidades pasan 4.5:1 sobre los dos fondos. */
body.home .app-header .app-header__nav .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  background: none;
}
body.home .app-header .app-header__nav .current-menu-item .wp-block-navigation-item__content {
  color: var(--white);
  text-decoration: none;
  background: none;
}
body.home .app-header .lang-switch__link { color: rgba(255, 255, 255, .75); }
body.home .app-header .lang-switch__link:hover,
body.home .app-header .lang-switch__link.is-current { color: var(--white); }
body.home .app-header .lang-switch__link + .lang-switch__link {
  border-left-color: rgba(255, 255, 255, .35);
}

/* Aspecto "cristal" del menú mientras la cabecera está superpuesta y
   transparente -- es el mismo tratamiento (pastilla translúcida con
   blur) que tenía el nav flotante del hero antes de moverse aquí, pedido
   explícitamente para no perderlo. Solo en este estado (:not(.is-scrolled)):
   en cuanto la cabecera se vuelve sólida (navy liso), el menú se queda sin
   pastilla -- el botón de acceso sí la mantiene en los dos estados (ver
   más abajo), para que siga leyéndose como acción destacada también sobre
   navy. */
body.home .app-header:not(.is-scrolled) .app-header__nav .wp-block-navigation__container {
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: .5rem 1.25rem;
}

/* Botones "Área cliente"/"Área staff" (antes un solo "Acceso clientes";
   core/button desde la tanda 1 del rediseño -- el aspecto va en el <a>
   interior, .wp-block-button__link): mismo tratamiento "cristal" en los dos estados
   -- antes solo mientras transparente, pasaba a .btn-outline normal
   (borde/texto navy) al hacerse sólida porque esa sólida era blanca;
   ahora que es navy, un botón navy-sobre-navy sería invisible, así que se
   queda en blanco/cristal siempre, igual que el logo. */
body.home .app-header .app-header__access .wp-block-button__link {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
}
body.home .app-header .app-header__access .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .18);
}

/* Menú desplegable (ver shared/base.css): en la home el botón va en
   blanco (fondo oscuro en los dos estados de la cabecera), y dentro del
   diálogo abierto se anula la pastilla "cristal" de arriba -- es un
   fondo navy liso a pantalla completa, no una barra sobre el vídeo. */
body.home .app-header .app-header__nav .wp-block-navigation__responsive-container-open {
  color: var(--white);
}
body.home .app-header .app-header__nav .is-menu-open .wp-block-navigation__container {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
body.home .app-header .app-header__nav .is-menu-open .wp-block-navigation-item__content {
  color: var(--white);
}
/* Margen lateral más corto en móvil: logo + botón de menú + ES|EN + dos
   botones de área tienen que caber en 360-390px sin scroll horizontal. */
@media (max-width: 599px) {
  body.home .app-header { padding-left: 1rem; padding-right: 1rem; }
}

body.home .app-header.is-scrolled {
  /* Antes blanco -- pedido explícito: al hacerse sólida, navy en vez de
     blanco (logo, menú y botón se quedan en blanco, ver arriba, en vez de
     volver a navy/borde sólido como antes). */
  background: var(--navy);
  border-bottom-color: var(--teal);
}

/* Compensación de la cabecera fija en el límite hero -> siguiente
   sección: la sección de después (hoy .composicion, tanda 2) sigue el
   mismo lienzo navy que el hero, así que un margin-top aquí abriría una
   franja del color del <body> entre las dos. Ya no hace falta: la
   cabecera siempre flota sobre algo (es fixed), y lo que importaba --
   que un ancla no deje su sección tapada -- lo resuelve scroll-margin-top
   justo debajo. Se mantiene solo para cualquier otra sección que llegue a
   quedar detrás del hero. */
body.home .vitta-hero + :not(.composicion) { margin-top: var(--header-h); }

/* Anclas del menú (#vitta-ia, #calculadora...): que no queden tapadas por
   la cabecera fija lo resuelve ahora cabecera.css para todas las páginas
   (scroll-padding-top en html). Aquí había un scroll-margin-top por [id]:
   con los dos, el desplazamiento se sumaba. */

/* ── Hero (patrón patterns/home-hero.php, tanda 2 del rediseño) ──
   Maqueta: hero y composición 01/02 comparten el MISMO lienzo navy con
   diagonales -- el hero ya no ocupa la pantalla entera (100dvh) sino el
   alto de su contenido, para que la bomba de la sección siguiente asome en
   el primer pantallazo como en la maqueta. Capas, de abajo arriba:
     vídeo (z 0, núcleo) -> velo navy (.wp-block-cover__background) ->
     diagonales (::before, z 1) -> texto (.hero__content, z 1, después en
     el DOM, así que pinta encima). */
.vitta-hero {
  min-height: 0;
  color: var(--white);
  /* Arriba deja libre la cabecera fija (--header-h) más el aire de la
     maqueta; abajo poco -- la sección 01/02 sigue en el mismo navy. */
  padding: calc(var(--header-h) + clamp(48px, 8vw, 104px)) var(--space-4) clamp(40px, 5vw, 64px);
  background-color: var(--navy);
}
.vitta-hero .wp-block-cover__background {
  /* Velo navy: el vídeo se intuye, pero manda el navy de la maqueta (y el
     contraste del texto, medido sobre 8 fotogramas -- ver CLAUDE.md). Se
     funde a navy sólido abajo para que no haya costura con .composicion. */
  background: linear-gradient(180deg, rgba(35, 35, 70, .86) 0%, rgba(35, 35, 70, .86) 65%, rgb(35, 35, 70) 100%) !important;
  opacity: 1 !important;
}
.vitta-hero .wp-block-cover__video-background {
  object-fit: cover;
}
/* prefers-reduced-motion: solo el póster, nada de vídeo (el <source> ya
   no se añade, ver vitta_filter_hero_video(); esto oculta el <video>
   vacío y pone el póster como fondo). */
@media (prefers-reduced-motion: reduce) {
  .vitta-hero .wp-block-cover__video-background { display: none; }
  .vitta-hero {
    background-image: url('/wp-content/themes/vitta-theme/assets/video/hero-ia-poster.webp');
    background-size: cover;
    background-position: center;
  }
}
/* En móvil, imagen fija en vez de vídeo (mismo corte que
   vitta_filter_hero_video() en functions.php). */
@media (max-width: 699px) {
  .vitta-hero .wp-block-cover__video-background { display: none; }
  .vitta-hero {
    background-image: url('/wp-content/themes/vitta-theme/assets/video/hero-ia-poster.webp');
    background-size: cover;
    background-position: center;
  }
}

/* Diagonales de la maqueta: dos bandas anchas "/" algo más claras que el
   navy, en la mitad derecha, que siguen del hero a .composicion sin
   romperse. Son la MISMA caja (misma left/width) inclinada con skewX, con
   el origen de la inclinación en el borde que comparten las dos secciones
   (abajo en el hero, arriba en la composición): en ese borde las dos cajas
   coinciden al píxel, sea cual sea el alto de cada sección. Decoración
   pura: CSS, no bloques. */
.vitta-hero::before,
.composicion::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58%;
  width: 30%;
  z-index: 2; /* encima del velo del Cover (z 1), debajo del texto (z 3) */
  pointer-events: none;
  transform: skewX(-30deg);
  background: linear-gradient(90deg,
    rgba(141, 207, 212, .05) 0 58%, transparent 58% 72%,
    rgba(141, 207, 212, .05) 72% 100%);
}
.vitta-hero::before { transform-origin: bottom; }
.composicion::before { transform-origin: top; }

.vitta-hero .wp-block-cover__inner-container {
  max-width: none;
  width: 100%;
  z-index: 3;
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

/* 1. Antetítulo: mayúsculas espaciadas en celeste, con las dos marcas
   gráficas de la maqueta (paralelogramos celestes) a los lados. En
   Satoshi, no en la monoespaciada de la maqueta: tipografía única del
   proyecto (decisión congelada). */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--teal);
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  flex: none;
  width: 30px;
  height: 9px;
  background: var(--teal);
  transform: skewX(-35deg);
}

/* 2. Titular: primera línea en blanco, segunda en celeste (formato de
   color del editor, has-teal-color -- el <mark> trae fondo transparente). */
.hero__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--white);
  text-wrap: balance;
}
.hero__title mark { background: none; }

/* 3. Párrafo de entrada. */
.hero__lead {
  margin: 0;
  max-width: 62ch;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.hero__lead strong { color: var(--white); font-weight: 700; }

@media (max-width: 699px) {
  .hero__content { gap: var(--space-4); }
  /* El antetítulo entero no cabe en una línea a 360-390px: se parte en
     dos y las marcas se quedan a los lados, centradas en vertical. */
  .hero__eyebrow { font-size: 11px; letter-spacing: .22em; gap: .7em; text-wrap: balance; max-width: 300px; }
  .hero__eyebrow::before,
  .hero__eyebrow::after { width: 20px; height: 7px; }
}

/* ── Composición 01/02 (patrón patterns/home-composicion.php, tanda 2) ──
   Mismo navy y mismas diagonales que el hero (::before compartido, más
   arriba), sin costura: el velo del hero ya termina en navy sólido. Móvil
   primero: bomba arriba, los dos bloques debajo, sin marcadores sobre la
   imagen. Desde 1024px, tres columnas: bloque 01 | bomba | bloque 02. */
.composicion {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: 0 var(--space-4) var(--space-7);
  overflow: clip;
}
.composicion__inner {
  position: relative;
  z-index: 3; /* sobre las diagonales */
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-6);
}

/* Bomba + marcadores. El <figure> manda el tamaño; los marcadores van en
   % de ese mismo recuadro, así siguen en su sitio a cualquier ancho. */
.composicion__figura {
  position: relative;
  width: min(88vw, 420px);
  margin: 0 auto;
}
.composicion__imagen { margin: 0; }
.composicion__imagen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Marcador circular (en la imagen y a la cabeza de cada bloque): celeste
   con número navy. El aro navy de 4px lo separa de lo que tenga debajo --
   sobre la imagen (acero, pantallas blancas) el círculo celeste por sí
   solo no llegaría a 3:1 en todos los píxeles; con el aro, el borde
   visible del marcador es siempre celeste contra navy. */
.composicion__marca,
.composicion__num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px var(--navy);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}
.composicion__marca { display: none; } /* móvil: sin marcadores sueltos */

.composicion__bloque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 34ch;
}
.composicion__bloque > * { margin: 0; }
.composicion__num { margin-bottom: var(--space-2); }
.composicion__etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.composicion__etiquetas > * { margin: 0; }
.composicion__etiqueta,
.composicion__estado {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--teal);
}
/* "EN DESARROLLO": etiqueta con borde, como en la maqueta. */
.composicion__estado {
  font-size: 11px;
  letter-spacing: .18em;
  padding: .35em .7em;
  border: 1px solid var(--teal);
  border-radius: 2px;
}
.composicion__titulo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  color: var(--white);
}
.composicion__texto {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
/* Raya fina bajo cada bloque (maqueta). */
.composicion__bloque::after {
  content: '';
  display: block;
  width: 120px;
  height: 1px;
  margin-top: var(--space-4);
  background: var(--teal-m);
}

@media (min-width: 700px) and (max-width: 1023px) {
  /* Tableta: bomba arriba, los dos bloques lado a lado debajo. */
  .composicion__inner { grid-template-columns: 1fr 1fr; }
  .composicion__figura { grid-column: 1 / -1; width: min(60vw, 460px); }
}

@media (min-width: 1024px) {
  .composicion { padding-bottom: 0; }
  .composicion__inner {
    grid-template-columns: 1fr minmax(0, 520px) 1fr;
    grid-template-areas: "b01 figura b02";
    align-items: end;
    gap: var(--space-5);
  }
  .composicion__figura { grid-area: figura; width: 100%; }
  .composicion__bloque { padding-bottom: 22%; }
  .composicion__bloque--01 {
    grid-area: b01;
    justify-self: end;
    align-items: flex-end;
    text-align: right;
  }
  .composicion__bloque--02 { grid-area: b02; justify-self: start; }

  /* Marcadores sobre la imagen, en % del <figure>: 01 junto a la cabeza
     de la bomba, 02 en la esquina superior del panel derecho. */
  .composicion__marca {
    display: inline-grid;
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
  }
  .composicion__marca--01 { left: 67%; top: 5%; }
  .composicion__marca--02 { left: 100%; top: 18%; }
}

/* ── Banda de cifras (patrón patterns/home-cifras.php, tanda 3) ──
   Celeste con el mismo tile de "60 años" (fondo-azulclaro.webp, patrón
   repetible, no cover). Cuatro cifras en línea desde 900px, separadas por
   filetes verticales; por debajo, dos por fila (filete solo entre las dos
   columnas). Texto navy: el contraste se mide sobre el peor píxel del tile
   (ver CLAUDE.md). */
.cifras {
  background-color: var(--teal);
  background-image: url('/wp-content/themes/vitta-theme/assets/web/fondo-azulclaro.webp');
  background-repeat: repeat;
  color: var(--navy);
  padding: clamp(32px, 4vw, 48px) var(--space-4);
}
.cifras__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--space-6);
}
.cifras__item {
  padding: var(--space-2) var(--space-4);
}
.cifras__item > * { margin: 0; }
/* Filete: navy al 75% -- al 55% (el gris suave de la maqueta) daba 2,71:1
   sobre las zonas más claras del tile, por debajo del 3:1 de un elemento
   gráfico; al 75% pasa (medido sobre píxeles, ver CLAUDE.md). */
.cifras__item:nth-child(2n) { border-left: 1px solid rgba(35, 35, 70, .75); }
.cifras__valor {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap; /* "87,6 %" nunca partido */
}
.cifras__pie {
  margin-top: var(--space-2) !important;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.45;
  max-width: 30ch;
}
@media (max-width: 380px) {
  .cifras__item { padding-left: var(--space-3); padding-right: var(--space-2); }
}
@media (min-width: 900px) {
  .cifras__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cifras__item { padding: var(--space-3) var(--space-6); }
  .cifras__item + .cifras__item { border-left: 1px solid rgba(35, 35, 70, .75); }
}

/* ── Bloque Juan Azcue (patrón patterns/home-juan-azcue.php, tanda 3,
   ancla #juan-azcue) ── Fondo blanco. Foto entera en su 4:3 natural (sin
   recorte: el rótulo "JUAN AZCUE" siempre completo) a la izquierda y texto
   a la derecha desde 900px; por debajo, foto arriba. */
.juan-azcue {
  background: var(--white);
  color: var(--navy);
  padding: clamp(48px, 7vw, 112px) var(--space-4);
}
.juan-azcue__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.juan-azcue__foto { margin: 0; }
.juan-azcue__foto img {
  display: block;
  width: 100%;
  height: auto; /* proporción natural (4:3), nada de object-fit: el rótulo nunca se recorta */
  border-radius: var(--radius-sm);
}
.juan-azcue__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.juan-azcue__texto > * { margin: 0; }
/* Antetítulo: celeste OSCURO (--teal-d) -- el --teal de marca sobre
   blanco no llega a 2:1. Una sola marca, a la izquierda (maqueta). */
.juan-azcue__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.juan-azcue__eyebrow::before {
  content: '';
  flex: none;
  width: 26px;
  height: 8px;
  background: var(--teal-d);
  transform: skewX(-35deg);
}
.juan-azcue__titular {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--navy);
  text-wrap: balance;
}
.juan-azcue__parrafo {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65;
  color: rgba(35, 35, 70, .78);
  max-width: 60ch;
}
.juan-azcue__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-3) !important;
}
.juan-azcue__acciones > * { margin: 0; }
.juan-azcue__boton .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: var(--navy);
  color: var(--white);
  border-radius: 2px;
  padding: .85em 1.4em;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
/* Flecha ↗ de la maqueta: decorativa (el destino ya lo dice el texto). */
.juan-azcue__boton .wp-block-button__link::after {
  content: '\2197';
  font-size: 1.05em;
  line-height: 1;
}
.juan-azcue__boton .wp-block-button__link:hover { background: #33335f; }
.juan-azcue__boton .wp-block-button__link:focus-visible,
.juan-azcue__web a:focus-visible {
  outline: 2px solid var(--teal-d);
  outline-offset: 3px;
}
.juan-azcue__web {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}
.juan-azcue__web a { color: var(--teal-d); text-decoration: underline; text-underline-offset: 3px; }
.juan-azcue__web a:hover { color: var(--navy); }
@media (min-width: 900px) {
  .juan-azcue__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 88px);
  }
}

/* ── "Un proyecto, dos desarrollos" (patrón patterns/home-desarrollos.php,
   tanda 4; el Selector vive dentro desde la tanda 5) ── Fondo gris claro
   (--bg), igual que las tarjetas de acceso que van detrás: las dos
   secciones leen como un solo bloque, como en la maqueta. */
.desarrollos {
  background: var(--bg);
  color: var(--navy);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.desarrollos { padding-top: clamp(56px, 7vw, 104px); padding-bottom: var(--space-5); }
.desarrollos__inner { max-width: 1280px; margin: 0 auto; }
.desarrollos__cabecera {
  display: grid;
  gap: var(--space-4);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.desarrollos__cabecera > *, .desarrollos__cabecera-titulo > * { margin: 0; }
.desarrollos__cabecera-titulo { display: flex; flex-direction: column; gap: var(--space-3); }
/* Mismo antetítulo que el de Juan Azcue: celeste oscuro sobre claro. */
.desarrollos__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.desarrollos__eyebrow::before {
  content: '';
  flex: none;
  width: 26px;
  height: 8px;
  background: var(--teal-d);
  transform: skewX(-35deg);
}
.desarrollos__titular {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--navy);
}
.desarrollos__entrada {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(35, 35, 70, .78);
  max-width: 44ch;
}
@media (min-width: 900px) {
  .desarrollos__cabecera { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
}

/* Tarjetas: una debajo de otra en móvil, en paralelo desde 900px. */
.desarrollos__tarjetas { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .desarrollos__tarjetas { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.desarrollos__tarjeta {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: clamp(24px, 3.5vw, 48px);
  border-radius: 2px;
}
.desarrollos__tarjeta > * { margin: 0; position: relative; z-index: 1; }
.desarrollos__tarjeta--clara { background: var(--white); border: 1px solid rgba(35, 35, 70, .14); }
/* Banda diagonal suave de la maqueta (decoración). */
.desarrollos__tarjeta--clara::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 62%; width: 30%;
  background: rgba(35, 35, 70, .035);
  transform: skewX(-30deg);
  transform-origin: bottom;
  pointer-events: none;
}
.desarrollos__tarjeta--navy { background: var(--navy); color: var(--white); }
/* Línea de tendencia de la maqueta (decoración, abajo a la derecha). Pasa
   por detrás de los enlaces del pie: al 22% (antes 35%) para que el texto
   celeste siga por encima de 4,5:1 también donde la cruza. */
.desarrollos__tarjeta--navy::before {
  content: '';
  position: absolute;
  right: 0; bottom: 0; width: 62%; height: 45%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpolyline points='0,95 50,85 90,78 130,60 175,52 215,32 260,20 300,2' fill='none' stroke='%238DCFD4' stroke-opacity='.22' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

.desarrollos__etiquetas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.desarrollos__etiquetas > * { margin: 0; }
.desarrollos__etiqueta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .4em .8em;
  border: 1px solid rgba(35, 35, 70, .55);
  border-radius: 2px;
  color: var(--navy);
}
.desarrollos__tarjeta--navy .desarrollos__etiqueta { border-color: var(--teal); color: var(--teal); }
.desarrollos__tarjeta--navy .desarrollos__etiqueta--llena { background: var(--teal); color: var(--navy); }

.desarrollos__logo img { display: block; height: 44px; width: auto; }
/* VITTA IA: SVG en línea (vitta_svg_logo_vitta_ia(), functions.php), blanco
   por currentColor. Mismo alto de caja que VITTA (44px): con el viewBox
   recortado igual, las letras de los dos logotipos miden lo mismo (≈35px).
   max-width: nunca más ancho que la tarjeta en móvil (el alto se ajusta
   solo, la proporción la guarda el viewBox). */
.desarrollos__logo-svg {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  color: var(--white);
}
.desarrollos__tarjeta-titular {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  color: inherit;
}
.desarrollos__tarjeta-texto {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(35, 35, 70, .78);
}
.desarrollos__tarjeta--navy .desarrollos__tarjeta-texto { color: rgba(255, 255, 255, .82); }

/* Enlaces de las tarjetas: filas con flecha y filete encima, agrupadas al
   pie de cada tarjeta (.desarrollos__enlaces, margin-top:auto: con las dos
   tarjetas al mismo alto, el grupo queda abajo en las dos). Los que aún no
   tienen página van como texto SIN enlace (ver el patrón); cuando se les
   ponga el enlace desde el editor, el <a> hereda este mismo aspecto y su
   ::after cubre la fila entera (toda ella pulsable).
   Filete navy al 55% sobre blanco y blanco al 60% sobre navy: son el borde
   visible de cada enlace, así que llegan a 3:1 (al 16%/20% de antes no; en
   la navy, al 45%, tampoco donde lo cruza la línea de tendencia). */
.desarrollos__enlaces {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin-top: auto !important;
}
.desarrollos__enlaces > * { margin: 0; }
.desarrollos__enlace {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(35, 35, 70, .55);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--teal-d);
}
.desarrollos__enlace::after { content: '\2192'; flex: none; font-size: 1.2em; line-height: 1; }
.desarrollos__enlace a { color: inherit; text-decoration: none; }
.desarrollos__enlace a::before { content: ''; position: absolute; inset: 0; }
.desarrollos__enlace:hover a { text-decoration: underline; }
.desarrollos__enlace a:focus-visible { outline: none; }
.desarrollos__enlace:has(a:focus-visible) { outline: 2px solid var(--teal-d); outline-offset: 2px; }
.desarrollos__tarjeta--navy .desarrollos__enlace { color: var(--teal); border-top-color: rgba(255, 255, 255, .6); }
.desarrollos__tarjeta--navy .desarrollos__enlace:has(a:focus-visible) { outline-color: var(--teal); }

/* Enlaces V12 (los tres PDF): un punto más pequeños que el resto, para que
   «VITTA V12 60Hz (US version)» quepa en una línea a media anchura. Se
   reconocen por el destino: no llevan clase propia en el bloque. */
.desarrollos__enlace:has(a[href*="/assets/docs/vitta-v12-"]) { font-size: 14px; }

/* V12 60Hz / 60Hz (US version): media anchura cada uno, en la misma fila,
   solo cuando los dos caben en una línea (consulta de contenedor sobre el
   grupo de enlaces, no del viewport: la tarjeta mide distinto con una o dos
   columnas). 500px: medido, el rótulo US a 14px más hueco y flecha pide
   ~232px por columna, con margen para el render de otros sistemas. Por
   debajo, uno debajo de otro. */
.desarrollos__enlaces { container-type: inline-size; }
.desarrollos__enlaces-fila { display: grid; gap: 0 var(--space-5); }
.desarrollos__enlaces-fila > * { margin: 0; }
@container (min-width: 500px) {
  .desarrollos__enlaces-fila { grid-template-columns: 1fr 1fr; }
}

/* "Selector de equipos VITTA": core/button en modo <button> (despliega el
   paso del correo, no navega), vestido como una fila más de enlaces. La
   flecha gira hacia abajo mientras está desplegado. */
.desarrollos [hidden] { display: none !important; } /* una clase que fije display le ganaría a hidden (CLAUDE.md, «[hidden] no gana solo») */
.desarrollos .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.desarrollos__selector { display: block; margin: 0; }
.desarrollos__selector .wp-block-button { display: block; width: 100%; margin: 0; }
.desarrollos__selector .wp-block-button__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(35, 35, 70, .55);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  color: var(--teal-d);
  cursor: pointer;
}
.desarrollos__selector .wp-block-button__link::after {
  content: '\2192';
  flex: none;
  font-size: 1.2em;
  line-height: 1;
  transition: transform .2s ease;
}
.desarrollos__selector .wp-block-button__link[aria-expanded="true"]::after { transform: rotate(90deg); }
.desarrollos__selector .wp-block-button__link:hover { background: none; color: var(--teal-d); text-decoration: underline; }
.desarrollos__selector .wp-block-button__link:focus-visible { outline: 2px solid var(--teal-d); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .desarrollos__selector .wp-block-button__link::after { transition: none; }
}

/* Paso del correo desplegado debajo del botón, a todo el ancho de la
   tarjeta (formulario y avisos: .calculadora__*, más abajo). */
.desarrollos .selector__puerta { padding: var(--space-1) 0 var(--space-5); }
.desarrollos .calculadora__gate-actions .wp-block-button__link,
.desarrollos .calculadora__exito .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: 2px;
  padding: .85em 1.4em;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.desarrollos .calculadora__exito .wp-block-button__link { justify-content: center; }
.desarrollos .calculadora__gate-actions .wp-block-button__link:hover,
.desarrollos .calculadora__exito .wp-block-button__link:hover { background: #33335f; }
.desarrollos .calculadora__gate-actions .wp-block-button__link:focus-visible,
.desarrollos .calculadora__exito .wp-block-button__link:focus-visible,
.desarrollos .calculadora__gate-cancelar:focus-visible,
.desarrollos .calculadora__gate-check a:focus-visible,
.desarrollos .calculadora__gate-field input:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.desarrollos .calculadora__exito:focus { outline: none; }
.desarrollos .calculadora__gate-cancelar { color: var(--navy); }
.desarrollos .calculadora__gate-field input { border-color: rgba(35, 35, 70, .7); }
.desarrollos .calculadora__exito-mensaje { text-align: left; }

/* Entrada suave al hacer scroll: solo CSS (animation-timeline: view()) y
   solo donde el navegador lo soporta y no se ha pedido reducir el
   movimiento. El estado de partida es el VISIBLE: sin soporte (Firefox
   hoy) o con reduced-motion, las tarjetas se ven tal cual, quietas. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .desarrollos__tarjeta {
      animation: desarrollos-entrada linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .desarrollos__tarjeta--navy { animation-range: entry 10% entry 80%; }
    @keyframes desarrollos-entrada {
      from { opacity: 0; transform: translateY(32px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ── Tarjetas de acceso (patrón patterns/home-accesos.php, tanda 4) ──
   Área cliente / Área staff, al login de la intranet. El enlace de verdad
   es el título; su ::after cubre la tarjeta entera, así toda ella es
   pulsable sin anidar bloques dentro de un <a>. Flecha decorativa. */
.accesos {
  background: var(--bg);
  color: var(--navy);
  padding: 0 var(--space-4) clamp(56px, 7vw, 104px);
}
.accesos__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 900px) { .accesos__inner { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.acceso {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) clamp(20px, 3vw, 40px);
  background: var(--white);
  border: 1px solid rgba(35, 35, 70, .22);
  border-radius: 2px;
  transition: border-color .15s ease;
}
.acceso > * { margin: 0; }
.acceso:hover { border-color: var(--teal-d); }
.acceso::after {
  content: '\2192';
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--teal-d);
}
.acceso__icono img { display: block; width: 26px; height: 26px; }
.acceso__texto { display: flex; flex-direction: column; gap: 2px; }
.acceso__texto > * { margin: 0; }
.acceso__titulo {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.acceso__titulo a { color: var(--navy); text-decoration: none; }
.acceso__titulo a::after { content: ''; position: absolute; inset: 0; } /* tarjeta entera pulsable */
.acceso__titulo a:focus-visible { outline: none; }
.acceso:focus-within { outline: 2px solid var(--teal-d); outline-offset: 3px; }
.acceso__descripcion {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  color: rgba(35, 35, 70, .7);
}

/* ── Segunda sección (patrón patterns/home-banner-ancho.php) -- YA NO
   forma parte del orden de la home (maqueta nueva a 6 secciones, ver
   CLAUDE.md): su texto se trasladó a la banda navy del escenario
   (.escenario__panel--izq, ver escenario.css). El patrón y este CSS se
   quedan sin usar, sin borrar (por si se reutiliza en otra página) --
   ver el aviso de archivos sin uso al final de la tanda.
   -----------------------------------------------------------------------
   declaración a toda pantalla, fondo navy liso,
   titular centrado. min-height, no height: a 375px el titular ya ocupa
   varias líneas (es una frase larga, no una palabra) y con height fija
   se recortaría o se solaparía con lo de después; con min-height, la
   sección crece si el texto necesita más sitio, nunca menos de una
   pantalla. dvh, no vh -- mismo motivo que .vitta-hero (no sigue el
   hueco que deja la barra de direcciones del navegador en móvil). Sin
   salto en blanco respecto al hero: son hermanos directos dentro de
   <main>, sin margen entre medias (el único margin-top que hay,
   body.home .vitta-hero + *, es el que compensa la cabecera fija, no un
   hueco de diseño). */
.banner-ancho {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.banner-ancho__titular {
  font-family: var(--font-sans);
  font-weight: 900; /* Satoshi Black */
  color: var(--teal);
  line-height: 1.1;
  max-width: 20ch;
  margin: 0;
}

/* ── Paso del correo del Selector (marcado de vitta_render_puerta_selector(),
   functions.php; clases de siempre, .calculadora__*, las que usa
   calculadora.js). Antes vivía en la sección blanca de la calculadora,
   retirada en la tanda 4: su CSS propio (.calculadora, __inner, __titular)
   se quitó; esto es lo que sigue en uso, hoy dentro de la tarjeta clara de
   .desarrollos (ahí están también la guarda de [hidden] y los colores de
   los botones). ── */
.calculadora__gate,
.calculadora__exito {
  width: 100%;
}
.calculadora__gate {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}
.calculadora__gate-field input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  outline: none;
}
.calculadora__gate-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--navy);
  cursor: pointer;
}
.calculadora__gate-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--navy);
}
.calculadora__gate-check a { color: var(--navy); text-decoration: underline; }
.calculadora__gate-error {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
  background: var(--red);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
}
.calculadora__gate-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.calculadora__gate-actions .wp-block-button__link { margin: 0; }
.calculadora__gate-cancelar {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.calculadora__gate-cancelar:hover { color: var(--navy); }

/* ── Éxito -- sustituye al formulario tras aceptarse el correo (ver
   calculadora.js). Dos estados posibles, uno u otro, nunca los dos:
   #calculadoraExitoMensaje (caso normal, la pestaña ya se abrió sola) o
   #calculadoraExitoAbrir (recambio -- el navegador bloqueó el
   window.open() síncrono, así que hace falta un enlace real que el
   usuario pulse él mismo; eso sí cuenta como gesto nuevo). ── */
.calculadora__exito-mensaje {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
}
.calculadora__exito .wp-block-button__link {
  display: inline-block;
  width: 100%;
  text-align: center;
}