/* =========================================================
   SOBRE MÍ – Estilos renovados (maqueta) con ola FIXED
   ========================================================= */

/* Altura del navbar (ajustá si cambia) */
:root {
    --nav-h: 96px;
}

/* ---------- OLA SUPERIOR (FIXED) ------------------------ */
/* La dejamos fija y por DETRÁS del menú (no tapa clicks) */
.sobre-mi-page .onda-superior {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    width: 100%;
    height: clamp(110px, 18vw, 160px); /* alto visual aproximado */
    z-index: 100; /* navbar suele estar por encima (>= 1010) */
    pointer-events: none; /* no intercepta navegación del menú */
    display: block;
}

/* ---------- HERO (pegado a la ola, sin “hueco blanco”) -- */
/* El hero arranca con un degradado aqua que se “funde” con la ola */
.sobre-mi-hero {
    background: radial-gradient(
            120% 60% at 50% 0%,
            rgba(143, 214, 207, 0.55) 0%,
            rgba(143, 214, 207, 0) 60%
        ),
        linear-gradient(
            180deg,
            rgba(143, 214, 207, 0.95) 0%,
            rgba(143, 214, 207, 0) 70%
        );
    /* Reservamos espacio del navbar + un pequeño solapado de la ola */
    padding-top: calc(var(--nav-h) + 1.2rem);
    padding-bottom: clamp(1.25rem, 2.4vw, 2rem);
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Quita cualquier "salto" visible entre la ola y el hero */
    margin-top: -1px; /* evita línea fina por subpixel */
}
.sobre-mi-hero-contenido {
    max-width: 980px;
    width: 100%;
}
.sobre-mi-texto {
    color: #0b2a2a;
}
.sobre-mi-texto h1 {
    color: #2b1650;
    font-family: "tipografia2", sans-serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    margin: 0 0 0.7rem 0; /* sin margen superior => no hay hueco */
}
.sobre-mi-texto .lead {
    color: #144a46;
    font-family: "tipografia2", sans-serif;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    line-height: 1.6;
    margin: 0 0 1.3rem 0;
}
.btn-sobre-mi {
    display: inline-block;
    background: var(--secundario);
    color: var(--terciario);
    border: 0;
    border-radius: 999px;
    padding: 0.8rem 1.6rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease,
        background 0.18s ease;
}
.btn-sobre-mi:hover {
    transform: translateY(-2px);
    background: var(--secundarioBis);
}

/* ---------- CONTENIDO ----------------------------------- */
.sobre-mi-content {
    background: #fff;
    padding: clamp(1rem, 2.6vw, 2rem) 0 clamp(1rem, 3.5vw, 2rem);
}
.sobre-mi-content .subtitle {
    color: var(--secundario);
    font-family: "tipografia2", sans-serif;
}
.sobre-mi-content h2,
.sobre-mi-content h4 {
    color: #2b1650;
    font-weight: 800;
    font-family: "tipografia2", sans-serif;
}

/* ---------- TARJETAS BIO -------------------------------- */
.sobremi-cards {
    display: grid;
    gap: 1.75rem;
}
.tarjeta-sobre-mi {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: 320px;
    overflow: hidden;
    position: relative;
}
.tarjeta-sobre-mi.left {
    grid-auto-flow: column;
}
.tarjeta-sobre-mi.right {
    grid-template-columns: 55% 45%;
}
.tarjeta-sobre-mi.right .img-tarjeta-sobre-mi {
    order: 2;
}
.tarjeta-sobre-mi.right .contenido-tarjeta-sobre-mi {
    order: 1;
}

/* banda violeta translúcida superior */
.tarjeta-sobre-mi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 56%;
    background: color-mix(in srgb, var(--secundario) 12%, transparent);
    border-bottom-left-radius: 100% 50%;
    border-bottom-right-radius: 100% 50%;
    pointer-events: none;
}

