/*
 * Home del programa (public/index.php). Solo layout de sus secciones;
 * los tokens y componentes viven en tokens.css.
 */

.seccion { padding-block: var(--e-8); }
.seccion--invertida {
    background: var(--invertido-papel);
    color: var(--invertido-tinta);
    --tinta: var(--invertido-tinta);
    --papel: var(--invertido-papel);
    --tinta-2: color-mix(in srgb, var(--invertido-tinta) 75%, var(--invertido-papel));
    --tinta-3: color-mix(in srgb, var(--invertido-tinta) 55%, var(--invertido-papel));
    --linea: color-mix(in srgb, var(--invertido-tinta) 22%, var(--invertido-papel));
    --linea-fuerte: var(--invertido-tinta);
}
@media (min-width: 48rem) { .seccion { padding-block: var(--e-9); } }

.seccion__cabeza {
    display: grid;
    gap: var(--e-3);
    justify-items: center;
    margin-bottom: var(--e-7);
    text-align: center;
}
.seccion__cabeza p { max-width: var(--ancho-texto); color: var(--tinta-2); }

/* ---------- Hero ---------- */

.hero { position: relative; color: #fff; }
.hero .foto { --proporcion: 4 / 5; }
.hero .foto img { object-position: 80% center; }
@media (min-width: 48rem) { .hero .foto { --proporcion: 16 / 9; } }
@media (min-width: 64rem) { .hero .foto { aspect-ratio: auto; height: calc(100svh - var(--alto-barra) - var(--alto-encabezado)); min-height: 36rem; } }
.hero .foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
}
.hero__texto {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: grid;
    gap: var(--e-4);
    justify-items: start;
    padding-bottom: var(--e-7);
}
.hero__texto .display { max-width: 14ch; }
.hero__texto p { max-width: var(--ancho-texto); font-size: var(--t-m); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-2); }

/* ---------- Manifiesto ---------- */

.manifiesto { text-align: center; }
.manifiesto__frase {
    max-width: 40rem;
    margin: var(--e-5) auto 0;
    font-size: var(--t-xl);
    font-weight: 300;
    line-height: 1.35;
}
@media (min-width: 48rem) { .manifiesto__frase { font-size: 2rem; } }
.manifiesto__firma { margin-top: var(--e-5); color: var(--tinta-3); }

/* ---------- Para quién (tríptico) ---------- */

.triptico { display: grid; gap: var(--e-7) var(--e-4); }
@media (min-width: 48rem) { .triptico { grid-template-columns: repeat(3, 1fr); } }
.triptico__item { display: grid; gap: var(--e-3); align-content: start; }
.triptico__item .foto { margin-bottom: var(--e-2); }
.triptico__item p { color: var(--tinta-2); font-size: var(--t-s); }

/* ---------- Cómo funciona (foto + pasos) ---------- */

.dividido { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 64rem) { .dividido { grid-template-columns: 1fr 1fr; gap: var(--e-9); } }
.dividido__intro { margin-top: var(--e-3); }
.dividido__lista { margin-top: var(--e-6); }

.pasos { counter-reset: paso; }
.pasos > li { counter-increment: paso; display: grid; grid-template-columns: 3rem 1fr; gap: var(--e-1) var(--e-3); }
.pasos > li::before {
    content: counter(paso, decimal-leading-zero);
    grid-row: span 2;
    font-size: var(--t-xs);
    font-weight: var(--peso-medio);
    letter-spacing: var(--track-m);
    padding-top: 0.2em;
}
.pasos h3 { font-size: var(--t-m); font-weight: var(--peso-fuerte); }
.pasos p { color: var(--tinta-2); font-size: var(--t-s); }

/* ---------- La red (rejilla de beneficios) ---------- */

.rejilla { display: grid; gap: 0 var(--e-6); }
@media (min-width: 48rem) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
.rejilla > li { display: grid; gap: var(--e-2); padding-block: var(--e-5); border-top: var(--borde); }
.rejilla h3 { font-size: var(--t-m); font-weight: var(--peso-fuerte); }
.rejilla p { color: var(--tinta-2); font-size: var(--t-s); }

/* ---------- Proyección ---------- */

.proyeccion { display: grid; gap: var(--e-8); }
@media (min-width: 64rem) { .proyeccion { grid-template-columns: repeat(3, 1fr); gap: var(--e-7); } }
.proyeccion__bloque { display: grid; gap: var(--e-4); align-content: start; }
.proyeccion__bloque > p { color: var(--tinta-2); font-size: var(--t-s); }

.cifra { display: grid; gap: var(--e-1); padding-block: var(--e-4); border-top: var(--borde); }
.cifra:last-child { border-bottom: var(--borde); }
.cifra__valor { font-size: 2.5rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra__texto { color: var(--tinta-2); font-size: var(--t-s); }

.aviso { max-width: 44rem; margin: var(--e-7) auto 0; text-align: center; }

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

.planes { display: grid; gap: var(--e-4); }
@media (min-width: 64rem) { .planes { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: grid; gap: var(--e-4); align-content: start; padding: var(--e-6) var(--e-5); border: var(--borde); }
.plan--destacado { border: var(--borde-fuerte); }
.plan--destacado .acento-linea { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); }
.plan__precio { font-size: 2.5rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__precio small { font-size: var(--t-s); color: var(--tinta-3); }
.plan ul { padding: 0; list-style: none; display: grid; gap: var(--e-2); font-size: var(--t-s); color: var(--tinta-2); }
.plan li::before { content: '— '; color: var(--tinta-3); }
.planes__nota { margin-top: var(--e-6); text-align: center; }

/* ---------- Fundadoras (foto a sangre con llamada) ---------- */

.llamada { position: relative; color: #fff; text-align: center; }
.llamada .foto { --proporcion: 4 / 5; }
@media (min-width: 48rem) { .llamada .foto { --proporcion: 21 / 9; } }
.llamada .foto::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.llamada__texto {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--e-4);
    padding: var(--margen);
}
.llamada__texto p { max-width: var(--ancho-texto); }

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

.preguntas { max-width: 48rem; margin-inline: auto; }

/* ---------- Pie ---------- */

.pie__columnas { display: grid; gap: var(--e-6); }
@media (min-width: 48rem) { .pie__columnas { grid-template-columns: 2fr 1fr 1fr; } }
.pie__columnas ul { padding: 0; list-style: none; display: grid; gap: var(--e-2); margin-top: var(--e-3); font-size: var(--t-s); }
.pie__columnas p { margin-top: var(--e-3); max-width: 24rem; color: var(--tinta-2); font-size: var(--t-s); }