/* ══════════════════════════════════════════════════════════════════════════════════════════════
   ANALITY · /seguridad/ CORTA, al estilo de /planes/ (9-oct-2026)
   ----------------------------------------------------------------------------------------------
   Pedido de Alan (9-oct), revisando la landing antes de la salida del 15: «la página de seguridad
   no tiene la pinta de sonos», y el detalle (el código de recuperación, las dos listas de qué va
   cifrado, y lo de Ana) «va en un FAQ, no es necesario extender la página». Lo que queda aquí es
   «solo lo básico en grande».

   ⭐ ESTA HOJA SÓLO VISTE, y va DESPUÉS del <style> de la página. No toca el hero ni la
   demostración de cifrado, que Alan dijo que se quedan como están (con «Literalmente.» en naranja).

   ⛔ NO SE TOCA marca.css: su ?v= cambia en las once páginas y chocaría con la ventana que está
   rehaciendo /planes/. Lo propio de esta página vive aquí, con su propio ?v=.

   EL LENGUAJE es el mismo que planes-fotos.css: blanco y un gris casi blanco, tinta navy,
   tipografía grande con aire, y el naranja de la marca SÓLO como detalle.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    --sc-papel: #ffffff;
    --sc-gris:  #f3f4f6;
    --sc-tinta: #14233f;
    --sc-suave: #5c6478;
    --sc-linea: rgba(20, 35, 63, .12);
}

/* ── Lo básico, en grande ─────────────────────────────────────────────────────────────────────
   Tres cosas, cada una con su liga a la pregunta de la FAQ que trae el detalle. Sin recuadros con
   raya de color: Alan no los quiere (9-oct). El aire y el tamaño hacen la jerarquía. */
.sc-basico { background: var(--sc-gris); padding: clamp(56px, 9vw, 112px) 0; }
.sc-basico .wrap { max-width: 1120px; }

.sc-basico h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--sc-tinta);
    margin: 0 0 clamp(32px, 5vw, 56px);
    max-width: 22ch;
}

.sc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 5vw, 64px); }

/* Cada punto: una frase grande que se lee sola, y debajo la liga al detalle. */
.sc-punto { max-width: 46ch; }
.sc-punto p {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.32;
    letter-spacing: -.01em;
    color: var(--sc-tinta);
    margin: 0 0 14px;
}
/* ⛔ El gris de apoyo es #5c6478 y no uno más claro: sobre #f3f4f6 da 5.6:1, y la norma pide 4.5:1
   para texto chico. Ayer se publicó una ficha con texto blanco sobre blanco; aquí se mide. */
.sc-punto .sc-liga {
    display: inline-block;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--sc-suave);
    text-decoration: none;
    border-bottom: 1px solid var(--sc-linea);
    padding-bottom: 2px;
}
.sc-punto .sc-liga:hover,
.sc-punto .sc-liga:focus-visible { color: var(--sc-tinta); border-bottom-color: var(--sc-tinta); }
/* El naranja de la marca, sólo como detalle: la flechita de la liga. */
.sc-punto .sc-liga::after { content: " →"; color: #bd4c03; }

@media (min-width: 900px) {
    .sc-lista { grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); }
    /* ⭐ Las tres ligas, a la MISMA altura. Los tres textos miden distinto, así que sin esto las ligas
       quedan escalonadas y la fila se lee como tres cosas sueltas en vez de como tres iguales. Se vio
       en la captura: leyéndolo no se nota. */
    .sc-punto { max-width: none; display: flex; flex-direction: column; }
    .sc-punto p { flex: 1 0 auto; }
}

/* El camino al detalle, al pie del bloque. En chico y en gris: no compite con los tres puntos.
   ⛔ El gris es el mismo #5c6478 de las ligas, que sobre #f3f4f6 da 5.6:1. Un gris más claro aquí
      sería texto chico por debajo de 4.5:1, que es justo lo que se publicó el 8-oct en /planes/. */
.sc-mas {
    margin: clamp(36px, 5vw, 56px) 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--sc-suave);
}
.sc-mas a { color: var(--sc-tinta); text-decoration: underline; text-underline-offset: 3px; }

/* ── La foto de la banda de conocimiento cero ─────────────────────────────────────────────────
   9-oct · Ocupa el sitio donde estuvo la ilustración de Ana. Alan la quitó, propuse una tabla que
   enseñaba lo que hay en la base de datos, y Alan decidió «mejor una foto», al estilo de /planes/.
   ⛔ No se usa `.foto` de planes-fotos.css: esa hoja no la carga /seguridad/, y traerla aquí
      ataría las dos páginas y haría que el `?v=` de /planes/ tuviera que cambiar también. Es la
      misma receta (recorte 4:5, `object-fit: cover`, esquinas redondeadas), escrita aquí. */
.sc-foto {
    margin: 0; width: 100%; max-width: 420px;
    aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px;
    background: #dfe5f3;   /* lo que se ve mientras la foto carga, del color de la banda */
}
.sc-foto img {
    display: block; width: 100%; height: 100%;
    /* ⛔ `max-width: none` NO ES ADORNO. La página traía de antes `.banda-fig img { width:76%;
       max-width:240px }`, que era para la ilustración de Ana. Mi `width:100%` ganaba, pero el tope
       de 240px seguía en pie y la foto salía encogida dentro de su caja de 420, con un hueco vacío
       a la derecha. Se vio en la captura, no leyendo la hoja: una regla que sobra de lo anterior no
       avisa, sólo encoge. */
    max-width: none;
    object-fit: cover;
    /* ⛔ EL PUNTO DE ENFOQUE. La cara y el teléfono están arriba del centro; sin esto, al
       recortarse en una pantalla angosta se queda la almohada y se pierde lo único que la foto
       cuenta. Se mira en la captura a 390, no se calcula de memoria. */
    object-position: 50% 38%;
}
@media (max-width: 900px) {
    /* En el teléfono la figura va arriba del título (lo pidió Alan) y ocupa casi el ancho, pero no
       tan alta que empuje el texto fuera de la primera pantalla: se achata a 4:3. */
    .sc-foto { max-width: none; aspect-ratio: 4 / 3; border-radius: 16px; }
}
/* ── El resto de la página, con el mismo aire ─────────────────────────────────────────────────
   Las bandas que se quedan (el detalle técnico, lo que no hacemos, el cumplimiento, el contacto de
   seguridad y lo que falta) no cambian de contenido: sólo dejan de ser de colores distintos cada
   una y respiran como las de /planes/. */
.seg-corta .banda-crema { background: var(--sc-gris); }
.seg-corta .banda-blanca { background: var(--sc-papel); }
.seg-corta .banda:not(.banda-hero):not(.banda-oscura) { padding: clamp(48px, 7vw, 88px) 0; }
.seg-corta .banda:not(.banda-hero) .tg { letter-spacing: -.015em; }