/* ============================================================
   EYUB' DIGITAL EXPERIENCE 2026 · editorial.css
   ------------------------------------------------------------
   La capa que le da voz propia al sitio.

   base.css define el sistema (color, tipo, filetes). Aqui viven
   los componentes que nacen de este rediseno y las correcciones
   sobre los que ya existian, para que dejen de parecerse a los de
   cualquier otra web.

   Tres ideas gobiernan todo el archivo:

     1. SEPARAR CON LINEAS, NO CON CAJAS. Donde antes habia una
        tarjeta redondeada con sombra, ahora hay una fila con un
        filete debajo. Se lee mas rapido y no envejece.

     2. NUMERAR. Cada seccion y cada servicio llevan su indice en
        monoespaciada. Es lo que convierte una sucesion de bloques
        en un documento con orden.

     3. LA FOTO MANDA. Las imagenes salen del marco: van a sangre,
        sin esquinas redondeadas y sin sombra.
   ============================================================ */


/* ============================================================
   1. UTILIDADES DE COMPOSICION
   ============================================================ */

/* Marca de indice: el [01] que abre cada seccion. */
.marcador {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--fuente-mono);
  font-size: .71rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-ter);
  padding-bottom: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
  border-bottom: var(--filete);
}
/*
   El filete que se dibuja.

   Al entrar la seccion, un tramo rojo recorre el arranque de la
   linea de izquierda a derecha. Es el mismo filete de 26 px que
   llevaban los rotulos, pero puesto en movimiento: dice "empieza
   aqui" en el momento exacto en que empieza.

   Sin JavaScript no se dibuja y no pasa nada: la linea gris de
   debajo sigue ahi y la seccion se lee igual.
*/
.marcador { position: relative; }
.marcador::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 96px;
  height: 2px;
  background: var(--marca);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease-out) .12s;
}
.marcador.visible::after { transform: scaleX(1); }

.marcador__n { color: var(--marca); font-variant-numeric: tabular-nums; }
.marcador__t { color: var(--texto-sec); }
.marcador__extra { margin-left: auto; color: var(--texto-ter); }
.inverso .marcador,
.seccion--noche .marcador { border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .55); }
.inverso .marcador__t,
.seccion--noche .marcador__t { color: rgba(255, 255, 255, .82); }
.inverso .marcador__extra,
.seccion--noche .marcador__extra { color: rgba(255, 255, 255, .48); }
@media (max-width: 620px) { .marcador__extra { display: none; } }

/* Encabezado de seccion alineado a la izquierda y muy grande.
   El centrado sistematico de la version anterior hacia que las
   ocho secciones se leyeran iguales. */
.encabezado--ancho { max-width: 1100px; }
.encabezado--ancho h2 { max-width: 18ch; }

/* Filete suelto entre bloques */
.filete { height: 1px; background: var(--borde); border: 0; margin: 0; }
.inverso .filete { background: rgba(255, 255, 255, .16); }


/* El ambiente, plano. Sobre papel el fondo es papel. */
.cosmos { background: var(--fondo); }

/* La barra de lectura, en rojo de marca */
.progreso { height: 2px; background: var(--marca); }


/* ============================================================
   2. NAVEGACION
   ------------------------------------------------------------
   Cuadrada, con filete inferior y sin sombra. Las capsulas y el
   desenfoque de cristal desaparecen: no aportan informacion y
   son el uniforme de las plantillas.
   ============================================================ */
.nav.solido {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--filete);
  box-shadow: none;
}

.menu__enlace {
  font-family: var(--fuente-texto);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0;
  padding: .55rem .7rem;
}
.menu__enlace:hover { background: transparent; }

/* El activo se marca con un filete rojo bajo la palabra, no con
   un punto de color. */
.menu__enlace.activo::after,
.nav--sobre-foto .menu__enlace.activo::after {
  background: var(--marca);
  box-shadow: none;
  width: 20px;
  height: 2px;
  bottom: 0;
  border-radius: 0;
}

/* Con la barra ya solida, el enlace activo vuelve a texto oscuro.
   La regla de .nav--sobre-foto lo dejaba en blanco sobre blanco:
   el enlace de la pagina actual desaparecia al bajar. */
