/* ==========================================================================
   Stolzel — sitio comercial
   Sistema visual derivado del logotipo de marca: el degradado morado -> azul
   acero del isotipo es el unico acento del sitio.
   Sin dependencias externas. Todo se sirve desde este dominio.

   Orden del archivo:
     1  fuentes · 2 fichas (tokens) · 3 base · 4 rejilla · 5 cabecera
     6  botones · 7 portada · 8 landing · 9 paginas de profundidad
     10 pie · 11 movimiento · 12 impresion
   ========================================================================== */

/* --- 1. Fuentes vendorizadas (IBM Plex, SIL OFL 1.1), subset a castellano --- */
@font-face {
  font-family: "Plex";
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- 2. Fichas ---------------------------------------------------------- */
:root {
  --morado: #682577;
  --morado-hondo: #3a1444;
  --morado-noche: #24102b;
  --morado-claro: #c9a6d4;
  --acero: #4b96c8;
  --acero-hondo: #275f88;
  --acero-claro: #8fcbec;

  --tinta: #1b1420;
  --tinta-media: #574d60;
  --tinta-suave: #6d6377;

  --papel: #fcfbfd;
  --nieve: #ffffff;
  --niebla: #f2eef5;
  --linea: #e0d8e5;
  --linea-fuerte: #c9bdd1;

  /* Texto sobre fondo oscuro. Auditado contra --morado-noche. */
  --sobre-oscuro: #cdbfd6;
  --sobre-oscuro-tenue: #b9abc2;
  --sobre-oscuro-vivo: #eee6f1;   /* texto principal del campo oscuro */
  --sobre-oscuro-cita: #e3d8ea;   /* cuerpo de la cita legal */
  --pie-texto: #d8cbe0;           /* enlaces del pie */
  --pie-tenue: #9a8ba4;           /* letra chica del pie */

  /* Verde de WhatsApp: es color de marca ajena, no de la paleta de Stolzel.
     Vive en fichas para que ningun componente lo lleve crudo. */
  --whatsapp: #1b8046;
  --whatsapp-hondo: #156b39;

  --sans: "Plex", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "PlexMono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --lazo: linear-gradient(90deg, var(--morado) 0%, #6b3e75 45%, var(--acero) 100%);
  --lazo-claro: linear-gradient(90deg, var(--morado-claro) 0%, var(--acero-claro) 100%);

  /* Rafaga de luz sobre la foto de portada. Pedido del dueno: "una capa
     transparente como una rafaga de luz del color de la empresa", "sutil y
     llamativo y profesional".

     Sutil y llamativo NO se resuelve subiendo la opacidad de un velo parejo
     —eso solo ensucia la foto—: se resuelve con DIRECCION, y la direccion se
     elige midiendo la foto. Por bloques, la esquina superior derecha (el pelo
     de la persona) tiene luminancia 0,04 y la mitad izquierda ronda 0,40.
     `screen` levanta sombras y no toca los claros: sobre la esquina OSCURA da
     luz de verdad, sobre los medios tonos de la izquierda daba niebla. De ahi
     la diagonal 208deg, y no la contraria.

     Tres capas y UNA sola diagonal —cuchilla, foco y remate—: si cada capa
     llevara su angulo se leerian como tres efectos y no como uno.
     Se declara con rgba(...,0) y no con `transparent` porque `transparent` es
     negro transparente e interpolar hacia el ensucia el medio del degradado. */
  --rafaga:
      /* Cuchilla de luz, azul acero de marca (#4b96c8 -> #5672a9). Va primero
         porque es la capa de arriba: es el filo que se nota. */
      linear-gradient(208deg,
        rgba(75, 150, 200, 0) 38%,
        rgba(75, 150, 200, .30) 45%,
        rgba(86, 114, 169, .19) 50%,
        rgba(86, 114, 169, 0) 59%),
      /* El foco morado (#682577 -> #946f9f) por la esquina mas oscura. */
      radial-gradient(116% 90% at 87% 10%,
        rgba(104, 37, 119, .82) 0%,
        rgba(148, 111, 159, .30) 30%,
        rgba(148, 111, 159, 0) 58%),
      /* Remate frio en la esquina opuesta: cierra la diagonal sin pesar. */
      radial-gradient(78% 68% at 5% 96%,
        rgba(86, 114, 169, .26) 0%,
        rgba(86, 114, 169, 0) 58%);

  --ancho: 1180px;
  --canal: clamp(1.25rem, 4vw, 2.5rem);
  --radio: 4px;
  --radio-g: 12px;

  /* Altura real de la cabecera fija: la usan scroll-padding y las anclas.
     Subio de 4,25rem a 5rem cuando la cabecera paso a llevar el lockup
     completo: es una marca apilada (cintas + nombre + descriptor) y por
     debajo de ~50px de alto el descriptor deja de leerse. */
  --cabecera: 5rem;

  /* Halo de marca: NO es una sombra. Una sombra neutra separa la foto del
     fondo —la deja apoyada encima, como una estampilla—; un resplandor muy
     abierto y del color de la casa tine el fondo alrededor y la funde con el.
     Es el mismo recurso que el ::before de la portada, en version barata:
     cabe en un box-shadow y no necesita ni un elemento mas ni un byte mas.
     El primer plano (corto y neutro) sigue existiendo para que la pieza no
     pierda su apoyo fisico; el segundo es el halo. */
  --halo: 0 1px 2px rgba(36, 16, 43, .05),
          0 22px 48px -22px rgba(104, 37, 119, .55),
          0 10px 34px -18px rgba(75, 150, 200, .38);
  --sombra: 0 1px 2px rgba(36, 16, 43, .05), 0 8px 24px -12px rgba(36, 16, 43, .18);
  --sombra-alta: 0 2px 4px rgba(36, 16, 43, .07), 0 24px 48px -20px rgba(36, 16, 43, .32);
  --sombra-honda: 0 4px 8px rgba(0, 0, 0, .2), 0 32px 64px -24px rgba(0, 0, 0, .55);
}

/* --- 3. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* El desplazamiento suave se activa solo si el visitante no pidio lo
     contrario: Chrome NO lo desactiva por su cuenta con prefers-reduced-motion. */
  scroll-padding-top: calc(var(--cabecera) + 1.25rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

/* Escala mayor que la anterior: el salto de tamano entre el titular y el
   cuerpo es lo que separa una pagina con presencia de una pagina timida. */
h1 { font-size: clamp(2.3rem, 1.05rem + 5vw, 4.75rem); line-height: 1.02; letter-spacing: -.038em; }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.05rem); line-height: 1.07; letter-spacing: -.03em; }
h3 { font-size: clamp(1.12rem, 1.02rem + .45vw, 1.32rem); letter-spacing: -.014em; }
h4 { font-size: 1.02rem; }

/* El fragmento acentuado del titular lleva el degradado del isotipo.
   Solo se vuelve transparente si el recorte de fondo existe; si no,
   se queda con el color heredado y sigue leyendose. */
h1 em, h2 em { font-style: normal; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em, h2 em {
    background-image: var(--lazo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .campo-oscuro h1 em, .campo-oscuro h2 em,
  .portada h1 em, .portada h2 em { background-image: var(--lazo-claro); }
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--morado); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--acero-hondo); }

strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--acero-hondo);
  outline-offset: 3px;
  border-radius: 2px;
}
.campo-oscuro :focus-visible, .portada :focus-visible, .cabecera :focus-visible, .pie :focus-visible {
  outline-color: var(--acero-claro);
}

::selection { background: var(--morado-claro); color: var(--morado-hondo); }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--morado-hondo); color: #fff;
  padding: .85rem 1.25rem; border-radius: 0 0 var(--radio) 0;
}
.saltar:focus { left: 0; color: #fff; }

.oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 4. Rejilla --------------------------------------------------------- */
.zona { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--canal); }
.zona--angosta { max-width: 800px; }

