/*
 * landing-oferta.css — la portada, segunda mitad: qué trae y cuánto vale.
 *
 * Sigue a `landing.css`, que plantea el problema; acá se ofrece: lo que le
 * puedes preguntar al negocio, el trabajo que se hace solo, los módulos, los
 * planes, quién está detrás, las dudas y el cierre.
 *
 * Se carga después de `landing.css` y depende de sus piezas comunes
 * (`.seccion`, `.publico__contenedor`).
 */

/* --- Consultas: lo que le preguntas al negocio ----------------------------
 *
 * Las preguntas van en mono y con un filete a la izquierda: es la marca de
 * cita de la página, y sirve para que se lean como palabras del cliente y no
 * como una lista de funciones. Sin comillas dibujadas: el signo de pregunta
 * ya dice que es habla. */

.consultas {
    display: grid;
    gap: var(--espacio-sm);
    margin: 0 0 var(--espacio);
    padding: 0;
    max-width: 60ch;
    list-style: none;
}

.consulta {
    padding-left: var(--espacio);
    border-left: 2px solid var(--color-primario);
    font-family: var(--fuente-mono);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-primario);
}

/* --- Banda: el trabajo que se hace solo -------------------------------------
 *
 * La única losa de tinta en el medio de la página. Entre la portada y el
 * cierre había siete secciones blancas seguidas con el mismo padding y el
 * mismo filete: nada pesaba más que lo demás. Esta banda es el clímax, y por
 * eso es la única que cambia de campo.
 *
 * El campo NO es la trama de la portada. Esa abre y cierra la página, y con
 * una tercera aparición dejaba de leerse como un par de tapas para pasar a
 * ser, simplemente, el fondo azul. Acá van tres manchas difusas paseándose.
 *
 * Cada trabajo son dos turnos separados por un filete. El filete es el que
 * convierte dos párrafos apilados en un intercambio; sin él se leen como una
 * lista más. */

.banda {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 4rem 0;
    background: var(--color-azul-hondo);
    color: var(--color-crema);
}

/* El campo del efecto. Se pasa del borde para que las manchas puedan salirse
 * sin que aparezca el canto de ninguna; `overflow: hidden` en `.banda` las
 * recorta.
 *
 * Va con prefijo de bloque y no como `.campo` a secas: `.campo` ya es, en
 * app.css, el envoltorio de cada campo de formulario. Mientras se llamó igual,
 * todo formulario servido con landing.css (el login entero y el de demo de
 * esta misma página) veía sus campos absolutos y fuera de pantalla. */
.banda__campo {
    position: absolute;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
}

/* Una mancha difusa. Sin `filter: blur()` a propósito: el degradado radial YA
 * es la difusión, y así el navegador no vuelve a desenfocar la capa en cada
 * cuadro —que es lo que ahoga a un Android de gama media, que es el aparato
 * del que mira esto—. `landing.js` les anima solo `x` e `y`.
 *
 * `will-change` va puesto y no se saca: mientras la banda está en pantalla la
 * deriva no termina nunca, así que las tres capas se quedan promovidas todo
 * ese rato a propósito. */
/* `lighten` frena el apilamiento de los cruces, pero NO lo elimina: con alfa
 * menor que 1 la fórmula sigue siendo (1-α)·fondo + α·max(fondo, mancha), así
 * que dos manchas encimadas igual acercan el resultado a su color. Frena, no
 * tapa. Por eso el techo del campo se mide sobre la página andando y no se
 * calcula sobre una mancha sola —esa cuenta daba #1a3b55 y lo que de verdad
 * aparece es #2f4d68—. */
.mancha {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: lighten;
    will-change: transform;
}

/* La mancha nace redonda y `landing.js` la deforma: escala distinta en cada
 * eje más un giro lento. Que la deformación viva en el `transform` y no en el
 * `border-radius` no es un detalle de estilo —animar el radio repinta la capa
 * entera en cada cuadro, y son manchas de 650 px—. El alfa no cambia con la
 * deformación, así que el techo de contraste de más abajo se mantiene aunque
 * la mancha crezca. */

