/* ==========================================================================
   Promowatch — página de inicio
   Colores: manual de marca §06. Contrastes verificados en §12 del skill.
   Cero peticiones a dominios ajenos.
   ========================================================================== */

:root {
  /* Marca — manual §06 */
  --pw-negro:            #050505;
  --pw-blanco:           #FFFFFF;
  --pw-rojo:             #E10600;
  --pw-verde:            #008C45;
  --pw-verde-oscuro:     #00703A;
  --pw-azul-noche:       #061628;
  --pw-naranja-logotipo: #DC8027;   /* uso exclusivo: logotipo */

  /* Superficies */
  --sup-clara:   #FFFFFF;
  --sup-clara-2: #F4F4F2;
  --sup-oscura:  #050505;
  --sup-noche:   #061628;

  /* Texto — ratios en §12 del skill */
  --txt-sobre-claro:    #050505;
  --txt-2-sobre-claro:  #555555;   /* 7.46:1 */
  --txt-sobre-oscuro:   #FFFFFF;
  --txt-2-sobre-oscuro: #BBC6D0;   /* 10.49:1 sobre azul noche */

  --linea-clara:  #E0E0DD;
  --linea-oscura: #1E2A38;
  --linea-negro:  #141414;

  /* Franja del recorrido. El fondo lo fijó Diego; la línea reutiliza --pw-rojo. */
  --sup-recorrido:    #444545;
  --recorrido-linea:  2px;

  /* Altura compartida por la franja del recorrido y la franja de video.
     Calibrada sobre la altura real medida de .recorrido el 2026-09-02:
     768→633, 1024→645, 1152→650, 1280→634, 1440→681, 1600→764, 1920→797.
     La curva nunca queda por debajo de esos valores, así que .recorrido
     conserva íntegro su contenido y ninguna etapa se recorta. */
  --altura-franja-destacada: clamp(650px, 47.75vw, 797px);
  --franja-video-movil:      clamp(280px, 62vw, 460px);

  /* Sección Tissot. El contador dejó de ir dentro del dibujo y ahora es un
     recuadro propio: fondo --sup-oscura, el mismo de la franja, contorno rojo
     institucional atenuado y un resplandor corto bajo los dígitos. Ninguno de
     los dos es un color nuevo: los dos son --pw-rojo con alfa. */
  --tissot-marco:  rgba(225, 6, 0, .55);
  --tissot-brillo: rgba(225, 6, 0, .45);

  /* Velo de la esquina inferior derecha de la portada. Existe sólo para que el
     lema se lea: medida, esa zona de Portada.png tiene una luminancia media de
     0.59 —la libreta— con píxeles oscuros mezclados, así que ni el blanco
     (1.65:1) ni el negro (1.03:1 en el peor píxel) llegaban solos. El radial
     se apaga antes del reloj, cuya caja termina en x 59.2 %. */
  --heroe-velo: radial-gradient(55% 75% at 100% 100%,
      rgba(5, 5, 5, .82)  0%,
      rgba(5, 5, 5, .58) 30%,
      rgba(5, 5, 5, .24) 52%,
      rgba(5, 5, 5, 0)   72%);

  /* Altura de la barra: 62 px de contenido más 1 de borde; sube a 72 + 1 desde
     768 px. De ella salen el scroll-margin de las anclas y el tope del panel
     móvil, para que ningún título quede debajo de la barra al saltar. */
  --nav-alto: 63px;

  /* Megamenú de marcas. Superficie propia sobre negro, con la línea roja de la
     barra como remate inferior. Ninguno es un color nuevo. */
  --mega-fondo:  #0A0A0A;
  --mega-linea:  rgba(255, 255, 255, .10);
  --mega-hover:  rgba(255, 255, 255, .06);

  /* Franja de clientes. Tamaños fijos por punto de ruptura, no clamp: la
     duración del carrusel se calcula a partir de ellos y debe ser exacta.
     El radio reproduce la proporción del marco de Bansí —28.71 sobre 256.65 de
     alto, un 11.19 %— aplicada a la altura del recuadro. */
  /* Los dos tamaños que definen el paso del carrusel se declaran sin unidad
     para poder usarlos dos veces: como longitud y como número dentro del
     cálculo de la duración. Así la duración deja de ser una constante escrita
     a mano que puede quedarse obsoleta si alguien cambia un ancho. */
  --cliente-ancho-n:   165;
  --clientes-hueco-n:   14;
  --cliente-ancho:    calc(var(--cliente-ancho-n) * 1px);
  --clientes-hueco:   calc(var(--clientes-hueco-n) * 1px);
  --cliente-alto:      82px;
  --cliente-pad:       15px;
  /* Topes del dibujo: 75 % del ancho de la tarjeta y 60 % de su alto. Antes el
     alto salía de restar borde y relleno, así que el logotipo llegaba justo al
     borde del relleno; ahora se queda por dentro y nunca roza el contorno. */
  --cliente-logo-ancho: 124px;  /* 75 % de 165 */
  --cliente-logo-alto:   49px;  /* 60 % de 82  */
  /* Radio fijo: la proporción del marco de Bansí daba 9 px a esta altura y se
     pedían 12–14. */
  --cliente-radio:     12px;
  /* Velocidad efectiva aprobada. La duración se deduce de ella y del recorrido
     real de una secuencia: doce tarjetas más doce huecos, que es exactamente
     lo que mide la pista de borde a borde y lo que recorre translateX(-100%). */
  --clientes-logotipos: 12;
  --clientes-velocidad: 72.3;   /* px/s */
  --clientes-vuelta: calc(
      var(--clientes-logotipos) * (var(--cliente-ancho-n) + var(--clientes-hueco-n))
      / var(--clientes-velocidad) * 1s);
  --etapas-hueco:     28px;
  --circulo:          40px;
  --circulo-final:    48px;
  --circulo-caja:     48px;   /* divisiones dentro de superficies negras */
  --sup-carbon:   #141414;   /* mismo tono, como superficie de tarjeta sobre negro */

  /* Línea de corte de los métodos: blanco del manual rebajado, no un color nuevo */
  --corte-linea:  rgba(255,255,255,.42);
  /* Negro exacto que traen horneado los siete diagramas. No es un color de
     marca ni se usa como superficie: existe sólo para que el margen interior
     del recuadro de corte no se distinga del fondo de la propia imagen. */
  --negro-diagrama: #000000;
  --metodos-hueco: 18px;
  /* Margen técnico de la franja de métodos. No es un margen de composición:
     es lo mínimo para que el borde de la tarjeta y el anillo de foco no se
     corten contra el filo de la ventana. */
  --metodos-orilla:     16px;   /* móvil; sube a 36 px desde 768 */
  --metodos-orilla-btn: 16px;   /* los controles se alinean con la pista */
  --capsula-hueco:      10px;
  --capsula-pad:        20px;
  /* Contorno gris de la cápsula: blanco del manual rebajado, mismo criterio
     que --corte-linea. No es un color nuevo. */
  /* La cápsula es negra sobre fondo negro: el contorno es lo único que la
     separa, así que sube a .45 para dar 3.7:1, el umbral de componente. */
  --capsula-borde:      rgba(255,255,255,.45);
  --capsula-borde-vivo: rgba(255,255,255,.70);

  --rojo-pulsado:   #C10500;  /* sombra de --pw-rojo, sólo para :hover */
  --blanco-pulsado: #E8E8E4;  /* sombra de --pw-blanco, sólo para :hover */

  /* Degradado del héroe. Sombras derivadas de --pw-rojo; no se aclara por
     encima de #E10600 porque el texto blanco caería a 3.75:1 y reprobaría AA.
     PENDIENTE de aprobación: el manual §06 reserva el rojo a la acción. */
  --vineta-lado: 5%;         /* ancho de la viñeta lateral; crece en escritorio */
  --rojo-nucleo: #E10600;
  --rojo-medio:  #B20500;
  --rojo-borde:  #4A0302;

  /* Tipografía. Barlow Condensed aún no está auto-hospedada: hasta que se
     autorice el .woff2 sólo se usa si el equipo del visitante ya la tiene. */
  /* ---- Escala tipográfica única de la página ---- */
  /* Los coeficientes vw están calibrados para que 1440 px —el escritorio más
     común— caiga en el centro de cada rango y no en su suelo. */
  /* Escala fijada por Diego el 2026-09-04. Valores exactos, sin clamp: pidió
     los mismos tamaños en escritorio y en móvil.
     DIVERGENCIA DECLARADA frente al manual §07, que fija los títulos de sección
     en 35–44 pt y el cuerpo en 16–20 pt. No es un descuido: es su instrucción.
     Ver las tres consecuencias de contraste anotadas en la respuesta. */
  --t-especial:   clamp(2rem, 3.8vw, 3rem);            /* 32 → 48 · cierre */
  --t-h1:         var(--t-especial);
  --t-h2:         clamp(1.75rem, 3.2vw, 2.5rem);       /* 28 → 40 · título de sección */
  --t-subtitulo:  clamp(1.125rem, 1.7vw, 1.25rem);     /* 18 → 20 · título secundario */
  --t-h3:         1rem;                                /* 16 · título de tarjeta */
  --t-intro:      clamp(0.9375rem, 1.3vw, 1rem);       /* 15 → 16 · entradilla */
  --t-destacado:  var(--t-intro);
  --t-base:       0.875rem;                            /* 14 · texto informativo */
  --t-secundario: 0.8125rem;                           /* 13 · texto breve de tarjeta */
  --t-antetitulo: clamp(0.6875rem, 0.9vw, 0.75rem);    /* 11 → 12 · etiqueta */
  --t-etiqueta:   var(--t-antetitulo);
  /* Los indicadores 01/02/03 van en rojo sobre negro, que da 4.10:1. A partir
     de 19 px en negrita cuentan como texto grande y ahí el umbral es 3:1, así
     que este suelo no es estético: es lo que los mantiene conformes. */
  --t-indicador:  clamp(1.1875rem, 1.7vw, 1.25rem);    /* 19 → 20 */
  --t-nav:        clamp(0.75rem, 0.95vw, 0.875rem);    /* 12 → 14 · navegación */
  --t-boton:      var(--t-nav);                        /* 12 → 14 · botones */
  --t-pie:        0.6875rem;                           /* 11 · auxiliar, mínimo */

  /* Interlineados de la escala */
  --li-especial:   1.12;
  --li-titulo:     1.15;
  --li-subtitulo:  1.25;
  --li-tarjeta:    1.25;
  --li-intro:      1.6;
  --li-normal:     1.55;
  --li-pequeno:    1.5;
  --li-etiqueta:   1.6;

  --f-titulo: "Barlow Condensed", "Avenir Next Condensed", "Arial Narrow",
              system-ui, -apple-system, sans-serif;
  --f-texto:  system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  /* Monoespaciada del sistema: el proyecto no tiene tipografía digital y no
     se descarga ninguna. */
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;

  /* Franja de marcas. Todos los recuadros miden igual; dentro de cada uno el
     logotipo se muestra completo con object-fit: contain. */
  --marcas-caja-ancho:  86px;
  --marcas-caja-alto:   86px;
  --marcas-hueco:       50px;
  --marcas-vuelta:      62s;   /* ≈72 px/s: continuo pero sin prisa */

  /* Sección «Reconocer transforma». El guion y la separación son los mismos
     que usa .metodo__corte, para que el recorte se lea igual en las dos
     secciones; lo que cambia es el color —rojo del manual en lugar de blanco
     rebajado— y las esquinas redondeadas.
     900 + 28 + 500 = 1428, que es la composición completa que pidió Diego. */
  --recon-ancho:     1428px;
  --recon-hueco:       28px;
  --recon-alto:       690px;
  --recon-radio:       16px;
  --recon-guion:        5px;   /* igual que --guion de .metodo__corte */
  --recon-sep:          4px;   /* igual que --separacion de .metodo__corte */
  --recon-pad:       clamp(22px, 2.5vw, 36px);
  --recon-pad-abajo: clamp(22px, 2.1vw, 30px);   /* holgura inferior del panel */
  --recon-t-titulo:  var(--t-h2);          /* título de sección: 28 → 40 */
  --recon-t-intro:   var(--t-intro);       /* entradilla: 15 → 16 */
  --recon-t-sub:     var(--t-subtitulo);   /* título secundario: 18 → 20 */
  /* El número va en rojo sobre negro: 4.10:1. El skill §12 sólo lo admite a
     partir de 19 px en negrita, así que el suelo del clamp es 20 px con peso
     800 y nunca baja de ahí. */
  --recon-t-num:     var(--t-indicador);   /* indicador: 19 → 20 */
  --recon-t-razon:   var(--t-subtitulo);   /* encabezado de razón: 18 → 20 */
  --recon-t-cuerpo:  var(--t-base);        /* texto informativo: 14 */
  --recon-interlinea: 1.42;                             /* 1.35–1.45 */

  /* Franja «Casos de éxito» — el tendedero de historias.
     Reparto del rojo: el manual §06 pide que aparezca como decisión y no como
     relleno. Aquí lo llevan el contorno de la tarjeta y el botón de acción; las
     cuerdas y los broches quedan en gris para que la estructura no compita con
     el punto donde se pulsa. */
  --caso-ancho:       292px;
  --caso-alto:        310px;   /* la tarjeta es una sola pieza de alto fijo */

  /* Relleno de los márgenes y final del degradado: exactamente el fondo de la
     tarjeta, --sup-carbon #141414, para que no se distinga la unión. */
  --caso-velo-1:      rgba(20,20,20,.25);
  --caso-velo-2:      rgba(20,20,20,.90);
  --casos-hueco:       26px;
  --caso-radio:        14px;
  /* Alto del SVG de las cuerdas. Sobrepasa el borde superior de las tarjetas
     a propósito: la cuerda pasa por detrás de ellas —son opacas— y sólo se ve
     en los huecos, que es como se ve un tendedero real. */
  --casos-cuerdas-alto: 132px;
  --casos-cuelgue:       42px;   /* dónde arranca la tarjeta de la cuerda alta */
  --casos-cuelgue-2:     34px;   /* desnivel de las que cuelgan de la cuerda baja */
  /* La cuerda tuvo el mismo valor que --corte-linea (blanco al 42 %, 1 px).
     Medido en captura real quedaba en RGB 70 sobre el negro #050505: 2.09:1,
     invisible en pantalla de teléfono, porque al ser una curva el antialiasing
     reparte ese 42 % entre dos filas y ninguna llega al valor pleno. Se sube la
     opacidad y el grosor. Sigue siendo --pw-blanco rebajado, no un color nuevo,
     y sigue dentro de las «líneas delgadas» del manual §09. */
  --casos-cuerda:     rgba(255,255,255,.72);
  --casos-cuerda-gr:  1.6;
  /* Blanco del manual rebajado, igual criterio que --corte-linea: no es un
     color nuevo, es --pw-blanco con opacidad. */
  --broche-borde:     rgba(255,255,255,.58);
  --caso-marcador:    rgba(255,255,255,.05);
  --caso-sombra:      rgba(0,0,0,.55);

  /* Cotización. Ninguno es un color nuevo: son --pw-rojo y --pw-blanco con
     opacidad, mismo criterio que --corte-linea y --broche-borde. */
  --cotiza-sel:        rgba(225,6,0,.12);    /* fondo de la tarjeta elegida */
  --cotiza-tenue:      rgba(255,255,255,.07);
  --linea-negro-vivo:  rgba(255,255,255,.14);
  --ficha-borde:       rgba(255,255,255,.18);

  --casos-margen: 16px;   /* móvil; sube a 32–48 en escritorio */
  --margen:  24px;      /* móvil */
  --tope:    1280px;
  --z-vista: 1000;                  /* diálogo del caso ampliado, sobre todo lo demás */
  --vista-fondo: rgba(0,0,0,.86);   /* velo del diálogo: negro puro con opacidad */
  --z-enc:   100;
  --t:       160ms;     /* §16: 120–200 ms */
}

/* ==========================================================================
   Tema del dispositivo. En oscuro la superficie clara se vuelve negra y el
   azul noche toma el relevo de la secundaria, de modo que la alternancia de
   superficies del manual §10 se conserva en los dos temas.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --sup-clara:   #050505;
    --sup-clara-2: #061628;

    --txt-sobre-claro:   #FFFFFF;
    --txt-2-sobre-claro: #BBC6D0;

    --linea-clara:    #1E2A38;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;      /* barras de desplazamiento y controles nativos */
}

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--txt-sobre-claro);
  background: var(--sup-clara);
}

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

