/* ══════════════════════════════════════════════════════════════════════
   Tema «rosa»: la piel de «El poder de conocerte» (systeme.io) dentro del
   constructor de embudos. Se elige en los ajustes del paso (`tema: rosa`) y
   SOLO se carga cuando una etapa lo usa: las etapas con el tema «academia»
   (el de siempre) no bajan ni este fichero ni las tipografías.

   El tema cambia tipografía y fondo de la página; los colores de cada
   bloque (botón, caja) los elige Diana bloque a bloque — ver en tunel.css
   las clases `tunel-fondo-*` y `tunel-btn--*`, que funcionan con cualquier
   tema.

   Karla autoalojada (sin CDN nuevo), bajada una sola vez de:
   https://cdn.jsdelivr.net/npm/@fontsource/karla@5/files/karla-latin-{400,700}-normal.woff2
   a app/static/fonts/.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/karla-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/karla-latin-700-normal.woff2') format('woff2');
}

.tunel-tema-rosa {
    --tunel-heading-font: 'Karla', sans-serif;
    background: #fafafc;
    font-family: 'Karla', sans-serif;
}

.tunel-tema-rosa .tunel-cabecera {
    background: #fafafc;
}

/* 1. Titulares (h1, h2, etc.) */
.tunel-tema-rosa .tunel-titular,
.tunel-tema-rosa .tunel-h1-portada,
.tunel-tema-rosa .tunel-h2,
.tunel-tema-rosa .tunel-h3 {
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    color: #111;
    font-size: 40px;
    line-height: 48px;
}

.tunel-tema-rosa .tunel-fondo-amarillo .tunel-h2 {
    font-size: 42px;
}

/* 2. Caja rosa alineada a la izquierda y centrada */
.tunel-tema-rosa .tunel-hero.tunel-fondo-rosa,
.tunel-tema-rosa .tunel-seccion.tunel-fondo-rosa {
    max-width: 840px;
    margin: 0 auto;
    width: calc(100% - 2rem);
    border-radius: 18px;
}

.tunel-tema-rosa .tunel-fondo-rosa .row {
    text-align: left !important;
    justify-content: flex-start !important;
}

.tunel-tema-rosa .tunel-fondo-rosa,
.tunel-tema-rosa .tunel-fondo-rosa .tunel-titular,
.tunel-tema-rosa .tunel-fondo-rosa .tunel-promesa {
    color: #fff !important;
}

/* 3. Caja amarilla montada sobre la rosa (solo escritorio) */
.tunel-tema-rosa .tunel-hero.tunel-fondo-amarillo,
.tunel-tema-rosa .tunel-seccion.tunel-fondo-amarillo {
    max-width: 840px;
    margin: 0 auto;
    width: calc(100% - 2rem);
    box-shadow: 0 1px 5px rgba(0,0,0,.4);
    position: relative;
    z-index: 2;
    margin-top: -3rem; /* Solapa con la caja de arriba */
}

/* 4. Perfiles: sin bordes redondeados y kicker */
.tunel-tema-rosa .tunel-perfil-foto img {
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.tunel-tema-rosa .tunel-perfil .tunel-kicker {
    text-transform: none;
    color: #444;
    font-size: 20px;
    letter-spacing: normal;
}

/* 5. Pie de contacto */
.tunel-tema-rosa .tunel-pie-contacto-datos {
    text-align: right;
}

/* 6. Botones (mayúsculas, flex) */
.tunel-tema-rosa .tunel-btn {
    text-transform: uppercase;
    font-weight: 700;
    flex-direction: column;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-radius: 30px;
}

.tunel-tema-rosa .tunel-btn-texto {
    display: inline-flex;
    align-items: center;
}

.tunel-tema-rosa .tunel-boton-fecha-adentro {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: none;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.3rem;
}

.tunel-tema-rosa .tunel-btn--suave .tunel-boton-fecha-adentro {
    color: rgba(107, 17, 1, 0.8);
}

/* 7. Móvil: las cajas van a todo ancho, sin solapamientos ni bordes redondeados */
@media (max-width: 991.98px) {
    .tunel-tema-rosa .tunel-titular,
    .tunel-tema-rosa .tunel-h1-portada,
    .tunel-tema-rosa .tunel-h2,
    .tunel-tema-rosa .tunel-h3,
    .tunel-tema-rosa .tunel-fondo-amarillo .tunel-h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    /* Las cajas de color ocupan todo el ancho del móvil, sin recortes */
    .tunel-tema-rosa .tunel-hero.tunel-fondo-rosa,
    .tunel-tema-rosa .tunel-seccion.tunel-fondo-rosa,
    .tunel-tema-rosa .tunel-hero.tunel-fondo-amarillo,
    .tunel-tema-rosa .tunel-seccion.tunel-fondo-amarillo {
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        margin: 0;
        /* Sin solapamiento: cada caja empieza donde termina la anterior */
        margin-top: 0;
    }

    /* La caja amarilla ya no se monta sobre la rosa en móvil */
    .tunel-tema-rosa .tunel-seccion.tunel-fondo-amarillo {
        margin-top: 0 !important;
    }

    /* Padding generoso para que el texto no pegue a los bordes */
    .tunel-tema-rosa .tunel-hero.tunel-fondo-rosa,
    .tunel-tema-rosa .tunel-seccion.tunel-fondo-rosa,
    .tunel-tema-rosa .tunel-hero.tunel-fondo-amarillo,
    .tunel-tema-rosa .tunel-seccion.tunel-fondo-amarillo {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .tunel-tema-rosa .tunel-perfil-filas {
        flex-direction: column-reverse;
    }

    .tunel-tema-rosa .tunel-portada-filas {
        flex-direction: column;
    }

    .tunel-tema-rosa .tunel-pie-contacto-datos {
        text-align: left;
    }

    .tunel-tema-rosa .tunel-portada-imagen,
    .tunel-tema-rosa .tunel-perfil-foto {
        width: 100%;
    }

    .tunel-tema-rosa .tunel-portada-imagen img {
        width: 100%;
        max-width: none;
        max-height: 360px;
        object-fit: cover;
        aspect-ratio: auto 1 / 1;
    }

    .tunel-tema-rosa .tunel-perfil-foto img {
        width: 100%;
        max-width: none;
        aspect-ratio: auto 1 / 1;
    }
}

@media (min-width: 992px) {
    /* El orden HTML es texto, luego foto. 
       Para que la foto quede a la derecha (opción por defecto 'derecha'), debe ser row */
    .tunel-tema-rosa .tunel-perfil-filas {
        flex-direction: row;
    }
    .tunel-tema-rosa .tunel-perfil-filas--izquierda {
        flex-direction: row-reverse;
    }
}

/* El «Contacto» del pie es un rótulo, no un titular de sección. */
.tunel-tema-rosa .tunel-pie-contacto .tunel-h3 {
    font-size: 1.25rem;
}