/* Dos cosas están calibradas acá y conviene no tocarlas por separado.
 *
 * El TAMAÑO y la CAÍDA hacen que el movimiento se vea. Con manchas de 46-54%
 * y caída hasta el 72% eran lavados de 770 px sin un borde que se notara
 * cruzar: se movían de verdad y aun así la banda se leía como fondo estático.
 * Achicadas a 26-34% y con la caída cortada en el 62%, la mancha tiene un
 * frente reconocible, y un frente que se traslada sí se ve.
 *
 * El ALFA es contraste, no estética, y su techo lo fija el texto MÁS TENUE que
 * le pase por encima. Estos valores NO se calcularon sobre una mancha suelta:
 * esa cuenta daba #1a3b55, y midiendo la página andando el punto más claro que
 * de verdad aparece es #2f4d68, porque los cruces apilan. Contra ese punto
 * real, el texto de la banda tuvo que subir de 0,62 a 0,72 (4,01:1 → 4,81:1).
 *
 * Regla, entonces: el techo del campo se mide sobre la página corriendo, no en
 * una hoja de cálculo. Y si se quiere un campo más marcado, el orden es primero
 * el texto y después el campo, nunca el campo solo — aunque la palanca barata
 * sigue siendo el RECORRIDO y la VELOCIDAD, que no cuestan contraste. */
.mancha--a {
    top: 2%;
    left: 4%;
    width: 30%;
    aspect-ratio: 1;
    background: radial-gradient(circle,
        rgba(47, 100, 141, 0.35) 0%,
        rgba(47, 100, 141, 0.18) 38%,
        transparent 62%);
}

.mancha--b {
    top: 26%;
    right: 2%;
    width: 34%;
    aspect-ratio: 1;
    background: radial-gradient(circle,
        rgba(63, 124, 168, 0.32) 0%,
        rgba(47, 100, 141, 0.16) 40%,
        transparent 64%);
}

.mancha--c {
    bottom: 0;
    left: 38%;
    width: 26%;
    aspect-ratio: 1;
    background: radial-gradient(circle,
        rgba(38, 86, 124, 0.34) 0%,
        rgba(38, 86, 124, 0.17) 38%,
        transparent 62%);
}

.banda__rotulo { color: rgba(242, 237, 228, 0.72); }

.banda__titulo {
    margin: 0 0 var(--espacio-lg);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: 20ch;
}

.trabajos {
    display: grid;
    gap: var(--espacio-lg) 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trabajo__nombre {
    margin: 0 0 var(--espacio-sm);
    font-family: var(--fuente-mono);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 237, 228, 0.72);
}

.turno { margin: 0; max-width: 46ch; }

/* "Tú" y "Queda hecho" son la etiqueta del turno, no adorno: son las que
 * dicen de quién es cada mitad cuando el filete no se ve (movimiento
 * reducido, lector de pantalla, impresión).
 *
 * El alfa es 0,62 y no menos: el peor fondo posible acá no es el azul hondo
 * sino un punto de la trama bajo el velo de 0,86, que sube a #132e43. Contra
 * ese, 0,55 daba 4,49:1 —bajo el mínimo, y a 12,8px no califica como texto
 * grande—; 0,62 da 5,36:1. */
.turno__quien {
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(242, 237, 228, 0.72);
}

.turno--tu { color: rgba(242, 237, 228, 0.88); }
.turno--hecho { color: var(--color-crema); }

/* El relevo. Nace entero y `landing.js` lo dibuja de izquierda a derecha si
 * hay movimiento; sin JS queda puesto, que es el estado correcto. */
.relevo {
    height: 1px;
    margin: 0.85rem 0;
    background: rgba(242, 237, 228, 0.32);
    transform-origin: left center;
}

.banda__pie {
    margin: var(--espacio-lg) 0 0;
    max-width: 60ch;
    color: rgba(242, 237, 228, 0.72);
    font-size: 0.95rem;
}

@media (min-width: 44rem) {
    .trabajos { grid-template-columns: 1fr 1fr; }
}

/* --- Módulos: qué trae, en su propia sección ------------------------------
 *
 * Nacieron adentro de la tarjeta de precio y salieron de ahí: son la respuesta
 * a "¿qué me van a instalar?", y adentro del precio llegaban a los 4.000 px,
 * cuando el lector ya está calculando plata. Ahora van pegados al paso que los
 * promete ("quedan puestos los módulos que necesitas") y en el precio queda
 * solo la línea de que no se cobran aparte.
 *
 * Cada uno es un ícono, un nombre y una línea de qué resuelve. El filete de
 * arriba los separa sin encerrarlos en tarjetas: ocho cajas con borde en una
 * sección gris serían ocho cajas dentro de otra caja. */