h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.1; margin: 0; }

p { margin: 0; }

a { color: inherit; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Saltar al contenido ---------- */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--pw-blanco); color: var(--pw-negro);
  padding: 12px 18px; font-weight: 700;
}
.saltar:focus { left: 0; }

/* Salto a un ancla: suave sólo si el usuario no ha pedido menos movimiento, y
   descontando la barra fija para que el encabezado de destino no quede debajo. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.ancla {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--nav-alto) + 8px);
}

/* ---------- Contenedor y retícula ---------- */
.caja {
  width: 100%; max-width: var(--tope);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* ---------- Botones — §19 del skill ---------- */
.btn {
  display: inline-block;
  font-family: var(--f-titulo);
  font-weight: 700; font-size: var(--t-boton);
  letter-spacing: .05em; text-transform: uppercase;
  padding: 15px 30px;                /* altura ≥48 px */
  border-radius: 2px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t) ease-out, color var(--t) ease-out;
}
.btn--primario  { background: var(--pw-rojo); color: var(--pw-blanco); }   /* 4.97:1 */
.btn--primario:hover { background: var(--rojo-pulsado); }
.btn--secundario-oscuro {
  background: transparent; color: var(--pw-blanco);
  border-color: rgba(255,255,255,.45);
}
.btn--secundario-oscuro:hover { background: rgba(255,255,255,.1); }
.btn--grande { font-size: var(--t-boton); padding: 17px 36px; }

/* Sobre superficie roja el botón no puede ser rojo. El blanco pasa a ser el
   elemento de acción: letra negra sobre blanco, 20.38:1. */
.btn--sobre-rojo { background: var(--pw-blanco); color: var(--pw-negro); }
.btn--sobre-rojo:hover { background: var(--blanco-pulsado); }

/* ---------- Anotaciones y títulos ---------- */
.anotacion {
  font-family: var(--f-titulo);
  font-size: var(--t-antetitulo); font-weight: 600;
  line-height: var(--li-etiqueta);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--txt-2-sobre-oscuro);
  margin-bottom: 14px;
}
.anotacion--oscura { color: var(--txt-2-sobre-claro); }

/* Línea de medición — recurso gráfico del manual §09 */
.anotacion::before {
  content: ""; display: inline-block;
  width: 28px; height: 1px; margin-right: 12px;
  vertical-align: middle;
  background: currentColor;
}

.titulo-seccion {
  font-size: var(--t-h2); font-weight: 700; line-height: var(--li-titulo);
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

.entrada {
  font-size: var(--t-intro); line-height: var(--li-intro);
  max-width: 62ch; color: var(--txt-2-sobre-claro); margin-bottom: 34px;
}

/* Variante para entradillas sobre superficie oscura. El HTML ya usaba esta
   clase pero la regla no existía, así que el párrafo caía a #555555 sobre
   negro: 2.73:1, por debajo de AA. */
.entrada--oscura { color: var(--txt-2-sobre-oscuro); }

/* ---------- Encabezado ---------- */

/* ---------- Barra superior ----------
   Las seis opciones son texto sin enlace: sin cursor pulsable, sin estados de
   hover que prometan una acción y fuera del recorrido de tabulación, porque un
   <span> no es enfocable. Se convertirán en <a> cuando existan sus destinos. */
.enc {
  background: var(--sup-oscura);
  position: sticky; top: 0; z-index: var(--z-enc);
  border-bottom: 1px solid var(--pw-rojo);
}

/* Sin max-width: la barra aprovecha el ancho completo y el logotipo se acerca
   al extremo izquierdo. */
.enc__caja {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 1.8vw, 32px);
  min-height: 62px;                  /* móvil; sube a 72 desde 768 px */
  padding: 8px clamp(16px, 2.2vw, 40px);
}

.enc__marca {
  display: flex; align-items: center;
  flex: none;
  min-height: 44px;                  /* área táctil mínima §18 */
  line-height: 0;
}
.enc__marca img { width: clamp(42px, 4vw, 58px); height: auto; }

/* Botón del menú compacto. Sólo se ve por debajo de 1024 px, que es donde las
   seis opciones dejan de caber en una fila. Cuadrado de 44 px: el área táctil
   mínima del §18. */
.enc__menu {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent;
  border: 1px solid var(--linea-negro-vivo);
  border-radius: 10px;
  color: var(--txt-sobre-oscuro);
  cursor: pointer;
}
.enc__menu:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 2px; }

/* Móvil: la lista sale del flujo y cuelga bajo la barra. .enc ya está
   posicionada —es sticky—, así que le sirve de referencia y el panel abarca el
   ancho completo del encabezado. Cerrado no se dibuja: display:none lo saca
   también del recorrido de tabulación, así que nada queda accesible fuera de
   la pantalla. */
.enc__nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--sup-oscura);
  border-bottom: 1px solid var(--pw-rojo);
  padding: 4px clamp(16px, 2.2vw, 40px) 12px;
  /* Con las 33 marcas desplegadas el panel supera la pantalla; se desplaza por
     dentro y nunca ensancha el documento. */
  max-height: calc(100svh - var(--nav-alto));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.enc__nav[data-abierto="true"] { display: block; }

.enc__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0;
}
.enc__lista li { flex: none; }

/* Enlaces y botón comparten aspecto: el botón se despoja de su apariencia
   nativa, pero sigue siendo un <button> y conserva su semántica y su teclado. */
.enc__opcion {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px;                  /* área táctil mínima §18 */
  font-family: var(--f-titulo); font-weight: 500;
  font-size: var(--t-nav);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt-sobre-oscuro);    /* 20.38:1 sobre #050505 */
  white-space: normal;               /* que envuelva antes que salirse */
  text-decoration: none;
  /* El <button> se despoja sólo de su apariencia nativa. Nada de font:inherit
     aquí: borraría la familia, el cuerpo, el interletrado y las mayúsculas que
     esta misma regla acaba de fijar, y la barra perdería su aspecto. */
  background: none; border: 0; padding: 0;
  cursor: pointer;
  position: relative;
}
.enc__opcion:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 3px; }

/* Estado activo: una línea roja debajo. No cambia el peso ni el tamaño, así que
   el ancho del comando es el mismo activo que inactivo y nada salta. */
.enc__opcion[aria-current="true"]::after,
.enc__opcion[aria-expanded="true"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px; background: var(--pw-rojo);
}
/* Punta que gira al abrir el megamenú. */
.enc__flecha {
  width: 0; height: 0; flex: none;
  border-inline: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--t) ease-out;
}
.enc__opcion[aria-expanded="true"] .enc__flecha { transform: rotate(180deg); }

/* ---------- Megamenú de marcas ---------- */
/* En teléfono es un bloque más dentro del menú desplegable; desde 1024 px pasa
   a colgar de la barra a todo el ancho. Cerrado usa visibility: hidden, no
   display: none, para que la transición exista y para que el lector de
   pantalla tampoco lo encuentre mientras está cerrado. */
.mega {
  visibility: hidden; opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--t) ease-out, transform var(--t) ease-out,
              visibility 0s linear var(--t);
  background: var(--mega-fondo);
  border-block: 1px solid var(--mega-linea);
  border-bottom-color: var(--pw-rojo);
  max-height: 0; overflow: hidden;
}
.mega[data-abierto="true"] {
  visibility: visible; opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
  max-height: min(70vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mega__caja { padding: 18px clamp(16px, 2.2vw, 40px) 22px; }
.mega__titulo {
  margin: 0 0 14px;
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-nav); letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-2-sobre-oscuro);
}
.mega__cuenta { color: var(--pw-rojo); }
.mega__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px 14px;
  grid-template-columns: 1fr;
}
.mega__item {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;                  /* área táctil mínima §18 */
  padding: 4px 8px;
  border-radius: 8px;
}
.mega__item:hover { background: var(--mega-hover); }
/* Miniatura de tamaño fijo: las proporciones de los archivos son muy distintas
   y contain las iguala sin recortar ni deformar ninguna.
   Los topes van en píxeles, no en porcentaje: los archivos son cuadrados de
   320 px y con max-height:100% el navegador no encontraba contra qué resolver
   ese porcentaje dentro de la rejilla, así que sólo limitaba el ancho. El
   dibujo salía a 56 × 56, desbordaba la caja 26 px hacia abajo y quedaba
   descolgado del nombre. Es el mismo tropiezo ya documentado en .cliente__logo. */
/* Caja cuadrada porque los archivos lo son: con una caja apaisada el alto
   seguiría mandando y el ancho sobrante no lo aprovecharía ningún logotipo. */
.mega__logo {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
}
.mega__logo img {
  max-width: 44px; max-height: 44px;
  width: auto; height: auto;
  object-fit: contain;
}
.mega__nombre {
  font-size: var(--t-base);
  color: var(--txt-sobre-oscuro);
  line-height: var(--li-pequeno);
}

/* ---------- Héroe ---------- */
/* ---------- Portada ----------
   Sólo la fotografía. Ninguna capa encima: sin título, sin botones, sin grano,
   sin degradado, sin máscara y sin pseudoelementos. Los tokens --rojo-nucleo,
   --rojo-medio, --rojo-borde y --vineta-lado siguen sin uso, conservados por
   si algún día se quiere revertir a la portada con degradado.

   Un solo tratamiento para todos los tamaños: la fotografía entera, a todo el
   ancho menos dos márgenes negros simétricos, y la altura la fija su propia
   relación. No hay altura, ni proporción impuesta, ni recorte, ni versión
   vertical de móvil. La línea roja superior es el borde inferior de .enc y no
   se toca; la foto arranca pegada a ella. */
/* De borde a borde del viewport: sin margen, sin relleno y sin ancho máximo en
   ninguno de los tres niveles. El max-width:none de la imagen es necesario
   porque la hoja global impone img{max-width:100%}.

   Teléfono —hasta 767 px—: bloque alto de 390 / 440. No existe versión
   vertical de la portada; los cuatro archivos Portada* son horizontales, así
   que se usa el mismo original recortado con cover. El recorte sale entero de
   los lados: a esa proporción se ve el 49.87 % del ancho del archivo. Centrar
   en la esfera daría 49.7 %, pero a ese valor la punta del brazalete rozaba el
   borde; con 46 % el reloj entra completo y sigue sobrando aire por los dos
   lados. Escritorio: la fotografía horizontal entera, sin recorte. */
.heroe {
  display: block;
  position: relative;            /* referencia del velo y del lema */
  width: 100%; max-width: none;
  margin: 0; padding: 0; border: 0;
  aspect-ratio: 390 / 440;       /* móvil: bloque alto, sin altura fija */
  background: var(--pw-negro);   /* sólo el color de fondo mientras carga */
  line-height: 0;                /* sin hueco por debajo de la imagen */
}
.heroe picture {
  display: block;
  width: 100%; max-width: none;
  height: 100%;
  margin: 0; padding: 0;
}
/* Velo y lema. El velo va detrás del texto y se apaga antes de llegar al
   reloj; el lema es el único contenido que se superpone a la fotografía. */
.heroe::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--heroe-velo);
  pointer-events: none;
}
.heroe__lema {
  position: absolute;
  right: clamp(18px, 3.4vw, 60px);
  bottom: clamp(14px, 3vw, 48px);
  z-index: 1;                    /* por encima del velo */
  margin: 0;
  text-align: right;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 50px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--txt-sobre-oscuro);
}

.heroe__foto {
  display: block;
  width: 100%; max-width: none;
  height: 100%;                  /* llena el bloque: sin franjas interiores */
  margin: 0; padding: 0;
  object-fit: cover;
  object-position: 46% 50%;      /* el reloj completo dentro del recorte */
}

/* ---------- Aviso de privacidad ----------
   Página aparte, no una ventana modal: se puede enlazar, imprimir y leer entera.
   Columna de lectura contenida; el resto de la identidad es la de siempre. */
.aviso {
  background: var(--sup-oscura);
  color: var(--txt-sobre-oscuro);
  padding-block: clamp(28px, 5vw, 64px) clamp(40px, 7vw, 96px);
}
.aviso__caja {
  width: min(100% - 2 * clamp(16px, 5vw, 48px), 900px);
  margin-inline: auto;
}
.aviso__titulo {
  font-size: var(--t-h1);
  font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
  margin: 10px 0 6px;
}
.aviso__punto { color: var(--pw-rojo); }
.aviso__fecha {
  margin: 0 0 26px;
  font-size: var(--t-pie); color: var(--txt-2-sobre-oscuro);
}

/* Marca de dato sin confirmar. Se ve a la primera y no se confunde con el texto
   legal: es lo que impide publicar el aviso tal cual. */
.pendiente {
  color: var(--pw-rojo);
  font-weight: 700;
  border-bottom: 1px dashed var(--pw-rojo);
}
.aviso__alerta {
  border: 1px dashed var(--pw-rojo);
  border-radius: 12px;
  padding: clamp(14px, 2.4vw, 20px);
  margin-bottom: 30px;
  background: var(--cotiza-sel);
}
.aviso__alerta p { margin: 0; font-size: var(--t-base); line-height: var(--li-normal); }

.aviso__indice {
  border: 1px solid var(--linea-negro-vivo);
  border-radius: 12px;
  padding: clamp(16px, 2.6vw, 24px);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.aviso__indice-titulo {
  margin: 0 0 12px;
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-nav); letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-2-sobre-oscuro);
}
.aviso__indice-lista {
  margin: 0; padding-left: 1.4em;
  display: grid; gap: 6px;
  color: var(--pw-rojo);                     /* la numeración, en rojo */
}
.aviso__indice-lista li { padding-left: 4px; }
.aviso__indice-lista a {
  color: var(--txt-sobre-oscuro);
  text-decoration: none;
  border-bottom: 1px solid var(--pw-rojo);
}
.aviso__indice-lista a:hover { color: var(--pw-rojo); }
.aviso__indice-lista a:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 3px; }

.aviso__bloque {
  border-top: 1px dashed var(--linea-negro-vivo);
  padding-top: clamp(20px, 3vw, 30px);
  margin-bottom: clamp(20px, 3vw, 30px);
  scroll-margin-top: calc(var(--nav-alto) + 12px);
}
.aviso__h2 {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--t-h3); font-weight: 700; line-height: var(--li-tarjeta);
  margin: 0 0 12px;
}
.aviso__num { color: var(--pw-rojo); font-variant-numeric: tabular-nums; }
.aviso__bloque p, .aviso__lista {
  font-size: var(--t-base); line-height: var(--li-normal);
  margin: 0 0 12px; max-width: 68ch;
}
.aviso__lista { padding-left: 1.2em; }
.aviso__lista li { margin-bottom: 6px; }
.aviso__nota {
  font-size: var(--t-pie);
  color: var(--txt-2-sobre-oscuro);
  line-height: var(--li-pequeno);
}
.aviso__volver { margin: clamp(28px, 4vw, 44px) 0 0; }

/* Enlaces dentro del cuerpo del aviso: correo, teléfono y WhatsApp.
   La regla global `a { color: inherit }` los dejaría idénticos al texto, así que
   se distinguen por SUBRAYADO y no por color; el texto sigue en blanco sobre
   negro (20.38:1) y no depende de la percepción cromática (§5.1 y §17).
   Al pasar el puntero cambia el color del subrayado, no el del texto: el rojo
   sobre negro da 4.10:1 y no es apto para texto de tamaño normal (§12). */
