/* ── WEBFLOW PRELOADER / VISIBILITY FIXES ── */
.preloader { display: none !important; }

body {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── TOKEN ROTO: --red venía con alpha 00 (#f44f2600 = totalmente transparente), dejando
   invisibles ~38 reglas del sitio (botones, fondos, textos de acento) que dependen de esta
   variable. El bug de "Contacta a Sofía" sin contraste en conferencias.html viene de acá. ── */
:root {
    --red: #F34922;
}

/* ── COLLAGE "Chicas en Tecnología" (sobre-sofia.html): las fotos están escalonadas a
   propósito en desktop (.image-29 con margin-top:200px, efecto collage), y ese escalonado
   se aplana bien por debajo de 479px. Pero entre 480-767px se queda a mitad de camino: fila
   horizontal + fotos angostas + un margin-top de 100px, dejando la sección altísima con un
   hueco en blanco. Extendemos el mismo apilado en columna que ya funciona en <479px. ── */
@media (max-width: 767px) {
    .sobre-03-image-flexbox {
        flex-direction: column;
    }

    .image-28,
    .image-29,
    .image-30,
    .image-31,
    .image-32 {
        width: 80%;
        margin-top: 20px;
        margin-right: 0;
    }
}

/* ── HERO "Sobre Sofía": el centrado vertical (height:100%+justify-content:center) se rompe
   porque un contenedor intermedio no tiene altura definida, así que el texto queda pegado
   arriba. Y a font-size:100px el nombre completo "Sofía Contreras" desborda detrás de la foto. ── */
.section-sobresofia-hero .hero-content {
    padding-top: 90px;
}

.section-sobresofia-hero .heading-100 {
    font-size: 64px;
    line-height: 68px;
    letter-spacing: -3px;
}

@media (max-width: 767px) {
    .section-sobresofia-hero .heading-100 {
        font-size: 42px;
        line-height: 44px;
        letter-spacing: -1.5px;
    }

    .section-sobresofia-hero .hero-content {
        padding-top: 60px;
    }
}

/* ── HERO "Sobre Sofía" — color de fondo: el naranja de marca (--red) a
   pantalla completa se leía muy "chillón". Se reemplaza por un neutro
   cálido, y el naranja queda contenido en un panel solo detrás de la foto
   (elegido entre 5 variantes propuestas). Solo en desktop: en los
   breakpoints angostos la foto cambia de posición/tamaño (ver reglas de
   Webflow para .sofimage-02) y el panel dejaría de alinear con ella. El
   ícono de la flecha es un SVG blanco (ancle-arrow-white.svg): sobre el
   fondo claro necesita oscurecerse para seguir siendo visible. ── */
.section-sobresofia-hero {
    background-color: #FBF8F2;
}

.section-sobresofia-hero .arrow-01 {
    filter: brightness(0);
}

@media (min-width: 992px) {
    .section-sobresofia-hero::before {
        content: "";
        position: absolute;
        right: 6%;
        bottom: 0;
        width: 46%;
        height: 92%;
        background: #B8461F;
        border-radius: 14px 14px 0 0;
    }
}

/* ── LOGO: tamaño de marca fijado a 120px máx. en el navbar. El nav y el botón
   "Ingresar" se afinan en consecuencia para acompañar el logo más chico. ── */
.logo {
    max-width: 120px;
    width: 100%;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
}

.logo-academia {
    max-width: 182px;
    width: 100%;
    height: auto;
}

.cta-login,
.cta-login-small-devices {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1;
}

/* ── FORM DE CONTACTO (conferencias.html): la sección tenía 130px/180px de padding
   de fábrica, dejando al formulario embebido perdido en un mar de blanco ── */
.section-consultoria-06 {
    padding-top: 70px;
    padding-bottom: 90px;
    background-color: #fff !important;
}

/* ── LOADER del formulario embebido (conferencias.html): el iframe de GHL tarda un
   momento en renderizar y hasta entonces se ve un hueco vacío ── */
.form-wrap {
    position: relative;
    min-height: 420px;
}

.form-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.form-loader-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #f349221a;
    border-top-color: #F34922;
    border-radius: 50%;
    animation: form-loader-spin 0.8s linear infinite;
}

.form-loader-text {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #9b9b9b;
}

@keyframes form-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── NAVBAR POSITION FIX ── */
.section-navbar {
    position: relative;
    z-index: 1000;
    width: 100%;
}

.navbar.w-nav {
    margin-top: 0 !important;
    top: 0 !important;
    width: 100% !important;
}

.navbar-container.mobile.w-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* el ícono de "Ingresar" no tenía tamaño fijo y se renderizaba a su tamaño nativo (13x30px),
   inflando el botón por su cuenta aunque el padding fuera chico */
.login-icon {
    height: 15px;
    width: auto;
}

.navbar-flexbox {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* ── NAV MENU: SOLO DESKTOP (no romper mobile) ── */
@media (min-width: 992px) {
    .w-nav-menu {
        display: flex !important;
    }
}

/* ── FOOTER: columna "Academia" venía con display:none de fábrica en el export de Webflow, oculta en todo el sitio ── */
.column-45 {
    display: block !important;
}

/* ── FROSTY ── */
.frosty {
    -webkit-backdrop-filter: saturate(200%) blur(20px);
    backdrop-filter: saturate(200%) blur(20px);
}

/* ── STICKY BANNER ── */
.ub-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px;
    font-family: "Geist", sans-serif;
    font-size: .80rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #1a1004;
    font-weight: 700;
    white-space: nowrap;
}

.ub-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #1a1004;
    opacity: .65;
    animation: ubpulse 2s infinite;
    flex-shrink: 0;
}