.planes__intro {
    margin: 0 0 var(--espacio);
    max-width: 62ch;
    color: var(--color-texto);
}

.modulos__pie {
    margin: var(--espacio-lg) 0 0;
    max-width: 62ch;
    color: var(--color-texto-suave);
    font-size: 0.95rem;
}

.modulos {
    display: grid;
    gap: var(--espacio);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.modulo {
    padding-top: var(--espacio-sm);
    border-top: 1px solid var(--color-filete);
    color: var(--color-texto-suave);
    font-size: 0.95rem;
}

.modulo__nombre {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.15rem;
    color: var(--color-primario);
    font-size: 1rem;
    font-weight: 600;
}

/* Un solo lugar fija el trazo de los ocho dibujos: así ninguno puede quedar
 * más grueso o más redondeado que sus vecinos, que es como un set dibujado a
 * mano se desarma. `flex-shrink: 0` porque "Cuenta corriente" envuelve en
 * pantalla angosta y sin esto el cuadrado se aplasta. */
.modulo__icono {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* --- Planes --------------------------------------------------------------- */

.planes {
    display: grid;
    gap: var(--espacio);
    align-items: start;   /* cada plan mide lo que necesita, sin relleno vacío */
    margin: 0 0 var(--espacio);
}

.plan {
    padding: var(--espacio-lg) var(--espacio);
    /* Gris apenas, no blanco: sobre el campo blanco de la página un plan en
     * blanco desaparecería y quedaría solo el borde. */
    background: var(--color-fondo);
    border: 1px solid var(--color-filete);
    border-radius: var(--radio);
}

.plan--destacado { border-color: var(--color-primario); }

.plan__nombre { margin: 0; font-size: 1.05rem; font-weight: 600; }

.plan__precio {
    margin: 0.4rem 0 0;
    font-family: var(--fuente-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--color-primario);
}

.plan__periodo { font-family: var(--fuente-ui); font-size: 0.9rem; color: var(--color-texto-suave); }

.plan__incluye { margin: var(--espacio) 0 0; padding: 0; list-style: none; }

.plan__incluye li {
    padding: 0.4rem 0;
    border-top: 1px solid var(--color-filete);
    font-size: 0.95rem;
}

/* La garantía va con filete al costado, no dentro de una tarjeta: es una
 * afirmación de la página, no un tercer plan que haya que comparar. */
.planes__garantia {
    margin: var(--espacio) 0;
    padding-left: var(--espacio);
    border-left: 3px solid var(--color-primario);
    max-width: 62ch;
}

.planes__nota { margin: 0; color: var(--color-texto-suave); font-size: 0.95rem; max-width: 62ch; }

@media (min-width: 48rem) {
    .planes { grid-template-columns: 1fr 1fr; }
}

/* --- Quién está detrás ----------------------------------------------------- */

.autor__reja { display: grid; gap: var(--espacio-lg); align-items: start; }

/* El título manda sobre las dos columnas y la foto empieza debajo de él. */
.autor__titulo { grid-column: 1 / -1; margin-bottom: 0; }

/* Mismo radio que las fotos de oficio: es una foto duotono, no un dibujo suelto. */
/* 13rem, no 9: el retrato es de cabeza y torso, y a 9rem la cara quedaba chica. */
.autor__sello { display: block; width: 13rem; height: auto; border-radius: var(--radio); }

.autor__texto { max-width: 60ch; }

.autor__texto p { margin: 0 0 var(--espacio); }

.autor__firma { color: var(--color-texto-suave); }

@media (min-width: 48rem) {
    /* El bloque va centrado en la página, no pegado al margen izquierdo: la
     * columna de texto mide 60ch y contra un contenedor de 1120px dejaba un
     * vacío grande a la derecha que hacía ver la sección desbalanceada.
     * `justify-content` centra el par de columnas dentro de la reja. */
    .autor__reja {
        grid-template-columns: 13rem minmax(0, 60ch);
        justify-content: center;
        gap: 2.5rem;
    }
}

/* --- Preguntas ------------------------------------------------------------- */

.preguntas { max-width: 68ch; }

.pregunta {
    border-top: 1px solid var(--color-filete);
}

.pregunta:last-child { border-bottom: 1px solid var(--color-filete); }

.pregunta__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio);
    min-height: var(--toque-minimo);
    padding: var(--espacio-sm) 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.pregunta__titulo::-webkit-details-marker { display: none; }

/* El signo es decorativo: el estado abierto/cerrado ya lo anuncia <details>
 * a los lectores de pantalla. */
.pregunta__titulo::after {
    content: "+";
    font-family: var(--fuente-mono);
    color: var(--color-primario);
}

.pregunta[open] .pregunta__titulo::after { content: "\2212"; }

.pregunta__respuesta { margin: 0 0 var(--espacio); color: var(--color-texto); }

/* --- Cierre y pie: la losa de azul hondo -----------------------------------
 *
 * El cierre y el pie son UN solo bloque oscuro, no dos franjas de colores
 * distintos, y es el mismo azul hondo de la portada: la página abre y cierra
 * con el mismo campo, y en el medio el blanco deja respirar el contenido.
 *
 * El bloque de cierre va centrado a propósito: es el único momento de la
 * página donde el mensaje ES la composición, y centrarlo evita el vacío a la
 * derecha que dejaba la versión a una columna. */

.losa {
    background: var(--color-azul-hondo);
    color: var(--color-crema);
}

/* El cierre repite la trama de la portada: la página termina en el mismo
 * campo con que empezó. Acá el velo es parejo y no diagonal, porque el texto
 * va centrado y ocupa todo el ancho. */
.cierre {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 5rem 0 4rem;
    text-align: center;
}

/* La trama del cierre se apaga hacia abajo: sin esto el canvas termina en un
 * corte recto justo encima del pie y se ve el borde del rectángulo. */
.cierre .trama {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.cierre::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(15, 37, 55, 0.82);
}

.cierre__titulo {
    margin: 0 auto;
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    max-width: 18ch;
}

.cierre__texto {
    margin: var(--espacio) auto 0;
    max-width: 52ch;
    color: rgba(242, 237, 228, 0.82);
}

.cierre__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espacio-sm);
    margin-top: var(--espacio-lg);
}