.aviso__bloque a,
.aviso__alerta a {
  color: var(--txt-sobre-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.aviso__bloque a:hover,
.aviso__alerta a:hover {
  text-decoration-color: var(--pw-rojo);
  text-decoration-thickness: 2px;
}
.aviso__bloque a:focus-visible,
.aviso__alerta a:focus-visible {
  outline: 2px solid var(--txt-sobre-oscuro);
  outline-offset: 3px;
}

/* ---------- Franja de marcas ----------
   Carrusel continuo. Informativa: sin enlaces, botones ni acción al pulsar.
   El bucle se cierra con dos pistas idénticas: la animación recorre el ancho
   de una y vuelve a 0, de modo que no hay salto ni hueco visible.
   Nota: ninguna imagen lleva loading="lazy". La pista se desplaza con
   transform, que no dispara la carga diferida, y medido en navegador dejaba
   recuadros vacíos en pantalla. La copia comparte las mismas URL que la pista
   real, así que sale de la caché y no añade ni una petición. */
.marcas-franja {
  background: var(--sup-oscura);
  /* La franja es negra en los dos temas, así que fija su propio color de texto:
     de él sale el contorno de foco, que sobre negro debe ser blanco. */
  color: var(--txt-sobre-oscuro);
  padding-block: 20px;
  overflow: hidden;                  /* la pista nunca ensancha la página */
}

.marcas {
  display: flex;
  width: 100%;
  overflow-x: auto;                  /* arrastre manual en táctil y con ratón */
  overscroll-behavior-x: contain;
  scrollbar-width: none;             /* sin barra visible, como pide el diseño */
  -webkit-overflow-scrolling: touch;
}
.marcas::-webkit-scrollbar { display: none; }
.marcas:focus { outline: 2px solid currentColor; outline-offset: -3px; }

.marcas__pista {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  gap: var(--marcas-hueco);
  padding-right: var(--marcas-hueco); /* mismo hueco entre la pista y su copia */
  flex: 0 0 auto;
  animation: marcas-desliza var(--marcas-vuelta) linear infinite;
}

/* Recuadro cuadrado, del mismo tamaño para todas las marcas. Los 33 activos
   conservan el LIENZO COMPLETO de su archivo de origen —cuadrados de ~1324×1336
   con el logotipo ya encuadrado dentro—, escalado proporcionalmente a 320×320.
   No se recorta el margen ni se reescala ninguna marca: el tamaño relativo con
   el que cada logotipo aparece es el que trae su propio archivo. */
.marcas__item {
  flex: 0 0 var(--marcas-caja-ancho);
  height: var(--marcas-caja-alto);
  display: flex; align-items: center; justify-content: center;
}

/* El <picture> necesita altura propia: sin ella, el height:100% del <img> no
   tiene contra qué resolverse y el logotipo se dibuja a su tamaño intrínseco,
   desbordando el recuadro. Medido en navegador: Michael Kors salía a 128 px
   dentro de un recuadro de 56. */
.marcas__item picture { display: block; width: 100%; height: 100%; }

.marcas__logo {
  width: 100%; height: 100%;
  object-fit: contain;                /* completo, sin recorte ni deformación */
}

@keyframes marcas-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Pausa al pasar el cursor, al recibir foco y mientras se arrastra. */
.marcas:hover .marcas__pista,
.marcas:focus-within .marcas__pista,
.marcas:active .marcas__pista { animation-play-state: paused; }

/* ---------- Métodos de personalización ----------
   Carrusel de siete tarjetas. El desplazamiento es nativo con scroll-snap:
   funciona con el dedo y con teclado aunque el JavaScript no cargue; los
   controles vienen ocultos y sólo aparecen si el script los activa. */
/* ---------- Métodos de personalización ----------
   Franja clara de extremo a extremo. Nada va centrado: la etiqueta, el título,
   la entradilla, la primera cápsula y la primera tarjeta comparten la misma
   línea de arranque, que es --metodos-orilla. No se usa .caja porque su
   max-width de 1280 px centrado es justo lo que dejaba el hueco a la izquierda. */
/* Fondo negro, el mismo --sup-oscura (#050505) de las franjas contiguas. Antes
   usaba --sup-clara-2, que en tema oscuro se invierte a azul noche #061628 y
   dejaba una banda azul entre secciones negras. Con el token de superficie
   oscura el valor es idéntico en los dos temas y no hay salto de tono. */
.metodos {
  background: var(--sup-oscura);
  color: var(--txt-sobre-oscuro);
  padding-block: 36px 40px;
  overflow: hidden;
}
.metodos__caja {
  padding-inline: var(--metodos-orilla);
  margin-bottom: 36px;                    /* separación entradilla → cápsulas */
}
/* Etiqueta: gris medio, caja mixta tal como está escrita, sin convertir a
   mayúsculas, y con el espaciado entre letras algo abierto. */
.metodos__etiqueta {
  font-family: var(--f-texto);
  font-size: var(--t-antetitulo); font-weight: 500;
  letter-spacing: .12em; line-height: var(--li-etiqueta);
  color: var(--txt-2-sobre-oscuro);
  margin: 0 0 28px;
}
.metodos__titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-h2); font-weight: 700; line-height: var(--li-titulo);
  color: var(--txt-sobre-oscuro);
  margin: 0 0 18px;
}
.metodos__entrada {
  font-size: var(--t-intro); line-height: var(--li-intro);
  color: var(--txt-2-sobre-oscuro);
  max-width: 62ch;                        /* la entradilla no cruza la pantalla */
  margin: 0;
}

/* Fila de cápsulas: mismo filo que la pista, para que la primera cápsula
   arranque donde arranca la primera tarjeta. */
.metodos__barra { padding-inline: var(--metodos-orilla); }

/* Una sola línea siempre: si las siete no caben, la fila se desplaza en lugar
   de partirse en dos renglones. */
.metodos__selectores {
  display: flex; gap: var(--capsula-hueco);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  flex-wrap: nowrap;
  margin-bottom: 28px;
  padding-block: 2px;                     /* sitio para el anillo de foco */
}
.metodos__selectores::-webkit-scrollbar { display: none; }

/* Cápsula: fondo negro, texto claro y un contorno gris discreto. No crece ni
   encoge, así que todas miden lo mismo y el estado activo no las mueve. */
.metodos__sel {
  position: relative;
  flex: 0 0 auto;
  background: var(--pw-negro);
  border: 1px solid var(--capsula-borde);
  border-radius: 999px;                   /* completamente redondeada */
  color: var(--txt-sobre-oscuro);
  font-family: var(--f-titulo); font-size: var(--t-boton); font-weight: 600;
  letter-spacing: .04em;
  padding: 10px var(--capsula-pad) 14px;  /* el relleno inferior deja sitio a la línea */
  min-height: 44px;                       /* área táctil del §18 */
  white-space: nowrap; text-align: center;
  cursor: pointer;
  transition: color var(--t) ease-out, border-color var(--t) ease-out;
}
/* Activa: mismo fondo y mismo tamaño —no se mueve nada—, texto y contorno en
   rojo, más una línea roja corta dentro de la cápsula, bajo el texto y sin
   tocar el borde. El estado no depende del color: lleva aria-current. */
.metodos__sel[aria-current="true"] {
  color: var(--pw-rojo);
  border-color: var(--pw-rojo);
}
.metodos__sel[aria-current="true"]::after {
  content: "";
  position: absolute; left: 50%; bottom: 7px;
  width: 20px; height: 2px;
  transform: translateX(-50%);
  background: var(--pw-rojo);
}
.metodos__sel:hover { border-color: var(--capsula-borde-vivo); }
.metodos__sel:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 2px; }

/* Pista. El relleno lateral se alinea con .caja en cualquier ancho. */
.metodos__marco {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Antes el relleno se alineaba con .caja —115 px a 1440— y dejaba la primera
     tarjeta muy adentro. El marco ya ocupaba todo el ancho de la ventana, así
     que no hace falta ninguna maniobra de ancho completo: basta con reducir
     este relleno al margen técnico. Meterle 100vw con márgenes negativos
     duplicaría el desplazamiento y rompería la alineación. */
  padding-inline: var(--metodos-orilla);
  scroll-padding-inline: var(--metodos-orilla);
}
.metodos__marco::-webkit-scrollbar { display: none; }
/* Mientras el script anima el desplazamiento se libera el anclaje: con
   scroll-snap-type activo, Chrome cancela cualquier scroll suave programático
   y el carrusel se quedaba clavado en la primera tarjeta. Al terminar vuelve. */
.metodos__marco.esta-animando { scroll-snap-type: none; }
.metodos__marco:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: -3px; }

.metodos__pista {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--metodos-hueco);
  align-items: stretch;
}
/* Una tarjeta y una fracción de la siguiente: el divisor con decimal deja
   siempre a la vista el arranque de la que sigue, en cualquier ancho. */
.metodo {
  flex: 0 0 calc((100% - var(--metodos-hueco)) / 1.2);
  scroll-snap-align: start;
  display: flex;
}
/* Estuche se ancla por su borde derecho. Así llega a verse completo al final
   sin tener que añadir un hueco vacío del ancho de la pista después de él.
   El espacio final lo aporta un elemento vacío al terminar la pista. Ni el
   relleno derecho del marco ni un margen en la última tarjeta entran en el
   área desplazable —medido: el recorrido se quedaba 16 px corto y Estuche
   acababa pegado al filo—, pero un elemento flex más sí cuenta. */
.metodo:last-child { scroll-snap-align: start end; }
.metodos__pista::after {
  content: "";
  flex: 0 0 var(--metodos-orilla);
}

.metodo__tarjeta {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  background: var(--sup-carbon);
  /* La franja pasó a superficie clara, así que la tarjeta —que sigue siendo
     oscura— declara su propio color de texto en lugar de heredar el de la
     sección. Sin esto los títulos quedaban en negro sobre negro. */
  color: var(--txt-sobre-oscuro);
  border: 1px solid var(--linea-negro);
  padding: 18px 18px 24px;
}

/* Recuadro de corte. La línea se dibuja con cuatro degradados repetidos en vez
   de border-dashed: así el guion mide lo mismo en los cuatro lados y las
   esquinas quedan limpias, que es lo que border-dashed no garantiza. */
.metodo__corte {
  --guion: 5px;
  --separacion: 4px;
  padding: 14px;
  background-color: var(--negro-diagrama);
  background-image:
    repeating-linear-gradient(90deg,  var(--corte-linea) 0 var(--guion), transparent var(--guion) calc(var(--guion) + var(--separacion))),
    repeating-linear-gradient(90deg,  var(--corte-linea) 0 var(--guion), transparent var(--guion) calc(var(--guion) + var(--separacion))),
    repeating-linear-gradient(180deg, var(--corte-linea) 0 var(--guion), transparent var(--guion) calc(var(--guion) + var(--separacion))),
    repeating-linear-gradient(180deg, var(--corte-linea) 0 var(--guion), transparent var(--guion) calc(var(--guion) + var(--separacion)));
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
}

/* Sin loading="lazy": el carrusel se desplaza dentro de un contenedor con
   scroll propio y la carga diferida no llega a dispararse a tiempo, dejando
   recuadros vacíos. Son siete archivos de ~19 KB. */
.metodo__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1;
  object-fit: contain;               /* completa, sin recorte ni deformación */
}

/* Tijera: se posa sobre un tramo de la línea y lo interrumpe. */

.metodo__num {
  margin-top: 20px;
  font-family: var(--f-titulo); font-size: var(--t-indicador); font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--txt-2-sobre-oscuro);
}
.metodo__titulo { font-size: var(--t-h3); line-height: var(--li-tarjeta); font-weight: 700; margin: 8px 0; }
.metodo__texto  { color: var(--txt-2-sobre-oscuro); font-size: var(--t-secundario); line-height: var(--li-pequeno); }

/* Controles */
/* Los controles ya no viven en el contenedor centrado: anterior queda cerca
   del filo izquierdo, los indicadores en el centro y siguiente y reproducción
   cerca del derecho. */
.metodos__controles {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;                   /* en móvil los siete puntos bajan de fila */
  margin-top: 24px;
  padding-inline: var(--metodos-orilla-btn);
}
/* En móvil los indicadores bajan a su propia fila, así que siguiente y
   reproducción se empujan al filo derecho con un margen automático. Desde
   640 px se retira: ahí el espacio libre debe ir a los indicadores, que son
   los que se centran. */
.metodos__btn[data-accion="siguiente"] { margin-left: auto; }
.metodos__btn[disabled] { opacity: .35; cursor: default; }
.metodos__btn[disabled]:hover { background: none; }
/* Los controles viven ahora sobre la superficie clara: contorno y símbolo
   toman el color del texto oscuro. */
.metodos__btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; color: var(--txt-sobre-oscuro);
  border: 1px solid rgba(255,255,255,.35); border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--t) ease-out;
}
.metodos__btn:hover { background: rgba(255,255,255,.1); }
.metodos__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.metodos__btn--play svg { fill: currentColor; stroke: none; }
.metodos__icono-pausa { display: none; }
.metodos__btn--play[data-reproduciendo="true"] .metodos__icono-play  { display: none; }
.metodos__btn--play[data-reproduciendo="true"] .metodos__icono-pausa { display: block; }

/* Móvil: los siete indicadores no caben junto a los tres botones —medido, la
   fila pedía 512 px sobre 375 y desbordaba la página—, así que ocupan su
   propia línea. Desde tableta vuelven a la misma fila, centrados. */