.nav.solido .menu__enlace,
.nav.solido .menu__enlace.activo { color: var(--texto); }
.nav.solido .menu__enlace:hover { color: var(--marca); }
.nav--sobre-foto:not(.solido) .menu__enlace:hover { color: #fff; }

/* Sobre la fotografia del hero el boton principal se pierde: es
   azul sobre azul. Va en blanco. */
.nav--sobre-foto:not(.solido) .nav__cta {
  background: #fff;
  color: var(--azul-profundo);
  --btn-cortina: var(--marca);
}
.nav--sobre-foto:not(.solido) .nav__cta:hover { color: #fff; }

.submenu {
  border-radius: var(--radio-sm);
  border: var(--filete);
  box-shadow: var(--sombra);
}
.submenu__item { border-radius: 0; }
.submenu__item:hover { background: var(--azul-050); }
.submenu__item strong { font-weight: 650; }

.nav__portal,
.nav__icono {
  border-radius: var(--radio-sm);
}
.nav__portal {
  font-family: var(--fuente-texto);
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav__cta { border-radius: var(--radio-sm); }

/*
   La lupa en rojo.

   Buscar no es una preferencia como el modo oscuro: es la salida
   de emergencia de quien no encuentra lo que vino a buscar. En una
   fila de iconos todos iguales se pierde. El rojo es el unico
   acento del sistema y esta es una de las tres o cuatro cosas de
   la web que se lo merecen.
*/
.nav__icono--buscar,
.nav.solido .nav__icono--buscar,
.nav--sobre-foto .nav__icono--buscar {
  /* Deja de ser un circulo: es un boton con palabra. */
  width: auto;
  height: 41px;
  padding-inline: 1rem;
  gap: .5rem;
  grid-auto-flow: column;
  border-radius: var(--radio-sm);
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  font-family: var(--fuente-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__icono--buscar:hover,
.nav.solido .nav__icono--buscar:hover,
.nav--sobre-foto .nav__icono--buscar:hover {
  background: #c4161f;
  border-color: #c4161f;
  color: #fff;
  transform: translateY(-1px);
}
.nav__icono--buscar .ico { flex-shrink: 0; }

/* Por debajo de 1100 px la barra va justa de sitio y la palabra
   se cae: queda la lupa, que sigue siendo roja y sigue
   distinguiendose del resto. */
@media (max-width: 1100px) {
  .nav__icono--buscar,
  .nav.solido .nav__icono--buscar,
  .nav--sobre-foto .nav__icono--buscar { width: 41px; padding-inline: 0; }
  .nav__buscar-texto { display: none; }
}


/* ============================================================
   3. HERO EN DOS TIEMPOS
   ------------------------------------------------------------
   La seccion mide dos pantallas y dentro lleva una escena pegada
   (sticky) de una pantalla. Mientras la seccion recorre sus dos
   pantallas, la escena se queda quieta y lo unico que cambia es
   la opacidad de cada tiempo, que la calcula editorial.js y deja
   en --o1, --o2 y --zoom.

   Nada de esto secuestra el scroll: la rueda avanza lo que tiene
   que avanzar. Si el guion no corre, --o1 vale 1 y --o2 vale 0
   por defecto, asi que se ve el primer tiempo entero y la pagina
   sigue funcionando.
   ============================================================ */
.hero {
  position: relative;
  /* Dos pantallas y media. El excedente no es relleno: es el
     tiempo de lectura. Con solo dos pantallas el primer tiempo se
     apagaba antes de que diera tiempo a leer el titular. */
  height: 245vh;
  background: var(--azul-950);
  color: #fff;
}

.hero__escena {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- La fotografia del SEGUNDO tiempo ----------
   Aqui la fotografia SI se ve: es su momento y por eso va casi a
   plena luz. Solo se apaga por abajo, lo justo para que la frase
   se lea sobre ella. */
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__foto img,
.hero__foto picture { width: 100%; height: 100%; }
.hero__foto img {
  object-fit: cover;
  /*
     Las caras del equipo viven en el tercio superior de la imagen.
     El encuadre sube para que queden dentro, y el acercamiento se
     queda corto a proposito: con el zoom anterior (1,22) la ventana
     visible se reducia tanto que la fotografia entraba decapitada.
     Un fondo de hero se recorta siempre; la regla es recortar por
     donde no hay caras.
  */
  object-position: center 25%;
  transform: scale(var(--zoom, 1.12));
  transform-origin: center 35%;
}

.hero__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1, 15, 48, .38) 0%, rgba(1, 19, 60, .04) 34%, rgba(1, 15, 48, .82) 100%);
}


/* ---------- La fotografia del PRIMER tiempo ----------
   El primer tiempo tambien tiene fondo fotografico, pero muy
   velado de azul: la imagen aporta atmosfera y profundidad, no
   protagonismo. La diferencia entre los dos tiempos ya no es
   "color plano contra foto", sino "foto como textura contra
   foto a plena luz", que es un cambio mas rico.

   El encuadre se corre a la izquierda: el sello que trae la
   fotografia no debe caer justo debajo del orbe, que ocupa la
   mitad derecha de la pantalla. */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__velo img,
.hero__velo picture { width: 100%; height: 100%; }
.hero__velo img {
  object-fit: cover;
  object-position: 24% 45%;
  transform: scale(1.14);
  /*
     Desenfoque.

     La fotografia del primer tiempo trae su propio sello, y sin
     desenfocar competia de tu a tu con el orbe: se leian dos
     sellos, uno fantasma y otro nitido, y el ojo no sabia cual
     mirar. Con tres pixeles de desenfoque la imagen pasa a ser
     inequivocamente fondo.

     Ademas hace el diseno a prueba de futuro: da igual que
     imagen suba José desde el panel, siempre se comportara como
     textura y nunca robara el sitio al titular.
  */
  filter: blur(6px) saturate(.92);
  /* El desenfoque aclara los bordes: la escala extra los saca de
     la pantalla para que no se vea el halo del filtro. */
  transform: scale(1.32);
}

.hero__velo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /*
       1. Barrido lateral.

       Sigue siendo mas denso a la izquierda -donde cae el
       titular- y se abre hacia la derecha. Pero mucho mas
       abierto que antes: el titular necesita un 72 % de azul
       para leerse con holgura, no un 95 %. Lo que sobraba de
       ahi no protegia nada, solo tapaba la fotografia.
    */
    linear-gradient(92deg,
      rgba(1, 15, 48, .80) 0%,
      rgba(1, 19, 60, .72) 32%,
      rgba(1, 28, 89, .50) 62%,
      rgba(1, 28, 89, .38) 100%),
    /* 2. Tinte plano: ninguna zona clara de la fotografia se sale
          del azul de marca. Basta con un cuarto. */
    linear-gradient(rgba(1, 28, 89, .24), rgba(1, 28, 89, .24)),
    /* 3. Asentado arriba y abajo, para la barra de navegacion */
    linear-gradient(180deg, rgba(1, 15, 48, .58) 0%, transparent 30%, rgba(1, 15, 48, .52) 100%);
}

.hero__lamina {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__lamina.activa { opacity: 1; }
.hero__velo:not(.hero__velo--pase) .hero__lamina { opacity: 1; }
.hero__lamina img,
.hero__lamina picture { width: 100%; height: 100%; }


/* ---------- EL VIAJE DEL SELLO ----------

   El sello ya no vive dentro del primer tiempo: es una capa
   aparte, por encima del tiempo 1 y por debajo del texto del
   tiempo 2. Asi no se apaga con --o1 y puede cruzar de un tiempo
   al otro.

   Ese cruce es el gesto: mientras el primer tiempo se va, el
   sello se despega de su columna, viaja al centro exacto de la
   pantalla, crece y gira. Cuando llega, la fotografia del equipo
   ya esta debajo -y en ella el mismo sello, bordado en las
   camisas-. El sello dibujado se convierte en sello llevado
   puesto sin que haya que explicarlo.

   Todo el movimiento sale de dos numeros que escribe editorial.js:

     --viaje   0 a 1, el desplazamiento y el crecimiento
     --disolver 0 a 1, el apagado del final
     --giro    grados, atado al avance del scroll

   Sin JS los tres valen su valor de reposo y el sello se queda
   donde siempre estuvo, quieto y entero.
*/
.hero__sello {
  /* Reposo: la columna derecha del primer tiempo. El 25vw sale de
     medir el centro de esa columna contra el centro de la
     pantalla; se mantiene entre 1024 y 1600 px. */
  --sx: 25vw;
  --sy: 0vh;
  --crece: .55;
  --opaco: 1;
  /* Lo que queda del sello cuando la fotografia del equipo ya
     manda: un sello de agua, no una pieza. Tiene que poder caer
     encima de una cara sin estorbarla. */
  --tenue: .09;

  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  /* El min() con vh evita que en pantallas anchas y bajas el
     sello crecido se salga por arriba y por abajo. */
  width: min(clamp(240px, 32vw, 440px), 46vh);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  pointer-events: none;

  /* Punto de llegada. En escritorio es el centro de la pantalla
     (0,0); en movil, el centro de la banda de fotografia. */
  --sxf: 0vw;
  --syf: 0vh;

  transform:
    translate(-50%, -50%)
    translate(calc(var(--sx) * (1 - var(--viaje, 0)) + var(--sxf) * var(--viaje, 0)),
              calc(var(--sy) * (1 - var(--viaje, 0)) + var(--syf) * var(--viaje, 0)))
    scale(calc(1 + var(--crece) * var(--viaje, 0)));

  opacity: calc(var(--opaco) - (var(--opaco) - var(--tenue)) * var(--disolver, 0));

  /* Sin scroll no hay nada que animar; el navegador solo tiene
     que estar listo para las dos propiedades que cambian. */
  will-change: transform, opacity;
}

.hero__sello::before {
  content: '';
  position: absolute;
  inset: -34%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(1, 15, 48, .86) 0%,
    rgba(1, 19, 60, .74) 34%,
    rgba(1, 24, 76, .40) 56%,
    rgba(1, 28, 89, 0)  74%);
}

.hero__sello .orbe { width: 100%; }

/*
   El giro.

   Va en la propiedad independiente 'rotate', no en 'transform',
   a proposito: los anillos ya llevan su animacion lenta sobre
   'transform' y las dos cosas se componen en vez de pisarse. El
   sello del centro NO gira -un logotipo dando vueltas es un
   logotipo mal puesto-; giran los anillos que lo rodean, y en
   sentidos opuestos, que es lo que hace que parezca un mecanismo.
*/
.hero__sello .orbe__aro--2 { rotate: var(--giro, 0deg); }
.hero__sello .orbe__letras { rotate: calc(var(--giro, 0deg) * -1); }

/* El aro rojo se enciende segun avanza el viaje: es la unica
   pieza que cambia de color, y marca el momento de llegada. */
.hero__sello .orbe__aro--3 {
  border-color: rgba(224, 27, 36, calc(.30 + .45 * var(--viaje, 0)));
  transform: scale(calc(1 + .06 * var(--viaje, 0)));
}


/* ---------- Los dos tiempos ---------- */
.hero__acto {
  position: absolute;
  inset: 0;
}

/* --- TIEMPO 1: azul plano, tipografia y sello --- */
.hero__acto--uno {
  z-index: 2;
  opacity: var(--o1, 1);
  /* Base bajo la fotografia: si la imagen tarda o falta, el tiempo
     1 sigue siendo azul de marca y no un hueco blanco. */
  background: var(--azul-950);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: calc(var(--nav-alto) + 1.5rem) clamp(1.2rem, 5vw, 5rem) clamp(4.5rem, 9vh, 7rem);
}

/* Grano: la misma textura que llevan las secciones azules. */
.hero__acto--uno::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.35'/%3E%3C/svg%3E");
}

.hero__texto { position: relative; z-index: 1; max-width: 620px; }

.hero__texto h1 {
  max-width: 15ch;
  font-size: clamp(2.5rem, 5.4vw, 4.9rem);
  margin-bottom: 1.5rem;
  text-shadow: none;
}
.hero__texto .destello { color: #fff; }
.hero__texto .lede {
  color: rgba(255, 255, 255, .80);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  margin-bottom: 2.3rem;
  max-width: 46ch;
}
.hero__acciones { display: flex; gap: .8rem; flex-wrap: wrap; }

.hero__estado {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: auto;
  max-width: none;
  white-space: nowrap;
  color: #fff;
  border-radius: var(--radio-sm);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: none;
  font-family: var(--fuente-mono);
  font-size: .63rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: .5rem .8rem;
  margin-bottom: 1.9rem;
}

/* --- TIEMPO 2: una frase sobre la fotografia --- */
.hero__acto--dos {
  z-index: 3;
  opacity: var(--o2, 0);
  display: flex;
  align-items: flex-end;
  padding: 0 clamp(1.2rem, 5vw, 5rem) clamp(4.5rem, 11vh, 8rem);
  /* Mientras esta apagado no debe robar clics a lo de debajo. */
  pointer-events: none;
}
.hero--cerca .hero__acto--dos { pointer-events: auto; }

.hero__cierre { width: 100%; max-width: var(--ancho); margin-inline: auto; }

.hero__lema {
  font-family: var(--fuente-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  color: rgba(255, 255, 255, .86);
  margin-bottom: .5rem;
}

.hero__frase {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  line-height: .96;
  letter-spacing: -.045em;
  color: #fff;
  margin-bottom: 2.4rem;
}
.hero__frase .destello { color: #fff; }

/* La fila de avales: filetes verticales, como el pie de una
   portada de revista. */
.hero__aval {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .24);
  border-bottom: 1px solid rgba(255, 255, 255, .24);
  max-width: 900px;
}
.hero__aval span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex: 1;
  padding: 1rem 1.2rem 1rem 0;
  font-family: var(--fuente-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.hero__aval span:last-child { border-right: 0; padding-right: 0; }
.hero__aval .ico { color: var(--marca); flex-shrink: 0; }


/* ---------- Rieles y aviso de bajar ---------- */
.hero__riel,
.hero__bajar { z-index: 4; opacity: var(--o1, 1); }

.hero__riel {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--fuente-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  white-space: nowrap;
}
.hero__riel--izq {
  left: clamp(.9rem, 1.8vw, 1.5rem);
  bottom: clamp(5rem, 12vh, 9rem);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.hero__riel--der {
  right: clamp(.9rem, 1.8vw, 1.5rem);
  bottom: clamp(5rem, 12vh, 9rem);
  writing-mode: vertical-rl;
}
.hero__riel::before {
  content: '';
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .5));
}
@media (max-width: 1180px) { .hero__riel { display: none; } }

.hero__bajar {
  position: absolute;
  left: clamp(1.2rem, 5vw, 5rem);
  right: auto;
  bottom: 1.7rem;
  margin-left: 0;
  width: auto; height: auto;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--fuente-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.hero__bajar::before { content: 'Desplaza'; }

/*
   Sin animacion de entrada.

   movimiento.css le pone una para que aparezca al final de la
   coreografia, y una animacion con fill gana a cualquier
   declaracion normal de la misma propiedad. Con ella puesta, el
   aviso se quedaba encendido durante el segundo tiempo por mucho
   que --o1 valiera cero.
*/
/*
   Dos clases, no una, y a proposito.

   movimiento.css se carga DESPUES que esta hoja, asi que su
   '.hero__bajar { opacity: 0; animation: bajar-aparece ... forwards }'
   ganaba por orden a todo lo que se declarara aqui con la misma
   fuerza. Resultado: el aviso se quedaba encendido durante el
   segundo tiempo por mucho que --o1 valiera cero. Con dos clases
   el peso es mayor y el orden deja de importar.
*/
.hero .hero__bajar {
  animation: none;
  opacity: var(--o1, 1);
  transition: opacity var(--normal) var(--ease), color var(--rapido) var(--ease);
}
.hero__bajar:hover { background: transparent; color: #fff; }


/* ============================================================
   ---------- EL HERO EN MOVIL ----------
   ------------------------------------------------------------
   No basta con encoger el de escritorio. Tres cosas dejan de
   funcionar al pasar a una pantalla vertical de 390 px:

   1. El velo barria de izquierda a derecha porque el titular
      estaba a la izquierda. En vertical el titular esta ARRIBA,
      asi que el barrido tiene que ser de arriba abajo.

   2. La fotografia del equipo es apaisada, cinco personas en
      fila. Al recortarla a pantalla completa vertical solo cabe
      UNA, y entonces deja de ser el equipo: es un retrato de
      archivo. Aqui la fotografia pasa a ser una BANDA horizontal
      con su proporcion casi intacta, enmarcada por dos filetes.
      Se ve el equipo entero y ademas parece decidido, no
      recortado a la fuerza.

   3. El sello viajaba al centro de la PANTALLA, que en vertical
      es un punto cualquiera. Ahora viaja al centro de la BANDA,
      que es donde esta la gente que lleva el sello puesto.
   ============================================================ */
@media (max-width: 900px) {
  .hero { height: 210vh; }

  .hero__acto--uno {
    grid-template-columns: 1fr;
    align-content: center;
    padding-inline: clamp(1.2rem, 5vw, 2rem);
  }
  .hero__texto { max-width: none; }


  /* ---------- Primer tiempo ---------- */
  .hero__velo img { object-position: 62% 42%; }

  .hero__velo::after {
    background:
      /* Barrido vertical: denso arriba -donde esta el rotulo de
         estado y el titular- y otra vez abajo, bajo los botones,
         para que la barra de la aplicacion tenga suelo. */
      linear-gradient(180deg,
        rgba(1, 15, 48, .84) 0%,
        rgba(1, 19, 60, .72) 38%,
        rgba(1, 28, 89, .56) 66%,
        rgba(1, 15, 48, .82) 100%),
      linear-gradient(rgba(1, 28, 89, .22), rgba(1, 28, 89, .22));
  }


  /* ---------- Segundo tiempo: la banda ---------- */
  .hero__foto {
    --banda: 30vh;
    /* Se abre desde el eje: el borde de arriba baja lo mismo que
       crece la altura, asi que el centro no se mueve. */
    inset: calc(17vh + var(--banda) * (1 - var(--o2, 0)) / 2) 0 auto;
    height: calc(var(--banda) * var(--o2, 0));
    /* Los filetes van en el ::after, no aqui: un borde sobre una
       caja de altura cero seguiria dibujandose, y durante todo el
       primer tiempo se veria una raya blanca cruzando la
       pantalla. */
    border-block: 0;
  }
  .hero__foto img {
    /* Sin acercamiento: la banda ya tiene casi la proporcion de
       la fotografia, y cualquier zoom volveria a comerse a la
       gente de los extremos. */
    transform: none;
    object-position: center 34%;
  }
  .hero__foto::after {
    background: linear-gradient(180deg, rgba(1, 15, 48, .16), rgba(1, 15, 48, .30));
    box-shadow:
      inset 0  1px 0 rgba(255, 255, 255, .26),
      inset 0 -1px 0 rgba(255, 255, 255, .26);
  }

  .hero__acto--dos {
    align-items: flex-end;
    /* Por encima de la barra de la aplicacion, que es fija. */
    padding: 0 clamp(1.2rem, 5vw, 2rem) calc(var(--appbar-alto, 62px) + 1.5rem);
  }


  /* ---------- El sello ---------- */
  .hero__sello {
    /* Reposo: abajo del todo y muy tenue, medio cortado por el
       borde. A media altura caia encima de los dos botones y los
       ensuciaba. */
    --sx: 0vw;
    --sy: 30vh;
    /* Llegada: el centro de la banda (17vh + 15vh = 32vh desde
       arriba, o sea 18vh por encima del centro de la pantalla). */
    --sxf: 0vw;
    --syf: -18vh;
    --crece: .26;
    --opaco: .16;
    /* Mas presente que en escritorio: aqui no cae sobre la
       pantalla entera sino dentro de un marco, y dentro de un
       marco un sello tenue no se lee como sello, se lee como
       suciedad. */
    --tenue: .15;
    width: min(44vw, 20vh);
  }
  /* La mancha de suelo se cierra: sobre la banda solo tiene que
     despegar el sello de las camisas, no oscurecer la fotografia
     entera. */
  .hero__sello::before { inset: -18%; }

  .hero__aval { display: grid; grid-template-columns: 1fr; max-width: none; }
  .hero__aval span {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    padding: .75rem 0;
  }
  .hero__aval span:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento no hay dos tiempos: se enseña el primero y ya. */
  .hero { height: auto; min-height: 100vh; }
  .hero__escena { position: relative; height: auto; min-height: 100vh; }
  .hero__acto--uno { opacity: 1; position: relative; min-height: 100vh; }
  .hero__acto--dos { display: none; }
  .hero__foto img { transform: none; }
}


/* ============================================================
   3c. LA PORTADA DE LOS MODULOS
   ------------------------------------------------------------
   El mismo hero del inicio, con tres diferencias que vienen de
   que es una pagina interior y no la puerta de entrada:

     - Dura menos. 190vh en vez de 245: en la portada el visitante
       viene a mirar; aqui viene a buscar algo concreto y el hero
       no puede cobrarle dos pantallas y media de peaje.
     - El titular es mas pequeno. Un titulo de modulo es mas largo
       que un eslogan y a 6 rem se parte en cuatro renglones.
     - Lleva ruta de navegacion, que la portada del inicio no
       necesita.
   ============================================================ */
.hero--modulo { height: 190vh; }

/*
   Tres correcciones que solo salen a la luz en los modulos,
   porque el hero del inicio no usa ninguna de estas piezas.
*/

/* 1. El rotulo de seccion sobre azul. Su color normal es el gris
      de los textos terciarios, que sobre la fotografia velada
      desaparecia. */
.hero .etiqueta-seccion { color: rgba(255, 255, 255, .76); }
.hero .etiqueta-seccion__n { color: rgba(255, 255, 255, .48); }

/* 2. El boton principal. En claro es azul de marca; sobre el
      hero, azul sobre azul. Pasa a rojo, que es lo que hace la
      portada del inicio y ya es la convencion de la casa: la
      accion principal de cada pagina va en rojo. */
.hero .btn--primario {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  --btn-cortina: rgba(0, 0, 0, .22);
}
.hero .btn--primario:hover { background: #c4161f; border-color: #c4161f; }

/* 3. El asentado de arriba. Con fotografias claras -y las de los
      modulos lo son- la barra de navegacion se quedaba en blanco
      sobre blanco. Este refuerzo va aparte del velo para que no
      dependa de lo clara que sea la imagen de cada modulo. */
.hero--modulo .hero__acto--uno::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--nav-alto) + 90px);
  /* Por ENCIMA del velo (z-index 0), que si no lo tapa: a igual
     nivel, un hijo posicionado pinta despues que el ::before. */
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 15, 48, .78) 0%, rgba(1, 15, 48, .34) 52%, transparent 100%);
}

.hero--modulo .hero__texto h1 {
  font-size: clamp(2.2rem, 4.6vw, 4.1rem);
  max-width: 17ch;
  margin-bottom: 1.2rem;
}
.hero--modulo .hero__texto .lede { margin-bottom: 2rem; }

/* La ruta: en mono y pequena, como los indices de seccion. Sobre
   la fotografia velada tiene que ser legible sin gritar. */
.hero .migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.1rem;
  padding: 0;
  font-family: var(--fuente-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52);
}
.hero .migas a { color: rgba(255, 255, 255, .74); }
.hero .migas a:hover { color: #fff; text-decoration: none; }
.hero .migas span { color: rgba(255, 255, 255, .34); }
.hero .migas > span:last-child { color: rgba(255, 255, 255, .78); }

/* Sin pase de imagenes, la del primer tiempo va directa dentro
   del velo y necesita las mismas medidas que las laminas. */
.hero--modulo .hero__velo > img,
.hero--modulo .hero__velo > picture { position: absolute; inset: 0; }

@media (max-width: 900px) {
  /* Igual que el inicio pero mas corto todavia. */
  .hero--modulo { height: 178vh; }
  .hero--modulo .hero__texto h1 { font-size: clamp(2rem, 8.6vw, 2.8rem); }
}


/* ============================================================
   3b. EL ORBE DEL SELLO
   ------------------------------------------------------------
   El sello real, nitido, dentro de un sistema de anillos. El aro
   de texto gira en sentido contrario a los anillos: dos giros
   opuestos leen como un mecanismo, dos giros iguales leen como
   una imagen que da vueltas.

   Muy despacio a proposito -una vuelta cada dos minutos-: lo
   justo para que la pagina respire sin pedir atencion.
   ============================================================ */
.orbe {
  position: relative;
  display: grid;
  place-items: center;
  width: min(clamp(240px, 32vw, 440px), 100%);
  aspect-ratio: 1;
}
.orbe > * { grid-area: 1 / 1; }

.orbe__sello {
  width: 64%;
  height: auto;
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .55));
}

