/* ───────────────────────────────────────────────────────────────────
 * saelyx-page.css · sólo /saelyx/ y /en/saelyx/
 *
 * Va en fichero PROPIO, no dentro de v3.css, por dos razones:
 *
 * 1. La distribución de enekui.io ignora la query string en caché: un
 *    `?v=` nuevo sobre /assets/css/v3.css devuelve el MISMO ETag y
 *    `x-cache: Hit from cloudfront`. Es decir, el sello de versión NO
 *    invalida nada — sólo sirve para el caché del navegador. Una ruta
 *    que no existe todavía, en cambio, no puede venir cacheada, así que
 *    este fichero llega sí o sí en el primer despliegue.
 * 2. Todo lo de aquí es exclusivo de las dos páginas de producto. En
 *    v3.css sería peso muerto para las otras 16 páginas.
 *
 * Se carga DESPUÉS de v3.css, así que a igualdad de especificidad gana.
 * ─────────────────────────────────────────────────────────────────── */

/* ── 1 · Escala tipográfica de marketing, no la de página legal ──
   La plantilla interior (/transparencia/, /changelog/) baja los h2 a
   clamp(22px, 2.6vw, 28px) con interlineado 1,55. En la página insignia
   eso deja los títulos de sección un 30% por debajo de los de la portada
   y, en móvil, casi al mismo tamaño que el lede que llevan encima. Aquí
   se recupera la escala de .section-head de la portada. */
.page-flagship .page-section h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.page-flagship .page-hero p.lede {
  font-size: 18px;
  max-width: 680px;
}
.page-flagship .page-section .section-lede {
  font-size: 16px;
  max-width: 660px;
  margin: 0 0 34px;
}

/* ── 2 · Una sola medida de columna para el texto ──
   Convivían tres: lede a 640px, listas numeradas a los 1180px completos
   y párrafo puente a 720px centrado. Las listas a ancho total daban
   líneas de ~140 caracteres justo debajo de un lede que rompía a 640px,
   y ese salto es la señal de borrador más fuerte en escritorio. */
.page-flagship .posture-list { max-width: 860px; }
.page-flagship .flagship-caps { max-width: 860px; }

/* ── 3 · La nota al pie, del mismo tamaño en los dos sitios donde sale ──
   `.flagship-copy p` (16.5px) ganaba por especificidad a los 12px de
   `.flagship-note`, así que la misma clase se renderizaba a 16,5px
   dentro de la columna y a 12px colgando de la sección, esta última sin
   límite de ancho: 1168px de monoespaciada, que se lee como un volcado
   de log. Se unifica en 13px y se le pone medida. */
.page-flagship .flagship-note,
.page-flagship .flagship-copy p.flagship-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 720px;
}
.page-flagship .page-section-inner > .flagship-note { margin: 26px 0 0; }

/* ── 4 · Las tarjetas de "Dónde se consigue" llevan prosa, no specs ──
   El hueco `.proof-card__metric` está pensado para tiras de specs cortas
   ("IPv6 · DNSSEC · TLS 1.3"), que en mono de 13px se leen bien. Aquí
   lleva frases completas de hasta 107 caracteres en una columna de
   237px: seis líneas de prosa monoespaciada por tarjeta. Se pasa a Inter
   sólo en estas dos páginas. */
.page-flagship .proof-card__metric {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--bone-mute);
}

/* ── 5 · El párrafo puente ──
   En página interior le sigue el banner de CTA, así que necesita hueco
   por abajo. Y en móvil, siete líneas centradas con los dos márgenes
   dentados son el peor momento tipográfico de la página: se alinea a la
   izquierda por debajo de 720px. */
.page-flagship .page-section-inner > .flagship-bridge { margin-bottom: 36px; }

/* ── 6 · Capturas de producto ──
   Vienen de la ficha pública de la App Store. Siempre con width/height
   en el HTML para que el navegador reserve el hueco y el texto no salte
   al cargarlas. */
.shot-row,
.shot-single {
  margin: 40px 0 0;
  padding: 0;
}
.shot-row__frames {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  max-width: 860px;
}
.shot-row img,
.shot-single img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ink-3);
}
.shot-single__frame {
  max-width: 620px;
}
.shot-row figcaption,
.shot-single figcaption {
  margin-top: 16px;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
}
.shot-row figcaption strong,
.shot-single figcaption strong {
  color: var(--bone);
  font-weight: 500;
}

@media (max-width: 720px) {
  .page-flagship .flagship-bridge {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .shot-row,
  .shot-single { margin-top: 32px; }
  /* Tres teléfonos en tres columnas de 390px salen a 109px de ancho: no se lee
     nada. En móvil pasan a carrusel con anclaje, cada uno al 68% del ancho, de
     modo que el tercero asoma y se ve que hay más. El scroll horizontal queda
     dentro de este contenedor; la página nunca se mueve de lado. */
  .shot-row__frames {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .shot-row__frames::-webkit-scrollbar { display: none; }
  .shot-row__frames img {
    flex: 0 0 auto;
    width: 68%;
    scroll-snap-align: start;
  }
}