.metodos__puntos {
  display: flex; gap: 2px;
  order: 1; flex: 1 0 100%;
  justify-content: flex-start;
  /* Siete objetivos de 44 px piden 320 px de fila; a 320 px de ventana no
     caben y ensanchaban la página. Se desplazan ellos en lugar de desbordar,
     y así conservan el área táctil que exige el §18. */
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.metodos__puntos::-webkit-scrollbar { display: none; }
.metodos__punto { flex: 0 0 auto; }
.metodos__punto {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.metodos__punto::before {
  content: ""; display: block;
  width: 18px; height: 3px;
  background: rgba(255,255,255,.32);
  transition: width var(--t) ease-out, background-color var(--t) ease-out;
}
/* El indicador activo no depende del color: cambia de ancho y lleva aria-current. */
.metodos__punto[aria-current="true"]::before {
  width: 30px; background: var(--txt-sobre-oscuro);
}

/* ---------- Recorrido del proceso ----------
   Franja de ancho completo con fondo propio y línea roja arriba y abajo.
   Contrastes sobre #444545: blanco 9.62:1, --txt-2-sobre-oscuro 5.54:1,
   blanco sobre el rojo del círculo 4.97:1. */
.recorrido {
  padding-block: 56px;
  background: var(--sup-recorrido);
  color: var(--txt-sobre-oscuro);
  border-top: var(--recorrido-linea) solid var(--pw-rojo);
  border-bottom: var(--recorrido-linea) solid var(--pw-rojo);
}
.recorrido .anotacion { color: var(--txt-2-sobre-oscuro); }

/* ---------- Tissot · distribución oficial y hora local ----------
   Pausa negra entre la franja gris y el video. Sin borde superior propio:
   la línea que la separa de la franja gris es el borde inferior de
   .recorrido. Su borde inferior es la línea que la separa del video, que
   tampoco tiene borde superior. Así ningún límite se dibuja dos veces. */
.tissot {
  background: var(--sup-oscura);
  color: var(--txt-sobre-oscuro);
  border-bottom: var(--recorrido-linea) solid var(--pw-rojo);
}

/* Mismo contenedor ancho que la sección Citizen, para que las dos franjas
   anchas compartan retícula. */
.tissot__caja {
  width: min(94vw, 1800px);
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 56px);
  padding-block: clamp(26px, 2.6vw, 40px);
  display: grid;
  gap: clamp(18px, 2vw, 28px);
}

.tissot__titulo {
  /* Título principal de la franja: entra en la escala común de sección.
     Los anchos máximos siguen siendo amplios a propósito, para que el bloque
     ocupe menos líneas y menos alto. */
  font-size: var(--t-h2); font-weight: 700; line-height: var(--li-titulo);
  letter-spacing: -.01em;
  margin-bottom: 8px;
  max-width: 46ch;
}
.tissot__entrada {
  font-size: var(--t-intro); line-height: var(--li-intro);
  color: var(--txt-2-sobre-oscuro);   /* 10.49:1 sobre negro */
  max-width: 68ch;
}

/* La anotación de esta sección baja por debajo de la del resto del sitio. */
.tissot .anotacion {
  font-size: var(--t-etiqueta);
  letter-spacing: .12em;
  margin-bottom: 10px;
}
.tissot .anotacion::before { width: 18px; margin-right: 9px; }

/* Los dos logotipos se usan a su proporción original: sólo se fija la altura
   y el ancho se deduce. Ninguno se recolorea ni se recorta. */
.tissot__marcas {
  list-style: none; margin: clamp(14px, 1.5vw, 20px) 0 0; padding: 0;
  display: flex; align-items: flex-end;
  gap: clamp(12px, 1.3vw, 19px);
}
.tissot__nba     { height: clamp(34px, 2.7vw, 44px);  width: auto; }
.tissot__silueta { height: clamp(29px, 2.35vw, 38px); width: auto; }

/* El reloj: la figura envuelve exactamente la imagen, de modo que los
   porcentajes de la pantalla se resuelven contra el propio dibujo. */
.tissot__reloj {
  --reloj-alto: clamp(160px, 45vw, 210px);
  display: grid;
  justify-items: center;              /* dibujo y contador comparten eje */
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0;
  justify-self: end;                  /* cargado a la derecha también en móvil */
  line-height: 0;
}
.tissot__reloj-img { height: var(--reloj-alto); width: auto; }

/* Contador en vivo: un recuadro digital propio, debajo del dibujo. El ancho
   manda y la altura sale de él, de modo que la proporción 210 × 72 se conserva
   en cualquier ventana. Cifras tabulares y familia monoespaciada del sistema:
   los ocho caracteres ocupan lo mismo en cada segundo y nada se desplaza. */
/* La caja es fija en los tres ejes de tamaño: la versión anterior deducía
   ancho, alto y cuerpo de --reloj-caja con calc(), y esa cadena era la causa
   de que creciera. Se retiró la variable en vez de añadir reglas encima. */
.tissot__pantalla {
  box-sizing: border-box;
  width: 104px;  min-width: 104px;  max-width: 104px;
  height: 36px;  min-height: 36px;  max-height: 36px;
  padding: 0;
  /* Hoy el padre es una rejilla y flex no le afecta; queda declarado para que
     el módulo tampoco se estire si algún día pasa a ser un contenedor flex. */
  flex: 0 0 104px;
  /* Rejilla de una sola fila: la hora son cinco <span> —dos cifras y dos
     separadores más el de segundos— y con el flujo por filas, que es el
     predeterminado, cada uno caía en su propia línea y la hora se apilaba en
     vertical. En columna quedan en fila y place-items los centra en los dos
     ejes; justify-content centra el grupo completo dentro de la caja. */
  display: grid; grid-auto-flow: column;
  place-items: center; justify-content: center;
  border: 1px solid var(--tissot-marco);
  border-radius: 11px;
  background: var(--sup-oscura);      /* el negro de la propia franja */
  color: var(--pw-rojo);
  font-family: var(--f-mono);
  /* 21 px fijos, sin clamp ni calc.
     EXCEPCIÓN DE CONTRASTE DECLARADA, aprobada por Diego el 2026-09-07: por
     debajo de 24 px los dígitos dejan de contar como texto grande y pasan a
     exigir 4.5:1. El rojo institucional sobre negro da 4.10:1, así que a este
     cuerpo el contador queda por debajo del mínimo AA. Se eligió a sabiendas,
     priorizando el tamaño del módulo. El 2026-09-07 se redujo en tres pasos
     sucesivos —24, 21, 18 y finalmente 16 px— siempre bajo la misma excepción
     asumida. Si algún día se revierte, 24 px es el cuerpo mínimo que vuelve a
     cumplir el contraste. */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;                /* nunca parte HH:MM:SS en dos líneas */
  /* Resplandor corto: da la lectura de pantalla encendida sin invadir el
     contorno ni restar nitidez a las cifras. */
  text-shadow: 0 0 6px var(--tissot-brillo);
}

/* Latido muy leve en los dos separadores. No parpadea ni se apaga: baja al
   55 % y vuelve. La hora sigue actualizándose aunque la animación no corra. */
.tissot__sep {
  animation: tissot-latido 2s ease-in-out infinite;
  padding-inline: .06em;
}
@keyframes tissot-latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ---------- Franja de video · grabado digital ----------
   Banner ambiental de ancho completo, sin nada encima. Sin borde superior
   propio: comparte como línea divisoria el borde inferior de .recorrido, para
   que en la unión no se vean dos líneas rojas sumadas. */
.franja-video {
  height: var(--franja-video-movil);
  overflow: hidden;
  background: var(--pw-negro);
  border-bottom: var(--recorrido-linea) solid var(--pw-rojo);
}
.franja-video__medio {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centroide de luminancia medido sobre ocho fotogramas del propio video:
     x 41.2 %, y 48.6 %. Se deja en x 50 % porque el sujeto oscila entre el
     28 % y el 58 % según el fotograma y el centro es el compromiso seguro. */
  object-position: 50% 48%;
  pointer-events: none;   /* sin acción al pulsar */
}
.recorrido__entrada {
  font-size: var(--t-intro); line-height: var(--li-intro);
  color: var(--txt-2-sobre-oscuro);
  max-width: 62ch; margin: 0 0 42px;
}

.etapas {
  list-style: none; margin: 0 0 40px; padding: 0;
  display: grid; gap: var(--etapas-hueco);
}

/* Móvil: el círculo vive en un canal izquierdo y el texto va indentado, para
   que la guía vertical corra por el canal y nunca cruce la lectura. */
.etapa {
  position: relative;
  padding-left: calc(var(--circulo-caja) + 18px);
  min-height: var(--circulo-caja);
}

/* Caja de ancho y alto fijos: todos los círculos comparten centro y el cuarto
   crece sin desplazar los textos. */
.etapa__marca {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: var(--circulo-caja); height: var(--circulo-caja);
}
.etapa__num {
  display: flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--circulo); height: var(--circulo);
  border-radius: 50%;
  background: var(--pw-rojo); color: var(--pw-blanco);
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-indicador);
  letter-spacing: .06em;
}
/* La cuarta etapa cierra el recorrido: presencia algo mayor. */
.etapa:last-child .etapa__num {
  width: var(--circulo-final); height: var(--circulo-final); font-size: var(--t-boton);
}

/* Línea de progreso. Es apoyo visual: el orden lo comunican el <ol> y los
   números, nunca el color por sí solo. */
.etapa::before {
  content: ""; position: absolute; background: var(--pw-rojo);
  left: calc(var(--circulo-caja) / 2 - 1px);
  top: var(--circulo-caja);
  bottom: calc(-1 * var(--etapas-hueco));
  width: 2px;
}
.etapa:last-child::before { content: none; }

.etapa__titulo { font-size: var(--t-h3); line-height: var(--li-tarjeta); font-weight: 700; margin: 4px 0 8px; }
.etapa__texto  { color: var(--txt-2-sobre-oscuro); font-size: var(--t-secundario); line-height: var(--li-pequeno); }

.recorrido__accion { margin: 0; }

/* ---------- Clientes ----------
   Misma técnica que la franja de marcas: dos pistas idénticas y una animación
   que recorre el ancho de una. La duración NO se copia de allí; se calcula en
   cada punto de ruptura para igualar su velocidad efectiva medida, 72.3 px/s,
   porque doce logotipos hacen una pista mucho más corta que treinta y tres.
   Ninguna imagen lleva loading="lazy": la pista se mueve con transform, que no
   dispara la carga diferida, y dejaría recuadros vacíos. */
.clientes {
  background: var(--sup-oscura);
  color: var(--txt-sobre-oscuro);
  /* Acompaña a las tarjetas más bajas: se recortan 12 px arriba y 12 abajo, y
     queda respiración de sobra para que los contornos no toquen los límites. */
  padding-block: 28px 32px;
  overflow: hidden;
}
.clientes__caja {
  width: min(94vw, 1800px);
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 56px);
  margin-bottom: 22px;
}
.clientes__titulo {
  font-size: var(--t-h2);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 18px; max-width: 24ch;
}
.clientes__accion { margin: 0; }

/* Mientras la cinta se mueve NO puede ser un contenedor desplazable.
   Era la causa del hueco entre Bimbo y ADO: con overflow-x: auto la franja
   era una caja de scroll de 1600 px con 6096 px de contenido, así que el
   componente lateral de un gesto de trackpad, un deslizamiento en táctil o el
   propio navegador al enfocar la franja movían scrollLeft. Las dos copias
   cubren la ventana sólo mientras scrollLeft vale 0: a partir de 1448 px de
   desplazamiento el final del ciclo dejaba el borde derecho vacío y los
   logotipos parecían desaparecer justo en la unión.
   Con overflow: clip no existe caja de scroll y scrollLeft no puede moverse;
   hidden queda como respaldo para navegadores sin clip. La consulta manual
   sigue disponible donde hace falta: en movimiento reducido, más abajo. */
.clientes__marquesina {
  display: flex; width: 100%;
  overflow: hidden;
  overflow: clip;
}
.clientes__marquesina:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }

/* La cinta lleva las dos secuencias y es lo único que se anima. El recorrido
   es el 50 % de su ancho, que equivale exactamente a una secuencia completa:
   doce tarjetas más doce huecos. Al terminar, la segunda secuencia ocupa
   milímetro a milímetro el sitio donde arrancó la primera, así que el reinicio
   es invisible.
   Se anima la cinta y no cada <ul> por separado porque con dos animaciones
   independientes bastaba un instante de diferencia en el arranque para que se
   abriera un hueco en la unión, y ese hueco no se cierra solo. */
.clientes__cinta {
  display: flex; align-items: center;
  width: max-content;
  animation: clientes-desliza var(--clientes-vuelta) linear infinite;
}
@keyframes clientes-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.clientes__marquesina:hover .clientes__cinta,
.clientes__marquesina:focus-within .clientes__cinta,
.clientes__marquesina:active .clientes__cinta { animation-play-state: paused; }

.clientes__pista {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  gap: var(--clientes-hueco);
  /* Este relleno es el hueco de la unión: hace que la separación entre la
     última tarjeta de una secuencia y la primera de la siguiente sea idéntica
     a las demás, y que el 50 % del recorrido coincida con una secuencia. */
  padding-right: var(--clientes-hueco);
  flex: 0 0 auto;
}

/* Recuadro idéntico para las doce. El marco es de la interfaz: ningún archivo
   lo lleva dentro. Fondo transparente, integrado con el negro de la página. */
.cliente {
  flex: 0 0 var(--cliente-ancho);
  height: var(--cliente-alto);
  display: grid; place-items: center;
  padding: var(--cliente-pad);
  border: 1px solid var(--pw-rojo);
  border-radius: var(--cliente-radio);
  background: transparent;
  /* Ningún logotipo puede salirse de su recuadro pase lo que pase. Con los
     topes en píxeles ya no ocurre, pero si el navegador sirviera una hoja
     antigua desde caché los dibujos se desbordarían y se montarían unos sobre
     otros. Esto lo hace imposible. */
  overflow: hidden;
}
/* Los topes son porcentajes simples de la caja de contenido de la celda, que
   tiene alto definido: no hay aritmética que pueda fallar. La versión anterior
   los calculaba con calc((ancho - 2px - 2*relleno) * escala); si un navegador
   no resolvía esa multiplicación por una variable sin unidad, las dos
   propiedades quedaban inválidas, la imagen se dibujaba a su tamaño natural
   —300 px por no declarar los SVG width ni height— y se montaba sobre las
   celdas vecinas. El ajuste de tamaño aparente pasa a transform: scale, que
   sí admite una variable sin unidad sin riesgo. */
.cliente__logo {
  width: auto; height: auto;
  max-width: var(--cliente-logo-ancho);
  /* En píxeles, no en porcentaje: max-height:100% no encuentra una altura
     definida contra la que resolverse dentro de la celda y el navegador lo
     ignora, con lo que sólo limitaba el ancho y los logotipos compactos
     crecían de más. */
  max-height: var(--cliente-logo-alto);
  object-fit: contain;
  transform: scale(var(--escala, 1));
}

/* Igualar el TAMAÑO APARENTE, no el del archivo. Las proporciones son las del
   contorno real del dibujo, después de recortar el lienzo vacío: Banregio, por
   ejemplo, ocupaba sólo el 11.4 % de su viewBox tras quitarle el fondo naranja,
   y sin recortar se veía diminuto. Los muy apaisados ya llenan el ancho y no
   pueden crecer; los compactos se reducen hasta acercar su altura a la de
   aquéllos. El factor escala las dos dimensiones, así que nada se deforma.
   Alturas resultantes a 1920 px: de 33 a 51 px. */
.cliente--aeromexico .cliente__logo { --escala: 1;   }   /* 5.82 */
.cliente--afirme     .cliente__logo { --escala: 1;   }   /* 5.17 */
.cliente--banregio   .cliente__logo { --escala: 1;   }   /* 4.24 */
.cliente--aeromar    .cliente__logo { --escala: 1;   }   /* 4.18 */
.cliente--bridgefy   .cliente__logo { --escala: 1;   }   /* 3.94 */
.cliente--cemex      .cliente__logo { --escala: .97; }   /* 3.67 */
.cliente--ado        .cliente__logo { --escala: .96; }   /* 3.66 */
.cliente--bansi      .cliente__logo { --escala: .71; }   /* 2.70 */
.cliente--famsa      .cliente__logo { --escala: .70; }   /* 2.46 */
.cliente--arca       .cliente__logo { --escala: .70; }   /* 2.37 */
.cliente--caliente   .cliente__logo { --escala: .70; }   /* 2.26 */
.cliente--bimbo      .cliente__logo { --escala: .70; }   /* 2.16 */

/* ---------- Guía de uso del catálogo ----------
   Sustituye el 2026-09-07 al bloque «Reconocer transforma». Conserva su
   distribución: dos recuadros de la misma altura, fondo negro, contorno rojo
   punteado y esquinas redondeadas. */
.guia {
  background: var(--sup-oscura);
  color: var(--txt-sobre-oscuro);
  padding-block: clamp(34px, 5vw, 72px);
}
/* Más ancho que --tope a propósito: los dos recuadros piden 900 + 28 + 500 =
   1428 px, que es la medida que ya tenía esta franja antes del cambio. */
.guia__caja {
  width: min(100% - 2 * clamp(16px, 5vw, 48px), 1428px);
  margin-inline: auto;
}
/* El título general se alinea con el borde izquierdo del primer recuadro. */
.guia__intro { margin-bottom: clamp(22px, 3vw, 36px); max-width: 62ch; }
.guia__titulo {
  font-size: var(--t-h2);
  font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  margin: 10px 0 12px;
}
.guia__punto { color: var(--pw-rojo); }
.guia__entrada {
  font-size: var(--t-base); line-height: var(--li-normal);
  margin: 0; color: var(--txt-2-sobre-oscuro); max-width: 68ch;
}

.guia__paneles { display: grid; gap: var(--recon-hueco, 24px); }

/* El marco punteado va en un ::before, como en el bloque anterior, para que el
   trazo no se vea afectado por el relleno del contenido. */
.guia__panel {
  position: relative;
  border-radius: 18px;
  padding: var(--recon-pad);
  background: var(--sup-oscura);
}
.guia__panel::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px dashed var(--pw-rojo);
  border-radius: inherit;
  pointer-events: none;
}
.guia__h3 {
  font-size: var(--t-h3); font-weight: 700; line-height: var(--li-tarjeta);
  margin: 8px 0 12px;
}
.guia__h4 {
  font-size: var(--t-subtitulo); font-weight: 700; line-height: var(--li-tarjeta);
  margin: 0 0 10px;
}
.guia__texto {
  font-size: var(--t-base); line-height: var(--li-normal);
  margin: 0 0 14px; color: var(--txt-2-sobre-oscuro); max-width: 62ch;
}

/* Los cinco pasos, unidos por una línea vertical de progreso. La línea es un
   borde del <ol>, no un elemento aparte: así crece exactamente con la lista. */
.guia__pasos {
  list-style: none; margin: 22px 0 24px; padding: 0 0 0 26px;
  border-left: 1px solid var(--linea-negro-vivo);
  display: grid; gap: 14px;
}
.paso { position: relative; }
.paso__num {
  position: absolute; left: -37px; top: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  margin: 0;
  border: 1px solid var(--pw-rojo); border-radius: 50%;
  background: var(--sup-oscura);
  font-family: var(--f-titulo); font-weight: 700;
  font-size: var(--t-pie); color: var(--pw-rojo);
  font-variant-numeric: tabular-nums;
}
/* Sin texto debajo, el título es todo el paso: no necesita margen inferior y
   se centra con su marcador para que los dos compartan línea. */
.paso__titulo {
  font-size: var(--t-base); font-weight: 700; line-height: var(--li-tarjeta);
  margin: 0;
  min-height: 22px;
  display: flex; align-items: center;
}