/* imagen */
.img-tarjeta-sobre-mi {
    max-height: 420px;
    overflow: hidden;
}
.img-tarjeta-sobre-mi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
/* cuerpo entero */
.img-tarjeta-sobre-mi img.img-fullbody {
    object-fit: contain;
    object-position: bottom center;
    padding-bottom: 0.25rem;
}

/* texto */
.contenido-tarjeta-sobre-mi {
    position: relative;
    z-index: 1;
    color: #203034;
    font-size: 1.06rem;
    line-height: 1.7;
    font-family: "tipografia2", sans-serif;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    font-weight: 800;
    color: #2b1650;
}
.chip-emoji {
    font-size: 1.2rem;
    line-height: 1;
}
.chip-txt {
    font-size: 1.05rem;
}

/* ---------- OLA INFERIOR -------------------------------- */
.onda-inferior {
    display: block;
}

/* ---------- RESPONSIVE ---------------------------------- */
@media (max-width: 992px) {
    .tarjeta-sobre-mi,
    .tarjeta-sobre-mi.right {
        grid-template-columns: 1fr;
        min-height: unset;
    }
    .img-tarjeta-sobre-mi {
        height: 230px;
    }
}

/* Márgenes laterales respirables en móvil */
@media (max-width: 575.98px) {
    .sobre-mi-page .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .img-tarjeta-sobre-mi {
        height: 200px;
    }
}

/* ---------- Preferencias de movimiento ------------------ */
@media (prefers-reduced-motion: reduce) {
    .btn-sobre-mi {
        transition: none;
    }
}

.sobre-mi-page .custom-navbar,
.sobre-mi-page .custom-navbar.is-stuck,
.sobre-mi-page .custom-navbar.scrolled,
.sobre-mi-page .custom-navbar.stuck,
.sobre-mi-page .custom-navbar.shadow,
.sobre-mi-page .custom-navbar.shadow-sm,
.sobre-mi-page .custom-navbar.shadow-lg,
.sobre-mi-page .custom-navbar.fixed-top,
.sobre-mi-page .custom-navbar.sticky-top,
.sobre-mi-page .custom-navbar::before,
.sobre-mi-page .custom-navbar::after,
.sobre-mi-page .custom-navbar *[class*="shadow"] {
    box-shadow: none !important;
    filter: none !important; /* por si usan drop-shadow() */
}

/* =========================
   Última foto (tarjeta 4)
   ========================= */

/* Móvil: achicar y contener la imagen */
@media (max-width: 768px) {
    .sobremi-cards .tarjeta-sobre-mi:nth-of-type(4) .img-tarjeta-sobre-mi {
        flex: 0 0 100%;
        max-height: 200px; /* antes 400px */
        overflow: hidden;
    }
    .sobremi-cards .tarjeta-sobre-mi:nth-of-type(4) .img-tarjeta-sobre-mi img {
        width: 100%;
        height: 100%;
        object-fit: contain !important; /* que no se corte */
        object-position: center bottom; /* ancla inferior */
    }
}

/* Pantallas muy chicas: mover la imagen debajo del texto */
@media (max-width: 480px) {
    .sobremi-cards .tarjeta-sobre-mi:nth-of-type(4) {
        flex-direction: column !important; /* texto arriba, imagen abajo */
    }
    .sobremi-cards
        .tarjeta-sobre-mi:nth-of-type(4)
        .contenido-tarjeta-sobre-mi {
        order: 1;
    }
    .sobremi-cards .tarjeta-sobre-mi:nth-of-type(4) .img-tarjeta-sobre-mi {
        order: 2;
        max-height: 180px;
        margin-top: 0.75rem;
    }
}

/* Ultra-chico: ocultar la imagen para evitar cortes y scroll lateral */
@media (max-width: 360px) {
    .sobremi-cards .tarjeta-sobre-mi:nth-of-type(4) .img-tarjeta-sobre-mi {
        display: none;
    }
}