/* La caja del formulario es blanca sobre el azul: los controles de app.css
 * (.campo, .boton--primario) están hechos para fondo claro, y reteñirlos para
 * que sobrevivan encima de la losa sería mantener dos sistemas de formulario
 * por una sola pantalla. */
.cierre__caja {
    max-width: 26rem;
    margin: var(--espacio-lg) auto 0;
    padding: var(--espacio-lg);
    background: var(--color-superficie);
    border-radius: var(--radio);
    color: var(--color-texto);
    text-align: left;
}

.cierre__enviar { width: 100%; margin-top: var(--espacio-sm); }

.cierre__microcopy {
    margin: var(--espacio-sm) 0 0;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    text-align: center;
}

.cierre__gracias { margin: 0; text-align: center; font-weight: 600; }

.cierre__riesgo {
    margin: var(--espacio-lg) auto 0;
    max-width: 52ch;
    color: rgba(242, 237, 228, 0.72);
    font-size: 0.95rem;
}

.cierre__alterno {
    margin: var(--espacio) 0 0;
    font-size: 0.9rem;
    color: rgba(242, 237, 228, 0.72);
}

.cierre__alterno a { color: var(--color-crema); }

/* Trampa de robots: fuera de la pantalla, no `display: none`. Varios robots
 * saltan lo que está oculto con display, pero llenan lo que existe. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Sobre azul el botón primario se invierte: campo crema, texto azul hondo.
 * Contraste 13,4:1. */
.boton--invertido { background: var(--color-crema); color: var(--color-azul-hondo); }
.boton--invertido:hover { background: var(--color-superficie); }

.boton--contorno-claro {
    background: transparent;
    color: var(--color-crema);
    border-color: rgba(242, 237, 228, 0.42);
}
.boton--contorno-claro:hover { background: rgba(242, 237, 228, 0.1); }