.orbe__aro {
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  pointer-events: none;
}
.orbe__aro--1 { width: 76%; height: 76%; }
.orbe__aro--2 {
  width: 100%; height: 100%;
  border-style: dashed;
  border-color: rgba(255, 255, 255, .13);
  animation: orbe-girar 150s linear infinite;
}
.orbe__aro--3 {
  width: 132%; height: 132%;
  border-color: rgba(224, 27, 36, .30);
}

.orbe__letras {
  width: 114%;
  height: 114%;
  overflow: visible;
  animation: orbe-girar 120s linear infinite reverse;
}
.orbe__letras text {
  fill: rgba(255, 255, 255, .52);
  font-family: var(--fuente-mono);
  font-size: 11px;
  font-weight: 500;
}

@keyframes orbe-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .orbe__aro--2, .orbe__letras { animation: none; }
}


/* ============================================================
   4. LA FRANJA QUE DESFILA
   ------------------------------------------------------------
   Tres bandas recorren la portada. Antes las tres eran iguales
   -gris claro sobre blanco- y se leian como un adorno repetido.
   Ahora cada una tiene su color y su papel:

     franja 1 · AZUL   cierra el hero
     franja 2 · ROJA   parte la pagina por la mitad (nota 2)
     franja 3 · PAPEL  prepara el cierre

   La velocidad la lleva editorial.js: la banda acelera y cambia
   de sentido segun como se desplace la pagina. Sin JavaScript
   sigue desfilando a ritmo constante, que es el respaldo.
   ============================================================ */