.bloque { padding-block: clamp(3.75rem, 8vw, 7.5rem); }
.bloque--ceñido { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.bloque--niebla { background: var(--niebla); }
.bloque--nieve { background: var(--nieve); }

/* Las secciones de la landing son destino de ancla: el titulo no puede
   quedar debajo de la cabecera fija al saltar. */
[id] { scroll-margin-top: calc(var(--cabecera) + 1rem); }

.cabeza-seccion { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.cabeza-seccion--centro { margin-inline: auto; text-align: center; }
.cabeza-seccion--centro h2 { max-width: 24ch; margin-inline: auto; }

/* --- Utilidades de separacion ------------------------------------------- */
/* Existen porque la politica de seguridad del sitio (_headers) declara
   style-src 'self': un atributo style= en linea queda BLOQUEADO en produccion.
   Todo ajuste de espaciado tiene que tener nombre y vivir en esta hoja. */
.sep     { margin-top: 2.75rem; }
.sep-m   { margin-top: 1.75rem; }
.sep-s   { margin-top: 1.5rem; }
.sep-xs  { margin-top: 1.15rem; }
.bajo-s  { margin-bottom: 1.5rem; }
.apagado { color: var(--tinta-media); }
.centrado { text-align: center; padding-block: 3rem; }
.centrado .entradilla { margin-inline: auto; }
.centrado .botonera { justify-content: center; margin-top: 2rem; }

/* --- Marcadores de seccion ---------------------------------------------- */
.rotulo {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--morado);
  line-height: 1.4;
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}
.rotulo::after {
  content: "";
  flex: 1;
  height: 2px;
  max-width: 7rem;
  background: var(--lazo);
  border-radius: 2px;
}
.rotulo--claro { color: var(--morado-claro); }
.rotulo--claro::after { background: var(--lazo-claro); opacity: .55; }
.rotulo--centro { justify-content: center; }
.rotulo--centro::after { display: none; }

.entradilla {
  font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem);
  line-height: 1.5;
  color: var(--tinta-media);
  max-width: 60ch;
}

/* --- 5. Cabecera -------------------------------------------------------- */
/* Oscura en todo el sitio: arranca sobre la portada oscura sin costura y le
   da al resto de las paginas el mismo marco de marca. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--morado-noche);
  background: color-mix(in srgb, var(--morado-noche) 94%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--cabecera);
}

/* Barra de avance de lectura. Es pura decoracion: si el navegador no tiene
   animaciones ligadas al scroll, no se dibuja y no falta nada. */
.progreso { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--lazo-claro); }

/* La cabecera lleva el lockup de marca en blanco, no el isotipo suelto con el
   nombre escrito al lado: el lockup ya trae nombre y descriptor, y ponerlos
   dos veces era leer "Stolzel — Expertos en personas" duplicado.
   El archivo es el mismo que usa el pie (400x237, 12 KB): ahi se renderiza a
   200px, que es su 2x real; aca queda holgado, pero es un solo archivo
   cacheado y no cuesta un byte mas. El fondo de la cabecera ya es morado
   noche, asi que el lockup blanco se lee sin tocar nada. */
