/* Estilos del sitio público de MexCloud.
 *
 * Vive aparte —y no inline— desde que hay dos páginas: la portada del producto
 * y la de infraestructura. Con el CSS incrustado en cada una, cambiar un color
 * de marca obligaba a tocar los dos archivos y tarde o temprano dejaban de
 * decir lo mismo. Aquí además se descarga una sola vez para las dos.
 */
/* ─────────────────────────────────────────────────────────────────────────
   MexCloud · sitio público

   La página no promete: DECLARA REGLAS. Es lo que distingue al producto
   —privacidad que se explica con reglas concretas, no con adjetivos— y es lo
   que un despacho necesita leer antes de subir un expediente. De ahí que el
   elemento que se repite sea la «regla»: una frase corta, tajante, con una
   barra al margen, como una cláusula.

   Tipografía: Fraunces (variable, ya auto-hospedada por el producto) solo para
   las declaraciones; el resto en la pila del sistema, que es lo que usa la
   aplicación. Sin CDN, como manda el proyecto.
   ───────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Fraunces';
    src: url('/assets/Fraunces-Variable.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
    --tinta:    #0c1424;   /* azul tinta, no negro: el negro puro es de otro producto */
    --tinta-2:  #16203a;
    --papel:    #f7f8fa;
    --texto:    #1a202c;
    --texto-2:  #55637a;
    --claro:    #aab6cc;
    --azul:     #3b82f6;   /* el mismo del producto: la web y la app son la misma cosa */
    /* Solo para BOTONES con texto blanco encima: #3b82f6 con blanco da 3.68:1
       y AA pide 4.5. Este da 5.17:1 y sigue siendo el mismo azul un punto más
       hondo, así que la marca no se mueve. */
    --azul-boton: #2563eb;
    /* El hover OSCURECE, no aclara: con texto blanco encima, aclarar el fondo
       baja el contraste a 2.54:1 —peor que el estado normal— y el botón se
       vuelve ilegible justo cuando se va a pulsar. */
    --azul-boton-hover: #1d4ed8;
    --azul-alto:#60a5fa;
    --borde:    #263353;
    --regla:    #f0b429;   /* el margen de la cláusula: se ve, no grita */
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --serif: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0; background: var(--tinta); color: #e8edf6;
    font-family: var(--sans); font-size: 17px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.ancho { width: 100%; max-width: min(68rem, 100%); margin-inline: auto; padding-inline: 1.5rem; }

/* ── Barra ───────────────────────────────────────────────────────────── */
.barra {
    display: flex; align-items: center; gap: .8rem;
    padding: 1.1rem 0; border-bottom: 1px solid var(--borde);
}
.barra img { width: 46px; height: 46px; }
.barra-nombre { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; letter-spacing: -.02em; }
/* En pantallas estrechas se baja un punto: con el botón «Entrar» al lado, a
   tamaño completo la barra se quedaba sin aire. */
@media (max-width: 420px) {
    .barra img { width: 38px; height: 38px; }
    .barra-nombre { font-size: 1.3rem; }
}
.barra .crece { flex: 1; }
.entrar {
    color: #e8edf6; text-decoration: none; font-size: .92rem; font-weight: 600;
    border: 1px solid var(--borde); border-radius: 8px; padding: .45rem .95rem;
}
.entrar:hover { border-color: var(--azul); color: var(--azul-alto); }
/* «Agendar» manda y «Entrar» acompaña: quien ya es cliente sabe buscar su
   puerta; quien no lo es tiene que ver antes la demostración. */
.demo {
    background: var(--azul-boton); color: #fff; text-decoration: none;
    font-size: .92rem; font-weight: 600; border-radius: 8px; padding: .5rem 1.05rem;
    white-space: nowrap;
}
.demo:hover { background: var(--azul-boton-hover); }
/* En el móvil la barra se queda sin sitio para las dos: se acorta el texto del
   principal y «Entrar» pasa a ser un enlace sin marco. */
@media (max-width: 560px) {
    .demo { font-size: .86rem; padding: .45rem .8rem; }
    .demo .largo { display: none; }
    .entrar { border: 0; padding: .45rem .2rem; }
}
@media (min-width: 561px) { .demo .corto { display: none; } }