.guia__rangos {
  border-top: 1px dashed var(--linea-negro-vivo);
  padding-top: clamp(18px, 2.4vw, 26px);
  margin-top: clamp(18px, 2.4vw, 26px);
}
.guia__ideas {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.guia__ideas li {
  border: 1px solid var(--ficha-borde); border-radius: 999px;
  padding: 5px 12px;
  font-size: var(--t-pie); color: var(--txt-sobre-oscuro);
}
.guia__escala-titulo {
  margin: 0 0 8px;
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-pie); letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-2-sobre-oscuro);
}
.guia__escala { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 0; }
.rango {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--linea-negro-vivo);
}
.rango:last-child { border-bottom: 0; }
.rango__linea { font-size: var(--t-base); }
.rango__cifra {
  font-family: var(--f-mono);
  font-size: var(--t-pie); font-variant-numeric: tabular-nums;
  color: var(--pw-rojo); white-space: nowrap;
}
.rango__moneda { color: var(--txt-2-sobre-oscuro); }
.guia__aviso {
  margin: 0;
  font-size: var(--t-pie); line-height: var(--li-pequeno);
  color: var(--txt-2-sobre-oscuro);
  border-left: 2px solid var(--pw-rojo);
  padding-left: 12px;
}
.guia__cierre {
  border-top: 1px dashed var(--linea-negro-vivo);
  padding-top: clamp(18px, 2.4vw, 26px);
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  font-size: var(--t-base); line-height: var(--li-normal);
  color: var(--txt-2-sobre-oscuro);
}

/* Recuadro derecho. Va sobre gris y no sobre el negro de la franja: el marco
   del teléfono es negro puro —luminancia media 5.5 sobre 255— y contra
   --sup-oscura desaparecía, se veía flotar la pantalla sola. El gris es
   --sup-recorrido, que ya existe en la paleta; no se añade ningún tono nuevo.
   Autorizado por Diego el 2026-09-08. */
.guia__panel--acceso {
  background: var(--sup-recorrido);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 14px;
}
.guia__acceso-texto { max-width: 46ch; }
.guia__panel--acceso .guia__texto { margin: 0; }
/* El mockup es sólo el dispositivo, sin mano ni entorno, así que a igual ancho
   el teléfono se ve mucho mayor que en la composición anterior. El ancho baja
   para que ocupe una altura parecida dentro del recuadro. */
.guia__telefono {
  display: block;
  width: min(62%, 230px);
  margin-inline: auto;
}
.guia__telefono img { display: block; width: 100%; height: auto; }
.guia__accion { margin: 0; }
/* El botón conserva la caja de .btn--primario; sólo se le da la flecha. */
.guia__boton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.guia__flecha { transition: transform var(--t) ease-out; }
.guia__boton:hover .guia__flecha { transform: translateX(3px); }
.guia__url {
  margin: 0;
  font-family: var(--f-mono); font-size: var(--t-pie);
  color: var(--txt-2-sobre-oscuro);
}
/* El QR se oculta en teléfono: ahí el botón hace el mismo trabajo y el código
   sólo ocuparía sitio. Va sobre blanco porque un QR invertido no lo leen
   muchos lectores. */
.guia__qr { display: none; }
.guia__qr img {
  display: block; width: 100%; height: auto;
  background: var(--pw-blanco);
  border-radius: 10px;
}
.guia__qr-pie {
  margin: 8px 0 0;
  font-size: var(--t-pie); color: var(--txt-2-sobre-oscuro);
}

/* ---------- Casos de éxito · tendedero de historias ----------
   Propuesta visual. No hay contenido real: las cinco tarjetas son marcadores. */

.casos {
  background: var(--sup-oscura);
  color: var(--txt-sobre-oscuro);
  padding-block: 56px 60px;
  /* La rotación de las tarjetas ensancha su caja envolvente; esto impide que
     ese sobrante genere barra de desplazamiento en la página. */
  overflow: hidden;
}

.casos__caja {
  width: min(100% - 2 * var(--casos-margen, 32px), 1560px);
  margin-inline: auto;
  margin-bottom: 34px;
}
.casos__titulo {
  font-size: var(--t-h2);
  font-weight: 700; line-height: var(--li-titulo);
  margin: 0 0 14px;
  max-width: 26ch;
  text-wrap: balance;
}
/* Único acento rojo del encabezado: el punto final. Es la opción más contenida
   de las que autorizó Diego —palabra o punto— y deja el rojo del texto libre
   para el botón de acción de cada tarjeta. */
.casos__punto { color: var(--pw-rojo); }
.casos__intro {
  color: var(--txt-2-sobre-oscuro);
  font-size: var(--t-intro); line-height: var(--li-intro);
  margin: 0; max-width: 62ch;
}

/* ---- El tendedero ---- */
.casos__tendedero { position: relative; }

.casos__pista {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Sitio para el broche y la cuerda arriba, y para la esquina que sobresale
     al rotar abajo. Sin esto la caja de scroll recortaría ambos. */
  padding-block: 20px 26px;
}
.casos__pista::-webkit-scrollbar { display: none; }
.casos__pista:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }

.casos__cinta {
  position: relative;
  display: block;
  width: max-content;
  padding-inline: var(--casos-margen, 32px);
  padding-top: var(--casos-cuelgue);
}

/* Las cuerdas van dentro de la cinta, no de la sección: así se desplazan con
   las tarjetas y ninguna queda colgada del aire al arrastrar. Quedan por debajo
   de las tarjetas, que son opacas, de modo que la línea nunca cruza un texto. */
.casos__cuerdas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: var(--casos-cuerdas-alto);
  /* Detrás de las tarjetas (.casos__lista va en z-index 1) y detrás de los
     broches, que van en 3 dentro de esa capa. Diego lo fijó por escrito: la
     cuerda puede cruzar por detrás de una tarjeta, pero no debe taparle la
     fotografía ni pasar por encima de los textos. Se probó por delante y sí
     tapaba la portada de las tarjetas impares. Lo que hacía que antes pareciera
     cortada no era ir por detrás, sino su contraste: iba a 2.09:1 y desaparecía
     sobre la foto. Con --casos-cuerda al 72 % se lee entera en cada hueco. */
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.casos__cuerda {
  fill: none;
  stroke: var(--casos-cuerda);
  stroke-width: var(--casos-cuerda-gr);
  stroke-linecap: round;
}

.casos__lista {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-start;
  gap: var(--casos-hueco);
}

.caso {
  flex: 0 0 var(--caso-ancho);
  scroll-snap-align: center;
}

/* ---- La tarjeta ----
   Una sola pieza: la portada ocupa el recuadro entero, el degradado cae sobre
   su parte baja y los textos van encima. No hay bloque sólido separado. */
.caso__tarjeta {
  position: relative;
  height: var(--caso-alto);
  box-shadow: 0 10px 22px -12px var(--caso-sombra);
  /* El giro se aplica a la tarjeta entera: el contenido gira con ella, no se
     deforma. transform-origin arriba para que el broche quede en el eje. */
  transform-origin: 50% 0;
  transform: rotate(var(--giro, 0deg));
}
/* Inclinaciones alternadas dentro del margen que pidió Diego (-3° a 3°).
   Valores distintos entre sí para que el conjunto no parezca un patrón. */
.caso:nth-child(1) .caso__tarjeta { --giro: -2.2deg; }
.caso:nth-child(2) .caso__tarjeta { --giro:  1.6deg; }
.caso:nth-child(3) .caso__tarjeta { --giro: -1.1deg; }
.caso:nth-child(4) .caso__tarjeta { --giro:  2.4deg; }
.caso:nth-child(5) .caso__tarjeta { --giro: -1.8deg; }
/* Las impares cuelgan de la cuerda alta y las pares de la baja: por eso van
   escalonadas y por eso cada broche se posa sobre una cuerda distinta. */
.caso:nth-child(even) .caso__tarjeta { margin-top: var(--casos-cuelgue-2); }

/* El broche: cuerpo metálico con el muelle insinuado por una línea fina, en el
   lenguaje de «líneas de medición» del manual §09. Se dibuja con CSS, va por
   encima de la cuerda —como una pinza real— y es decorativo. */
.caso__broche {
  position: absolute;
  top: -19px; left: 50%;
  width: 12px; height: 27px;
  transform: translateX(-50%);
  background: var(--sup-carbon);
  border: 1px solid var(--broche-borde);
  border-radius: 3px;
  z-index: 3;                 /* por encima del lienzo y de todas sus capas */
}
.caso__broche::after {
  content: "";
  position: absolute; left: -3px; right: -3px; top: 15px;
  height: 1px;
  background: var(--broche-borde);
}

/* El lienzo lleva el contorno rojo, el radio y el recorte. La fotografía lo
   llena de borde a borde: no hay relleno ni franja negra en ningún lado. */
.caso__lienzo {
  position: absolute; inset: 0;
  background: var(--sup-carbon);
  border: 1px solid var(--pw-rojo);
  border-radius: var(--caso-radio);
  overflow: hidden;
}

/* La fotografía va sin filtro: los archivos servidos son un reescalado puro de
   los originales, con su color intacto. Lo único que se le añade es el velo
   inferior, que es una capa aparte. */
.caso__foto {
  position: absolute; inset: 0;
  display: block;
}
.caso__foto img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
}

/* Velo inferior: SOLO un degradado. Tuvo un backdrop-filter: blur(3px) con una
   máscara que lo hacía entrar poco a poco; el resultado era una franja
   horizontal desenfocada cruzando el reloj, justo donde la máscara pasaba de
   transparente a opaca. Diego lo mandó quitar: la fotografía va nítida de
   arriba abajo y la legibilidad la resuelve el degradado solo.
   Valores de partida los que él dio; sólo el tramo final sube de .90 a .94
   porque a .90 el texto secundario se quedaba por debajo de AA (medido). */
.caso__velo {
  position: absolute; inset: auto 0 0 0;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(to bottom,
     rgba(0,0,0,0)   0%,
     rgba(0,0,0,.12) 25%,
     rgba(0,0,0,.62) 68%,
     rgba(0,0,0,.94) 100%);
}

/* Punto focal propio de cada fotografía: ninguna se centra por defecto. */
.caso--bicentenario  .caso__foto img { --foco: 42% 42%; }
.caso--winjet        .caso__foto img { --foco: 34% 60%; }
.caso--uribe-cristal .caso__foto img { --foco: 60% 50%; }
.caso--hepic-estuche .caso__foto img { --foco: 50% 50%; }
.caso--ek            .caso__foto img { --foco: 46% 50%; }
.caso--sedena-fuerza .caso__foto img { --foco: 55% 50%; }

/* Capa de texto, independiente del degradado y por encima de él. */
.caso__pie {
  position: absolute; inset: auto 0 0 0;
  padding: 0 14px 14px;
  padding-right: 66px;              /* deja libre la esquina del botón */
}

.caso__etiqueta {
  font-family: var(--f-titulo);
  font-size: var(--t-etiqueta); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--txt-2-sobre-oscuro);
  margin: 0 0 4px;
}
.caso__titulo {
  font-size: var(--t-h3); font-weight: 700; line-height: var(--li-tarjeta);
  margin: 0 0 8px;
}
/* Los 8 px de abajo sólo existen para separar el título del texto breve. En la
   tarjeta que ya no lo lleva el título es el último elemento del pie, y ese
   margen quedaría como un hueco residual contra el borde. */
.caso__titulo:last-child { margin-bottom: 0; }
.caso__texto {
  color: var(--txt-2-sobre-oscuro);
  font-size: var(--t-secundario); line-height: var(--li-pequeno);
  margin: 0;
}

/* ---- El botón «+» ---- */
.caso__mas {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 44px; height: 44px;          /* objetivo táctil del §18 */
  display: grid; place-items: center;
  background: var(--pw-rojo);
  border: 1px solid var(--pw-rojo);
  border-radius: 10px;
  cursor: pointer;
  transition: transform var(--t) ease-out, background-color var(--t) ease-out;
}
/* El signo se dibuja con dos barras: al abrir se oculta la vertical y queda el
   menos, sin sustituir texto ni depender de una tipografía. */
.caso__signo { position: relative; display: block; width: 16px; height: 16px; }
.caso__signo::before,
.caso__signo::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--pw-blanco);
  transform: translate(-50%, -50%);
  transition: opacity var(--t) ease-out;
}
.caso__signo::before { width: 16px; height: 2px; }   /* barra horizontal */
.caso__signo::after  { width: 2px; height: 16px; }   /* barra vertical */
.caso__mas[aria-expanded="true"] .caso__signo::after { opacity: 0; }
.caso__mas[aria-expanded="true"] { background: var(--rojo-pulsado); }
.caso__mas:hover { background: var(--rojo-pulsado); transform: scale(1.06); }
.caso__mas:focus-visible {
  outline: 2px solid var(--pw-blanco);
  outline-offset: 3px;
}

/* ---- Controles de desplazamiento ---- */
.casos__controles {
  display: none;                      /* sólo si la cinta desborda; lo decide el guion */
  gap: 10px; margin: 14px 0 0;
  width: min(100% - 2 * var(--casos-margen, 32px), 1560px);
  margin-inline: auto;
}
.casos__tendedero[data-desborda="true"] .casos__controles { display: flex; }
.casos__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; color: var(--txt-sobre-oscuro);
  border: 1px solid rgba(255,255,255,.35); border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--t) ease-out;
}
.casos__btn:hover { background: rgba(255,255,255,.1); }
.casos__btn:disabled { opacity: .35; cursor: default; }
.casos__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

.casos__paneles {
  width: min(100% - 2 * var(--casos-margen, 32px), 1560px);
  margin-inline: auto;
}
/* La apertura se anima con la fila de la retícula, de 0fr a 1fr: no hace falta
   una altura fija ni medirla con JavaScript. Donde el navegador no interpole
   ese valor el panel simplemente aparece, que es una degradación aceptable. */
/* Texto reservado a lectores de pantalla. La clase se usaba en 16 sitios de la
   página —numeración de los casos, nombres largos de botón, título del salto de
   contenido— pero NO tenía regla: todos esos textos se estaban dibujando. Se
   añade aquí el patrón estándar, que saca el elemento del flujo sin usar
   display:none ni visibility:hidden, que sí lo esconderían de los lectores. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Demostración de personalización — franja negra a todo el ancho
   Sustituye a la antigua sección Citizen Tsuyosa (eliminada el 2026-09-05).
   ========================================================================== */

.demo {
  background: var(--sup-oscura);        /* el mismo #050505 de las franjas vecinas */
  color: var(--txt-sobre-oscuro);
  padding-block: clamp(36px, 5vh, 68px);
  position: relative;                   /* apoyo de las dos líneas de encuadre */
  /* Área útil de la zona central. La altura manda en escritorio para que la
     franja entre entera en una laptop de 768 px sin desplazamiento interno. */
  --demo-util-ancho: min(90vw, 520px);
  --demo-util-alto:  66vh;
  --demo-btn: 100%;

  /* Escala por estado. Los siete archivos son cuadrados pero el producto ocupa
     una fracción muy distinta en cada uno —la tapa el 48 % del lienzo, la correa
     el 100 % de alto y sólo el 20 % de ancho—, así que un mismo ancho para todos
     dejaría unos diminutos y otros enormes. Cada factor es 0.90 / fracción de
     ancho y 0.86 / fracción de alto, medidas sobre el canal alfa del archivo:
     el lado de la imagen sale del menor de los dos, de modo que el producto
     ocupa el 86 % del alto útil o el 90 % del ancho útil, lo que llegue antes.
     No hay recorte ni deformación: la imagen entera se escala. */
  --k-ancho: 1.642;  --k-alto: 0.960;      /* vista inicial */
}
/* Dos líneas que encuadran la franja de arriba abajo. Van como pseudoelementos
   posicionados sobre los bordes de la sección, no como borde: así no suman alto
   ni desplazan nada, y como la sección ocupa todo el ancho de la ventana, las
   líneas también. Color y opacidad son los mismos de las cuerdas del tendedero
   —la variable --casos-cuerda, blanco del manual al 72 %—, no un valor nuevo. */
.demo::before,
.demo::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--casos-cuerda);
  pointer-events: none;
}
.demo::before { top: 0; }
.demo::after  { bottom: 0; }

.demo[data-estado="caratula"] { --k-ancho: 1.645; --k-alto: 0.960; }
/* Tapa y cristal se igualan al TAMAÑO APARENTE de la vista inicial, que Diego
   fijó como referencia. La igualdad se mide por el ancho del reloj, no por su
   alto: la tapa es un disco ancho y la vista inicial un reloj estrecho y alto,
   así que a igual altura la tapa se veía un 58 % mayor. Su --k-alto sale de
   0.960 × 0.548 / fracción de ancho del archivo, con lo que el ancho del reloj
   coincide exactamente con el de la vista inicial en cualquier ventana. */