.franja {
  padding-block: 1.15rem;
  border-block: var(--filete);
  -webkit-mask-image: none;
  mask-image: none;
}

/* El texto entra y sale desvanecido; el color de la banda cruza
   la pagina entera. */
.franja__pista {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.franja__item {
  font-family: var(--fuente-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--texto-ter);
}
.franja__item .ico { color: var(--marca); margin-right: .65rem; }

/* Separador entre elementos: un punto, como en un sumario. */
.franja__pista { gap: 0; }
.franja__item::after {
  content: '·';
  margin-inline: 2.4rem;
  color: currentColor;
  opacity: .45;
}

/* --- Variante azul de marca --- */
.franja--noche {
  background: var(--azul-950);
  border-color: rgba(255, 255, 255, .14);
}
.franja--noche .franja__item { color: rgba(255, 255, 255, .82); }
.franja--noche .franja__item .ico { color: #fff; opacity: .55; }

/* --- Variante roja: la nota 2 ---
   Es la unica superficie roja grande del sitio. Cae justo entre
   la mitad tecnica y la mitad de resultados, y funciona como el
   corte de un capitulo. */
.franja--marca {
  background: var(--marca);
  border-color: rgba(255, 255, 255, .22);
}
.franja--marca .franja__item { color: #fff; }
.franja--marca .franja__item .ico { color: rgba(255, 255, 255, .70); }
.franja--marca .franja__item::after { color: rgba(255, 255, 255, .55); }

/* Compatibilidad con la clase anterior */
.franja--oscura {
  padding-block: 1.15rem;
  background: var(--azul-950);
  border-block: 1px solid rgba(255, 255, 255, .14);
}
.franja--oscura .franja__item { color: rgba(255, 255, 255, .82); }
.franja--oscura .franja__item .ico { color: #fff; opacity: .55; }

/* Cuando editorial.js toma el mando, apaga la animacion de CSS
   y mueve la pista el mismo. */
.franja--viva .franja__pista { animation: none; }


/* ============================================================
   5. EL INDICE DE SERVICIOS
   ------------------------------------------------------------
   Sustituye al mosaico de tarjetas fotograficas.

   Por que: ocho fotos con velo oscuro y titulo abajo a la
   izquierda es EL bloque de plantilla. Ademas obligaba a
   reconocer ocho imagenes distintas a la vez, que es mas trabajo
   del que nadie hace en una portada.

   El indice se lee en dos segundos -son ocho lineas de texto- y
   la fotografia aparece solo del servicio que el visitante esta
   mirando, siguiendo al cursor. La imagen se vuelve una respuesta
   a su gesto y no un elemento mas que decorar.

   En movil no hay cursor que seguir: cada fila lleva su miniatura
   y el visor no se monta.
   ============================================================ */
.indice { position: relative; border-top: var(--filete); }

.indice__fila {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.3rem, 2.6vw, 2rem) 0;
  border-bottom: var(--filete);
  transition: opacity var(--normal) var(--ease), color var(--normal) var(--ease);
}

.indice__n {
  font-family: var(--fuente-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--texto-ter);
  font-variant-numeric: tabular-nums;
  transition: color var(--normal) var(--ease);
}

.indice__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--texto);
  transition: transform var(--normal) var(--ease-out);
}

.indice__detalle {
  font-family: var(--fuente-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-ter);
  text-align: right;
}

.indice__flecha {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--texto-ter);
  transition: transform var(--normal) var(--ease-out), color var(--normal) var(--ease);
}

/*
   Al senalar una fila, las demas se apagan. Es el gesto que hace
   que una lista larga se sienta atendida: el sitio responde a
   donde esta mirando el visitante.
*/
/* La fila encendida se marca desde JavaScript con .es-activa, no
   solo con :hover. Asi el estado sobrevive a que el puntero pase
   por encima de un hijo, y el teclado obtiene el mismo trato. */
.indice[data-activo] .indice__fila { opacity: .34; }
.indice[data-activo] .indice__fila.es-activa,
.indice[data-activo] .indice__fila:hover,
.indice[data-activo] .indice__fila:focus-visible { opacity: 1; }

.indice__fila.es-activa .indice__n,
.indice__fila:hover .indice__n,
.indice__fila:focus-visible .indice__n { color: var(--marca); }
.indice__fila.es-activa .indice__nombre,
.indice__fila:hover .indice__nombre,
.indice__fila:focus-visible .indice__nombre { transform: translateX(clamp(6px, 1vw, 18px)); }
.indice__fila.es-activa .indice__flecha,
.indice__fila:hover .indice__flecha,
.indice__fila:focus-visible .indice__flecha { color: var(--marca); transform: translateX(8px); }

/* --- El visor que sigue al cursor --- */
.indice__visor {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  width: 320px;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  scale: .94;
  transition: opacity .35s var(--ease-out), scale .45s var(--ease-out);
  will-change: transform;
}
.indice__visor.visible { opacity: 1; scale: 1; }
.indice__visor img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Un velo azul minimo para que la foto pertenezca a la marca y
   no sea un recorte pegado encima. */
.indice__visor::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(1, 28, 89, .16);
}

/* --- Miniatura de movil --- */
.indice__mini { display: none; }

@media (max-width: 860px) {
  .indice__fila {
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    padding: 1.1rem 0;
  }
  /* Sin cursor no hay visor, asi que la fotografia baja a la
     propia fila. El detalle y la flecha se van: en 360 px de
     ancho el nombre es lo unico que hay que poder leer. */
  .indice__detalle,
  .indice__flecha { display: none; }
  .indice__mini {
    display: block;
    width: 62px; height: 46px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .indice__mini img { width: 100%; height: 100%; object-fit: cover; }
  .indice__visor { display: none; }
  .indice[data-activo] .indice__fila { opacity: 1; }
}


/* ============================================================
   6. LAS CIFRAS
   ------------------------------------------------------------
   Antes: cuatro tarjetas de vidrio con icono de color, borde
   luminoso y sombra, dentro de un panel con dos manchas
   desenfocadas. Mucho envoltorio para cuatro numeros.

   Ahora: los numeros a tamano de titular, separados por filetes
   verticales. Un numero grande ya es un elemento grafico; no
   necesita una caja que lo sostenga.
   ============================================================ */
.cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.cifra {
  padding: clamp(1.8rem, 4vw, 3.2rem) clamp(1rem, 2vw, 2rem);
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.cifra:last-child { border-right: 0; }

.cifra__n {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.cifra__t {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--fuente-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  line-height: 1.6;
  max-width: 22ch;
}

/* La primera cifra manda: se le da el rojo para que el ojo entre
   por ahi y recorra la fila. */
.cifra:first-child .cifra__n { color: #fff; }
.cifra:first-child .cifra__t { color: rgba(255, 255, 255, .78); }

/*
   Variante sobre papel.

   Las mismas cifras, en la seccion blanca. El numero va en azul
   de marca y la primera cifra -la que abre la fila- en rojo: es
   el unico sitio de la portada donde un dato lleva color, y por
   eso funciona como entrada de lectura.
*/
.cifras--papel {
  border-color: var(--borde);
}
.cifras--papel .cifra { border-color: var(--borde); }
.cifras--papel .cifra__n { color: var(--azul-profundo); }
.cifras--papel .cifra__t { color: var(--texto-ter); }
.cifras--papel .cifra:first-child .cifra__n { color: var(--marca); }
.cifras--papel .cifra:first-child .cifra__t { color: var(--texto-sec); }

@media (max-width: 900px) {
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cifra:nth-child(2n) { border-right: 0; }
  .cifra:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .14); }
}
@media (max-width: 520px) {
  .cifras { grid-template-columns: 1fr; }
  .cifra { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .cifra:last-child { border-bottom: 0; }
}


/* ============================================================
   6b. LOS GIROS, EN HORIZONTAL
   ------------------------------------------------------------
   Trece sectores en una nube de etiquetas que se envuelve sola no
   es una lista: es un parrafo de palabras sueltas, y ademas
   obliga a la seccion a crecer hacia abajo como todo lo demas.

   En horizontal cada giro tiene su ficha, la fila corta por el
   borde derecho -que es la forma de decir "hay mas" sin
   escribirlo- y por fin algo en la pagina se mueve en un eje
   distinto al del scroll.

   El desplazamiento es NATIVO (overflow-x). No se secuestra la
   rueda: quien baja, baja. Con teclado el tabulador entra ficha a
   ficha y el navegador desplaza la pista solo.
   ============================================================ */
.giros { position: relative; }

.giros__pista {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  border-block: 1px solid rgba(255, 255, 255, .18);
  /* La barra del sistema operativo estorba en una fila de fichas
     que ya lleva su propio indicador de avance. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.giros__pista::-webkit-scrollbar { display: none; }

/*
   La fila sale del contenedor por la derecha hasta el borde de la
   ventana. Es la parte que hace el trabajo: una ficha cortada por
   el filo de la pantalla dice "hay mas" mejor que cualquier flecha.
   El recorte lo pone el overflow-x: clip de la seccion.
*/
.giros__pista { margin-right: calc(50% - 50vw); }

/* La mano solo aparece donde hay raton: en tactil el gesto ya es
   evidente y un cursor de agarre no significa nada. */
@media (hover: hover) and (pointer: fine) {
  .giros__pista { cursor: grab; }
  .giros--agarrada .giros__pista { cursor: grabbing; scroll-snap-type: none; }
  .giros--agarrada .giro { user-select: none; }

  /* El refuerzo en CSS del mismo problema: los enlaces y las
     imagenes de dentro no deben ofrecer el arrastre nativo. */
  .giros__pista .giro,
  .giros__pista img {
    -webkit-user-drag: none;
    user-drag: none;
  }
}

/* Si caben todos, sobra el indicador */
.giros--completa .giros__pie { display: none; }
.giros__pista:focus-visible { outline-offset: -2px; }

.giro {
  position: relative;
  flex: 0 0 clamp(186px, 20vw, 240px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-height: 210px;
  padding: clamp(1.3rem, 2.2vw, 1.8rem) clamp(1rem, 1.8vw, 1.5rem);
  border-right: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .88);
  transition: background var(--normal) var(--ease);
}
.giro:last-child { border-right: 0; }
.giro:hover { background: rgba(255, 255, 255, .06); }

.giro__n {
  font-family: var(--fuente-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .40);
  font-variant-numeric: tabular-nums;
  transition: color var(--normal) var(--ease);
}
.giro:hover .giro__n { color: var(--marca); }

.giro__ico {
  margin-top: auto;
  color: rgba(255, 255, 255, .45);
  transition: color var(--normal) var(--ease);
}
.giro:hover .giro__ico { color: #fff; }

.giro__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #fff;
}

.giro__flecha {
  position: absolute;
  top: clamp(1.3rem, 2.2vw, 1.8rem);
  right: clamp(1rem, 1.8vw, 1.5rem);
  color: rgba(255, 255, 255, .30);
  opacity: 0;
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease-out);
}
.giro:hover .giro__flecha { opacity: 1; transform: translateX(4px); color: var(--marca); }

/* --- El pie de la fila: ayuda y barra de avance --- */
/* La ayuda y la barra van juntas a la izquierda. A la derecha
   viven los botones flotantes de atencion y se pisaban. */
.giros__pie {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}
.giros__ayuda {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--fuente-mono);
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.giros__barra {
  position: relative;
  flex: 0 1 220px;
  height: 2px;
  background: rgba(255, 255, 255, .16);
}
.giros__barra span {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--avance, 22%);
  background: var(--marca);
}

/* ------------------------------------------------------------
   LA PANTALLA DEL SECTOR, COLGADA DEL CURSOR

   Igual que en el indice de servicios, pero dentro de una barra
   de ventana. No es un adorno: dice que lo que se ve es una
   pantalla del sistema de ese giro y no una fotografia de
   archivo. La barra lleva escrito el nombre del sector.
   ------------------------------------------------------------ */
.giros__visor {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  width: clamp(300px, 25vw, 380px);
  margin: 0;
  pointer-events: none;
  opacity: 0;
  scale: .94;
  transition: opacity .32s var(--ease-out), scale .45s var(--ease-out);
  will-change: transform;
}
.giros__visor.visible { opacity: 1; scale: 1; }

.visor__marco {
  overflow: hidden;
  border-radius: 12px;
  background: #0A1430;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .12),
    0 34px 70px rgba(1, 10, 32, .55);
}

.visor__barra {
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: .5rem .7rem;
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.visor__barra > span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  flex-shrink: 0;
}
.visor__barra > span:first-child { background: var(--marca); }
.visor__barra em {
  margin-left: .45rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--fuente-mono);
  font-size: .6rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.visor__imagen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.visor__imagen img { width: 100%; height: 100%; object-fit: cover; }
/* El mismo velo azul del indice: la imagen pertenece a la marca
   y no es un recorte pegado encima. */
.visor__imagen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(1, 28, 89, .18);
}

/* Mientras se senala una ficha, las demas se retiran un poco.
   Es lo mismo que hace el indice y aqui hacia falta todavia mas,
   porque las fichas de la tira son grandes y compiten. */
.giros[data-activo] .giro { opacity: .38; }
.giros[data-activo] .giro.es-activa { opacity: 1; }
.giro { transition: background var(--normal) var(--ease), opacity var(--normal) var(--ease); }

/* --- Miniatura para movil --- */
.giro__mini { display: none; }

@media (max-width: 620px) {
  .giro { flex-basis: 62vw; min-height: 180px; }
  .giros__ayuda { font-size: .58rem; letter-spacing: .08em; }

  /* Sin cursor no hay visor: la imagen baja a la propia ficha y
     se convierte en su cabecera. */
  .giro { padding-top: 0; gap: .7rem; }
  .giro__mini {
    display: block;
    position: relative;
    margin: 0 calc(-1 * clamp(1rem, 1.8vw, 1.5rem)) .2rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    order: -1;
  }
  .giro__mini img { width: 100%; height: 100%; object-fit: cover; }
  .giro__mini::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1, 28, 89, .10), rgba(1, 28, 89, .55));
  }
  .giro__n {
    position: absolute;
    top: .7rem; left: clamp(1rem, 1.8vw, 1.5rem);
    z-index: 1;
    color: #fff;
  }
  .giro__ico { margin-top: 0; }
}