/* Llamado intermedio: aparece tras las dos secciones que más convencen, para
   no obligar a llegar al final. */
.llamado {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.2rem; flex-wrap: wrap; margin-top: 3rem;
    border-top: 1px solid var(--borde); padding-top: 1.8rem;
}
.seccion.papel .llamado { border-color: #d9dfea; }
.llamado p { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.llamado a {
    background: var(--azul-boton); color: #fff; text-decoration: none; font-weight: 600;
    border-radius: 9px; padding: .7rem 1.4rem; white-space: nowrap;
}
.llamado a:hover { background: var(--azul-boton-hover); }

/* Para quién: tres puertas de entrada, cada una con la suya. */
.perfiles { display: grid; gap: 1.4rem; margin-top: 2.4rem; }
@media (min-width: 860px) { .perfiles { grid-template-columns: repeat(3, 1fr); } }
.perfil { border: 1px solid var(--borde); border-radius: 12px; padding: 1.6rem; background: var(--tinta-2); color: #e8edf6; display: flex; flex-direction: column; }
.perfil h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin: 0 0 .8rem; letter-spacing: -.01em; }
.perfil p { margin: 0 0 1.2rem; font-size: .96rem; color: var(--claro); flex: 1; }
.perfil a { color: var(--azul-alto); text-decoration: none; font-weight: 600; font-size: .93rem; }
.perfil a:hover { text-decoration: underline; }
.perfil a::after { content: ' →'; }

/* ── Héroe ───────────────────────────────────────────────────────────── */
.heroe { padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem); }
.eyebrow {
    font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--claro); margin: 0 0 1.4rem;
}
.eyebrow b { color: var(--regla); font-weight: 700; }
h1 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(2.3rem, 6.2vw, 4.1rem); line-height: 1.05; letter-spacing: -.025em;
    margin: 0 0 1.3rem; max-width: 20ch;
}
h1 em { font-style: normal; color: var(--azul-alto); }
.entrada { font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: var(--claro); max-width: 54ch; margin: 0 0 2.6rem; }

/* ── La REGLA: el elemento que se repite en toda la página ────────────── */
.reglas { display: grid; gap: 1.6rem; }
/* `auto-fit` y no `repeat(3, …)`: la misma rejilla se usa con tres reglas en el
   héroe y con una sola dentro de la sección de IA. Con tres columnas fijas, esa
   regla suelta quedaba en un canalón estrechísimo, partida palabra por palabra. */