.demo[data-estado="tapa"]     { --k-ancho: 1.948; --k-alto: 1.139; }
.demo[data-estado="cristal"]  { --k-ancho: 1.944; --k-alto: 1.136; }
.demo[data-estado="broche"]   { --k-ancho: 4.762; --k-alto: 0.860; }
.demo[data-estado="correa"]   { --k-ancho: 4.412; --k-alto: 0.860; }
/* El estuche es la pieza más ancha del conjunto y llenaba el hueco de lado a
   lado. Sus dos factores bajan un 25 % —0.974 → 0.731 y 1.083 → 0.812—, así que
   se ve más pequeño y con aire, sin tocar el área central ni los otros seis. */
.demo[data-estado="estuche"]  { --k-ancho: 0.731; --k-alto: 0.812; }

.demo__caja {
  width: min(100% - 2 * var(--casos-margen, 32px), 1800px);
  margin-inline: auto;
  display: grid;
  gap: clamp(20px, 3vh, 32px);
}

/* ---- Distintivo ---- */
/* Distintivo. Va en caja normal —sin text-transform— y en el rojo de la marca,
   por decisión de Diego del 2026-09-05. Tamaño 10–11 px: contenido, para que no
   compita con el título. No es interactivo, así que no necesita área táctil. */
.demo__sello {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  font-size: clamp(0.625rem, 0.75vw, 0.6875rem);   /* 10 → 11 px */
  font-weight: 600; line-height: 1.3;
  letter-spacing: .02em;
  color: var(--pw-rojo);
}
.demo__medallon { flex: 0 0 auto; width: 18px; height: 18px; }
.demo__medallon-aro {
  fill: none; stroke: var(--pw-rojo); stroke-width: 1.4;
}
.demo__medallon-aro--fino { stroke: var(--pw-rojo); stroke-width: .9; }
/* Los cuatro índices de carátula del manual §09, en su distribución. */
.demo__medallon-indice {
  stroke: var(--pw-rojo); stroke-width: 1.6; stroke-linecap: round;
}
.demo__medallon-marca {
  fill: none; stroke: var(--pw-rojo); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Título ---- */
.demo__titulo {
  font-size: var(--t-h2);
  font-weight: 700; line-height: var(--li-titulo);
  margin: 0; max-width: 15ch;
  text-wrap: balance;
}
.demo__punto { color: var(--pw-rojo); }

/* ---- Imagen ---- */
/* La escena reserva SIEMPRE el mismo hueco, cambie o no el estado: por eso la
   maqueta no da saltos. La imagen se centra dentro sin transform, con la propia
   rejilla, para no introducir desplazamientos fraccionarios que emborronen. */
.demo__escena {
  justify-self: center;
  position: relative;
  width: var(--demo-util-ancho);
  height: var(--demo-util-alto);
  /* Negro exacto de la franja bajo la imagen: cubre la carga y el momento en que
     una imagen se atenúa antes de que entre la siguiente, sin ningún destello.
     Va aquí y no en la imagen porque la caja de la imagen sobresale del hueco en
     los archivos con mucho margen, y ahí pintaría negro fuera de la franja. */
  background-color: var(--sup-oscura);
  /* Recorta ese sobrante. Lo que se recorta es SIEMPRE margen vacío: el producto
     nunca pasa del 90 % del ancho útil ni del 86 % del alto, por construcción de
     los dos factores de escala. Sin esto, en móvil la caja de la imagen se salía
     de la ventana y aparecía desplazamiento horizontal de 90 px. */
  overflow: hidden;
}
/* <picture> no pinta nada: cede su hijo directamente a la escena. */
.demo__marco { display: contents; }
.demo__img {
  display: block;
  --lado: min(calc(var(--demo-util-ancho) * var(--k-ancho)),
              calc(var(--demo-util-alto)  * var(--k-alto)));
  width: var(--lado); height: var(--lado);
  /* Centrado por cálculo, no por alineación ni por transform. Un archivo con
     mucho margen transparente —tapa, cristal— se dibuja más grande que el hueco
     para que el PRODUCTO alcance el tamaño buscado, y las alineaciones de la
     rejilla, ante un hijo mayor que su celda, lo pegan al inicio en lugar de
     centrarlo. Con offsets calculados el centro es exacto aunque sean negativos,
     y sin transform no hay desplazamiento fraccionario que reste nitidez.
     Lo que sobresale es siempre margen vacío, nunca producto. */
  position: absolute;
  left: calc((var(--demo-util-ancho) - var(--lado)) / 2);
  top:  calc((var(--demo-util-alto)  - var(--lado)) / 2);
  max-width: none;                      /* anula el img{max-width:100%} global */
  object-fit: contain;                  /* la imagen se ve completa, sin recorte */
  image-rendering: auto;
  background: transparent;              /* el negro lo pone la escena, no la imagen */
  transition: opacity var(--t) ease-out;
}
.demo__img.esta-cambiando { opacity: 0; }

/* ---- Botones ---- */
.demo__metodos {
  display: grid;
  grid-template-columns: 1fr 1fr;       /* móvil: 2 columnas × 3 filas */
  gap: 10px;
}
.demo__metodo {
  position: relative;
  width: var(--demo-btn);
  min-height: 46px;                     /* §18: área táctil ≥44 px */
  padding: 12px 14px 12px 22px;         /* el sangrado izquierdo aloja el marcador */
  background: var(--pw-negro);
  color: var(--txt-sobre-oscuro);
  border: 1px solid var(--capsula-borde);
  border-radius: 8px;
  font-family: inherit; font-size: var(--t-boton); font-weight: 500;
  line-height: 1.2; text-align: left;
  cursor: pointer;
  transition: border-color var(--t) ease-out, background-color var(--t) ease-out;
}
.demo__metodo:hover { border-color: var(--capsula-borde-vivo); }
.demo__metodo:focus-visible {
  outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 3px;
}
/* Marcador: la señal que NO depende del color. Existe o no existe, y ocupa
   siempre el mismo hueco reservado por el padding, así que al activarse no
   mueve el texto ni desplaza a los demás botones. */
.demo__marcador {
  position: absolute; left: 9px; top: 50%;
  width: 3px; height: 0;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--pw-rojo);
  transition: height var(--t) ease-out;
}
.demo__metodo[aria-pressed="true"] { border-color: var(--pw-rojo); background: var(--sup-carbon); }
.demo__metodo[aria-pressed="true"] .demo__marcador { height: 16px; }

/* ==========================================================================
   Solicitud de cotización — franja negra, última sección antes del pie
   Sustituye al cierre anterior. Conserva el id #cotizar.
   ========================================================================== */

.cotiza {
  background: var(--sup-oscura);
  color: var(--txt-sobre-oscuro);
  padding-block: clamp(40px, 5vh, 64px);
}
/* Contenedor compacto: el fondo negro sigue a todo lo ancho, el contenido no.
   El tope sale de la suma exacta de las dos columnas más su hueco, así que no
   sobra ni un píxel de contenedor vacío a la derecha. */
.cotiza {
  --cotiza-forma:    730px;
  --cotiza-contacto: 320px;
  --cotiza-hueco:     26px;
  /* Las cuatro medidas que separan el arranque del formulario del borde
     superior del campo «Nombre». La columna de contacto se baja exactamente esa
     suma, así que las dos columnas quedan alineadas por el primer campo y no
     por el encabezado del bloque. Están declaradas aquí, y no como un número
     suelto, para que la alineación siga a cualquier cambio de espaciado. */
  --cotiza-paso-alto:      28px;   /* círculo del número */
  --cotiza-hueco-bloque:   18px;
  --cotiza-etiqueta-alto:  20px;
  --cotiza-hueco-campo:     7px;
}
.cotiza__caja {
  width: min(100% - 32px,
             calc(var(--cotiza-forma) + var(--cotiza-hueco) + var(--cotiza-contacto)));
  margin-inline: auto;
}

/* ---------- Encabezado ---------- */
.cotiza__cabecera { margin-bottom: clamp(28px, 3vh, 36px); }
.cotiza__etiqueta {
  font-size: var(--t-antetitulo); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-2-sobre-oscuro);
  margin: 0 0 12px;
}
.cotiza__titulo {
  font-size: var(--t-h2); font-weight: 700; line-height: var(--li-titulo);
  margin: 0 0 14px; max-width: 20ch; text-wrap: balance;
}
.cotiza__punto { color: var(--pw-rojo); }
.cotiza__entrada {
  font-size: var(--t-intro); line-height: var(--li-intro);
  color: var(--txt-2-sobre-oscuro);
  margin: 0; max-width: 58ch;
}

.cotiza__cuerpo { display: grid; gap: clamp(32px, 4vw, 48px); }

/* Varios elementos de esta sección se ocultan con el atributo hidden —el campo
   de «Otro monto», los mensajes de error, el aviso de envío y la confirmación—
   y todos declaran su propio display, que gana al display:none del navegador.
   Sin esta regla se verían todos a la vez. */
.cotiza [hidden] { display: none; }

/* ---------- Bloques del formulario ---------- */
.cotiza__forma { display: grid; gap: clamp(28px, 3vh, 30px); }
.cotiza__bloque { display: grid; gap: var(--cotiza-hueco-bloque); }
/* fieldset trae borde, margen y relleno propios del navegador */
.cotiza__grupo { border: 0; margin: 0; padding: 0; min-width: 0; }

.cotiza__paso {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-titulo);
  font-size: var(--t-subtitulo); font-weight: 700; line-height: var(--li-subtitulo);
  margin: 0; padding: 0;
}
.cotiza__paso-n {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: var(--cotiza-paso-alto); height: var(--cotiza-paso-alto);
  border: 1px solid var(--pw-rojo); border-radius: 50%;
  color: var(--pw-rojo);
  font-size: var(--t-etiqueta); font-weight: 700;
}

/* Trampa antirrobots: fuera de la vista y del recorrido, sin display:none para
   que un robot que lee estilos no la descarte por evidente. */
.cotiza__trampa {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Campos ---------- */
.campo { display: grid; gap: var(--cotiza-hueco-campo); }
.campo__etiqueta {
  font-size: var(--t-secundario); font-weight: 600;
  /* Alto fijo: de él depende la alineación de la columna de contacto. */
  line-height: var(--cotiza-etiqueta-alto);
  color: var(--txt-sobre-oscuro);
}
.campo__control {
  width: 100%; min-height: 45px;
  padding: 11px 15px;
  background: var(--sup-carbon);
  color: var(--txt-sobre-oscuro);
  border: 1px solid var(--capsula-borde);
  border-radius: 8px;
  font-family: inherit; font-size: var(--t-base); line-height: 1.4;
  /* 16 px reales en móvil: por debajo, iOS hace zoom al enfocar (§18) */
}
@media (max-width: 767px) { .campo__control { font-size: 1rem; } }
.campo__control:hover { border-color: var(--capsula-borde-vivo); }
.campo__control:focus-visible,
.contador__btn:focus-visible,
.opcion__radio:focus-visible + .opcion__marco,
.ficha:focus-visible,
.asesora__via:focus-visible {
  outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 3px;
}
.campo__select { appearance: none; padding-right: 40px; background-image: none; }
/* Flecha del selector dibujada con el borde de una caja girada, sin imagen. */
.campo:has(.campo__select) { position: relative; }
.campo:has(.campo__select)::after {
  content: ""; position: absolute; right: 16px; bottom: 20px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--txt-2-sobre-oscuro);
  border-bottom: 2px solid var(--txt-2-sobre-oscuro);
  transform: rotate(45deg);
  pointer-events: none;
}
.campo__ayuda {
  font-size: var(--t-secundario); line-height: var(--li-pequeno);
  color: var(--txt-2-sobre-oscuro); margin: -2px 0 0;
}
/* El error va en BLANCO, no en rojo: el rojo sobre negro da 4.10:1 y no llega a
   AA en texto normal. El rojo aparece como barra y como borde del campo, y el
   propio texto explica qué corregir, así que la señal no depende del color. */
.campo__error {
  display: flex; gap: 8px;
  font-size: var(--t-secundario); line-height: var(--li-pequeno);
  color: var(--txt-sobre-oscuro); font-weight: 600;
  margin: 2px 0 0;
}
.campo__error::before {
  content: ""; flex: 0 0 3px;
  border-radius: 2px; background: var(--pw-rojo);
}
.campo__control[aria-invalid="true"] { border-color: var(--pw-rojo); }

/* ---------- Opciones en tarjeta ---------- */
.opciones { display: grid; gap: 14px; }
.opcion { display: block; cursor: pointer; }
.opcion__radio {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip-path: inset(50%);
}
.opcion__marco {
  display: grid; gap: 4px;
  grid-template-columns: 20px 1fr;
  align-content: start;
  height: 100%; min-height: 68px;
  padding: 15px 16px;
  background: var(--sup-carbon);
  border: 1px solid var(--capsula-borde);
  border-radius: 10px;
  transition: border-color var(--t) ease-out, background-color var(--t) ease-out;
}
.opcion:hover .opcion__marco { border-color: var(--capsula-borde-vivo); }
/* Señal de selección: un punto que existe o no existe. No es sólo color. */
.opcion__senal {
  grid-row: 1 / span 2;
  width: 16px; height: 16px; margin-top: 2px;
  border: 1px solid var(--capsula-borde-vivo); border-radius: 50%;
}
.opcion__titulo { font-size: var(--t-h3); font-weight: 600; line-height: var(--li-tarjeta); }
/* Las de presupuesto llevan dos líneas —importe y «por reloj»— y por eso piden
   algo más de alto que las de tipo de proyecto, que llevan una sola. */
.opciones--tres .opcion__marco { min-height: 78px; padding: 15px 16px; }
.opcion__pie {
  grid-column: 2;
  font-size: var(--t-secundario); color: var(--txt-2-sobre-oscuro);
}
.opcion__radio:checked + .opcion__marco {
  border-color: var(--pw-rojo);
  background: var(--cotiza-sel);
}
.opcion__radio:checked + .opcion__marco .opcion__senal {
  border-color: var(--pw-rojo);
  box-shadow: inset 0 0 0 4px var(--pw-rojo);
}

/* ---------- Contadores ---------- */
.contadores { display: grid; gap: 16px; }
.contador { display: grid; gap: 6px; }
.contador__mando {
  display: grid; grid-template-columns: 46px 1fr 46px;
  border: 1px solid var(--capsula-borde); border-radius: 8px;
  background: var(--sup-carbon);
  overflow: hidden;
}
.contador__btn {
  min-width: 46px; min-height: 46px;            /* §18: área táctil ≥44 */
  background: transparent; border: 0;
  color: var(--txt-sobre-oscuro);
  font-size: var(--t-intro); line-height: 1;
  cursor: pointer;
}
.contador__btn:hover { background: var(--cotiza-tenue); }
.contador__campo {
  min-height: 46px; width: 100%;
  background: transparent; border: 0;
  border-inline: 1px solid var(--capsula-borde);
  color: var(--txt-sobre-oscuro);
  font-family: inherit; font-size: var(--t-base); text-align: center;
  appearance: textfield; -moz-appearance: textfield;
}
.contador__campo::-webkit-outer-spin-button,
.contador__campo::-webkit-inner-spin-button { appearance: none; margin: 0; }
.contador__campo:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: -2px; }

/* ---------- Otro monto ---------- */
.monto {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 8px;
  padding-inline: 14px;
  background: var(--sup-carbon);
  border: 1px solid var(--capsula-borde); border-radius: 8px;
}
.monto__signo, .monto__moneda {
  font-size: var(--t-base); color: var(--txt-2-sobre-oscuro);
}
.monto__campo {
  background: transparent; border: 0; border-radius: 0;
  padding-inline: 0;
  appearance: textfield; -moz-appearance: textfield;
}
.monto__campo::-webkit-outer-spin-button,
.monto__campo::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* ---------- Inversión estimada ---------- */
.estimado {
  position: relative;
  padding: 14px 16px 14px 20px;
  background: var(--sup-carbon);
  border: 1px solid var(--linea-negro-vivo);
  border-radius: 10px;
}
/* Línea vertical roja del extremo izquierdo. */
.estimado::before {
  content: ""; position: absolute; inset: 10px auto 10px 0;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--pw-rojo);
}
.estimado__etiqueta {
  font-size: var(--t-antetitulo); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-2-sobre-oscuro); margin: 0 0 6px;
}
.estimado__valor {
  font-size: var(--t-intro); line-height: var(--li-intro);
  color: var(--txt-2-sobre-oscuro); margin: 0;
}
.estimado__valor[data-listo="si"] { color: var(--txt-sobre-oscuro); font-weight: 700; }
.estimado__nota {
  font-size: var(--t-pie); line-height: var(--li-pequeno);
  color: var(--txt-2-sobre-oscuro); margin: 8px 0 0;
}