/* ============================================================
   7. CORRECCIONES SOBRE COMPONENTES EXISTENTES
   ============================================================ */

/* --- Duo: la foto rompe el contenedor por su lado --- */
.duo__foto .foto { border-radius: 0; }
.duo__dato {
  border-radius: 0;
  border: 0;
  border-left: 2px solid var(--marca);
  background: var(--azul-950);
  color: #fff;
  box-shadow: none;
}
.duo__dato .ico { color: var(--marca); }
.duo__dato strong { color: #fff; font-family: var(--fuente-titulo); letter-spacing: -.03em; }
.duo__dato span {
  color: rgba(255, 255, 255, .62);
  font-family: var(--fuente-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- Vitrina --- */
.vitrina { border-radius: 0; }

/* El texto de la vitrina va a la izquierda, asi que el velo tiene
   que ser LATERAL. Con un degradado vertical el titular caia sobre
   la zona clara de la fotografia y no se leia. */
.vitrina__fondo::after {
  background:
    linear-gradient(100deg,
      rgba(1, 15, 48, .93) 0%,
      rgba(1, 19, 60, .84) 34%,
      rgba(1, 28, 89, .56) 62%,
      rgba(1, 28, 89, .40) 100%),
    linear-gradient(rgba(1, 28, 89, .18), rgba(1, 28, 89, .18));
}
.vitrina--centrada .vitrina__fondo::after {
  background:
    linear-gradient(180deg, rgba(1, 15, 48, .82) 0%, rgba(1, 28, 89, .86) 100%);
}
.vitrina .etiqueta-seccion { color: rgba(255, 255, 255, .70); }

/* --- Celda del mosaico (se sigue usando en otras paginas) --- */
.celda { border-radius: 0; }
.celda:hover { transform: none; box-shadow: none; }
.celda::after {
  background: linear-gradient(180deg, transparent 30%, rgba(1, 19, 60, .88) 100%);
}
.celda__texto strong {
  font-family: var(--fuente-titulo);
  letter-spacing: -.03em;
}
.celda__texto small {
  font-family: var(--fuente-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.celda__ico { border-radius: var(--radio-sm); }
.celda:hover .celda__ico {
  background: var(--marca);
  border-color: var(--marca);
  transform: none;
}

/* --- Sectores --- */
.sector {
  border-radius: var(--radio-sm);
  box-shadow: none;
  font-family: var(--fuente-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .75rem 1.1rem;
}
.sector:hover {
  background: #fff;
  border-color: #fff;
  color: var(--azul-profundo);
  transform: none;
  box-shadow: none;
}
.sector:hover .ico { color: var(--marca); transform: none; }

/* --- Recomendador --- */
.recomendador {
  border-radius: 0;
  border: var(--filete);
  box-shadow: none;
}
.paso-punto {
  font-family: var(--fuente-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.paso-punto__num { border-radius: 0; }
.paso-punto.activo .paso-punto__num {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}
.opcion {
  border-radius: var(--radio-sm);
  box-shadow: none;
}
.opcion .ico { color: var(--texto-ter); }
.opcion:hover { border-color: var(--azul-profundo); transform: none; box-shadow: none; }
.opcion:hover .ico { color: var(--marca); transform: none; }
.opcion.elegida { border-color: var(--marca); }
.opcion.elegida .ico { color: var(--marca); }
.resultado__ico { border-radius: 0; }

/* --- Acordeon --- */
.acordeon__boton {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.025em;
  padding-block: 1.5rem;
}
.acordeon__boton:hover { color: var(--marca); }
.acordeon__mas { border-radius: 0; }

/* --- Testimonios --- */
.testimonio {
  border-radius: 0;
  border: 0;
  border-top: 2px solid var(--azul-profundo);
  padding: 1.8rem 0 0;
  background: transparent;
}
.testimonio:hover { transform: none; box-shadow: none; border-color: var(--marca); }
.testimonio::before { display: none; }
.testimonio p {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--texto);
}
.testimonio__foto { border-radius: 0; }
.testimonio__inicial { border-radius: 0; }
.testimonio__autor strong { font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; }
.testimonio__autor span {
  font-family: var(--fuente-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.estrellas { color: var(--marca); }

/* --- Futuro / innovacion --- */
.futuro { border-radius: 0; }
.futuro__ico { border-radius: var(--radio-sm); }

/* --- Areas de WhatsApp --- */
.area-wa {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  border-top: var(--filete);
  padding-block: 1.4rem;
}
.area-wa:hover { transform: none; box-shadow: none; background: transparent; }
.area-wa__ico { border-radius: 0; }
.area-wa strong { font-family: var(--fuente-titulo); letter-spacing: -.02em; font-size: 1.05rem; }
.area-wa small {
  font-family: var(--fuente-mono);
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* --- Consejo --- */
.consejo { border-radius: 0; }


/* ============================================================
   8. PIE DE PAGINA
   ------------------------------------------------------------
   Nota 3: fondo #011C59.

   El pie deja de ser una zona gris al final para convertirse en
   el bloque que cierra la marca: azul de marca, columnas
   separadas por filetes y el logotipo a tamano de cartel
   asomando por el borde inferior.
   ============================================================ */
.pie {
  margin-top: 0;
  /* El relleno vive ahora en cada banda, no en el pie entero. */
  padding-top: 0;
  border-top: 0;
  background: var(--azul-950);
  color: rgba(255, 255, 255, .72);
  --borde: rgba(255, 255, 255, .16);
  --texto: #FFFFFF;
  --texto-sec: rgba(255, 255, 255, .74);
  --texto-ter: rgba(255, 255, 255, .48);
  --borde-fuerte: rgba(255, 255, 255, .45);
  --acento: #FFFFFF;
  --superficie: transparent;
  --superficie-2: rgba(255, 255, 255, .08);
}

/* El arco decorativo sobraba: se sustituye por el grano, que ya
   es el lenguaje de las superficies azules del sitio. */
.pie__arco {
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform: none;
  border: 0;
  border-radius: 0;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.35'/%3E%3C/svg%3E");
}

/*
   El sello asomando por la esquina.

   Ya no es una marca de agua escondida detras de una fotografia:
   sale del borde, a tamano grande y en monocromo, como el sello
   de lacre de una carta. Es la tercera aparicion del mismo motivo
   -hero, secciones azules, pie- y eso es lo que lo convierte en
   lenguaje y no en adorno suelto.
*/
/* El sello del pie.

   Estaba puesto con top y right negativos para que se saliera por
   la esquina, pero asi nunca se veia la circunferencia entera:
   cortada por dos lados se leia como un descuido antes que como
   una marca de agua. Ahora entra completo.

   Se le baja el cuerpo al entrar, porque dentro de la banda pisa
   la columna de contacto. A esta opacidad es una textura y no
   compite con nada, pero conviene que sea pequena. */
.pie__sello {
  position: absolute;
  top: clamp(1rem, 2.5vw, 2.4rem);
  right: clamp(1rem, 2.5vw, 2.6rem);
  width: min(340px, 30vw);
  height: auto;
  opacity: .08;
  filter: grayscale(1) brightness(2.4);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 760px) { .pie__sello { display: none; } }

.pie__rejilla { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 2.6rem; }

.pie h5 {
  font-family: var(--fuente-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .48);
}
.pie__lista a { color: rgba(255, 255, 255, .74); }
.pie__lista a:hover { color: #fff; padding-left: 6px; }
/* Estas tres reglas se escribieron para el pie, que es azul, pero
   se dejaron sin ambito: la pagina de Contacto reutiliza la misma
   lista sobre papel y salia en blanco sobre blanco. Van dentro de
   .pie, que es donde de verdad viven. */
.pie .pie__contacto li { color: rgba(255, 255, 255, .74); }
.pie .pie__contacto .ico { color: var(--marca); }
.pie .pie__contacto a:hover { color: #fff; }
.pie__marca p { color: rgba(255, 255, 255, .62); }
.pie .marca__lema { color: rgba(255, 255, 255, .55); }

/* El logotipo del pie va en blanco: la version azul se perdia */
.pie .marca__nombre { filter: brightness(0) invert(1); }

.redes a {
  border-radius: var(--radio-sm);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .78);
  box-shadow: none;
}
.redes a:hover {
  background: #fff;
  border-color: #fff;
  color: var(--azul-profundo);
  transform: none;
}

.pie__base {
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .48);
  font-family: var(--fuente-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pie__base a:hover { color: #fff; }
.pie__instalar { color: rgba(255, 255, 255, .55); }
.pie__instalar:hover { color: #fff; }

/*
   LA BANDA BLANCA DEL CIERRE.

   El llamado final va sobre papel y el resto del pie sobre azul.
   El contraste entre las dos bandas es el ultimo cambio de
   superficie de la pagina y hace de punto final.

   Los tokens se devuelven a sus valores de modo claro: .pie los
   da la vuelta para toda la caja, y aqui dentro hay que
   deshacerlo o los botones y el texto saldrian pensando que
   siguen sobre azul.
*/
.pie__cierre {
  position: relative;
  z-index: 2;
  background: var(--superficie-clara, #fff);
  padding-block: clamp(3.4rem, 7vw, 5.6rem);

  --texto:        #011C59;
  --texto-sec:    #4A5B7D;
  --texto-ter:    #8A97B0;
  --borde:        rgba(1, 28, 89, .13);
  --borde-fuerte: rgba(1, 28, 89, .30);
  --acento:       #011C59;
  --superficie:   #FFFFFF;
  --superficie-2: #F4F6FA;
  color: var(--texto-sec);
}

.pie__cierre .contenedor { position: relative; z-index: 1; }

/* El sello de la banda blanca: grande y casi transparente. No
   compite con el titular porque vive fuera de su columna.

   Estaba puesto con "right" negativo para que lo cortara el borde
   de la ventana, pero asi nunca se veia la circunferencia entera y
   se leia como un error de maquetacion antes que como una marca de
   agua. Ahora entra completo.

   El ancho va contra el ANCHO DISPONIBLE y no contra el de la
   ventana: el titular ocupa hasta unos 930 px, y lo que quede a su
   derecha es todo el sitio que hay. Con 34vw a secas, entre 900 y
   1200 px de ventana el sello se le echaba encima al texto. */
.pie__cierre-sello {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 3vw, 3.5rem);
  width: min(360px, 26vw);
  height: auto;
  transform: translateY(-50%);
  opacity: .07;
  filter: grayscale(1) brightness(.35);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 900px) { .pie__cierre-sello { display: none; } }

.pie .cta-final {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  text-align: left;
  padding: 0;
}
/* El ancho estaba puesto para la version anterior, la que cambiaba
   de letra en la ultima linea. Con una sola tipografia y tres
   frases, 17ch partia cada frase en dos y dejaba "productos." y
   "sistemas." solas en su renglon. La figura es "no solo X, no
   solo Y, Z": si las frases se rompen, el remate no llega. */
.pie .cta-final h2 {
  color: var(--texto);
  max-width: 25ch;
  font-size: clamp(1.85rem, 4vw, 3.4rem);
}

/* Una sola tipografia en el cierre. Antes la ultima linea saltaba
   a la serif cursiva; ahora las tres van en Archivo y la jerarquia
   la pone el tono: las dos primeras preparan y van apagadas, la
   tercera es la que se queda y va a plomo. */
.cta-final__previa { color: var(--texto-ter); }
.pie .cta-final .lede { margin-inline: 0; color: var(--texto-sec); }
.pie .cta-final__acciones { justify-content: flex-start; }
.pie .linea { display: none; }

/* El boton fantasma se pinta en blanco dentro de .pie por la
   regla general de superficies oscuras. Aqui vuelve a azul. */
.pie__cierre .btn--fantasma {
  color: var(--texto);
  border-color: var(--borde-fuerte);
}
.pie__cierre .btn--fantasma:hover { color: #fff; }

/* La banda azul: se lleva el relleno superior que antes tenia el
   pie entero, porque ahora empieza aqui. */
.pie__cuerpo {
  position: relative;
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

/*
   El nombre a tamano de cartel, cortado por el borde inferior.
   Es el gesto de cierre de las portadas impresas: la marca ya no
   se presenta, se firma.
*/
/*
   LA FIRMA, EN VERTICAL AL COSTADO.

   Antes cruzaba el pie entera por abajo. Ocupaba una franja de
   trescientos pixeles para decir una palabra que ya esta en la
   barra de arriba y en el logotipo de al lado.

   De canto, en el margen izquierdo, hace otro trabajo: acompaña
   todo el alto del pie como el lomo de un libro y deja el suelo
   libre. Va DETRAS del contenido -contorno finisimo, sin relleno-
   asi que no importa si el margen no le llega: no tapa nada.
*/
.pie__firma-grande {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  width: clamp(3.4rem, 6vw, 6.5rem);
  margin: 0;
  padding: 0;
  /* Sin recorte: lo que se ve del nombre girado es estrecho y
     cabe de sobra. Con recorte se comia las letras, porque el
     recorte mide la caja SIN girar -que es ancha- y no lo que
     acaba viendose. */
  overflow: visible;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* El contenido va por delante de la firma, siempre. */
.pie__cuerpo > .contenedor { position: relative; z-index: 1; }

/* Por debajo de 900 px no hay margen que la sostenga y se
   cruzaria con el texto. */
@media (max-width: 900px) { .pie__firma-grande { display: none; } }

/*
   Flex y no bloque: el nombre y el apostrofo son dos elementos
   distintos -uno en contorno, el otro macizo y rojo- y con
   maquetacion de linea normal el apostrofo se caia al renglon
   siguiente en cuanto la ventana se estrechaba.
*/
/*
   Una linea horizontal, girada un cuarto de vuelta.

   Probe antes con writing-mode y sus dos sabores. Los dos
   descolocan la caja -en escritura vertical el ancho lo decide el
   contenido a lo alto- y el recorte del margen se comia las
   letras. Rotar una linea normal es aburrido y funciona: mide lo
   que se ve, se centra sola y no depende de como interprete el
   navegador la escritura vertical.

   Se lee de abajo hacia arriba, que es como va el nombre en el
   lomo de un libro.
*/
.pie__firma-nombre {
  /*
     Centrado a mano y no con la rejilla.

     Una caja girada conserva su tamaño SIN girar para el
     maquetado: aqui son 182 px de ancho dentro de una tira de 86,
     y al desbordar, el centrado de la rejilla dejaba de centrar.
     Colocandola absoluta y llevando su centro al centro de la
     tira, el giro ya no puede descolocarla.
  */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);

  display: flex;
  align-items: flex-start;
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-size: clamp(2.6rem, 4.4vw, 4.6rem);
  letter-spacing: -.045em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .34);
  margin: 0;
  white-space: nowrap;
}
.pie__firma-grande .apos {
  color: var(--marca);
  -webkit-text-stroke: 0;
  flex-shrink: 0;
}
.pie__firma-grande .apos {
  color: var(--marca);
  -webkit-text-stroke: 0;
  flex-shrink: 0;
}

/*
   El registro.

   Va como en el logotipo: pequeño, arriba y macizo. En una caja
   flex el 'vertical-align' de <sup> no pinta nada, asi que la
   altura se pone a mano con el margen. Y sin contorno: a este
   tamaño un contorno de 1 px se comeria el simbolo entero.
*/
/* El registro, arriba a la derecha del nombre, como en el
   logotipo. Al girar el conjunto viaja con el. */
.pie__firma-r {
  flex-shrink: 0;
  font-size: .17em;
  line-height: 1;
  margin: .45em 0 0 .12em;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .45);
  -webkit-text-stroke: 0;
}


.inverso .sede--principal,
.pie .sede--principal {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: inset 3px 0 0 var(--marca);
}
.inverso .sede--principal .insignia {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}


/* ============================================================
   9. VENTANA DE LA TIENDA
   ------------------------------------------------------------
   La tienda vive en otro dominio (eyub.gt). Enviar al visitante
   sin avisar se siente como perderlo; esta ventana explica a
   donde va antes de sacarlo del sitio.
   ============================================================ */
.salto {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(1, 19, 60, .82);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--normal) var(--ease), visibility var(--normal);
}
.salto.abierto { opacity: 1; visibility: visible; }

.salto__caja {
  position: relative;
  width: min(560px, 100%);
  background: #fff;
  border-top: 3px solid var(--marca);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  translate: 0 18px;
  transition: translate var(--normal) var(--ease-out);
}
.salto.abierto .salto__caja { translate: none; }

.salto__marca {
  display: block;
  height: 34px;
  width: auto;
  margin-bottom: 1.6rem;
}
.salto h3 { margin-bottom: .7rem; }
.salto p { color: var(--texto-sec); font-size: .95rem; margin-bottom: 1.8rem; max-width: 44ch; }
.salto__acciones { display: flex; gap: .7rem; flex-wrap: wrap; }
.salto__cerrar {
  position: absolute;
  top: .9rem; right: .9rem;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  color: var(--texto-ter);
}
.salto__cerrar:hover { color: var(--marca); }
.salto__nota {
  margin-top: 1.4rem;
  font-family: var(--fuente-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-ter);
}


/* ============================================================
   10. REVELADO POR CORTINA
   ------------------------------------------------------------
   La fotografia no aparece con un desvanecido: se descubre. Una
   cortina la recorre de abajo arriba. Cuesta lo mismo que un
   fade -es clip-path, va en la tarjeta grafica- y se siente
   compuesto en vez de generado.
   ============================================================ */
.revelar--cortina-abajo {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  translate: none;
  transition: clip-path 1.1s var(--ease-out);
  transition-delay: var(--retraso, 0ms);
}
.revelar--cortina-abajo.visible { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .revelar--cortina-abajo { clip-path: none; }
}


/* ============================================================
   11. EL DUO SALE DE LA COLUMNA
   ------------------------------------------------------------
   duo() es el bloque que mas se repite en los modulos: ocho
   secciones seguidas de foto-y-texto en servicios, cinco en
   sistemas, y asi. Con la foto metida dentro del contenedor, las
   ocho se leen como ocho filas de una rejilla de plantilla: dos
   columnas iguales, margen a los lados, siguiente.

   Sacando la fotografia hasta el borde de la ventana cambia todo
   sin tocar una linea de marcado: la imagen deja de ser una
   ilustracion dentro de una caja y pasa a ser la superficie de la
   seccion. El texto se queda en su columna, alineado con el resto
   de la pagina, y el contraste entre lo que se desborda y lo que
   se contiene es justo lo que hace que no parezca una plantilla.

   Solo de 992 px para arriba: por debajo el duo ya se apila y
   sangrar una foto a pantalla completa no aporta nada.
   ============================================================ */
@media (min-width: 992px) {
  .duo {
    /* El truco de la sangria completa: los porcentajes del margen
       se resuelven contra el ancho del contenedor, asi que
       50% - 50vw devuelve exactamente el hueco que falta hasta el
       borde de la ventana. */
    margin-inline: calc(50% - 50vw);
    gap: 0;
    align-items: center;

    /* El margen exterior de la columna de texto: el mismo que
       tiene el contenedor, para que el texto siga alineado con
       los titulares de las demas secciones. */
    --duo-margen: max(clamp(1.1rem, 4vw, 2.5rem),
                      calc((100vw - var(--ancho)) / 2 + clamp(1.1rem, 4vw, 2.5rem)));
    --duo-aire: clamp(2rem, 4.6vw, 4.6rem);
  }

  .duo__texto { padding-inline: var(--duo-aire) var(--duo-margen); }
  .duo--invertido .duo__texto { padding-inline: var(--duo-margen) var(--duo-aire); }

  /* Una fotografia que llega al filo no lleva esquinas redondas:
     la esquina solo existe cuando hay borde que redondear. */
  .duo__foto .foto {
    border-radius: 0;
    box-shadow: none;
  }

  /* La insignia flotante se mete hacia dentro. Colgando por el
     lado que sangra se la comeria el recorte de la seccion. */
  .duo__dato { right: 18px; bottom: -22px; }
  .duo--invertido .duo__dato { right: auto; left: 18px; }
}


/* ============================================================
   12. LA DERIVA DE LAS VITRINAS
   ------------------------------------------------------------
   La vitrina es una fotografia a sangre con el texto encima. Una
   imagen grande y completamente quieta detras de un texto quieto
   se lee como un cartel impreso; con una deriva muy lenta se lee
   como una escena.

   Dieciocho segundos de ida y otros tantos de vuelta: si se
   percibe el movimiento, esta mal calibrado.

   Va en las propiedades independientes 'scale' y 'translate'
   para no chocar con los 'transform' del sistema, y solo cuando
   la vitrina ya esta a la vista -la clase la pone el mismo
   observador que revela el resto-.
   ============================================================ */
.vitrina__fondo.visible img {
  animation: vitrina-deriva 18s var(--ease) infinite alternate;
  will-change: scale, translate;
}
@keyframes vitrina-deriva {
  from { scale: 1;    translate: 0 0; }
  to   { scale: 1.08; translate: -1.4% -1%; }
}

@media (prefers-reduced-motion: reduce) {
  .vitrina__fondo.visible img { animation: none; }
  /* El paralaje lo apaga el guion, pero por si acaso el guion no
     corriera y la clase se hubiera quedado puesta. */
  .duo__foto .foto img { translate: none !important; }
}


/* ============================================================
   13. EL AÑO EN MARCHA
   ------------------------------------------------------------
   Doce columnas iguales y las tareas como barras que ocupan los
   meses que les tocan. La rejilla es la misma para la cabecera de
   meses y para cada fila, asi que las barras caen siempre
   exactamente bajo su mes sin cuentas a mano.

   La linea del mes de hoy se coloca con --mes-hoy, que escribe el
   PHP: es lo unico de la pieza que cambia solo, y es justo lo que
   la convierte de grafico en respuesta.
   ============================================================ */
.anio {
  --anio-rotulo: clamp(9rem, 15vw, 14rem);
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}

/* En pantallas angostas la banda se recorre de lado: doce meses
   apretados en 390 px no se leen. */
.anio__marco {
  position: relative;
  /* Sitio para la etiqueta del mes, que sobresale por arriba. */
  padding-top: 1.2rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: .4rem;
}
.anio__meses,
.anio__fila {
  display: grid;
  grid-template-columns: var(--anio-rotulo) repeat(12, minmax(38px, 1fr));
  align-items: center;
  min-width: 620px;
}

/* ---------- La cabecera ---------- */
.anio__meses {
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: .3rem;
}
.anio__mes {
  text-align: center;
  font-family: var(--fuente-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--texto-ter);
}
.anio__mes--hoy { color: var(--marca); font-weight: 600; }

/* ---------- La linea de hoy ----------
   Se apoya en la misma rejilla: la columna 1 es el rotulo, asi
   que el mes N empieza en el rotulo mas (N-1) doceavos de lo que
   queda. */
.anio__hoy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--anio-rotulo)
             + (100% - var(--anio-rotulo)) * (var(--mes-hoy) - .5) / 12);
  width: 2px;
  margin-left: -1px;
  background: var(--marca);
  opacity: .55;
  pointer-events: none;
}
.anio__hoy em {
  position: absolute;
  /* Por encima de la fila de letras: encima de ella se comia la
     inicial del mes. */
  top: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--fuente-mono);
  font-style: normal;
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--marca);
  background: var(--fondo);
  padding: 0 .35rem;
  white-space: nowrap;
}
.inverso .anio__hoy em { background: var(--azul-950); }

/* ---------- Las filas ---------- */
.anio__fila { border-bottom: 1px solid var(--borde); }
.anio__fila:last-child { border-bottom: 0; }

.anio__rotulo { padding: .7rem 1rem .7rem 0; }
.anio__rotulo strong {
  display: block;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.25;
}
.anio__rotulo small {
  display: block;
  margin-top: .15rem;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--texto-ter);
}

/* La pista ocupa las doce columnas y vuelve a subdividirse en
   doce: asi cada barra se coloca con grid-column y ya. */
.anio__pista {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  padding: .55rem 0;
}

.anio__barra {
  display: flex;
  align-items: center;
  height: 26px;
  padding-inline: .6rem;
  border-radius: var(--radio-sm);
  overflow: hidden;

  /* Se dibuja al entrar, de izquierda a derecha, como el filete
     del marcador. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--ease-out);
}
.anio.visible .anio__barra { transform: scaleX(1); }

/* Escalonado por fila: cada una arranca un poco despues que la
   de encima, y la banda se dibuja sola de arriba abajo. */
.anio__fila:nth-child(2)  .anio__barra { transition-delay: .05s; }
.anio__fila:nth-child(3)  .anio__barra { transition-delay: .12s; }
.anio__fila:nth-child(4)  .anio__barra { transition-delay: .19s; }
.anio__fila:nth-child(5)  .anio__barra { transition-delay: .26s; }
.anio__fila:nth-child(6)  .anio__barra { transition-delay: .33s; }
.anio__fila:nth-child(7)  .anio__barra { transition-delay: .40s; }

.anio__barra i {
  font-style: normal;
  font-family: var(--fuente-mono);
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
   OJO con el alcance.

   La clase .inverso la lleva la SECCION, no el bloque. Escribir
   '.anio:not(.inverso)' para el caso claro parecia razonable y
   estaba mal: como .anio nunca lleva .inverso, esa regla ganaba
   siempre y pintaba las barras de azul sobre azul. Invisibles.
   Aqui el caso claro es el de por defecto y el oscuro se pide por
   el ancestro, que es quien de verdad lo sabe.
*/

/* Sobre papel */
.anio__barra   { background: rgba(1, 28, 89, .10); border: 1px solid rgba(1, 28, 89, .18); }
.anio__barra i { color: var(--texto-sec); }

/* Sobre azul */
.inverso .anio__barra   { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }
.inverso .anio__barra i { color: rgba(255, 255, 255, .80); }

/*
   Lo que pasa todo el año va MACIZO, no rojo.

   Al principio lo puse en rojo y salian tres barras rojas
   seguidas: el rojo del sistema es uno por pantalla, y con tres
   deja de significar "mira aqui" para significar nada. Macizo
   contra el fondo cumple lo mismo -es lo primero que se ve- y
   deja el rojo libre para la unica cosa que de verdad lo pide:
   la linea del mes en el que estas.
*/
.anio__barra--todo {
  background: var(--azul-950);
  border-color: var(--azul-950);
}
.anio__barra--todo i { color: #fff; }

.inverso .anio__barra--todo {
  background: #fff;
  border-color: #fff;
}
.inverso .anio__barra--todo i { color: var(--azul-950); }

.anio__pie {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.1rem;
  font-family: var(--fuente-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-ter);
}
.anio__pie .ico { color: var(--marca); }
.anio__pie strong { color: var(--texto); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .anio__barra { transform: scaleX(1); transition: none; }
}


/* ============================================================
   EL DIRECTORIO DE ATENCION
   ------------------------------------------------------------
   Nueve fichas iguales en rejilla no son una eleccion: son un
   muro, y el visitante que llega hasta el cierre de la pagina no
   quiere leer nueve tarjetas, quiere encontrar la suya.

   Un directorio se recorre de arriba abajo en un vistazo. El
   nombre del area va a cuerpo grande en la grotesca; el detalle,
   en la monoespaciada y en versalitas, que es como se escriben
   las entradas de una guia. Al senalar una linea aparece la
   fotografia de ese servicio y las demas lineas se apagan.
   ============================================================ */
.directorio {
  border-top: var(--filete);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.directorio__fila {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.4rem);
  padding: clamp(1.05rem, 2vw, 1.45rem) 0;
  border-bottom: var(--filete);
  color: inherit;
  transition: opacity var(--normal) var(--ease);
}

/* El filete rojo que cruza la linea entera al senalarla. Solo hay
   uno cada vez, asi que el rojo sigue siendo uno por pantalla. */
.directorio__fila::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--marca);
  scale: 0 1;
  transform-origin: left center;
  transition: scale .5s var(--ease-out);
}

.directorio__n {
  font-family: var(--fuente-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--texto-ter);
  font-variant-numeric: tabular-nums;
  transition: color var(--normal) var(--ease);
}

.directorio__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--texto);
  transition: transform var(--normal) var(--ease-out);
}

.directorio__detalle {
  font-family: var(--fuente-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--texto-ter);
}

/* El boton de escribir: solo el glifo hasta que se senala la
   linea, y entonces aparece la palabra. Nueve veces la palabra
   "Escribir" a la vez seria ruido; una sola vez es una
   invitacion. */
.directorio__wa {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border: 1px solid var(--borde);
  color: var(--texto-ter);
  transition: all var(--normal) var(--ease);
}
.directorio__wa em {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--fuente-mono);
  font-size: .64rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: max-width .45s var(--ease-out);
}

.directorio[data-activo] .directorio__fila { opacity: .32; }
.directorio[data-activo] .directorio__fila.es-activa,
.directorio__fila:hover,
.directorio__fila:focus-visible { opacity: 1; }

.directorio__fila.es-activa::after,
.directorio__fila:hover::after,
.directorio__fila:focus-visible::after { scale: 1 1; }

.directorio__fila.es-activa .directorio__n,
.directorio__fila:hover .directorio__n,
.directorio__fila:focus-visible .directorio__n { color: var(--marca); }

.directorio__fila.es-activa .directorio__nombre,
.directorio__fila:hover .directorio__nombre,
.directorio__fila:focus-visible .directorio__nombre { transform: translateX(clamp(5px, .9vw, 14px)); }

.directorio__fila.es-activa .directorio__wa,
.directorio__fila:hover .directorio__wa,
.directorio__fila:focus-visible .directorio__wa {
  color: #fff;
  border-color: var(--whatsapp);
  background: var(--whatsapp);
}
.directorio__fila.es-activa .directorio__wa em,
.directorio__fila:hover .directorio__wa em,
.directorio__fila:focus-visible .directorio__wa em { max-width: 6rem; }

/* --- La miniatura: escondida donde hay cursor, porque para eso
       esta el visor; presente donde no lo hay. --- */
.directorio__mini { display: none; }

@media (max-width: 900px) {
  .directorio__fila {
    grid-template-columns: auto 76px minmax(0, 1fr) auto;
    gap: .9rem;
    padding: .9rem 0;
  }
  .directorio__mini {
    display: block;
    position: relative;
    width: 76px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .directorio__mini img { width: 100%; height: 100%; object-fit: cover; }
  .directorio__mini::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(1, 28, 89, .18);
  }
  /* El detalle pasa debajo del nombre: en 400 px no caben dos
     columnas de texto una al lado de la otra. */
  .directorio__fila {
    grid-template-areas:
      'n foto nombre wa'
      'n foto detalle wa';
    align-items: center;
    gap: .25rem .9rem;
  }
  .directorio__n       { grid-area: n; }
  .directorio__mini    { grid-area: foto; }
  .directorio__nombre  { grid-area: nombre; font-size: 1.15rem; }
  .directorio__detalle { grid-area: detalle; font-size: .6rem; letter-spacing: .08em; }
  .directorio__wa      { grid-area: wa; padding: .5rem; }
  .directorio__wa em   { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .directorio__fila::after,
  .directorio__nombre,
  .directorio__wa em { transition: none; }
}


/* ============================================================
   EL SELECTOR  ·  un desplegable propio
   ------------------------------------------------------------
   La lista que abre un <select> nativo la dibuja el sistema
   operativo, no la pagina: no se le puede dar estilo y hereda los
   colores del control de formas distintas en cada navegador. En
   las secciones azules el control va con el texto en blanco, asi
   que la lista salia blanco sobre blanco y no se leia nada.

   Esto es un desplegable de verdad, hecho con marcado propio. El
   <select> original sigue ahi debajo -invisible pero vivo-, asi
   que el formulario envia igual, la validacion sigue funcionando
   y si el guion no llegara a correr el visitante tendria el
   desplegable de siempre.

   Los colores NO se dejan a los tokens translucidos: la lista
   flota por encima del contenido y necesita fondo solido. Cada
   ambito declara el suyo, que es justo lo que fallaba antes.
   ============================================================ */
.selector { position: relative; }

/* El select nativo sigue en su sitio, ocupando la caja, pero sin
   verse ni recibir el raton. Nada de display:none: asi el foco
   programatico de la validacion sigue teniendo donde caer. */
.selector__nativo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  appearance: none;
  border: 0;
  padding: 0;
}

/* ---------- El control cerrado ---------- */
.selector__control {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .88rem 1.05rem;
  font-family: inherit;
  font-size: .95rem;
  text-align: left;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: border-color var(--rapido) var(--ease),
              box-shadow var(--rapido) var(--ease),
              background var(--rapido) var(--ease);
}
.selector__control:hover { border-color: var(--borde-fuerte); }
.selector__control:focus-visible {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 4px rgba(224, 27, 36, .18);
}

.selector__valor {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Mientras no se ha elegido nada, el texto es una indicacion y no
   una respuesta: se distingue del valor elegido. */
.selector--vacio .selector__valor { color: var(--texto-ter); }

.selector__flecha {
  flex-shrink: 0;
  display: flex;
  color: var(--texto-ter);
  transition: rotate var(--normal) var(--ease-out), color var(--rapido) var(--ease);
}
.selector--abierto .selector__flecha { rotate: 180deg; color: var(--marca); }
.selector--abierto .selector__control {
  border-color: var(--borde-fuerte);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* La validacion marca en rojo el select nativo; el guion pasa la
   marca al envoltorio para que se vea donde hay que verla. */
.selector--error .selector__control { border-color: var(--marca); }

/* ---------- La lista ---------- */
.selector__lista {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0; right: 0;
  margin: 0;
  padding: .3rem;
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;

  /* Fondo SOLIDO y color propio. Es lo unico que impedia que la
     lista se leyera, asi que no se deja al azar de los tokens. */
  background: #FFFFFF;
  color: #011C59;
  border: 1px solid rgba(1, 28, 89, .18);
  border-top: 0;
  border-radius: 0 0 var(--radio-sm) var(--radio-sm);
  box-shadow: 0 22px 46px rgba(1, 10, 32, .20);

  animation: selector-abre .18s var(--ease-out) both;
}
.selector[hidden] .selector__lista,
.selector__lista[hidden] { display: none; }

@keyframes selector-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.selector__opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .68rem .8rem .68rem 1rem;
  font-size: .92rem;
  line-height: 1.35;
  border-radius: calc(var(--radio-sm) - 2px);
  cursor: pointer;
  transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.selector__opcion__texto { flex: 1; min-width: 0; }

/* El filete rojo que entra por la izquierda en la opcion sobre la
   que estas. Uno cada vez, que es la regla del rojo en el sitio. */
.selector__opcion::before {
  content: '';
  position: absolute;
  left: 0; top: .35rem; bottom: .35rem;
  width: 2px;
  background: var(--marca);
  scale: 1 0;
  transform-origin: center;
  transition: scale .2s var(--ease-out);
}
.selector__opcion.es-activa::before { scale: 1 1; }
.selector__opcion.es-activa { background: rgba(1, 28, 89, .07); }

.selector__visto { flex-shrink: 0; display: none; color: var(--marca); }
.selector__opcion[aria-selected="true"] { font-weight: 650; }
.selector__opcion[aria-selected="true"] .selector__visto { display: flex; }

.selector__opcion[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}
.selector__opcion[aria-disabled="true"]::before { display: none; }

/* La primera opcion vacia es una indicacion, no una respuesta */
.selector__opcion--vacia { color: rgba(1, 28, 89, .55); }

/* ---------- Sobre secciones azules ---------- */
.inverso .selector__lista {
  background: #0A1430;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 22px 46px rgba(1, 10, 32, .55);
}
.inverso .selector__opcion.es-activa { background: rgba(255, 255, 255, .10); }
.inverso .selector__opcion--vacia { color: rgba(255, 255, 255, .55); }

@media (prefers-reduced-motion: reduce) {
  .selector__lista { animation: none; }
  .selector__flecha, .selector__opcion::before { transition: none; }
}