.marca { display: flex; align-items: center; text-decoration: none; color: #fff; margin-right: auto; }
.marca img { width: auto; height: 3.25rem; }
@media (max-width: 480px) { .marca img { height: 2.75rem; } }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  display: block;
  padding: .6rem .72rem;
  border-radius: var(--radio);
  font-size: .93rem;
  font-weight: 600;
  color: var(--sobre-oscuro);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.cabecera .boton { min-height: 42px; padding: .5rem 1.05rem; font-size: .9rem; }

.hamburguesa {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radio);
  color: #fff;
  cursor: pointer;
}
.hamburguesa span { position: relative; display: block; width: 19px; height: 1.5px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.hamburguesa span::before, .hamburguesa span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 1.5px; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.hamburguesa span::before { top: -6px; }
.hamburguesa span::after  { top: 6px; }
.hamburguesa[aria-expanded="true"] span { background: transparent; }
.hamburguesa[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .hamburguesa { display: flex; }
  .cabecera__menu {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: .75rem var(--canal) 1.5rem;
    background: var(--morado-noche);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    box-shadow: var(--sombra-honda);
  }
  .cabecera__menu.abierto { display: flex; }
  .cabecera__menu .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .cabecera__menu .nav a { padding: .85rem .5rem; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 1rem; }
  .cabecera__menu .boton { margin-top: .9rem; min-height: 48px; }
}
@media (min-width: 1001px) {
  .cabecera__menu { display: flex !important; align-items: center; gap: .8rem; }
}

/* --- 6. Botones --------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font: inherit;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -.008em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.boton--lleno { background: var(--morado); color: #fff; }
.boton--lleno:hover { background: var(--morado-hondo); color: #fff; }

/* El unico boton de accion primaria. El morado saturado esta RESERVADO para el:
   si el color de maximo contraste aparece en toda la pagina, el boton deja de
   verse. Por eso los acentos de seccion son azul acero y este es el morado. */
.boton--accion { background: var(--morado); color: #fff; box-shadow: 0 1px 2px rgba(36, 16, 43, .18); }
.boton--accion:hover { background: var(--morado-hondo); color: #fff; box-shadow: var(--sombra); }

.boton--linea { background: transparent; color: var(--morado); border-color: var(--linea-fuerte); }
.boton--linea:hover { border-color: var(--morado); background: var(--nieve); color: var(--morado); }

.boton--claro { background: #fff; color: var(--morado-hondo); }
.boton--claro:hover { background: var(--morado-claro); color: var(--morado-hondo); }

.boton--fantasma { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.boton--fantasma:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .7); }

.botonera { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- 7. Portada: la apertura -------------------------------------------- */
.portada {
  position: relative;
  isolation: isolate;
  background: var(--morado-noche);
  color: var(--sobre-oscuro);
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(3.5rem, 8vw, 7rem);
}
/* Dos lavados de color, no una imagen: cuestan cero bytes. */
.portada::before {
  content: "";
  position: absolute; inset: -30% -10% auto -25%;
  height: 120%;
  background:
    radial-gradient(48% 55% at 18% 32%, rgba(104, 37, 119, .55), transparent 70%),
    radial-gradient(42% 50% at 88% 8%, rgba(75, 150, 200, .28), transparent 68%);
  z-index: -1;
  pointer-events: none;
}
/* min-width: 0 no es adorno. Un hijo de rejilla arranca con min-width: auto,
   o sea que no puede encogerse por debajo de su contenido; y la ficha de las
   tres ciudades lleva `width: max-content`, que a 320 px pedia 340 px. La
   columna entera se estiraba a 340 px dentro de una pantalla de 305 y la foto
   salia cortada por la derecha: no se veia como desborde porque `.portada`
   tiene overflow: hidden y lo tapaba. Con min-width: 0 la columna obedece al
   ancho de la pagina y la ficha se pliega sola contra su max-width. */
.portada__rejilla > * { min-width: 0; }
.portada__rejilla { display: grid; gap: clamp(2.75rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .portada__rejilla { grid-template-columns: 1.06fr .94fr; } }

.portada h1 { color: #fff; margin-bottom: .42em; }
.portada .entradilla { color: var(--sobre-oscuro); margin-bottom: 2rem; max-width: 54ch; }

/* --- Portada: la escena de la foto -------------------------------------- */
/* Encargo del dueno: "que este integrada al fondo, que use colores o formas
   que integren a la imagen, mas que todo en la portada". El diagnostico es
   correcto: una foto rectangular con una sombra dura debajo se lee como una
   estampilla pegada. Tres movimientos, no cinco:

   1. HALO. La sombra honda se va; en su lugar, un resplandor de marca muy
      difuso que tine el fondo alrededor. Una sombra SEPARA la foto del fondo;
      un halo la funde con el.
   2. RADIO asimetrico y generoso. Dos esquinas casi rectas y dos muy
      abiertas: el ojo deja de leer "rectangulo recortado de otro sitio".
   3. MASCARA del borde superior. Arriba la foto es oscura (pelo, pared en
      penumbra) y el fondo de la seccion tambien: disolver ese borde hace que
      la imagen NAZCA del fondo. Y como la rafaga entra por esa misma esquina,
      la luz parece venir de donde la foto se disuelve.
   Se descarto tenir el fondo hacia la temperatura de la foto: el fondo de la
   portada es oscuro, no claro, y esa tecnica es para fondo claro. */
.escena { position: relative; isolation: isolate; }
.escena::before {
  content: "";
  position: absolute; inset: -14% -9% -11% -7%;
  z-index: -1;
  background:
    radial-gradient(56% 50% at 74% 24%, rgba(104, 37, 119, .62), rgba(104, 37, 119, 0) 72%),
    radial-gradient(52% 46% at 24% 84%, rgba(75, 150, 200, .34), rgba(75, 150, 200, 0) 70%);
  filter: blur(34px);
  pointer-events: none;
}
/* La cinta sale de detras de la foto y sigue sobre el fondo. Va detras
   (z-index negativo) y por encima del halo, que es el ::before. Sin ancho
   fijo: se mide contra la escena, asi que en movil encoge con ella. */
.escena__cinta {
  position: absolute; z-index: -1;
  left: -52%; right: -24%; top: 6%; bottom: -18%;
  width: auto; height: auto;
  pointer-events: none;
}
/* La banda no termina: se disuelve. Sin esto, el extremo redondeado del trazo
   se lee como un rectangulo suelto tirado sobre el fondo. */
@supports (mask-image: linear-gradient(#000, #000)) {
  .escena__cinta {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 34%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 34%);
  }
}
/* No es un trazo fino: es una BANDA ancha y casi transparente. Un trazo fino
   sobre el fondo se lee como un garabato; una banda del ancho de la cinta del
   logotipo se lee como textura de marca, y es lo que cose la foto con el
   fondo sin competir con ella. El ancho va en px de pantalla
   (non-scaling-stroke) para que no engorde al escalar el viewBox. */
.escena__cinta-t, .escena__cinta-f {
  fill: none; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.escena__cinta-f { stroke: url(#cinta-calida) #682577; stroke-width: 74; opacity: .17; }
.escena__cinta-t { stroke: url(#cinta-fria) #275f88; stroke-width: 46; opacity: .14; }

.escena__foto {
  position: relative;
  border-radius: var(--radio-g) clamp(2.5rem, 6vw, 5rem) var(--radio-g) clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
/* La mascara se pide con @supports porque un navegador que no la entienda
   tiene que quedarse con la foto entera, no con la foto invisible. */
@supports (mask-image: linear-gradient(#000, #000)) {
  .escena__foto {
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 5%, #000 17%,
        #000 94%, rgba(0, 0, 0, .62) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 5%, #000 17%,
        #000 94%, rgba(0, 0, 0, .62) 100%);
  }
}
.escena__foto img { width: 100%; height: auto; }
/* El modo de fusion NO es intercambiable. La foto es oscura (un galardon en
   penumbra) y `soft-light` sobre negros no hace nada: empuja medios tonos, y
   aca casi no hay. Medido sobre el pixel compuesto movia la esquina morada
   menos de 2 puntos de 255 — por eso "no se veia nada". `overlay` oscurece
   mas la mitad baja y le come la cara a la persona. `screen` es el modo de la
   LUZ: levanta las sombras hacia el color y deja intactos los blancos del
   documento, que es lo que hace una rafaga de verdad.
   El inset negativo evita que la deriva descubra una esquina sin tenir. Bajo
   de -22% a -14% porque la geometria ahora esta anclada a las esquinas: caja
   mas grande, esquinas mas lejos de la foto. -14% cubre de sobra el +-5% de
   `ondear`. */
.escena__foto::after {
  content: "";
  position: absolute; inset: -14%;
  background: var(--rafaga);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* --- 8. Landing: cifras y sectores -------------------------------------- */
.cifras-banda { background: var(--nieve); border-bottom: 1px solid var(--linea); }

/* Cuatro elementos: las columnas van 1 -> 2 -> 4, nunca 3, para que no quede
   uno huerfano en la ultima fila. auto-fit no lo garantiza; esto si. */
.cifras {
  list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 3.75rem); padding: 0;
  display: grid; gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 359px) { .cifras { grid-template-columns: 1fr; } }
@media (min-width: 760px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cifra { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.1rem; border-top: 2px solid transparent; border-image: var(--lazo) 1; }
/* La cifra es el argumento: tiene que competir en tamano con el titular. */
.cifra__n {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(2.75rem, 1.2rem + 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--morado);
  /* El recorte deja que la cifra suba desde debajo del filo. El hijo es el
     que se mueve: un elemento no puede recortarse a si mismo. */
  display: block;
  overflow: hidden;
}
.cifra__n > span { display: block; }
.cifra__n i { font-style: normal; font-size: .5em; color: var(--tinta-suave); letter-spacing: 0; }
.cifra__que { font-size: .93rem; line-height: 1.4; color: var(--tinta-media); }

.sectores__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 439px) { .sectores__lista { grid-template-columns: 1fr; } }
@media (min-width: 760px) { .sectores__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sectores__lista li { border-top: 1px solid var(--linea); padding-top: .9rem; }
.sectores__lista b { display: block; font-size: 1.05rem; letter-spacing: -.015em; margin-bottom: .2rem; }
.sectores__lista span { font-size: .92rem; color: var(--tinta-media); line-height: 1.45; }

/* --- Landing: el riesgo (DS 521) ---------------------------------------- */
/* En rem, no en ch: `ch` sobre el contenedor se mide con la fuente del
   contenedor (17px), no con la del h2, y estrangulaba el titular a 230px. */
.riesgo__titular { max-width: 44rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.riesgo__titular h2 { margin-bottom: 0; }
.riesgo__remache {
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 1.15rem; font-weight: 600; color: #fff !important;
  letter-spacing: -.015em;
}

/* --- Landing: los seis papeles ------------------------------------------ */
.exigencias {
  list-style: none; margin: 0; padding: 0;
  counter-reset: papel;
}
.exigencias li {
  counter-increment: papel;
  position: relative;
  padding: 1.05rem 0 1.05rem 3.25rem;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta-media);
  font-size: .99rem;
  line-height: 1.55;
}
.exigencias li:first-child { border-top: 1px solid var(--linea); }
.exigencias li::before {
  content: counter(papel, decimal-leading-zero);
  position: absolute; left: 0; top: 1.15rem;
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .06em; color: var(--acero-hondo);
}
.exigencias b { color: var(--tinta); font-weight: 600; }
.exigencias em { font-style: italic; color: var(--morado); font-weight: 600; }

/* --- Landing: proceso --------------------------------------------------- */
.pasos { list-style: none; margin: 0; padding: 0; }
/* La columna del titulo acompana a los cuatro pasos en vez de dejar un hueco
   blanco. Si el navegador no soporta sticky, se queda arriba y no pasa nada. */
@media (min-width: 860px) {
  #proceso .duo > :first-child { position: sticky; top: calc(var(--cabecera) + 2.5rem); }
}

/* --- Landing: equipo ---------------------------------------------------- */
.equipo { margin-top: clamp(3rem, 6vw, 4.5rem); }
.equipo .rotulo { margin-bottom: 1.75rem; }

/* --- Landing: cierre ---------------------------------------------------- */
.cierre { text-align: center; }
.cierre h2 { max-width: 20ch; margin-inline: auto; }
.cierre .entradilla { margin-inline: auto; }
.cierre .botonera { justify-content: center; margin-top: 1.9rem; }
.cierre__directo {
  list-style: none; margin: clamp(2.25rem, 4vw, 3rem) 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.cierre__directo li { display: flex; flex-direction: column; gap: .15rem; }
.cierre__directo span {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--morado-claro);
}
.cierre__directo a { color: #fff; text-decoration: none; font-size: 1rem; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.cierre__directo a:hover { color: var(--acero-claro); text-decoration: underline; }

/* --- Tarjetas ----------------------------------------------------------- */
.malla { display: grid; gap: 1.15rem; }
/* Cuatro servicios: rejilla 2x2, no tres arriba y uno huerfano abajo. */
.malla--2 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .malla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.malla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.malla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
/* Los retratos son verticales y altos: apilados de a uno estiran la pagina
   casi mil pixeles en el celular. De a dos, y de a cuatro desde tableta. */
.malla--4:has(.retrato) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) {
  .malla--4:has(.retrato) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ficha {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.75rem 1.6rem 1.6rem;
  background: var(--nieve);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ficha::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 3px;
  background: var(--lazo); border-radius: var(--radio-g) var(--radio-g) 0 0;
  opacity: 0; transition: opacity .18s ease;
}
.ficha:hover, .ficha:focus-within { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--linea-fuerte); }
.ficha:hover::before, .ficha:focus-within::before { opacity: 1; }
.ficha h3 { margin-bottom: .45em; }
.ficha p { color: var(--tinta-media); font-size: .96rem; }
/* min-height 44px: medido, el enlace de la tarjeta quedaba en 41 px de alto y
   es el objetivo tactil de toda la tarjeta (el ::before lo estira sobre ella,
   pero el rectangulo que cuenta para el minimo tactil es este). */
.ficha__enlace {
  margin-top: auto; padding-top: 1rem; min-height: 44px;
  display: inline-flex; align-items: flex-end;
  font-weight: 600; font-size: .93rem; text-decoration: none;
}
.ficha__enlace::after { content: " →"; }
.ficha__enlace::before { content: ""; position: absolute; inset: 0; }
.ficha__ico { display: block; margin-bottom: .95rem; }
/* La tarjeta de servicio vive tambien sobre fondo blanco (bloque--nieve). */
.bloque--nieve .ficha { background: var(--papel); }

/* --- Proceso (secuencia real: por eso va numerado) ---------------------- */
.paso {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .15rem 1.15rem;
  padding: 1.5rem 0; border-top: 1px solid var(--linea);
}
.paso:last-child { border-bottom: 1px solid var(--linea); }
.paso__ico { grid-column: 1; grid-row: 1 / span 3; }
.paso__n, .paso h3, .paso p { grid-column: 2; }
.paso__n {
  font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .06em;
  color: var(--acero-hondo);
}
.paso h3 { margin-bottom: .3em; }
.paso p { color: var(--tinta-media); font-size: .97rem; margin: 0; max-width: 62ch; }
.bloque--niebla .paso { border-color: var(--linea-fuerte); }

/* --- Campo oscuro (el argumento de cumplimiento) ------------------------ */
.campo-oscuro {
  position: relative;
  background: var(--morado-noche);
  color: var(--sobre-oscuro-vivo);
  overflow: hidden;
}
.campo-oscuro::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--lazo);
}
.campo-oscuro::after {
  content: ""; position: absolute; right: -18%; top: -35%;
  width: 65%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(75, 150, 200, .16), transparent 65%);
  pointer-events: none;
}
.campo-oscuro h2, .campo-oscuro h3 { color: #fff; }
.campo-oscuro .entradilla { color: var(--sobre-oscuro); }
.campo-oscuro p { color: var(--sobre-oscuro); }
/* :not(.boton) es obligatorio. `.campo-oscuro a` pesa mas que `.boton--claro`,
   asi que sin la exclusion el boton blanco se quedaba con el texto celeste:
   2:1 de contraste sobre fondo blanco, es decir ilegible. */
.campo-oscuro a:not(.boton) { color: var(--acero-claro); }
.campo-oscuro .zona { position: relative; z-index: 1; }

.cita-legal {
  margin: 0;
  padding: 1.35rem 1.5rem;
  background: rgba(255, 255, 255, .05);
  border-left: 3px solid var(--acero);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.cita-legal p { font-size: 1.02rem; color: var(--sobre-oscuro-cita); }
.cita-legal footer { margin-top: .7rem; font-family: var(--mono); font-size: .73rem; letter-spacing: .09em; text-transform: uppercase; color: var(--acero-claro); }

/* --- Listas de prestaciones --------------------------------------------- */
.lista-marca { list-style: none; margin: 0; padding: 0; }
.lista-marca li {
  position: relative;
  padding: .55rem 0 .55rem 1.85rem;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta-media);
  font-size: .99rem;
}
.lista-marca li:last-child { border-bottom: 0; }
.lista-marca li::before {
  content: "";
  position: absolute; left: 0; top: 1.12rem;
  width: 10px; height: 2px; border-radius: 2px;
  background: var(--lazo);
}
.campo-oscuro .lista-marca li { color: var(--sobre-oscuro); border-color: rgba(255, 255, 255, .12); }
.campo-oscuro .lista-marca li::before { background: var(--lazo-claro); }

.lista-marca--densa li { padding-block: .38rem; font-size: .95rem; }

/* --- 9. Paginas de profundidad ------------------------------------------ */
.encabezado-pagina { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--linea); background: var(--nieve); }
.encabezado-pagina .entradilla { margin-top: .3rem; }

.miga { font-family: var(--mono); font-size: .73rem; letter-spacing: .07em; color: var(--tinta-suave); margin-bottom: 1.1rem; }
/* padding-block en un enlace en linea agranda el area tactil sin mover el texto. */
.miga a { color: var(--tinta-suave); text-decoration: none; padding-block: .95rem; }
.miga a:hover { color: var(--morado); text-decoration: underline; }
.panel p a { padding-block: .7rem; }
.miga span { margin-inline: .45rem; opacity: .5; }

.duo { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 860px) {
  .duo { grid-template-columns: 1.25fr .75fr; }
  .duo--par { grid-template-columns: 1fr 1fr; align-items: center; }
  /* Cuando el peso esta en la columna derecha (una secuencia, una lista larga). */
  .duo--peso-derecha { grid-template-columns: .8fr 1.2fr; }
}

.panel {
  padding: 1.6rem 1.5rem;
  background: var(--niebla);
  border-radius: var(--radio-g);
}
.panel h3 { font-size: 1.06rem; }
.panel p { font-size: .97rem; color: var(--tinta-media); }
.panel .lista-marca li { border-color: var(--linea-fuerte); }

/* Misma gramatica que la foto de portada, en version para fondo claro: radio
   asimetrico y generoso (deja de leerse como un recorte) y halo de marca en
   vez de sombra neutra (tine el fondo alrededor en vez de despegar la foto).
   Vale para todo el sitio, no solo para la portada: si la portada integra sus
   fotos y las paginas de dentro no, se nota el remiendo. */
.foto-marco {
  border-radius: var(--radio-g) clamp(1.75rem, 4vw, 3rem) var(--radio-g) clamp(1.75rem, 4vw, 3rem);
  overflow: hidden;
  box-shadow: var(--halo);
}

/* --- Equipo ------------------------------------------------------------- */
/* Nombre y cargo centrados BAJO su foto, no al costado: en una tira que se
   mueve, el eje de la foto es el unico ancla estable que tiene el ojo. */
.retrato { text-align: center; }
.retrato img { width: 100%; height: auto; border-radius: var(--radio-g); background: var(--niebla); }
.retrato h3, .retrato h4 { margin: .9rem 0 .1rem; font-size: 1.02rem; }
.retrato p { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--tinta-suave); margin: 0; line-height: 1.4; }

/* --- Oficinas ----------------------------------------------------------- */
.oficina { padding: 1.5rem; background: var(--nieve); border: 1px solid var(--linea); border-radius: var(--radio-g); }
.oficina h3 { font-size: 1.08rem; margin-bottom: .2em; }
.oficina__ciudad { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--acero-hondo); display: block; margin-bottom: .55rem; }
.oficina address { font-style: normal; color: var(--tinta-media); font-size: .95rem; line-height: 1.55; }
/* Objetivos tactiles de 44px: los telefonos y el enlace al mapa se tocan con
   el pulgar en el celular, que es desde donde llega la mitad del trafico. */
.oficina address a { display: flex; align-items: center; min-height: 44px; }
.oficina address br { display: none; }
.oficina__mapa { display: inline-flex; align-items: center; min-height: 44px; margin-top: .35rem; font-size: .9rem; font-weight: 600; text-decoration: none; }
.oficina__mapa::after { content: " →"; }

/* --- Formulario --------------------------------------------------------- */
.formulario { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .formulario__par { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }

.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-size: .88rem; font-weight: 600; color: var(--tinta); }
.campo .ayuda { font-size: .8rem; color: var(--tinta-suave); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  min-height: 48px;
  padding: .7rem .85rem;
  font: inherit; font-size: 1rem;
  color: var(--tinta);
  background: var(--nieve);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  width: 100%;
}
/* El area de texto crece con lo escrito donde el navegador lo soporta; donde
   no, se queda con la altura minima de siempre. */
.campo textarea { min-height: 128px; resize: vertical; line-height: 1.55; field-sizing: content; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-suave); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--morado); outline: 3px solid rgba(104, 37, 119, .22); outline-offset: 0; }
.campo--requerido label::after { content: " *"; color: var(--morado); }

.nota-legal { font-size: .83rem; color: var(--tinta-suave); line-height: 1.5; }
.campo-oscuro .nota-legal { color: var(--sobre-oscuro-tenue); }

/* --- Preguntas frecuentes ----------------------------------------------- */
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; min-height: 48px;
  font-weight: 600; font-size: 1.05rem; cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.3rem; color: var(--morado); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: 1.3rem; color: var(--tinta-media); font-size: .99rem; max-width: 68ch; }

/* --- Llamada final ------------------------------------------------------ */
.remate { text-align: center; }
.remate .entradilla { margin-inline: auto; }
.remate .botonera { justify-content: center; margin-top: 1.8rem; }

/* --- 10. Pie ------------------------------------------------------------ */
.pie { background: var(--morado-noche); color: var(--sobre-oscuro-tenue); font-size: .93rem; padding-block: clamp(3rem, 5vw, 4rem) 1.5rem; }
.pie a:not(.boton) { color: var(--pie-texto); text-decoration: none; }
.pie a:not(.boton):hover { color: #fff; text-decoration: underline; }
/* El pie es el unico sitio donde entra el lockup completo (cintas + nombre +
   descriptor). Va la version en blanco porque el fondo es morado noche: el
   lockup a color tiene el nombre en gris oscuro y ahi se pierde. */
.marca-pie { display: inline-block; margin-bottom: .35rem; }
.marca-pie img { width: 200px; height: auto; }
.pie h2, .pie h3 { color: #fff; font-size: .78rem; font-family: var(--mono); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1rem; }
.pie__rejilla { display: grid; gap: 2.25rem; }
@media (min-width: 720px) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .1rem; }
.pie li a { display: inline-flex; align-items: center; min-height: 44px; }
/* En el bloque de oficinas el <li> lleva la ciudad y la calle ademas del telefono. */
.pie li strong { display: block; color: #fff; font-weight: 600; }
.pie li strong + br { display: none; }
.pie__nota { max-width: 34ch; margin-top: 1rem; font-size: .88rem; line-height: 1.6; }
.pie__cierre {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  margin-top: 2.75rem; padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: .82rem; color: var(--pie-tenue);
}
.redes { display: flex; gap: .5rem; margin-top: 1.1rem; }
.redes a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radio);
}
.redes a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
.redes svg { width: 18px; height: 18px; fill: currentColor; }

/* --- WhatsApp flotante -------------------------------------------------- */
.flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.1rem;
  /* Verde de WhatsApp oscurecido hasta 4.97:1 con el blanco: el oficial
     (#25D366) no llega a AA y el texto del boton queda ilegible al sol. */
  background: var(--whatsapp); color: #fff;
  border-radius: 999px; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .45);
  font-size: .9rem; font-weight: 600; text-decoration: none;
}
.flotante:hover { background: var(--whatsapp-hondo); color: #fff; }
.flotante svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
@media (max-width: 480px) { .flotante span { display: none; } .flotante { padding: .8rem; border-radius: 50%; } }

/* --- 10 bis. Iconografia de marca --------------------------------------- */
/* El logotipo son dos cintas cruzadas, una morada y una azul. Cada icono
   repite esa gramatica: el sujeto en trazo azul (color de confianza) y una
   cinta morada que cruza por debajo. Los degradados se declaran una sola vez
   en el <svg> oculto que build.py pone al principio de cada <body>.
   El color suelto detras de la url() es el respaldo: si el degradado no
   estuviera, el trazo igual se pinta y el icono no desaparece. */
.defs-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico { display: block; width: 40px; height: 40px; flex: none; }
.ico__t, .ico__cinta { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ico__t     { stroke: url(#cinta-fria) #275f88;  stroke-width: 1.9; }
.ico__cinta { stroke: url(#cinta-calida) #682577; stroke-width: 2.5; }

/* --- Portada: la escena ------------------------------------------------- */
.escena__foto--flota { will-change: transform; }
.escena__ficha {
  /* will-change en la foto la promueve a su propia capa: sin position+z-index
     la ficha queda pintada por DEBAJO aunque venga despues en el marcado. */
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .85rem;
  margin: -2.25rem 1.25rem 0 auto; width: max-content; max-width: calc(100% - 2.5rem);
  padding: .85rem 1.25rem .85rem .9rem;
  background: var(--nieve); border-radius: var(--radio-g);
  box-shadow: var(--sombra-alta);
}
.escena__ficha-ico { display: flex; flex: none; }
.escena__ficha span span, .escena__ficha > span:last-child {
  font-size: .85rem; line-height: 1.35; color: var(--tinta-media);
}
.escena__ficha b { display: block; color: var(--tinta); font-size: .95rem; letter-spacing: -.015em; }

/* --- Propuesta de valor (los cuatro distintivos) ------------------------ */
.valores {
  list-style: none; margin: clamp(2.25rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.valor {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.2rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-g);
  font-size: .95rem; line-height: 1.4; color: var(--tinta);
  transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out;
}
.valor:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--linea-fuerte); }

/* --- Banda a sangre: una foto que ocupa todo el ancho -------------------- */
.banda { position: relative; isolation: isolate; overflow: hidden; display: grid; }
.banda__fondo {
  grid-area: 1 / 1;
  width: 100%; height: clamp(19rem, 34vw, 27rem);
  object-fit: cover; object-position: center 38%;
  z-index: -1;
}
.banda--corta .banda__fondo { height: clamp(13rem, 24vw, 19rem); object-position: center 72%; }
/* El velo garantiza el contraste del texto pase lo que pase con la foto.
   Las opacidades NO son a ojo: son el resultado de medir el pixel compuesto
   bajo la caja real de cada lema, a 390, 768, 1280 y 1440 px, contra el
   extremo mas oscuro del degradado del <em> (#c9a6d4), que es el texto con
   menos margen de toda la banda. Con .92/.72/.48 ese fragmento se quedaba en
   3,62:1 sobre la foto de recepcion. Con estas cifras el peor caso medido es
   5,14:1 para el <em> y 8,01:1 para el blanco.
   Si se cambia la foto de una banda hay que volver a medir: una foto mas
   clara en la mitad izquierda vuelve a hundir el numero. */
.banda::after {
  content: ""; grid-area: 1 / 1; z-index: -1;
  background: linear-gradient(100deg, rgba(36, 16, 43, .95) 0%, rgba(36, 16, 43, .84) 48%, rgba(39, 95, 136, .62) 100%);
}
.banda__dicho { grid-area: 1 / 1; align-self: center; }
.banda__lema {
  margin: 0; max-width: 22ch;
  font-size: clamp(1.6rem, 4.2vw, 2.7rem); font-weight: 600;
  line-height: 1.15; letter-spacing: -.03em; color: #fff;
}
.banda__lema em { font-style: normal; background: var(--lazo-claro); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- Mision y vision ---------------------------------------------------- */
.mv { display: grid; gap: 1.1rem; margin-top: 1.9rem; }
@media (min-width: 560px) { .mv { grid-template-columns: 1fr 1fr; } }
.mv__parte { padding-top: 1rem; border-top: 2px solid transparent; border-image: var(--lazo) 1; }
.mv__parte h3 {
  font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acero-hondo); margin-bottom: .55rem;
}
.mv__parte p { font-size: .95rem; color: var(--tinta-media); margin: 0; }

/* --- Clientes: la marquesina -------------------------------------------- */
.clientes { overflow: hidden; }
.clientes .rotulo { margin-bottom: 1.9rem; }
.marquesina { overflow: hidden; }
/* Los extremos se desvanecen para que los logos no aparezcan cortados de golpe. */
@supports (mask-image: linear-gradient(90deg, #000, #000)) {
  .marquesina {
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
}
.marquesina__par { display: flex; width: max-content; }
.marquesina__tira {
  display: flex; align-items: center; gap: 1rem;
  list-style: none; margin: 0; padding: 0 .5rem;
}
.cliente {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: 9.5rem; height: 5.5rem; padding: .7rem;
  background: var(--nieve); border: 1px solid var(--linea); border-radius: var(--radio-g);
}
.cliente img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  /* En reposo van en gris para que no compitan con la marca; al pasar el
     mouse recuperan su color. Ninguno se pierde: se verifico que los 35
     tengan marca oscura o placa de color, ninguno es blanco sobre blanco. */
  filter: grayscale(1); opacity: .74;
  transition: filter .25s ease-out, opacity .25s ease-out;
}
.cliente:hover img { filter: grayscale(0); opacity: 1; }

/* --- Reconocimientos: una pieza que se releva --------------------------- */
/* Ya no es una marquesina. Estas son piezas para LEER, y un texto que cruza
   la pantalla no se lee: se persigue. Ahora hay UNA pieza en su sitio y las
   cuatro se turnan con un fundido cruzado, sin desplazamiento.

   El estado por defecto —el que vale— es la rejilla de cuatro: sin
   animaciones, con movimiento reducido, o en cualquier navegador que no las
   ejecute, se ven los cuatro reconocimientos completos y quietos. El relevo
   se monta encima, y solo dentro de `prefers-reduced-motion: no-preference`
   (bloque 11). */
/* Dos columnas: el titular de la seccion a la izquierda, la pieza que se
   releva a la derecha. En movil (una sola columna) se apilan en el orden del
   marcado, o sea el texto primero. */
.premios__duo { display: grid; gap: clamp(2rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 860px) { .premios__duo { grid-template-columns: .92fr 1.08fr; } }
.premios__duo .cabeza-seccion { margin-bottom: 0; }

.relevo {
  list-style: none; margin: 0; padding: 0;
  max-width: 32rem;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 519px) { .relevo { grid-template-columns: minmax(0, 1fr); max-width: 22rem; } }
.relevo__pieza img {
  width: 100%; height: auto;
  /* Radio generoso y asimetrico, la misma gramatica que la foto de portada:
     una pieza con dos esquinas abiertas deja de leerse como un recorte
     pegado sobre el fondo. */
  border-radius: var(--radio-g) 2.25rem var(--radio-g) 2.25rem;
  background: var(--niebla);
  box-shadow: var(--halo);
}
/* El pie de la pieza NO compite con el titular de la izquierda: es letra
   chica, gris y colgada de una linea de marca, o sea claramente un pie de
   foto y no un segundo titulo. */
.relevo__pieza p {
  margin: .9rem 0 0; padding-top: .7rem;
  border-top: 2px solid transparent; border-image: var(--lazo) 1;
  font-size: .88rem; line-height: 1.5; color: var(--tinta-media);
}

/* --- Mapa de Bolivia ---------------------------------------------------- */
/* El contorno sale de Natural Earth (dominio publico), no de la mano de
   nadie: un mapa mal dibujado del propio pais, en el sitio de una empresa
   boliviana, es peor que no poner mapa.
   Dos trazos sobre la MISMA geometria: `base` esta siempre entero —es lo que
   se ve sin animaciones y con movimiento reducido— y `pulso` es el segmento
   que repasa el borde. Los colores sueltos son el respaldo de los degradados
   del <defs>, igual que en los iconos. */
/* Fondo blanco por encargo: el mapa quedo solo en su columna y la seccion ya
   es blanca (`bloque--nieve`), asi que la placa gris que tenia antes lo
   encajonaba sin necesidad. El contorno se sostiene solo. */
.mapa { margin: 0; padding: 1.6rem; background: var(--nieve); border-radius: var(--radio-g); }
.mapa__svg { width: 100%; max-width: 16rem; height: auto; margin-inline: auto; }
.mapa__base, .mapa__pulso { fill: none; stroke-linejoin: round; stroke-linecap: round; }
/* El SVG se dibuja a ~0,85 del tamano del viewBox: los grosores estan
   pensados en esa escala, no en la del viewBox. */
.mapa__base  { stroke: url(#cinta-fria) #275f88; stroke-width: 2.2; opacity: .5; }
.mapa__pulso { stroke: url(#cinta-calida) #682577; stroke-width: 4; }
.mapa__punto { fill: url(#cinta-calida) #682577; }
.mapa__ciudad {
  font-family: var(--mono); font-size: 14px; letter-spacing: .02em;
  fill: var(--tinta-media);
}

/* --- Video institucional ------------------------------------------------ */
/* `preload="none"` es lo unico que importa aca: sin el, los 4,72 MB del MP4
   viajan con la portada aunque nadie le de play. Con el, el navegador baja el
   poster (12,5 KB) y nada mas. */
.video {
  border-radius: var(--radio-g); overflow: hidden;
  box-shadow: var(--sombra-alta);
  background: var(--morado-noche);
}
.video__pieza { display: block; width: 100%; height: auto; }

/* --- Equipo: el carrusel ------------------------------------------------ */
.equipo__dicho { max-width: 60ch; margin-bottom: 1.9rem; }
/* El carrusel se mueve solo y se arrastra con el mouse (site.js). Tres cosas
   que estaban antes y tuvieron que irse porque pelean con eso:
     · `scroll-snap-type: x mandatory` frena en seco cada tarjeta y convierte
       la rotacion continua en un tirabuzon;
     · `scroll-behavior: smooth` anima CADA asignacion de scrollLeft, y la
       rotacion asigna una por fotograma;
     · la barra de scroll, que es la que el encargo llama tediosa. Se esconde
       porque ahora hay dos formas mejores de moverlo (arrastrar y esperar) y
       una tercera para el teclado (el contenedor es enfocable y responde a
       las flechas). El overflow horizontal vive SOLO aca dentro. */
.carrusel {
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-bottom: .9rem;
  scrollbar-width: none;
  cursor: grab;
  /* En tactil manda el gesto nativo del navegador: site.js no toca los
     punteros de tipo touch para no perder la inercia del dedo. */
  touch-action: pan-x;
  /* El gesto es del carrusel, no del navegador. Sin estas dos, al apretar
     sobre un retrato el navegador arranca su propio arrastre de imagen o
     pinta de azul los nueve nombres, y en los dos casos el carrusel pierde
     el gesto a la mitad. Van en el contenedor, que es donde viven los
     manejadores de puntero, para que el arrastre funcione desde CUALQUIER
     punto del bloque y no solo desde los huecos entre fotos. */
  user-select: none; -webkit-user-select: none;
  -webkit-user-drag: none;
}
/* -webkit-user-drag no se hereda: hay que nombrar a las imagenes. El
   draggable="false" del HTML cubre el resto de los navegadores. */
.carrusel img { -webkit-user-drag: none; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel.arrastrando { cursor: grabbing; }
.carrusel:focus-visible { outline: 3px solid var(--acero-hondo); outline-offset: 4px; border-radius: var(--radio-g); }
.carrusel__par { display: flex; width: max-content; gap: 1.15rem; }
.tira {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 15rem;
  gap: 1.15rem;
}
/* El ancho de la tarjeta en pantalla chica se decide en el bloque 10 ter. */
.retrato { transition: transform .24s ease-out; }
.retrato img { transition: box-shadow .24s ease-out; }
.retrato:hover { transform: translateY(-4px); }
.retrato:hover img { box-shadow: var(--sombra); }

/* --- Cierre ------------------------------------------------------------- */
.cierre { text-align: initial; }
.cierre__cabeza { max-width: 62ch; margin-inline: auto; text-align: center; margin-bottom: clamp(2.25rem, 4vw, 3rem); }
.cierre__cabeza h2 { max-width: 22ch; margin-inline: auto; }
.cierre__cabeza .entradilla { margin-inline: auto; }
.cierre__remate { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cierre__remate .entradilla { margin-inline: auto; max-width: 46ch; }
.botonera--centro { justify-content: center; }
/* Las tarjetas de oficina viven aca sobre fondo oscuro. */
.campo-oscuro .oficina { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
.campo-oscuro .oficina address { color: var(--sobre-oscuro); }
.campo-oscuro .oficina__ciudad { color: var(--acero-claro); }

.foto-marco--alto img { width: 100%; height: auto; display: block; }
.foto-marco img { width: 100%; height: auto; display: block; }

/* --- 10 ter. Movil ------------------------------------------------------ */
/* Vale SOLO en pantalla chica; el escritorio no se toca. Nada se borra: se
   agranda, se separa o se reordena. Cada numero sale de medir la pagina en
   320 / 360 / 390 / 414 / 768 px (medir.py), no de mirarla:

   · cuerpo por debajo de 16 px (.96rem = 15,4 en la tarjeta de servicio,
     .97rem = 15,5 en el paso, .95rem = 15,2 en la direccion). Suben a 1rem.
     NO suben los rotulos mono, el cargo del retrato, la miga ni el pie de la
     pieza de reconocimiento: son etiquetas y pies de foto, y a 16 px
     competirian con el titular que tienen al lado.
   · retratos del equipo: a 390 px se veian 2 tarjetas cortadas (200 sobre
     375 = 51%). Pasan a 74vw: una entera y una astilla de la siguiente.
   · logotipos de clientes: la banda medía 88 px de alto con tarjetas de 152;
     baja a 76 con tarjetas de 128.
   · enlaces del pie separados 1,6 px; suben a 8.
   · "Ver en Google Maps" a 5,6 px del telefono de su tarjeta; sube a 12. */
/* El cuerpo de texto llega hasta la tablet en vertical (768 px entra aca): el
   umbral de 16 px se mide en los mismos anchos en los que se lee con el
   telefono en la mano. 860 px es el corte donde el sitio pasa a dos columnas
   (`.duo`), asi que es el limite natural de "pantalla angosta". */
@media (max-width: 859px) {
  .ficha p, .paso p, .panel p, .faq details > div,
  .lista-marca li, .lista-marca--densa li, .exigencias li, .valor,
  .oficina address, .mv__parte p, .sectores__lista span,
  .nota-legal, .pie__nota, .cifra__que { font-size: 1rem; }
}

@media (max-width: 640px) {
  /* Una tarjeta de equipo por pantalla, no tres cortadas. La astilla de la
     siguiente se deja a proposito: es lo unico que dice que se arrastra,
     ahora que el rotulo "Arrastre para ver al equipo" ya no esta. El clamp
     tiene las dos puntas por una razon: el techo (17rem) evita que a 600 px
     la tarjeta se coma la fila entera, y el piso (11,5rem) evita que a 320 px
     quede tan chica que vuelvan a verse dos. */
  .tira { grid-auto-columns: clamp(11.5rem, 72vw, 17rem); }

  /* La banda de 35 logos ocupaba demasiado. Tarjeta y alto mas chicos. */
  .cliente { width: 8rem; height: 4.75rem; padding: .55rem; }
  .marquesina__tira { gap: .75rem; }

  /* Separacion tactil: ocho pixeles limpios entre objetivos vecinos. */
  .pie li { margin-bottom: .5rem; }
  .oficina__mapa { margin-top: .75rem; }
}

/* --- 11. Movimiento ----------------------------------------------------- */
/* Regla de oro: el estado final y visible es el que vale por defecto.
   El estado oculto SOLO existe dentro de los fotogramas, y los fotogramas
   solo se aplican si el navegador tiene animaciones ligadas al scroll. Un
   navegador sin soporte (Firefox, hoy) y un visitante sin JavaScript ven la
   pagina entera, quieta. La animacion resta de una pagina correcta; nunca
   suma sobre una pagina rota. */
@keyframes surgir {
  from { opacity: 0; transform: translateY(1.75rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes trepar {
  from { transform: translateY(90%); }
  to   { transform: none; }
}
@keyframes avanzar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* La portada esta en pantalla desde el primer fotograma: una animacion ligada
   al scroll no se dispararia nunca. Por eso el hero se compone por tiempo. */
@keyframes entrar {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes flotar {
  from { transform: translateY(.45rem); }
  to   { transform: translateY(-.45rem); }
}
@keyframes derivar {
  from { transform: translate3d(-2%, 1%, 0) scale(1); }
  to   { transform: translate3d(3%, -2%, 0) scale(1.07); }
}
/* Marquesina de clientes. Se recorre media pasada: como las dos tiras son
   identicas, al terminar la primera la segunda esta exactamente donde
   empezo la primera y el bucle no salta. */
@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* La rafaga de la portada: deriva sin llegar a ser un parpadeo. */
@keyframes ondear {
  from { transform: translate3d(-5%, 2%, 0) rotate(-1deg); }
  to   { transform: translate3d(5%, -2%, 0) rotate(1deg); }
}
/* El relevo de los reconocimientos: UNA animacion de 4 x 5s = 20s para las
   cuatro piezas, cada una con un retardo negativo distinto (arranca la
   animacion ya empezada, asi que al cargar el ciclo ya esta repartido).
   Los retardos van 0 / -15s / -10s / -5s y no 0 / -5s / -10s / -15s: el
   retardo negativo ADELANTA, o sea que -5s pondria la segunda pieza al final
   de la cola. Con estos numeros el orden que se ve es el del marcado.
   El cruce dura 0,6 s (22% -> 25%): mas corto se lee como un corte, mas largo
   deja las dos piezas visibles a la vez demasiado tiempo. */
@keyframes relevar {
  0%   { opacity: 1; }
  22%  { opacity: 1; }
  25%  { opacity: 0; }
  97%  { opacity: 0; }
  100% { opacity: 1; }
}
/* El contorno del mapa que se repasa. El dasharray va contra pathLength=1000,
   asi que "160" es el 16% del borde, mida lo que mida la geometria de verdad:
   se puede volver a simplificar el mapa sin tocar esta animacion. */
@keyframes repasar {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
/* El vaiven que el sitio viejo hacia con jquery.appear: el bloque sube al
   entrar y se va al salir. Un solo rango cubre toda la vida visible del
   elemento y los fotogramas reparten entrada y salida. */
@keyframes vaiven {
  0%   { opacity: 0; transform: translateY(1.5rem); }
  18%  { opacity: 1; transform: none; }
  82%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-1rem); }
}

@media (prefers-reduced-motion: no-preference) {
  /* --- Portada: se compone al cargar ------------------------------------ */
  .entra { animation: entrar .6s cubic-bezier(.22, .8, .3, 1) both; }
  .portada__dicho > .entra:nth-child(1) { animation-delay: .06s; }
  .portada__dicho > .entra:nth-child(2) { animation-delay: .14s; }
  .portada__dicho > .entra:nth-child(3) { animation-delay: .22s; }
  .portada__dicho > .entra:nth-child(4) { animation-delay: .30s; }
  .escena.entra { animation-delay: .18s; }

  /* Movimiento ambiental: la foto respira y el lavado de color deriva.
     Los dos son transform puro, o sea compositor: no reflow, no repintado. */
  .escena__foto--flota { animation: flotar 7s ease-in-out 1.2s infinite alternate; }
  .portada::before { animation: derivar 26s ease-in-out infinite alternate; }
  /* Toda animacion en bucle del sitio se detiene al pasar el mouse. Estas dos
     son decorativas y no tapan texto, pero la regla vale sin excepciones: una
     excepcion en el auditor se pudre, una regla absoluta no. */
  .escena:hover .escena__foto--flota { animation-play-state: paused; }
  .portada:hover::before { animation-play-state: paused; }

  /* La rafaga de la portada deriva muy lento sobre la foto. */
  .escena__foto::after { animation: ondear 24s ease-in-out infinite alternate; }
  .escena:hover .escena__foto::after { animation-play-state: paused; }

  /* La marquesina se detiene al pasar el mouse y al recibir el foco: si no
     para, leer un logo concreto es imposible y deja de ser accesible. */
  .marquesina__par { animation: desfilar 80s linear infinite; }
  .marquesina:hover .marquesina__par,
  .marquesina:focus-within .marquesina__par { animation-play-state: paused; }

  /* Reconocimientos: las cuatro piezas se apilan en la MISMA celda de la
     rejilla y se turnan en el sitio. La celda unica es lo que reserva el alto
     —el de la pieza mas alta— desde antes de que baje ninguna imagen: si cada
     una tuviera su celda y luego las superpusiera con position, la pagina
     pegaria un salto al cargar. */
  .relevo { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 32rem; }
  .relevo__pieza { grid-area: 1 / 1; animation: relevar 20s linear infinite; }
  .relevo__pieza:nth-child(2) { animation-delay: -15s; }
  .relevo__pieza:nth-child(3) { animation-delay: -10s; }
  .relevo__pieza:nth-child(4) { animation-delay: -5s; }
  /* Se detiene con el mouse y con el foco, como todo bucle del sitio: si no
     para, quedarse a leer un reconocimiento concreto es imposible. */
  .relevo:hover .relevo__pieza,
  .relevo:focus-within .relevo__pieza { animation-play-state: paused; }

  /* El mapa se repasa solo. La base ya esta dibujada entera por debajo, asi
     que en ningun fotograma hay "medio pais". */
  .mapa__pulso { stroke-dasharray: 160 840; animation: repasar 7s linear infinite; }
  .mapa:hover .mapa__pulso { animation-play-state: paused; }

  @supports (animation-timeline: view()) {
    /* El atajo `animation` reinicia animation-timeline y animation-range:
       por eso las dos propiedades largas van SIEMPRE despues. */
    .surge {
      animation: surgir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    /* La cifra sube desde debajo del filo del bloque. */
    .cifra__n > span, .cifra__n {
      animation: trepar cubic-bezier(.22, .8, .3, 1) both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }

    /* Escalonado: los hijos no entran a la vez, entran en cascada. El retardo
       no es tiempo sino recorrido — cada hijo empieza un poco mas adentro del
       viewport. Ocho como maximo: pasado eso los ultimos se sienten trabados. */
    .escalona > * {
      animation: surgir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 48%;
    }
    .escalona > :nth-child(2) { animation-range: entry 4%  entry 52%; }
    .escalona > :nth-child(3) { animation-range: entry 8%  entry 56%; }
    .escalona > :nth-child(4) { animation-range: entry 12% entry 60%; }
    .escalona > :nth-child(5) { animation-range: entry 16% entry 64%; }
    .escalona > :nth-child(6) { animation-range: entry 20% entry 68%; }
    .escalona > :nth-child(7) { animation-range: entry 24% entry 72%; }
    .escalona > :nth-child(n + 8) { animation-range: entry 28% entry 76%; }

    /* Vaiven: el rango va de la entrada a la salida completa, no solo a la
       entrada, y por eso el bloque tambien se despide al irse. */
    .vaiven > * {
      animation: vaiven linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    /* En movil el vaiven se apaga y queda solo la entrada. En una pantalla de
       640 px de alto un bloque como el de "¿Quiénes somos?" ocupa casi todo el
       viewport: empieza a irse —a bajar la opacidad— cuando todavia se esta
       leyendo. Medido a 360 px, el bloque pasa mas tiempo despidiendose que
       quieto. La entrada se queda; la despedida se va. */
    @media (max-width: 640px) {
      .vaiven > * { animation-name: surgir; animation-range: entry 0% entry 45%; }
    }
  }
  @supports (animation-timeline: scroll()) {
    .progreso {
      animation: avanzar linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* Sin movimiento: la marquesina no se anima, y entonces desfilar dejaria 27 de
   los 35 logos fuera de pantalla. Se convierte en una rejilla que envuelve, y
   la segunda tira (la copia decorativa del bucle) desaparece. */
@media (prefers-reduced-motion: reduce) {
  .marquesina { mask-image: none; -webkit-mask-image: none; overflow: visible; }
  .marquesina__par { width: auto; }
  .marquesina__tira { flex-wrap: wrap; justify-content: center; }
  .marquesina__tira[aria-hidden="true"] { display: none; }

  /* Los reconocimientos no necesitan nada aca: su estado por defecto YA es la
     rejilla de cuatro piezas quietas, y el relevo vive dentro del bloque de
     `no-preference`. Se anota para que nadie lo busque.

     El carrusel del equipo no rota (lo decide site.js leyendo la misma media
     query), asi que la segunda pasada seria la lista repetida a la vista.
     Para trastorno vestibular el movimiento perpetuo produce mareo real: esta
     es la unica excepcion que se mantiene a la rotacion permanente. */
  .carrusel .tira[aria-hidden="true"] { display: none; }

  /* El mapa aparece ya trazado y quieto: el pulso se queda sin dasharray, o
     sea dibujado entero, encima de la base. */
  .mapa__pulso { stroke-dasharray: none; }
}

/* --- 12. Impresion ------------------------------------------------------ */
@media print {
  .cabecera, .flotante, .redes, .botonera, .progreso { display: none; }
  body { background: #fff; font-size: 11pt; }
  .portada, .campo-oscuro, .pie { background: #fff !important; color: #000 !important; }
  .portada h1, .campo-oscuro h2, .campo-oscuro p, .portada .entradilla { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}