/* ---------- Aviso, resultado y botón ---------- */
.cotiza__legal {
  font-size: var(--t-secundario); line-height: var(--li-pequeno);
  color: var(--txt-2-sobre-oscuro); margin: 0; max-width: 62ch;
}
.cotiza__resultado {
  display: grid; gap: 8px;
  padding: 14px 16px;
  background: var(--sup-carbon);
  border: 1px solid var(--pw-rojo); border-radius: 10px;
  font-size: var(--t-base); line-height: var(--li-normal);
  color: var(--txt-sobre-oscuro); margin: 0;
}
.cotiza__resultado a { color: var(--txt-sobre-oscuro); }
.cotiza__vias { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.cotiza__vias a {
  min-height: 44px; line-height: 44px; font-weight: 600;
  border-bottom: 1px solid var(--pw-rojo);
}
.cotiza__vias a:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 3px; }
/* .btn lleva text-transform: uppercase; aquí Diego pidió formato de oración. */
.cotiza__enviar {
  justify-self: start;
  min-width: 220px; min-height: 46px;
  /* .btn--grande trae 17 px de relleno vertical y dejaba el botón en 53 px,
     desproporcionado junto a campos de 45. Se recorta sin bajar de 46. */
  padding-block: 13px;
  text-transform: none; letter-spacing: .01em;
}
.cotiza__enviar[disabled] { opacity: .6; cursor: progress; }
/* En móvil el botón principal va a todo el ancho; desde tableta vuelve a su
   ancho propio y alineado a la izquierda. */
@media (max-width: 639px) {
  .cotiza__enviar { justify-self: stretch; width: 100%; }
}

/* ---------- Confirmación ---------- */
.exito {
  display: grid; gap: 16px; justify-items: start;
  padding: clamp(24px, 3vw, 40px);
  background: var(--sup-carbon);
  border: 1px solid var(--linea-negro-vivo);
  border-radius: 20px;
}
.exito:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 3px; }
.exito__marca { display: block; width: 52px; height: 52px; }
.exito__marca svg { width: 100%; height: 100%; }
.exito__aro { fill: none; stroke: var(--pw-rojo); stroke-width: 2; }
.exito__palomita {
  fill: none; stroke: var(--pw-rojo); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.exito__titulo {
  font-size: var(--t-subtitulo); font-weight: 700; line-height: var(--li-subtitulo);
  margin: 0; max-width: 26ch;
}
.exito__texto {
  font-size: var(--t-base); line-height: var(--li-normal);
  color: var(--txt-2-sobre-oscuro); margin: 0; max-width: 62ch;
}
.asesora, .sigue {
  width: 100%;
  padding: 16px 18px;
  background: var(--sup-oscura);
  border: 1px solid var(--linea-negro-vivo); border-radius: 12px;
}
.asesora__etiqueta, .sigue__etiqueta {
  font-size: var(--t-antetitulo); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-2-sobre-oscuro); margin: 0 0 6px;
}
.asesora__nombre {
  font-family: var(--f-titulo);
  font-size: var(--t-h3); font-weight: 700; margin: 0 0 10px;
}
.asesora__vias { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; }
.asesora__via {
  display: inline-block; min-height: 44px; line-height: 44px;
  font-size: var(--t-base); font-weight: 600;
  color: var(--txt-sobre-oscuro);
  border-bottom: 1px solid var(--pw-rojo);
}
.sigue__lista {
  margin: 0; padding-left: 20px;
  font-size: var(--t-base); line-height: var(--li-normal);
  color: var(--txt-2-sobre-oscuro);
}
.sigue__lista li + li { margin-top: 6px; }
.sigue__lista::marker { color: var(--pw-rojo); }

/* ---------- Contacto directo ---------- */
.cotiza__contacto { display: grid; gap: 14px; align-content: start; }
.ficha {
  display: grid; gap: 4px;
  padding: 16px 18px;
  min-height: 82px;
  background: var(--pw-negro);
  border: 1px solid var(--ficha-borde); border-radius: 12px;
  color: var(--txt-sobre-oscuro);
  transition: border-color var(--t) ease-out;
}
a.ficha:hover { border-color: var(--capsula-borde-vivo); }
.ficha__etiqueta {
  font-size: var(--t-antetitulo); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-2-sobre-oscuro);
}
.ficha__valor {
  font-size: var(--t-base); font-weight: 600;
  overflow-wrap: anywhere;              /* el correo largo no rompe la tarjeta */
}
.ficha__linea { display: flex; align-items: center; gap: 8px; }
.ficha__icono { flex: 0 0 auto; width: 20px; height: 20px; }
.ficha__burbuja { fill: none; stroke: var(--pw-verde); stroke-width: 1.6; stroke-linejoin: round; }
.ficha__auricular { fill: var(--pw-verde); }
/* WhatsApp destacado: contorno rojo institucional, nunca azul. */
.ficha--wa { background: var(--sup-carbon); border-color: var(--pw-rojo); }
a.ficha--wa:hover { border-color: var(--rojo-pulsado); }

/* ==========================================================================
   Caso de éxito ampliado · Bicentenario
   Diálogo que abre el botón «+» de la primera tarjeta del tendedero. Los otros
   cinco casos siguen usando el panel desplegable de arriba.
   ========================================================================== */

.caso-vista {
  position: fixed; inset: 0;
  z-index: var(--z-vista);
  display: grid; place-items: center;
  padding: clamp(12px, 3vh, 40px) clamp(12px, 3vw, 40px);
}
.caso-vista[hidden] { display: none; }

.caso-vista__fondo {
  position: absolute; inset: 0;
  background: var(--vista-fondo);
}

.caso-vista__caja {
  position: relative;
  width: min(100%, 880px);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sup-oscura);
  border: 1px solid var(--linea-negro-vivo);
  border-radius: 16px;
  color: var(--txt-sobre-oscuro);
}
.caso-vista__caja:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: -4px; }

.caso-vista__barra {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: flex-end;
  padding: 10px 10px 6px;
  background: var(--sup-oscura);
  border-radius: 16px 16px 0 0;
}
.caso-vista__cerrar {
  display: grid; place-items: center;
  width: 44px; height: 44px;                /* §18: área táctil */
  background: var(--sup-carbon);
  border: 1px solid var(--capsula-borde);
  border-radius: 50%;
  color: var(--txt-sobre-oscuro);
  font-size: var(--t-intro); line-height: 1;
  cursor: pointer;
  transition: border-color var(--t) ease-out, color var(--t) ease-out;
}
.caso-vista__cerrar:hover { border-color: var(--pw-rojo); color: var(--pw-rojo); }
.caso-vista__cerrar:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 3px; }

.caso-vista__cuerpo {
  padding: 0 clamp(18px, 4vw, 44px) clamp(28px, 5vw, 52px);
  display: grid; gap: clamp(20px, 3vh, 30px);
}

/* ---------- Contenido del caso ---------- */
.bic__cabecera,
.win__cabecera { display: grid; gap: 10px; }
.bic__etiqueta,
.win__etiqueta {
  font-size: var(--t-antetitulo); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pw-rojo); margin: 0;
}
.bic__titulo,
.win__titulo {
  font-size: var(--t-h2); font-weight: 700; line-height: var(--li-titulo);
  margin: 0; text-wrap: balance;
}

/* La fotografía principal no es portada ni fondo: es un elemento más de la
   composición, cargado a la izquierda y arrancando en la misma línea que la
   etiqueta, el título y los textos. En móvil ocupa el 82 % del ancho útil,
   también alineada a la izquierda, para que no se lea como banner. */
.bic__principal,
.win__principal {
  margin: 0;
  width: 82%;
  max-width: 440px;
  justify-self: start;
}
.bic__doble, .win__doble,
.bic__columna, .win__columna { display: grid; gap: clamp(18px, 3vh, 26px); }
.bic__principal img, .win__principal img,
.bic__foto img, .win__foto img {
  display: block; width: 100%; height: auto;   /* la foto se ve completa */
  object-fit: contain;                         /* nunca recorta ni deforma */
  border-radius: 12px;
}

/* Acercamiento de la principal de Bicentenario, 2026-09-08.
   El recuadro exterior no cambia: sigue tomando su altura de la relación 3:4
   del archivo. object-fit: cover queda declarado, pero por sí solo no puede
   acercar nada cuando la caja ya tiene exactamente la proporción del archivo
   —encajaría igual—, así que el 18 % lo da una escala sobre la propia imagen.
   Escala los dos ejes por igual: no deforma, no reprocesa el archivo y no
   añade ningún filtro. El origen es el centro medido de la carátula, en
   x 47 % / y 56 %; con esa escala la ventana visible va de x 7 a 92 % y de
   y 9 a 93 %, y el reloj —que ocupa x 22–68 % e y 42–70 %— queda entero. */
.bic__principal {
  overflow: hidden;
  border-radius: 12px;
}
.bic__principal img {
  object-fit: cover;
  transform: scale(1.18);
  transform-origin: 47% 56%;
}

.bic__entrada, .bic__texto, .bic__cierre,
.win__entrada, .win__texto, .win__cierre {
  font-size: var(--t-base); line-height: var(--li-normal);
  margin: 0; max-width: 66ch;
}
.bic__entrada,
.win__entrada { font-size: var(--t-intro); line-height: var(--li-intro); }
.bic__texto, .win__texto   { color: var(--txt-2-sobre-oscuro); }
.bic__cierre, .win__cierre { color: var(--txt-2-sobre-oscuro); }

.bic__serie,
.win__bloque {
  display: grid; gap: 14px;
  padding-top: clamp(14px, 2vh, 22px);
  border-top: 1px solid var(--linea-negro-vivo);
}
.bic__subtitulo,
.win__subtitulo {
  font-size: var(--t-subtitulo); font-weight: 700; line-height: var(--li-subtitulo);
  margin: 0;
}

/* Riel de numeración: sólo dibuja el rango que ya dice el texto. Decorativo,
   por eso va oculto a los lectores de pantalla. */
.bic__riel {
  display: flex; align-items: center; gap: 12px;
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-antetitulo); font-weight: 700;
  letter-spacing: .12em;
  color: var(--pw-rojo);
}
.bic__linea {
  flex: 1 1 auto; height: 1px;
  background: linear-gradient(to right,
      var(--pw-rojo) 0 14px, var(--casos-cuerda) 14px calc(100% - 14px),
      var(--pw-rojo) calc(100% - 14px) 100%);
}

.bic__frase,
.win__frase {
  margin: 0;
  padding: clamp(14px, 2vh, 20px) clamp(16px, 2vw, 24px);
  border-left: 3px solid var(--pw-rojo);
  background: var(--sup-carbon);
  border-radius: 0 10px 10px 0;
  font-family: var(--f-titulo);
  font-size: var(--t-subtitulo); font-weight: 700; line-height: var(--li-subtitulo);
}