@media (min-width: 900px) {
    .reglas { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; }
    .reglas.dos { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; }
}
.regla { border-left: 3px solid var(--regla); padding-left: 1.1rem; }
.regla p {
    font-family: var(--serif); font-weight: 600; font-size: 1.16rem;
    line-height: 1.3; letter-spacing: -.01em; margin: 0 0 .45rem;
}
.regla span { font-size: .95rem; color: var(--claro); display: block; }

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1px solid var(--borde); }
.seccion.papel { background: var(--papel); color: var(--texto); border-top: none; }
.seccion.papel .claro, .seccion.papel .entrada { color: var(--texto-2); }
h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em;
    margin: 0 0 1rem; max-width: 22ch;
}
.rotulo {
    font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--azul); margin: 0 0 .9rem;
}
.seccion.papel .rotulo { color: #1d4ed8; }
.parrafo { font-size: 1.06rem; max-width: 60ch; margin: 0 0 1.2rem; color: var(--claro); }
.seccion.papel .parrafo { color: var(--texto-2); }

/* ── El problema: dos columnas, antes y ahora ─────────────────────────── */
.antes-ahora { display: grid; gap: 1.2rem; margin-top: 2.2rem; }
@media (min-width: 800px) { .antes-ahora { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.caja { border: 1px solid #d9dfea; border-radius: 12px; padding: 1.5rem; background: #fff; }
.caja h3 { margin: 0 0 .9rem; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.caja ul { margin: 0; padding: 0; list-style: none; }
.caja li { padding: .42rem 0 .42rem 1.6rem; position: relative; color: var(--texto-2); font-size: .97rem; }
.caja li::before {
    position: absolute; left: 0; top: .42rem; font-weight: 700; font-size: 1rem;
}
.caja.hoy li::before { content: '×'; color: #b91c1c; }
.caja.aqui { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.caja.aqui li::before { content: '✓'; color: #047857; }

/* ── La IA ───────────────────────────────────────────────────────────── */
.ia-cuerpo { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 900px) { .ia-cuerpo { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.previa {
    background: var(--tinta-2); border: 1px solid var(--borde); border-radius: 12px;
    padding: 1.3rem; font-size: .93rem;
}
.previa-tit { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--claro); margin: 0 0 .9rem; }
.previa-txt { margin: 0; line-height: 1.7; }
/* Reserva la altura del texto más largo: sin esto la caja pega un salto
   justo cuando cae la primera ficha, que es donde debe mirarse. */
#previa-txt { min-height: 6.8em; }
.oculto {
    background: rgba(240, 180, 41, .16); color: var(--regla);
    border-radius: 4px; padding: .05em .4em; font-weight: 600;
    font-family: ui-monospace, monospace; font-size: .88em;
}
.previa-pie { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--borde); color: var(--claro); font-size: .88rem; }

.pie { padding-block: 2.5rem 3.5rem; border-top: 1px solid var(--borde); color: var(--claro); font-size: .9rem; }


/* ── Catálogo por módulos ─────────────────────────────────────────────── */
.modulos { display: grid; gap: 1.3rem; margin-top: 2.4rem; }
@media (min-width: 720px) { .modulos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .modulos { grid-template-columns: repeat(3, 1fr); } }
.modulo { border: 1px solid var(--borde); border-radius: 12px; padding: 1.4rem; background: var(--tinta-2); color: #e8edf6; }
.modulo h3 {
    font-family: var(--serif); font-weight: 600; font-size: 1.1rem;
    letter-spacing: -.01em; margin: 0 0 .7rem;
}
.modulo ul { margin: 0; padding: 0; list-style: none; }
.modulo li { font-size: .93rem; color: var(--claro); padding: .22rem 0 .22rem .95rem; position: relative; }
.modulo li::before { content: '·'; position: absolute; left: .15rem; color: var(--azul); font-weight: 700; }

/* ── Protagonistas: tres secciones amplias, una por diferenciador ─────── */
.destacado { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 900px) { .destacado { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.destacado.invertido > :first-child { order: 2; }
@media (max-width: 899px) { .destacado.invertido > :first-child { order: 0; } }

/* Mockup: la transcripción de una junta que se busca por palabra. */
.mock {
    background: var(--tinta-2); border: 1px solid var(--borde); border-radius: 12px;
    padding: 1.2rem; font-size: .92rem;
}
.seccion.papel .mock { background: #fff; border-color: #d9dfea; }
.mock-busca {
    display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem;
    border: 1px solid var(--borde); border-radius: 8px; margin-bottom: .9rem;
    color: var(--claro); font-size: .9rem;
}
.seccion.papel .mock-busca { border-color: #d9dfea; color: var(--texto-2); }
.mock-linea {
    display: flex; gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--borde);
    align-items: baseline;
}
.seccion.papel .mock-linea { border-color: #eef1f6; }
.mock-min { font-family: ui-monospace, monospace; font-size: .82rem; color: var(--azul); flex: none; }
.mock-txt { color: var(--claro); }
.seccion.papel .mock-txt { color: var(--texto-2); }
.mock mark { background: rgba(240,180,41,.22); color: inherit; border-radius: 3px; padding: 0 .15em; font-weight: 600; }
.seccion.papel .mock mark { background: rgba(240,180,41,.4); }
.mock-pie { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--borde); font-size: .86rem; color: var(--claro); }
.seccion.papel .mock-pie { border-color: #eef1f6; color: var(--texto-2); }

/* Constancia de firma: los cuatro datos que quedan registrados. */
/* Fotos. Un TERCER tono, una sola vez en todo el sitio: la sección donde
   mandan las imágenes pide un lienzo propio, y de paso resuelve que meter una
   sección en medio invertiría el ritmo claro/oscuro de todo lo que sigue. */
.seccion.lienzo { background: var(--tinta-2); border-top: none; }
.seccion.lienzo .mock { background: var(--tinta); }

.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
/* Fotos de obra reales, en dominio público (CC0, Wikimedia Commons; ver el
   comentario junto a la sección). Los bloques de color que había antes no
   leían «galería»: leían «aquí no hay nada», que es lo contrario de lo que la
   sección vende. Van a 2x del tamaño en pantalla y con carga diferida. */
.foto {
    display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: 6px; background: #1b2740;
}

.carpetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: 1.1rem; }
/* La pila: dos hojas asomando bajo la de arriba. Girar NO basta —una rotación
   pequeña desde el centro solo asoma esquinas y se lee como un borde torcido—:
   hay que DESPLAZARLAS, cada una hacia su lado. El padding reserva el hueco
   por el que asoman, para que la de arriba siga cuadrada. */
.carpeta figure { margin: 0; position: relative; padding: .45rem .5rem 0; }
.carpeta figure::before, .carpeta figure::after {
    content: ''; position: absolute; inset: .45rem .5rem auto; aspect-ratio: 1;
    border-radius: 6px; border: 1px solid rgba(255,255,255,.09);
}
.carpeta figure::before { transform: rotate(-5.5deg) translate(-4%, -3%); background: #2c3a58; }
.carpeta figure::after  { transform: rotate(4.5deg)  translate(4%, -2%);  background: #24304c; }
.carpeta .foto { position: relative; z-index: 1; }
.carpeta figcaption { margin-top: .55rem; font-size: .84rem; color: var(--claro); }
.carpeta b { display: block; color: inherit; font-weight: 600; font-size: .88rem; }

.persona { display: flex; align-items: center; gap: .5rem; }
.persona span {
    width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: none;
    display: grid; place-items: center; background: #2f4a7a; border: 2px solid var(--azul);
    font-size: .85rem; color: #cfe0ff; line-height: 1;
}
@media (max-width: 520px) { .galeria { grid-template-columns: repeat(3, 1fr); } }

.constancia { list-style: none; margin: 0; padding: 0; }
.constancia li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .6rem 0; border-top: 1px solid var(--borde); font-size: .93rem;
}
.seccion.papel .constancia li { border-color: #eef1f6; }
.constancia li:first-child { border-top: 0; }
.constancia b { font-weight: 600; color: var(--claro); }
.seccion.papel .constancia b { color: var(--texto-2); }
.constancia span { font-family: ui-monospace, monospace; font-size: .86rem; text-align: right; }

/* Los módulos restantes: tarjetas pequeñas, ya sin protagonismo. */
.modulos.compacta .modulo { padding: 1.1rem; }
.modulos.compacta h3 { font-size: 1rem; margin-bottom: .45rem; }
.modulos.compacta li { font-size: .89rem; padding-top: .15rem; padding-bottom: .15rem; }

/* ── Compatibilidad: lo que ya usa, sin cambiar de costumbres ──────────── */
.compat { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
@media (min-width: 700px) { .compat { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }
@media (min-width: 1040px) { .compat { grid-template-columns: repeat(4, 1fr); } }
.compat-item {
    border: 1px solid var(--borde); border-radius: 12px; padding: 1.3rem;
    background: var(--tinta-2);
}
.compat-ic { display: block; width: 26px; height: 26px; color: var(--azul); margin-bottom: .8rem; }
.compat-item b { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; color: #e8edf6; }
.compat-item span { font-size: .92rem; color: var(--claro); }
/* El remate: es de lo mejor del sitio y merece pesar más que una regla más. */
.remate {
    margin-top: 2.6rem; border-left: 3px solid var(--regla); padding: .3rem 0 .3rem 1.3rem;
}
.remate p {
    font-family: var(--serif); font-weight: 600; margin: 0 0 .4rem;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.25; letter-spacing: -.015em;
}
.remate span { color: var(--claro); font-size: .98rem; }
/* Sin esto un enlace aquí sale con el azul por defecto del navegador: 1.95:1. */
.remate a { color: var(--azul-alto); }
.seccion.papel .remate a { color: #1d4ed8; }
/* Sobre papel, el gris de fondo oscuro da 1.92:1. Los fondos claros necesitan
   su propio gris; no basta con heredar. */
.seccion.papel .remate span { color: var(--texto-2); }


/* ── Cierre ───────────────────────────────────────────────────────────── */
.cierre { text-align: center; }
.cierre h2 { max-width: none; margin-inline: auto; }
.botones { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
.btn-principal, .btn-secundario {
    display: inline-block; text-decoration: none; font-weight: 600; font-size: 1rem;
    padding: .8rem 1.6rem; border-radius: 9px;
}
.btn-principal { background: var(--azul-boton); color: #fff; }
.btn-principal:hover { background: var(--azul-boton-hover); }
.btn-secundario { border: 1px solid var(--borde); color: #e8edf6; }
.btn-secundario:hover { border-color: var(--azul); }

:focus-visible { outline: 2px solid var(--azul-alto); outline-offset: 3px; border-radius: 4px; }
/* MOVIMIENTO. Una sola animación en toda la página —la sustitución de datos—
   y revelados discretos. Todo lo demás, quieto: en un sitio que vende
   seriedad, el movimiento gratuito resta. */
.oculto { transition: background-color .28s ease, color .28s ease; }
.oculto.destapado {
    background: transparent; color: inherit; font-family: inherit;
    font-weight: 400; font-size: 1em; padding: 0;
}
/* El resalte del que está a punto de sustituirse: dura lo que tarda en caer. */
.oculto.senalado { background: rgba(240, 180, 41, .45); color: #fff2d0; }

.previa-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
#previa-otra {
    background: none; border: 1px solid var(--borde); color: var(--claro);
    border-radius: 7px; padding: .3rem .7rem; font: inherit; font-size: .82rem;
    cursor: pointer; transition: border-color .2s, color .2s;
}
#previa-otra:hover { border-color: var(--azul); color: var(--azul-alto); }

/* La objeción que nace justo aquí, con el peso que merece. */
.reposicion {
    margin: 1.4rem 0 0; padding-left: 1.1rem; border-left: 3px solid var(--regla);
    font-size: 1.02rem; line-height: 1.5; color: var(--claro);
}
.reposicion b { color: #e8edf6; font-family: var(--serif); font-weight: 600; }

/* Revelado al entrar en pantalla. La clase la pone el JS, así que sin JS no
   hay nada oculto que se quede oculto para siempre. */
.revelar { opacity: 0; transform: translateY(15px); }
.revelar.dentro { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }

/* Con movimiento reducido no se atenúa la animación: se quita. Todo aparece ya
   en su sitio, y el bloque de revisión se queda con las fichas puestas. */
@media (prefers-reduced-motion: reduce) {
    .revelar, .revelar.dentro { opacity: 1; transform: none; transition: none; }
    .oculto { transition: none; }
}
/* Formulario de contacto. Va en el cierre porque es el único sitio donde ya se
   ha dicho todo: pedir el correo antes de haber convencido es pedirlo a un
   desconocido. */
.forma { max-width: 30rem; margin: 2.4rem auto 0; text-align: left; }
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-size: .88rem; color: var(--claro); margin-bottom: .35rem; }
.campo label i { font-style: normal; color: #7c8aa3; }
.campo input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: .98rem;
    background: var(--tinta-2); color: #e8edf6; border: 1px solid var(--borde);
    border-radius: 9px; padding: .7rem .85rem;
}
.campo input:focus { outline: 2px solid var(--azul-alto); outline-offset: 1px; border-color: transparent; }
.campo input:invalid:not(:placeholder-shown) { border-color: #c0576a; }
/* El señuelo: fuera de la vista pero SIN display:none, que algunos robots
   detectan. Se saca de la navegación con tabindex y aria-hidden para que no
   estorbe a quien usa lector de pantalla o teclado. */
.senuelo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.forma button {
    width: 100%; background: var(--azul-boton); color: #fff; border: 0; font: inherit;
    font-weight: 600; font-size: 1rem; border-radius: 9px; padding: .85rem 1.4rem;
    cursor: pointer; transition: background .2s;
}
.forma button:hover:not(:disabled) { background: var(--azul-boton-hover); }
.forma button:disabled { opacity: .6; cursor: progress; }
.forma-aviso { margin: 1rem 0 0; font-size: .95rem; line-height: 1.5; }
.forma-aviso.bien { color: #7ee2a8; }
.forma-aviso.mal  { color: #ff9db0; }
.forma-nota { margin: 1.1rem 0 0; font-size: .84rem; color: #7c8aa3; line-height: 1.5; }

/* La línea que convierte una promesa en algo comprobable. Monoespaciada y
   pequeña a propósito: no compite con la regla, se lee como un apunte al
   margen — y quien duda es justo quien baja la vista hasta ahí. */
.comprobar {
    display: block; margin-top: .5rem; font-family: ui-monospace, monospace;
    font-size: .78rem; line-height: 1.45; color: #8b97ad;
}
/* Solo lo que de verdad se apoya en el papel. `.modulo li` y `.perfil p` NO:
   viven dentro de tarjetas oscuras, que fijan su propio color. */
.seccion.papel .comprobar,
.seccion.papel .regla span { color: var(--texto-2); }

/* La advertencia sobre la IA. Resta en apariencia y suma de verdad: es lo que
   hace creíbles las cuatro reglas de la sección de privacidad. */
.honesto {
    margin: 1.6rem 0 0; padding: .9rem 1.1rem; border-radius: 10px;
    background: rgba(240, 180, 41, .07); border: 1px solid rgba(240, 180, 41, .28);
    font-size: .92rem; line-height: 1.55; color: var(--claro);
}
.honesto b { color: #e8edf6; }
.seccion.papel .honesto { color: var(--texto-2); }
.seccion.papel .honesto b { color: var(--texto); }

.pie-legal { margin: .7rem 0 0; font-size: .8rem; line-height: 1.6; color: #7d8ba2; }

/* Dónde vive la información. Tres modalidades, no una escalera: ninguna es
   «mejor», dependen de lo que la empresa tenga y de lo que le exijan. Por eso
   van en tarjetas iguales y sin numerar. */
.donde { display: grid; gap: 1.2rem; margin-top: 2.4rem; }
@media (min-width: 900px) { .donde { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.donde-op {
    border: 1px solid var(--borde); border-radius: 12px; padding: 1.5rem;
    background: var(--tinta-2); display: flex; flex-direction: column;
}
.donde-ic { display: inline-flex; color: var(--azul-alto); margin-bottom: .9rem; }
.donde-ic svg { width: 1.7rem; height: 1.7rem; }
.donde-op h3 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin: 0 0 .7rem; letter-spacing: -.01em; }
.donde-op p { margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.55; color: var(--claro); flex: 1; }
.donde-quien {
    margin: 0; padding-top: .9rem; border-top: 1px solid var(--borde);
    font-size: .86rem; color: #8b97ad;
}
.donde-quien b { color: #cfe0ff; font-weight: 600; }

/* Trayectoria. Los años SÍ van numerados porque aquí el orden es información:
   es una secuencia real y lo que se quiere entender es que una cosa llevó a la
   otra. (En una lista de funciones, numerar sería decoración.) */
.hitos { display: grid; gap: 0; margin-top: 2.4rem; }
.hito { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.4rem; padding: 1.1rem 0; border-top: 1px solid #e4e8f0; }
.hito:first-child { border-top: 0; }
.hito-ano { font-family: ui-monospace, monospace; font-size: .95rem; color: #1d4ed8; padding-top: .15rem; }
.hito h3 { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
.hito p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--texto-2); }
@media (max-width: 600px) {
    .hito { grid-template-columns: 1fr; gap: .3rem; }
    .hito-ano { padding-top: 0; }
}

/* Los datos de contacto, junto al formulario: un teléfono con lada real dice
   «existimos» más que cualquier eslogan, y hay quien prefiere llamar. */
.contacto-datos { margin: 2.2rem 0 0; font-size: .95rem; line-height: 1.9; color: var(--claro); }
.contacto-datos a { color: #cfe0ff; text-decoration: none; border-bottom: 1px solid var(--borde); }
.contacto-datos a:hover { color: #fff; border-bottom-color: var(--azul-alto); }
.contacto-datos b { color: #e8edf6; font-weight: 600; }