@keyframes ubpulse {
    0%, 100% { opacity: .65; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.ub-sep { color: rgba(26,16,4,.4); font-weight: 400; }

.ub-tag {
    background: rgba(26,16,4,.13);
    color: #1a1004;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: .1em;
    font-weight: 700;
    flex-shrink: 0;
}

.ub-cta {
    margin-left: 6px;
    background: #1a1004;
    color: #d4a849;
    padding: 7px 18px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .07em;
    font-size: .74rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.ub-cta:hover { background: #000; color: #f0c84e; }

@media (max-width: 760px) {
    .ub-wrap {
        white-space: normal;
        flex-wrap: wrap;
        font-size: .70rem;
        gap: 8px;
        padding: 11px 14px;
        justify-content: center;
    }
    .ub-sep { display: none; }
}

/* ── "CONOCE A SOFÍA CONTRERAS" (sobre-sofia.html): la sección se leía como
   bloques sueltos sin relación entre sí — los números "01-05" casi
   invisibles junto a un mismo párrafo, títulos saltando de 40px a 60px sin
   lógica, y separadores de 1px que desaparecen al scrollear rápido. Cada
   número pasa a ser un numeral gigante en marca de agua detrás de su
   título (posicionado sobre su propia columna, que ya es position:relative
   por Webflow), y todos los títulos de capítulo comparten una sola escala. ── */
/* El naranja de marca (--red, #F34922) a tamaño gigante se leía muy saturado
   / "cartel de tránsito". Se pasa a un terracota más apagado (mismo tono,
   menos luz y saturación) — sostiene el numeral sin gritar. */
.paragraph-14.sobresofia01,
.paragraph-14.sobresofia02,
.paragraph-14.sobresofia04 {
    max-width: none;
    font-family: 'Work Sans', sans-serif;
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -3px;
    color: #B8461F;
    opacity: 0.32;
    position: absolute;
}

/* Sección 02 no tiene título junto al número (solo un párrafo angosto):
   el "02" fantasma se superponía directo sobre el texto. Se levanta arriba
   del párrafo para que quede detrás del aire de la fila, no del texto. */
.section-sobresofia-02 .paragraph-14.sobresofia02 {
    top: -96px;
    left: 0;
}

.heading-40.sobresofia02,
.heading-40.sobresofia03,
.heading-40.sobresofia04,
.heading-40.sobresofia06 {
    font-size: 34px;
    line-height: 1.25;
    letter-spacing: -1px;
}

.heading-60.sobresofia08 {
    font-size: 34px;
    line-height: 1.25;
    letter-spacing: -1px;
    margin-top: 0;
}

/* El separador original iba de punta a punta de la pantalla (sin container)
   mientras el contenido arriba/abajo vive en una columna de 940px — ese
   desajuste es lo que lo hacía leer como un borde roto, no un divisor.
   Se acorta a una marca corta y centrada en el color de los numerales, para
   que se vea intencional. Los márgenes también bajan: había demasiado aire
   alrededor de cada capítulo. */
.section-sobresofia-divider .divider {
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background-color: #B8461F;
    opacity: 0.55;
    margin-top: 48px;
    margin-bottom: 48px;
    margin-left: auto;
    margin-right: auto;
}

.section-sobresofia-02 {
    padding-top: 36px;
    padding-bottom: 36px;
}

.section-sobresofia-03 {
    padding-top: 16px;
}

/* La fila de fotos trae 100px de margin-bottom de fábrica (Webflow) antes
   del bloque del libro — es lo que seguía inflando el espacio acá. */
.sobre-03-image-flexbox {
    margin-bottom: 0;
}

/* La verdadera causa del espacio "vacío" no era el margin-bottom de la fila
   sino el efecto collage escalonado en sí: .image-29 trae margin-top:200px
   y .image-32 margin-top:100px de fábrica (a propósito, para desalinear las
   fotos), lo que estira la altura de toda la fila mucho más de lo que se ve.
   Se acorta el escalonado sin sacarlo del todo. */
.image-29 {
    margin-top: 60px;
}

.image-32 {
    margin-top: 24px;
}

.section-sobresofia-05 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.section-sobresofia-libro {
    margin-top: 24px;
    margin-bottom: 24px;
}