.bic__galeria,
.win__galeria {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.bic__foto, .win__foto { margin: 0; }

/* ==========================================================================
   Escritorio — mobile-first: los @media sólo agregan (§18)
   ========================================================================== */

@media (min-width: 640px) {
  /* Megamenú: dos columnas en cuanto hay ancho; 4 y 5 más adelante. */
  .mega__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  

  /* Ningún elemento de la franja va centrado: los indicadores se quedan a la
     izquierda, junto a las flechas. */
  .metodos__puntos { order: 0; flex: 0 0 auto; justify-content: flex-start; overflow: visible; }
  .metodos__btn[data-accion="siguiente"] { margin-left: 0; }

  /* Tableta: dos tarjetas y el arranque de la tercera */
  .metodo { flex: 0 0 calc((100% - 2 * var(--metodos-hueco)) / 2.2); }
  
  
}

@media (min-width: 768px) {
  :root {
    --casos-margen: 32px;
    /* Escritorio: el contenido de la franja arranca a 36 px del filo. */
    --metodos-orilla: 36px;
    --metodos-orilla-btn: 36px;
  }
  /* Las tres razones dejan de apilarse en cuanto el recuadro respira. */

  /* Desde 768 px entra la versión de escritorio del <picture>. Medida de
     referencia fijada por Diego el 2026-09-03: 1366 x 768. Se declara como
     proporción, no como altura, así que a 1366 px de ancho la portada mide
     exactamente 768 px de alto y en cualquier otro ancho conserva la misma
     relación. La fotografía cubre sin estirarse. */


  :root {
    --cliente-ancho-n: 190;
    --clientes-hueco-n: 18;
    --cliente-alto:      92px;
    --cliente-pad:       18px;
    --cliente-logo-ancho: 142px;  /* 75 % de 190 */
    --cliente-logo-alto:   55px;  /* 60 % de 92  */
    --cliente-radio:      13px;
  }

  /* Tableta: caben las dos columnas, con el reloj reducido. */
  .tissot__caja {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .tissot__reloj { --reloj-alto: clamp(150px, 21vw, 175px); }

  /* Altura compartida por las dos franjas. En .recorrido va como min-height:
     nunca puede recortar su contenido, solo garantizar el mínimo. */
  .recorrido    { min-height: var(--altura-franja-destacada); }
  .franja-video { height:     var(--altura-franja-destacada); }

  .enc__caja { min-height: 72px; padding-block: 10px; }
  :root { --nav-alto: 73px; }

  /* Desde 768 px la portada adopta la proporción pedida por Diego el
     2026-09-07: 1470 / 650. Es más apaisada que la fotografía (2.26 frente a
     1.78), así que hay recorte vertical: se ve el 78.59 % del alto y el
     21.41 % restante se reparte arriba y abajo. El 42.5 % del object-position
     no está tanteado: mantiene el reloj —cuya caja va de y 23.0 % a 62.0 %—
     exactamente en la misma posición relativa que ocupa en el archivo. */
  .heroe { aspect-ratio: 1470 / 650; }
  .heroe picture { height: 100%; }
  .heroe__foto {
    height: 100%;
    object-fit: cover;
    object-position: 50% 42.5%;
  }

  :root {
    --marcas-caja-ancho: 110px;
    --marcas-caja-alto:  110px;
    --marcas-hueco:       74px;
    --marcas-vuelta:      84s;   /* la pista crece: se ajusta para no acelerar */
  }

  /* Escritorio: las cuatro en fila, el círculo vuelve al flujo y la guía
     vertical pasa a horizontal. */
  .etapas { grid-template-columns: repeat(4, 1fr); }
  .etapa { padding-left: 0; }
  .etapa__marca { position: static; justify-content: flex-start; width: auto; }
  .etapa__titulo { margin-top: 16px; }
  .etapa::before {
    top: calc(var(--circulo-caja) / 2 - 1px);
    left: var(--circulo);
    right: calc(-1 * var(--etapas-hueco));
    bottom: auto; width: auto; height: 2px;
  }
  .recorrido__accion { text-align: center; }

}

@media (min-width: 1024px) {

  /* Desde 1024 px las seis opciones caben en una fila: el botón sobra y la
     lista vuelve a la barra. Las tres declaraciones deshacen el panel, así que
     si JavaScript no corre la navegación sigue completa y visible. */
  .enc__menu { display: none; }
  .enc__nav {
    display: block;
    position: static;
    padding: 0; border: 0; background: none;
    min-width: 0;
    overflow-x: auto;                /* si algún día no cupieran, se arrastra */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .enc__nav::-webkit-scrollbar { display: none; }
  .enc__lista {
    flex-direction: row; align-items: center;
    gap: clamp(14px, 1.8vw, 32px);
  }
  .enc__opcion { min-height: 0; white-space: nowrap; }

  /* El megamenú deja de ser un bloque del menú y cuelga de la barra: .enc es
     sticky, así que es su bloque contenedor y left/right 0 le dan el ancho
     completo de la ventana. top:100% lo pega al borde inferior de la barra, sin
     un solo píxel de hueco entre ambos: por ahí no puede colarse el cursor. */
  .enc__marcas { position: static; }
  .mega {
    position: absolute; top: 100%; left: 0; right: 0;
    border-top: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  }
  .mega__caja {
    width: 100%; max-width: var(--tope);
    margin-inline: auto;
    padding: 22px clamp(20px, 3vw, 56px) 26px;
  }
  .mega__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mega__item { min-height: 34px; }
  :root {
    --casos-margen: 48px;
    --caso-ancho:      316px;
    --caso-alto:       340px;
    --casos-hueco:      30px;
  }
  .casos { padding-block: 76px 84px; }
  :root {
    --cliente-ancho-n: 220;
    --clientes-hueco-n: 20;
    --cliente-alto:     104px;
    --cliente-pad:       20px;
    --cliente-logo-ancho: 165px;  /* 75 % de 220 */
    --cliente-logo-alto:   62px;  /* 60 % de 104 */
    --cliente-radio:      13px;
  }
  .clientes { padding-block: 56px 60px; }

  /* Texto a la izquierda, reloj pegado al extremo derecho del contenedor.
     La composición no queda centrada: cada bloque busca su extremo. */
  .tissot__caja {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(28px, 3vw, 56px);
  }
  .tissot__reloj { --reloj-alto: clamp(150px, 11.5vw, 180px); }
  /* Escritorio: tres tarjetas y el arranque de la cuarta */
  .metodo { flex: 0 0 calc((100% - 3 * var(--metodos-hueco)) / 3.3); }
  .metodos__sel { padding-inline: 18px; }

  :root {
    --margen: 8vw;                  /* §15: 8 % del ancho de la ventana */
    --vineta-lado: 11%;             /* el encuadre ancho admite más viñeta */
    --etapas-hueco: 36px;
  }

  .recorrido { padding-block: 84px; }

  /* Se repite el selector con atributo para ganar por especificidad al estado
     abierto del móvil, sin recurrir a !important (§19). */

  
  

}

/* ---------- Reconocer transforma · composición de escritorio ----------
   A partir de 1180 px los dos recuadros van uno al lado del otro en 9fr / 5fr.
   Con la caja en su tope de 1428 px y 28 px de hueco, las dos columnas miden
   exactamente 900 y 500 px; por debajo se reducen en proporción y ninguna
   medida fija provoca desplazamiento horizontal.
   La composición se centra, pero el reparto 900/500 se mantiene: el bloque de
   contenido queda cargado a la izquierda, no en el centro de la pantalla. */
@media (min-width: 1180px) {
  .mega__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }


  /* Los dos recuadros: 900 y 500 px de referencia, con el hueco actual entre
     ellos. La proporción se mantiene en pantallas mayores porque las columnas
     se declaran con fr en esa misma relación.
     690 px es un MÍNIMO, no un tope: con esta redacción el recuadro izquierdo
     necesita más altura y recortarlo sería perder contenido. Los dos crecen a
     la vez, así que siguen midiendo igual y alineados arriba y abajo. */
  .guia__paneles {
    grid-template-columns: 900fr 500fr;
    gap: var(--recon-hueco, 24px);
    align-items: stretch;
  }
  .guia__panel { min-height: 690px; }
  /* El recuadro izquierdo es mucho más alto que este contenido, así que los
     bloques se reparten el alto en vez de amontonarse en el centro. */
  .guia__panel--acceso { justify-content: space-evenly; gap: clamp(18px, 2.4vw, 30px); }
  .guia__telefono { width: 250px; }
  .guia__qr { display: block; width: 128px; }
}

/* ---------- Movimiento reducido — §16 ---------- */
@media (prefers-reduced-motion: reduce) {
  /* El panel abre y cierra sin transición de altura, y el botón no crece. */
  .caso__mas:hover { transform: none; }

  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

  /* La franja de marcas se detiene por completo —la regla de arriba la dejaría
     parpadeando— y se consulta desplazándola con el dedo, el ratón o el teclado.
     La copia visual del bucle sobra si no hay bucle, y se retira para no
     repetir las marcas al desplazar. */
  .marcas__pista { animation: none !important; }

  .marcas__pista[aria-hidden="true"] { display: none; }

  /* La franja de video no se reproduce: se oculta el elemento y la franja
     muestra el mismo fotograma de portada como fondo, con idéntico encuadre.
     Así no queda hueco vacío y no depende de JavaScript. */
  /* El latido del separador se detiene por completo. La hora sigue viva:
     la actualiza JavaScript, no la animación. */
  .tissot__sep { animation: none; opacity: 1; }

  /* El megamenú aparece y desaparece sin desplazamiento ni fundido. */
  .mega { transition: none; transform: none; }
  .mega[data-abierto="true"] { transform: none; }

  /* El carrusel de clientes se detiene por completo —la regla general lo
     dejaría parpadeando— y se consulta arrastrándolo. La copia visual sobra
     sin bucle, y se retira para no repetir las marcas al desplazar. */
  .clientes__cinta { animation: none !important; }
  .clientes__pista[aria-hidden="true"] { display: none; }
  /* Sin bucle sí hace falta poder arrastrar la franja para verla entera.
     Aquí el desplazamiento no puede romper nada porque no hay animación. */
  .clientes__marquesina {
    overflow: visible;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .clientes__marquesina::-webkit-scrollbar { display: none; }

  .franja-video__medio { display: none; }
  .franja-video {
    background: var(--pw-negro) url("assets/img/poster-grabado-digital.jpg")
                50% 48% / cover no-repeat;
  }
}

/* ==========================================================================
   Demostración — tableta y escritorio
   ========================================================================== */

@media (min-width: 768px) {
  .demo {
    --demo-util-ancho: min(56vw, 560px);
    --demo-util-alto:  min(56vh, 520px);
  }
  .demo__metodos { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .demo {
    --demo-util-ancho: min(44vw, 700px);
    /* 70vh y tope de 700: con 62vh los productos verticales —broche y correa,
       que ocupan el 100 % del alto de su archivo— salían más pequeños que en la
       versión anterior, porque ahora el objetivo es el 86 % del alto útil y
       antes llenaban el marco entero. Con estos valores los siete crecen. */
    --demo-util-alto:  min(46vw, 70vh, 700px);
    --demo-btn: clamp(128px, 11vw, 162px);
    padding-block: clamp(40px, 5vh, 64px);
  }
  /* Tres zonas. Las dos laterales son 1fr iguales, de modo que la columna
     central queda centrada respecto de la franja completa y no respecto del
     hueco que dejan el texto y los botones. */
  .demo__caja {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(16px, 2.5vw, 44px);
  }
  .demo__lado    { justify-self: start; max-width: 28ch; }
  .demo__metodos {
    justify-self: end;
    grid-template-columns: 1fr;         /* seis en vertical, ancho uniforme */
    gap: clamp(8px, 1vh, 12px);
  }
}

/* ==========================================================================
   Cotización — tableta y escritorio
   ========================================================================== */

@media (min-width: 640px) {
  .cotiza__caja   { width: min(100% - 64px,
                        calc(var(--cotiza-forma) + var(--cotiza-hueco) + var(--cotiza-contacto))); }
  .opciones--par  { grid-template-columns: repeat(2, 1fr); }
  .opciones--tres { grid-template-columns: repeat(2, 1fr); }   /* tableta: dos columnas */
  .contadores     { grid-template-columns: repeat(2, 1fr); }
  .cotiza__contacto { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .opciones--tres { grid-template-columns: repeat(3, 1fr); }
  /* «Otro monto» abre la tercera fila y se queda a la izquierda. */
  .opcion--sola { grid-column: 1; }
  .cotiza__cuerpo {
    /* Topes explícitos en lugar de fracciones: con fracciones puras la columna
       del formulario se pasaba de los 820 px al ensanchar el contenedor. */
    grid-template-columns: minmax(0, var(--cotiza-forma))
                           minmax(280px, var(--cotiza-contacto));
    gap: var(--cotiza-hueco);
    align-items: start;
  }
  /* La columna de contacto arranca a la altura del campo «Nombre», no la del
     encabezado «Datos de contacto»: se baja la suma exacta de lo que hay encima
     del campo dentro del formulario. En móvil no se aplica, porque ahí las
     tarjetas van debajo y no hay nada con lo que alinearse. */
  .cotiza__contacto {
    padding-top: calc(var(--cotiza-paso-alto) + var(--cotiza-hueco-bloque)
                      + var(--cotiza-etiqueta-alto) + var(--cotiza-hueco-campo));
  }
  .cotiza__forma  { grid-column: 1; grid-row: 1; }
  .exito          { grid-column: 1; grid-row: 1; }
  .cotiza__contacto { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; }
}

/* La fotografía principal de Winjet acompaña la lectura como una pieza vertical:
   su columna se estira hasta la altura de la columna de texto y la imagen la
   llena con object-fit: cover. El archivo no se toca ni se deforma; lo que
   cambia es el encuadre, y object-position mantiene centrados el reloj y su
   carátula. En móvil no se estira: usa una proporción 4/5 contenida. */
.win__principal { aspect-ratio: 4 / 5; }
.win__principal picture { display: block; height: 100%; }
.win__principal img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;          /* móvil: recorte 4/5, reloj y carátula centrados */
}

/* Los dos lados de «Un beneficio compartido»: el del colaborador y el de la
   empresa, con una línea roja fina que los abre. */
.win__pareja { display: grid; gap: clamp(16px, 2.5vh, 22px); }
.win__lado {
  display: grid; gap: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--pw-rojo);
}
.win__lado-titulo {
  font-size: var(--t-h3); font-weight: 700; line-height: var(--li-tarjeta);
  margin: 0;
}

/* El recorte alto de esta fotografía sólo recorta a lo ancho: la altura entra
   completa. Se desplaza la ventana a la derecha para que la caja del reloj y el
   logotipo de la carátula queden dentro. */
.uri__principal img { object-position: 52% 50%; }

/* Dato destacado del caso: las cifras van en rojo y en la tipografía de título,
   un punto por encima del texto corrido pero sin convertirse en un titular. */
.uri__dato {
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--linea-negro-vivo);
  font-size: var(--t-intro); line-height: var(--li-intro);
  color: var(--txt-sobre-oscuro);
}
.uri__cifra {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: var(--t-subtitulo); letter-spacing: .01em;
  color: var(--pw-rojo);
}

/* Referencias externas. Se presentan como material informativo de un tercero:
   sin logotipos, con su etiqueta visible y su fuente enlazada, para que no se
   confundan con proyectos ni con clientes de Promowatch. */
.ref {
  display: grid; gap: 14px;
  padding: clamp(16px, 2.5vh, 22px);
  border: 1px solid var(--linea-negro-vivo);
  border-radius: 12px;
  background: var(--sup-carbon);
}
.ref__pareja { display: grid; gap: clamp(14px, 2vh, 20px); }
.ref__ficha { display: grid; gap: 8px; margin: 0; align-content: start; }
.ref__marca {
  justify-self: start; margin: 0;
  padding: 4px 14px;
  border: 1px solid var(--pw-rojo); border-radius: 999px;
  font-size: var(--t-pie); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pw-rojo);
}
.ref__titulo {
  font-size: var(--t-h3); font-weight: 700; line-height: var(--li-tarjeta);
  margin: 0;
}
.ref__fuente { margin: 0; font-size: var(--t-pie); line-height: var(--li-pequeno); }
.ref__fuente a {
  color: var(--txt-2-sobre-oscuro);
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--pw-rojo);
}
.ref__fuente a:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 3px; }

/* Hepic: fotografía a la izquierda y, debajo, los tres videos cortos. Los
   videos son verticales 9:16; llevan width y height para que su hueco esté
   reservado antes de cargar y la maqueta no dé saltos. */
/* La fotografía de Hepic recibe el mismo tratamiento vertical de Winjet y
   Uribe; su encuadre se desplaza para conservar el reloj dentro del recorte. */
.hep__principal img { object-position: 54% 44%; }
.hep__videos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.hep__video { margin: 0; }
.hep__video video {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  background: var(--sup-carbon);      /* nunca blanco mientras carga */
}

/* Referencia del modelo: visible y literal, con la tipografía de titulares y
   una línea fina encima, igual criterio que el dato destacado de Uribe. */
.ek__dato {
  margin: 0; padding: 12px 0 0;
  border-top: 1px solid var(--linea-negro-vivo);
  font-size: var(--t-secundario); letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-2-sobre-oscuro);
}
.ek__ref {
  display: block; margin-top: 4px;
  font-family: var(--f-titulo); font-weight: 700;
  font-size: var(--t-subtitulo); letter-spacing: .04em;
  text-transform: none;
  color: var(--pw-rojo);
}
.ek__principal img { object-position: 50% 52%; }

/* Ficha técnica: retícula compacta, cada dato numerado con una cifra fina en
   rojo y separado por una línea delgada. Sin iconos ajenos ni ilustraciones. */
.ficha {
  display: grid; gap: 14px;
  padding: clamp(16px, 2.5vh, 22px);
  border: 1px solid var(--linea-negro-vivo);
  border-radius: 12px;
  background: var(--sup-carbon);
}
.ficha__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  counter-reset: dato;
}
.ficha__dato {
  counter-increment: dato;
  display: grid; grid-template-columns: 30px 1fr;
  gap: 10px; align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--linea-negro-vivo);
  font-size: var(--t-base); line-height: var(--li-normal);
  color: var(--txt-sobre-oscuro);
}
.ficha__dato:first-child { border-top: 0; }
.ficha__dato::before {
  content: counter(dato, decimal-leading-zero);
  font-family: var(--f-titulo); font-weight: 700;
  font-size: var(--t-etiqueta); letter-spacing: .08em;
  color: var(--pw-rojo);
}
.ficha__fuente {
  margin: 0; font-size: var(--t-pie); line-height: var(--li-pequeno);
  color: var(--txt-2-sobre-oscuro);
}
.ficha__fuente a {
  color: var(--txt-2-sobre-oscuro);
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--pw-rojo);
}
.ficha__fuente a:focus-visible { outline: 2px solid var(--txt-sobre-oscuro); outline-offset: 3px; }

/* ==========================================================================
   Caso ampliado — tableta y escritorio
   ========================================================================== */

@media (min-width: 640px) {
  .bic__galeria,
  .win__galeria { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (min-width: 820px) {
  /* Composición asimétrica: título arriba a todo el ancho, y debajo la
     fotografía a la izquierda junto a la introducción y la edición seriada.
     La columna de la imagen es el 36 % del hueco disponible, así que su borde
     izquierdo cae exactamente sobre la misma guía que el texto. */
  /* Jerarquía dentro de la galería: la vista completa del reloj ocupa dos
     columnas, la de la mano una, y el detalle de la carátula queda debajo a un
     tercio, como nota de cierre. */
  .hep__videos { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  /* La ficha en dos columnas: cinco datos por lado, sin bloque pesado. */
  .ficha__lista { grid-template-columns: repeat(2, 1fr); column-gap: 26px; }
  .ficha__dato:nth-child(2) { border-top: 0; }
  /* Última fotografía de EK: cierra la galería a lo ancho, contenida. */
  .win__foto--fila { grid-column: 1 / -1; max-width: 520px; }
  .ref__pareja { grid-template-columns: repeat(2, 1fr); }
  /* Galería de Uribe: ancha + estrecha, y debajo estrecha + ancha. */
  .win__foto--ancha   { grid-column: span 2; }
  /* Sedena Fuerza: la carátula ocupa dos columnas y dos filas, y a su derecha
     se apilan el broche y la vista completa. Así la galería cierra sin dejar
     un hueco vertical bajo la fotografía más baja, y ninguna foto se recorta. */
  .win__foto--alta    { grid-row: span 2; }
  .win__foto--detalle { grid-column: 1; }

  .bic__doble,
  .win__doble {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: start;
  }
  .bic__principal,
  .win__principal { width: 100%; }
  /* La columna de la imagen iguala la altura de la de texto: arriba y abajo
     quedan alineadas y no queda negro vacío debajo de la fotografía. */
  .win__doble { align-items: stretch; }
  .win__principal { aspect-ratio: auto; height: 100%; }
  /* Recorte alto: se sube el punto para conservar el brazalete superior y se
     desplaza un poco a la izquierda, que es donde cae la caja del reloj. */
  .win__principal img { object-position: 49% 53%; }
  .uri__principal img { object-position: 52% 50%; }
  .hep__principal img { object-position: 54% 44%; }
  /* La frase, la galería y el cierre siguen a todo el ancho. */
}