/*=============== TARJETAS DE RESULTADOS — antes/después ===============*/
.circle-static {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .circle-static {
        max-width: none;
    }
}

/*=============== HERO DESKTOP — foto_inicial fullscreen (solo ≥1024px) ===============*/
.hero-desktop {
    display: none;
}

@media (min-width: 1024px) {
    .hero-desktop {
        display: flex;
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        align-items: stretch;
        justify-content: center;
    }
}

.hero-desktop__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

/* Difumina la base del banner hacia el color de la sección siguiente (sin línea recta) */
.hero-desktop::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32%;
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg-body) 92%);
    z-index: 1;
    pointer-events: none;
}

.hero-desktop__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to left, rgba(10, 18, 40, 0.62) 0%, rgba(10, 18, 40, 0.22) 50%, transparent 75%),
        linear-gradient(rgba(10, 18, 40, 0.3), rgba(10, 18, 40, 0.3)),
        linear-gradient(
            to bottom,
            rgba(10, 18, 40, 0.55) 0%,
            rgba(10, 18, 40, 0.22) 9%,
            transparent 18%),
        linear-gradient(
            to top,
            rgba(10, 18, 40, 0.92) 0%,
            rgba(10, 18, 40, 0.72) 20%,
            rgba(10, 18, 40, 0.35) 40%,
            rgba(10, 18, 40, 0.1) 60%,
            transparent 78%);
    z-index: 1;
}

.hero-desktop__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 0 3rem 0 5.5rem;
}

/* Pantallas anchas: la caja interna estaba topada en 1240px, asi que el texto
   nunca ganaba ancho por mas que creciera el monitor (se quedaba en ~647px)
   mientras la figura si crecia por breakpoint. Ahora la caja acompana. */
@media (min-width: 1440px) {
    .hero-desktop__inner {
        max-width: min(1720px, 92vw);
    }
}

.hero-desktop__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: 1.15rem;
    max-width: 680px;
    flex: 0 1 auto;
    padding-bottom: 0;
}

.hero-desktop__content .hero-banner__title {
    /* Fluido y continuo entre 1024 y 1920px, sin saltos */
    font-size: clamp(2.4rem, 0.6rem + 2.9vw, 4rem);
    line-height: 0.96;
    /* Antes nowrap (riesgo de desborde): ahora reparte lineas de forma equilibrada */
    white-space: normal;
    text-wrap: balance;
}

/* Contenedor de la figura: variables afinadas por breakpoint (ver media queries) */
.hero-desktop__figure-wrap {
    --fig-maxw: 42%;   /* ancho base (la figura es vertical, esto gobierna su tamano) */
    --fig-h: 92%;      /* alto base respecto al hero */
    --fig-scale: 1.24; /* factor de agrandado */
    --fig-lift: 7%;    /* sube la figura respecto al pie */
    align-self: flex-end;
    /* El factor de agrandado se aplica al TAMANO, no con transform: scale().
       Un transform no ocupa espacio de layout: flexbox reservaba la caja sin
       escalar y la figura se pintaba un 24% mas grande, derramando ~12% por
       lado encima del texto (visible en pantallas anchas y con zoom <=75%).
       Con height/max-width el espacio reservado coincide con lo pintado. */
    height: calc(var(--fig-h) * var(--fig-scale));
    /* Tope EN REM, no en px. La altura es un % de 100dvh y 100dvh siempre vale
       lo mismo en pixeles fisicos, sin importar el zoom: la figura conservaba
       su tamano fisico mientras el texto (rem) se encogia al alejar el zoom.
       Un tope en px tampoco sirve, porque un px CSS tampoco cambia con el zoom.
       En rem si: es la misma unidad del texto, asi la foto se encoge en la
       misma proporcion que las letras y la composicion no se descuadra.
       Subir este valor = foto mas grande. */
    max-height: var(--fig-hmax, 40rem);
    max-width: calc(var(--fig-maxw) * var(--fig-scale));
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    transform: translateY(calc(var(--fig-lift) * -1));
    transform-origin: bottom center;
}
/* Spotlight calido (dorado de marca) que hace flotar a las figuras */
.hero-desktop__figure-wrap::before {
    content: '';
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 122%;
    height: 80%;
    background: radial-gradient(ellipse at center bottom,
        rgba(201, 168, 76, 0.32) 0%,
        rgba(123, 184, 212, 0.15) 40%,
        transparent 72%);
    filter: blur(22px);
    z-index: 0;
}
.hero-desktop__figure {
    position: relative;
    z-index: 1;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.55));
    will-change: transform;
    animation:
        heroFigureIn 1.15s cubic-bezier(.2, .7, .2, 1) both,
        heroFigureFloat 7s ease-in-out 1.3s infinite;
}
@keyframes heroFigureIn {
    from { opacity: 0; transform: translateY(46px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroFigureFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ===== Figura desktop: optimizacion por tamano de pantalla =====
   Solo aplica >=1024px (el hero-desktop esta oculto debajo). */

/* Laptops / medianas (1024-1279): aqui aun NO se muestra ultima_banner;
   figura mas contenida y subida menor para dar aire al texto. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .hero-desktop__figure-wrap {
        --fig-maxw: 38%;
        --fig-scale: 1.15;
        --fig-lift: 5%;
        --fig-h: 88%;
    }
}

/* Monitores grandes (1536-1919): maxima presencia. */
@media (min-width: 1536px) and (max-width: 1919px) {
    .hero-desktop__figure-wrap {
        --fig-maxw: 46%;
        --fig-scale: 1.24;
        --fig-lift: 7%;
        --fig-h: 92%;
    }
}

/* Ultra-wide / 4K (>=1920): tope en px para que no se agigante. */
@media (min-width: 1920px) {
    .hero-desktop__figure-wrap {
        --fig-maxw: 640px;
        --fig-scale: 1.24;
        --fig-lift: 7%;
        --fig-h: 92%;
    }
}

/* Pantallas anchas pero de poca altura: bajar subida y escala
   para que la cabeza nunca toque el navbar. */
@media (min-width: 1024px) and (max-height: 760px) {
    .hero-desktop__figure-wrap {
        --fig-scale: 1.17;
        --fig-lift: 4%;
        --fig-h: 84%;
    }
}

.hero-desktop__cta {
    display: inline-block;
    padding: 1rem 3rem;
    background: rgba(123, 184, 212, 0.1);
    color: #FFFFFF;
    border: 2px solid #7BB8D4;
    border-radius: 50px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-desktop__cta:hover {
    background: #7BB8D4;
    color: #1B2A4A;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(123, 184, 212, 0.4);
}

/* === Anima un resplandor que late suavemente === */
@keyframes ring-glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.0),
                            0 0 4px 2px rgba(126,207,234,.35); }
    50%     { box-shadow: 0 0 6px 3px rgba(255,255,255,.8),
                            0 0 12px 6px rgba(126,207,234,.55); }
}

.has-glow-ring {
    position: relative;
    overflow: visible;
}

.has-glow-ring::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    border: 1.5px solid transparent;
    animation: ring-glow 2.6s ease-in-out infinite;
    pointer-events: none;
}


/* ========== 1. ENVOLTORIO GLOBAL ========== */

.wrapper {
  width: min(90%, 1200px);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
/*=============== HEADER & NAV ===============*/
.header{
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
}
.nav{
    top:12%;
    position:relative;
    height: var(--header--height);
    display:flex;
    justify-content:space-between;
    align-items: center;
}



.nav__text{
    margin-left:.5rem;
}

/*=============== BARRA SOCIAL FIJA ===============*/
.social-bar {
    position: fixed;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 0.75rem 0.5rem;
    border-radius: 2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
}

.social-bar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-accent-main);
    font-size: 1.25rem;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.social-bar__link:hover {
    background: var(--color-accent-main);
    color: var(--color-bg-body);
    transform: scale(1.15);
}

.social-bar__link--whatsapp {
    color: #25D366;
    font-size: 1.4rem;
}
.social-bar__link--whatsapp:hover {
    background: #25D366;
    color: #fff;
}

.social-bar__divider {
    width: 24px;
    height: 1px;
    background: rgba(240, 244, 248, 0.12);
    margin: 0.15rem 0;
}

/* Movil: barra horizontal abajo */
@media (max-width: 640px) {
    .social-bar {
        left: 50%;
        top: auto;
        bottom: 0.75rem;
        transform: translateX(-50%);
        flex-direction: row;
        padding: 0.5rem 0.75rem;
        border-radius: 2px;
    }
    .social-bar__divider {
        width: 1px;
        height: 24px;
        margin: 0 0.15rem;
    }
}
/* Landscape movil: social bar compacta horizontal */
@media (max-width: 1023px) and (orientation: landscape) {
    .social-bar {
        left: 50%;
        top: auto;
        bottom: max(0.4rem, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        flex-direction: row;
        padding: 0.3rem 0.5rem;
        border-radius: 2px;
        gap: 0.3rem;
    }
    .social-bar__link {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }
    .social-bar__divider {
        width: 1px;
        height: 18px;
        margin: 0 0.1rem;
    }
}

/* VIDEO STYLES */
.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#myVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

.content-wrapper {
    position: relative;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
}
/* Menu de navegacion */
.nav.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--glass-bg);
    padding: 1rem 2rem;
    border-radius: 2px;
    margin: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
}

.nav__logo {
    color: var(--color-text-primary);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-weight: 760;
    text-decoration: none;
    font-family: "Posterama 2001 W04 Regular", "Montserrat", sans-serif;
    flex-shrink: 1;
    min-width: 0;
    letter-spacing: clamp(1px, 0.15vw, 2px);
    display: flex;
    align-items: center;
    gap: clamp(0.15rem, 0.3vw, 0.3rem);
    margin-left: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}
.nav__logo-img {
    height: clamp(1.4rem, 2vw, 2rem);
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}
/* Sobre navbar sólido (con fondo glass) la sombra se suaviza */
.nav--solid .nav__logo {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.nav__logo-text {
    display: inline;
    white-space: nowrap;
}

/*=============== NAV TOGGLE (boton animado movil) ===============*/
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.3s ease, opacity 0.4s ease, transform 0.4s ease;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* Solo visible cuando navbar tiene fondo solido */
.nav--solid .nav-toggle {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.nav-toggle:hover {
    background: rgba(126, 207, 234, 0.1);
}

/* Las 3 barras animadas */
.nav-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1),
                opacity 0.3s ease,
                width 0.3s ease;
    transform-origin: center;
}

/* Barra central mas corta — detalle visual */
.nav-toggle__bar:nth-child(2) {
    width: 14px;
    margin-left: auto;
}

/* Estado abierto -> X elegante */
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
    opacity: 0;
    width: 0;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/*=============== NAV LINKS ===============*/
.nav-links {
    display: flex;
    list-style: none;
    gap: clamp(0.1rem, 0.3vw, 0.25rem);
    margin: 0;
    padding: 0;
    align-items: center;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.nav-links__item {
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.6rem, 0.9vw, 0.8rem);
    font-weight: 500;
    letter-spacing: clamp(0.5px, 0.1vw, 1.5px);
    text-transform: uppercase;
    padding: 0.4rem clamp(0.3rem, 0.6vw, 0.9rem);
    border-radius: 2px;
    transition: background 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}
.nav-links__item:hover {
    background: rgba(123, 184, 212, 0.12);
    color: var(--color-hover-cta, #9ED0E8);
}

/* Navbar fondo solido */
.nav--solid {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

/* ===== DESKTOP ≥1024px: navbar compacto, logo centrado, dropdown ===== */
@media (min-width: 1024px) {
    #navbar {
        justify-content: center;
        gap: 1.8rem;
        padding: 0 2.5rem;
        height: 3.5rem;
        border-radius: 50px;
    }
    .nav__logo {
        margin-left: 0;
        font-size: clamp(1.27rem, 1.87vw, 1.74rem);
        letter-spacing: clamp(2px, 0.35vw, 3.5px);
    }
    .nav__logo-img {
        height: clamp(1.6rem, 2.3vw, 2.1rem);
    }

    /* Dropdown hacia abajo */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(0.5rem);
        flex-direction: column;
        width: 253px;
        background: rgba(10, 15, 30, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(123, 184, 212, 0.12);
        border-radius: 12px;
        padding: 0.5rem 0;
        gap: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
        z-index: 200;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    }
    .nav-links.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0.75rem);
    }
    .nav--solid .nav-links {
        opacity: 0;
        pointer-events: none;
    }
    .nav--solid .nav-links.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    .nav-links li {
        width: 100%;
    }
    .nav-links__item {
        font-size: 0.84rem;
        padding: 0.8rem 1.7rem;
        letter-spacing: 1.5px;
        display: block;
        width: 100%;
        border-radius: 0;
        transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    }
    .nav-links__item:hover {
        background: rgba(123, 184, 212, 0.1);
        color: #9ED0E8;
        padding-left: 1.8rem;
    }

    /* Hamburguesa pegada al borde derecho */
    .nav-toggle {
        display: flex !important;
        position: relative;
        right: auto;
        margin-left: auto;
        margin-right: -0.8rem;
        width: 36px;
        height: 36px;
        padding: 6px;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.8);
    }
    .nav--solid .nav-toggle {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
    }
    .nav-toggle__bar {
        width: 20px;
        height: 2px;
    }
    .nav-toggle__bar:nth-child(2) {
        width: 14px;
    }
}

/* ===== TABLET / iPad PORTRAIT (768–1023px): menú hamburguesa ===== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    #navbar { justify-content: center !important; }
    .nav__logo {
        font-size: clamp(1.1rem, 2.6vw, 1.45rem);
        letter-spacing: 1.5px;
        gap: 0.3rem;
        margin-left: 0;
    }
    .nav__logo-img { height: clamp(1.7rem, 2.6vw, 2.1rem); }
    .nav-toggle {
        display: flex !important;
        position: absolute;
        right: 1.25rem;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 40px;
        height: 40px;
        opacity: 0;
        pointer-events: none;
    }
    .nav--solid .nav-toggle { opacity: 1; pointer-events: auto; }
    .nav-links {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 50%;
        transform: translateX(-50%) translateY(-12px);
        flex-direction: column;
        width: min(420px, calc(100% - 1.5rem));
        background: var(--glass-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-radius: 8px;
        padding: 0.75rem 0.5rem;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
        border: 1px solid var(--glass-border);
        gap: 0.2rem;
        margin-right: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav--solid .nav-links.is-open {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
    .nav-links li { width: 100%; }
    .nav-links__item {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
        font-weight: 500;
        border-radius: 4px;
        letter-spacing: 0.5px;
    }
    .nav-links li + li .nav-links__item {
        border-top: 1px solid rgba(240, 244, 248, 0.06);
    }
}

/* ===== TABLET / iPad LANDSCAPE (768–1023px, alto): menú hamburguesa ===== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) and (min-height: 501px) {
    #navbar { justify-content: center !important; }
    .nav__logo {
        font-size: clamp(1.05rem, 2.2vw, 1.3rem);
        letter-spacing: 1.5px;
        gap: 0.25rem;
        margin-left: 0;
    }
    .nav__logo-img { height: clamp(1.6rem, 2.2vw, 1.9rem); }
    .nav-toggle {
        display: flex !important;
        position: absolute;
        right: 1.25rem;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 38px;
        height: 38px;
        opacity: 0;
        pointer-events: none;
    }
    .nav--solid .nav-toggle { opacity: 1; pointer-events: auto; }
    .nav-links {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 50%;
        transform: translateX(-50%) translateY(-12px);
        flex-direction: column;
        width: min(420px, calc(100% - 1.5rem));
        background: var(--glass-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-radius: 8px;
        padding: 0.75rem 0.5rem;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
        border: 1px solid var(--glass-border);
        gap: 0.2rem;
        margin-right: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav--solid .nav-links.is-open {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
    .nav-links li { width: 100%; }
    .nav-links__item {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.75rem 1rem;
        font-size: 0.88rem;
        font-weight: 500;
        border-radius: 4px;
        letter-spacing: 0.5px;
    }
    .nav-links li + li .nav-links__item {
        border-top: 1px solid rgba(240, 244, 248, 0.06);
    }
}

/* ===== MÓVIL PORTRAIT (< 768px): menú hamburguesa ===== */
@media (max-width: 767px) and (orientation: portrait) {
    #navbar {
        position: fixed;
        justify-content: center !important;
        top: 0.5rem;
    }
    .nav__logo {
        font-size: 1.15rem;
        letter-spacing: 1.5px;
        gap: 0.25rem;
        margin-left: 0;
    }
    .nav__logo-img {
        height: 1.7rem;
    }
    .nav-toggle {
        display: flex !important;
        position: absolute;
        right: 1rem;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 36px;
        opacity: 0;
        pointer-events: none;
    }
    .nav--solid .nav-toggle {
        opacity: 1;
        pointer-events: auto;
    }
    .nav-links {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 50%;
        transform: translateX(-50%) translateY(-12px);
        flex-direction: column;
        width: calc(100% - 1rem);
        background: var(--glass-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-radius: 4px;
        padding: 0.75rem 0.5rem;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35),
                    0 2px 8px rgba(0, 0, 0, 0.2);
        border: 1px solid var(--glass-border);
        gap: 0.2rem;
        margin-right: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav--solid .nav-links.is-open {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
    .nav-links li { width: 100%; }
    .nav-links__item {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        font-weight: 500;
        border-radius: 4px;
        letter-spacing: 0.5px;
    }
    .nav-links__item:hover {
        background: rgba(126, 207, 234, 0.08);
    }
    .nav-links__item:active {
        background: rgba(126, 207, 234, 0.15);
        transform: scale(0.98);
    }
    .nav-links li + li .nav-links__item {
        border-top: 1px solid rgba(240, 244, 248, 0.06);
    }
}

/* ===== MÓVIL EXTRA PEQUEÑO portrait (≤ 380px) ===== */
@media (max-width: 380px) and (orientation: portrait) {
    .nav__logo {
        font-size: 0.9rem;
        letter-spacing: 1px;
        gap: 0.15rem;
    }
    .nav__logo-img {
        height: 1.4rem;
    }
}

/* ===== LANDSCAPE CELULAR (h ≤ 500px): navbar compacto + hamburguesa ===== */
@media (orientation: landscape) and (max-height: 500px) {
    #navbar {
        position: fixed;
        justify-content: center !important;
        height: 2.75rem !important;
        top: 0.25rem !important;
        padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
    }
    .nav__logo {
        font-size: 1rem;
        letter-spacing: 1.5px;
        gap: 0.2rem;
        margin-left: 0;
    }
    .nav__logo-img {
        height: 1.4rem;
    }
    .nav-toggle {
        display: flex !important;
        position: absolute;
        right: 1rem;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 36px;
        opacity: 0;
        pointer-events: none;
    }
    .nav--solid .nav-toggle {
        opacity: 1;
        pointer-events: auto;
    }
    .nav-links {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 50%;
        transform: translateX(-50%) translateY(-12px);
        flex-direction: column;
        width: calc(100% - 1rem);
        background: var(--glass-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-radius: 4px;
        padding: 0.5rem;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
        border: 1px solid var(--glass-border);
        gap: 0.15rem;
        margin-right: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav--solid .nav-links.is-open {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
    .nav-links li { width: 100%; }
    .nav-links__item {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.45rem 0.8rem;
        font-size: 0.78rem;
        font-weight: 500;
        border-radius: 4px;
        letter-spacing: 0.5px;
    }
    .nav-links__item:hover {
        background: rgba(126, 207, 234, 0.08);
    }
    .nav-links li + li .nav-links__item {
        border-top: 1px solid rgba(240, 244, 248, 0.06);
    }
}

/* Active link */


/* (Sidebar eliminado — reemplazado por barra social fija) */

/*=============== HERO FULLSCREEN ===============*/
.hero-full {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: #0a0f1a;
    margin-bottom: 0;
}

/* Fondo difuminado que rellena el borde al alejar la foto */
.hero-full::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../img/carolina-salas-especialista-tratamientos-corporales-bogota.webp?v=2') center/cover no-repeat;
    filter: blur(22px) brightness(0.55) saturate(1.1);
    transform: scale(1.15);
}

/* Imagen de fondo del banner (alejada un 10%) */
.hero-full__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    transform: scale(0.9);
    transform-origin: center;
    z-index: 1;
}

/* Degradado inferior para legibilidad del texto */
.hero-full__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(10, 18, 40, 0.62) 0%,
            rgba(10, 18, 40, 0.28) 10%,
            transparent 22%),
        linear-gradient(
            to top,
            rgba(10, 18, 40, 0.94) 0%,
            rgba(10, 18, 40, 0.80) 24%,
            rgba(10, 18, 40, 0.45) 46%,
            rgba(10, 18, 40, 0.12) 66%,
            transparent 100%);
}

/* Bloque de contenido: texto + botón (abajo) */
.hero-full__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    width: 100%;
    max-width: 640px;
    padding: 0 1.5rem calc(2.5rem + env(safe-area-inset-bottom));
}

.hero-full__cta {
    margin-top: 0.5rem;
    display: inline-block;
    padding: 0.9rem 2.5rem;
    background: rgba(123, 184, 212, 0.1);
    color: #FFFFFF;
    border: 2px solid #7BB8D4;
    border-radius: 50px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    animation: heroReveal 0.9s cubic-bezier(.2, .75, .2, 1) 0.55s forwards;
}

.hero-full__cta:hover {
    background: #7BB8D4;
    color: #1B2A4A;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(123, 184, 212, 0.4);
}

/* ===== TEXTO DEL BANNER (compartido móvil + desktop) ===== */
.hero-banner__title {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 760;
    text-transform: uppercase;
    line-height: 0.98;
    letter-spacing: 1px;
    color: #ffffff;
    font-size: clamp(2rem, 8.5vw, 3.2rem);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
    margin: 0;
    text-wrap: balance;          /* reparte el titulo en lineas parejas */
    overflow-wrap: break-word;   /* evita desbordes en pantallas muy angostas */
    opacity: 0;
    animation: heroReveal 0.9s cubic-bezier(.2, .75, .2, 1) 0.15s forwards;
}
.hero-banner__text {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(0.92rem, 3.7vw, 1.08rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
    max-width: 48ch;
    margin: 0;
    text-wrap: pretty;           /* evita lineas viudas/huerfanas en el parrafo */
    overflow-wrap: break-word;
    opacity: 0;
    animation: heroReveal 0.9s cubic-bezier(.2, .75, .2, 1) 0.3s forwards;
}
.hero-banner__tag {
    font-family: "Posterama 2001 W04 Regular", "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.5vw, 2px);
    font-size: clamp(0.72rem, 2.7vw, 0.95rem);
    color: var(--color-accent-main);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
    margin: 0;
    opacity: 0;
    animation: heroReveal 0.9s cubic-bezier(.2, .75, .2, 1) 0.45s forwards;
}

@keyframes heroReveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Móvil portrait pequeño (<400px) */
@media (max-width: 400px) {
    .hero-full__content { gap: 0.85rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
    .hero-banner__title { font-size: clamp(1.7rem, 9.5vw, 2.3rem); }
    .hero-banner__text { font-size: 0.9rem; }
    .hero-full__cta { padding: 0.75rem 1.8rem; font-size: 0.7rem; letter-spacing: 1px; }
}

/* Tablet / iPad portrait (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .hero-full__media { object-position: center 22%; }
    .hero-full__content { max-width: 720px; gap: 1.25rem; padding-bottom: 4rem; }
    .hero-banner__title { font-size: clamp(3rem, 6.5vw, 4rem); }
    .hero-banner__text { font-size: clamp(1.05rem, 2.4vw, 1.3rem); max-width: 52ch; }
    .hero-banner__tag { font-size: clamp(0.9rem, 1.9vw, 1.05rem); }
    .hero-full__cta { padding: 1rem 2.8rem; font-size: 0.9rem; }
}

/* Landscape de poca altura: compactar texto */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 600px) {
    .hero-full__content { max-width: 760px; gap: 0.55rem; padding-bottom: 1.5rem; }
    .hero-banner__title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
    .hero-banner__text { font-size: 0.85rem; line-height: 1.4; max-width: 60ch; }
    .hero-banner__tag { font-size: 0.78rem; }
    .hero-full__cta { margin-top: 0.25rem; padding: 0.6rem 1.8rem; font-size: 0.72rem; }
}

/* Desktop (≥1024px): texto del banner más grande */
@media (min-width: 1024px) {
    .hero-banner__title { font-size: clamp(3.2rem, 5vw, 5rem); letter-spacing: 1.5px; }
    .hero-banner__text { font-size: clamp(1.05rem, 1.5vw, 1.35rem); max-width: 62ch; }
    .hero-banner__tag { font-size: clamp(0.95rem, 1.2vw, 1.15rem); }
}

/* Accesibilidad: sin animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
    .hero-banner__title,
    .hero-banner__text,
    .hero-banner__tag,
    .hero-full__cta {
        animation: none;
        opacity: 1;
        transform: none;
    }
    /* La figura desktop conserva su layout, solo se apaga la animacion */
    .hero-desktop__figure {
        animation: none;
        opacity: 1;
    }
}

/* Desktop (1024px+) — ocultar hero fullscreen, se usa inicio-desktop */
@media (min-width: 1024px) {
    .hero-full {
        display: none;
    }
}

/*=============== PANEL INICIO (legacy — eliminado) ===============*/

/*=============== ANTES & DESPUÉS (#menu-showcase) ===============*/
#menu-showcase {
    position: relative;
    z-index: 3;
    background-color: var(--color-bg-body, #0a1228);
    padding: 3.5rem 1.25rem 4rem;
    /* Red de seguridad: nada dentro de la sección genera scroll horizontal al
       hacer zoom. 'clip' (no 'hidden') no rompe el position:sticky interno. */
    overflow-x: clip;
}

.showcase-container {
    max-width: 1180px;
    margin: 0 auto;
}

/* --- Encabezado --- */
.showcase-texto {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2.5rem;
}

.showcase-eyebrow {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: 0.612rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #7BB8D4;
    margin-bottom: 0.7rem;
}

.showcase-titulo {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 1rem;
    --ad-k: 1;   /* factor de escala del titulo (se reduce a 0.95 en zoom alto) */
}
.showcase-titulo span {
    display: block;
    text-transform: uppercase;
}
.showcase-titulo__accent {
    color: #7BB8D4;
    font-size: clamp(0.808rem, calc(2.72vw * var(--ad-k, 1)), 1.36rem);
    letter-spacing: 0.02em;
}
.showcase-titulo__main {
    color: #fff;
    font-size: clamp(1.275rem, calc(5.95vw * var(--ad-k, 1)), 2.89rem);
    letter-spacing: -1px;
    text-wrap: balance;
    hyphens: none;          /* nunca partir "Transformacion" */
}
/* Zoom alto (>110% en laptops tipicos => ancho efectivo ~1024-1280):
   reduce 5% el titulo "Antes & Despues / Transformacion" para que respire. */
@media (min-width: 1024px) and (max-width: 1280px) {
    .showcase-titulo { --ad-k: 0.95; }
}

.showcase-divider {
    width: 46px;
    height: 2px;
    background: #c9a84c;
    margin: 0 auto 1.15rem;
}

.showcase-desc {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: clamp(0.765rem, 0.7225rem + 0.2125vw, 0.85rem);
    line-height: 1.6;
    color: #A0B4C8;
    max-width: 580px;
    margin: 0 auto 1.4rem;
    text-wrap: pretty;
    overflow-wrap: break-word;
}
.showcase-desc strong {
    color: #cdd9e6;
    font-weight: 600;
}

/* Pills de tratamientos */
.showcase-services-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0;
    max-width: 620px;
    margin: 0 auto 1.5rem;
}
.showcase-services-list li {
    display: inline-flex;
}
/* Cada nombre es un enlace a su tarjeta de tratamiento (#servicios) */
.showcase-services-list li a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: "Montserrat", sans-serif;
    font-size: 0.748rem; /* mas grande para resaltar */
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #e8eef5;
    text-decoration: none;
    padding: 0.425rem 0.893rem;
    border: 1px solid rgba(201, 168, 76, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.25s ease;
}
.showcase-services-list li a::before {
    content: "\25C6";
    color: #c9a84c;
    font-size: 0.468rem;
    transition: color 0.25s ease;
}
.showcase-services-list li a:hover,
.showcase-services-list li a:focus-visible {
    background: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
    color: #1B2A4A; /* azul marca sobre dorado: alto contraste */
    transform: translateY(-2px);
    outline: none;
}
.showcase-services-list li a:hover::before,
.showcase-services-list li a:focus-visible::before {
    color: #1B2A4A;
}

/* Las tarjetas no quedan tapadas por el navbar fijo al saltar por ancla */
.servicio-card {
    scroll-margin-top: 100px;
}

/* Pista "Desliza para comparar": pildora destacada con glow + brillo */
.showcase-hint {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;               /* todo en una sola fila */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 100%;                 /* nunca mas ancha que el contenedor */
    box-sizing: border-box;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    /* La fuente baja con el ancho (vw) para que la frase quepa en 1 linea en cualquier pantalla */
    font-size: clamp(0.46rem, 2.7vw, 0.782rem);
    letter-spacing: clamp(0.01em, 0.2vw, 0.14em);   /* menos tracking en movil/zoom */
    line-height: 1.3;
    text-transform: uppercase;
    color: #fdf6e6;
    padding: clamp(0.45rem, 1.6vw, 0.595rem) clamp(0.6rem, 2.6vw, 1.19rem);
    border-radius: 999px;
    border: 1.5px solid rgba(201, 168, 76, 0.55);
    background: linear-gradient(110deg, rgba(201, 168, 76, 0.16), rgba(201, 168, 76, 0.04));
    overflow: hidden;
    isolation: isolate;
    animation: hintPulse 2.4s ease-in-out infinite;
}
/* Frase siempre en una sola linea */
.showcase-hint__text {
    white-space: nowrap;
}
/* Zoom-proof: la fuente escala segun el ancho REAL de la columna (no del viewport).
   En escritorio la columna es estrecha; con zoom >100% se angosta mas, y cqi lo sigue
   correctamente para que la frase quepa en 1 linea. Fallback en vw (arriba) si no hay soporte. */
@supports (font-size: 1cqi) {
    .showcase-texto {
        container-type: inline-size;
    }
    .showcase-hint {
        font-size: clamp(0.46rem, 3.2cqi, 0.782rem);
    }
    /* El titulo escala con la columna: "Transformacion" cabe en 1 linea a cualquier zoom */
    .showcase-titulo__main {
        font-size: clamp(1.35rem, calc(11cqi * var(--ad-k, 1)), 3.4rem);
    }
    /* El boton encoge para caber en la columna en vez de partirse/salirse */
    .showcase-cta {
        font-size: clamp(0.697rem, 5.5cqi, 0.848rem);
        padding: 0.663rem clamp(0.85rem, 5cqi, 1.36rem);
    }
}
/* Destello que recorre la pildora */
.showcase-hint::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 35%,
        rgba(255, 255, 255, 0.38) 50%,
        transparent 65%);
    transform: translateX(-130%);
    animation: hintShimmer 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes hintPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.0);
        border-color: rgba(201, 168, 76, 0.5);
    }
    50% {
        box-shadow: 0 0 24px 4px rgba(201, 168, 76, 0.35);
        border-color: rgba(201, 168, 76, 0.95);
    }
}
@keyframes hintShimmer {
    0%      { transform: translateX(-130%); }
    55%, 100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
    .showcase-hint { animation: none; }
    .showcase-hint::after { animation: none; opacity: 0; }
}

/* --- Tarjetas antes/después --- */
.showcase-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    justify-items: center;
}

/* Titulos bajo cada circulo (override de los tamaños fijos de Tailwind):
   fluidos para que no se desborden al hacer zoom. */
.comparison-slider__title {
    font-size: clamp(0.808rem, 0.51rem + 0.935vw, 1.275rem);
    line-height: 1.15;
    overflow-wrap: break-word;
    text-wrap: balance;
    max-width: 100%;
}

/* --- CTA --- */
.showcase-cta-wrap {
    text-align: center;
    margin-top: 1.75rem;
}
.showcase-cta {
    margin-top: 0;
    max-width: 100%;            /* nunca mas ancho que la columna */
    box-sizing: border-box;
    white-space: normal;        /* puede pasar a 2 lineas si no cabe en 1 */
    min-width: 0;               /* permite que el flex item baje de su min-content */
    overflow-wrap: break-word;  /* parte palabra solo como ultimo recurso */
    text-wrap: balance;         /* reparte el label en lineas equilibradas */
    align-items: center;        /* icono centrado junto al texto multilinea */
    padding: 0.663rem 1.36rem;
    font-size: 0.848rem;
    line-height: 1.3;
}
.showcase-cta i {
    flex-shrink: 0;             /* el icono de WhatsApp nunca se deforma */
    font-size: 0.935rem;
}

/* Tablet y pantallas grandes: 3 tarjetas en fila */
@media (min-width: 768px) {
    #menu-showcase {
        padding: 4.5rem 2rem 5rem;
    }
    .showcase-texto {
        margin-bottom: 3rem;
    }
    .showcase-results {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.6rem;
        align-items: start;
        max-width: 1080px;
        margin: 0 auto;
    }
}

/* Escritorio: texto fijo a un lado + imágenes apiladas (efecto scroll) */
@media (min-width: 1024px) {
    /* Padding y gap FLUIDOS: al hacer zoom (110%+) el viewport se encoge y el
       contenido recupera espacio en vez de quedar apretado. */
    #menu-showcase {
        /* El minimo del padding izquierdo es 5rem (~80px) para que el texto
           NUNCA pase por debajo de la barra social fija (~68px) — robusto en
           todas las pantallas y zooms, sin depender del ancho del viewport. */
        padding: clamp(3.5rem, 5vw, 6rem) clamp(1.5rem, 3vw, 3rem)
                 clamp(3.5rem, 5vw, 6rem) clamp(5rem, 4.5vw, 5.5rem);
    }
    .showcase-container {
        display: grid;
        /* minmax(0, …) en ambas columnas evita el "grid blowout": sin esto los
           items tienen min-width:auto y la columna no puede achicarse al hacer
           zoom, desbordando las imágenes. */
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: clamp(1.5rem, 3vw, 3.5rem);
        align-items: start;
    }
    .showcase-texto {
        position: sticky;
        top: 8vh;
        text-align: left;
        max-width: none;
        margin: 0;
        min-width: 0;
    }
    .showcase-divider { margin-left: 0; margin-right: auto; }
    .showcase-desc { margin-left: 0; }
    .showcase-services-list { justify-content: flex-start; margin-left: 0; }
    .showcase-results {
        grid-template-columns: 1fr;
        gap: 3rem;
        max-width: none;
        margin: 0;
        min-width: 0;
    }
    /* Ancho fluido: al hacer zoom el viewport se encoge y la imagen baja de
       tamaño en vez de forzar el ancho de la columna y desbordarse. */
    .circle-static { width: 100%; max-width: min(460px, 100%); }
    .showcase-cta-wrap {
        text-align: left;
        margin-top: 1.75rem;
    }
    /* Escritorio: pildora que ocupa la columna (con tope) y reparte el texto
       centrado. Al hacer zoom la columna se angosta y el label pasa a 2 lineas
       equilibradas en vez de desbordarse. */
    .showcase-cta {
        display: flex;
        width: 100%;
        max-width: 22rem;
        justify-content: center;
        text-align: center;
    }
}

/*=============== LANDSCAPE — optimizacion completa ===============*/

/* ---- Celulares landscape (altura corta, <500px) ---- */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {

    /* Galeria */
    #pinterest-gallery { padding: 2rem 0; }
    .gallery-col { width: 180px; height: 280px; }

    /* Servicios: grid 2 columnas */
    #servicios, #testimonios { padding: 2.5rem 1rem; }
    .servicios-header, .testimonios-header { margin-bottom: 1.5rem; }
    .servicios-grid { gap: 1rem; }
    .servicio-card__body { padding: 0.75rem 1rem 1rem; }
    .servicio-card__body h3 { font-size: 1.3rem; }
    .servicio-card__body p { font-size: 0.8rem; }
    .servicio-card__wa-btn { font-size: 0.75rem; padding: 0.5rem 1rem; }

    /* Testimonios */
    .testimonio-card { padding: 1.5rem 1.25rem; }
    .testimonio-card__quote { font-size: 0.85rem; line-height: 1.5; margin-bottom: 1rem; }
}

/* ---- Tablets landscape (iPad, altura media 501px-900px) ---- */
@media (max-width: 1023px) and (orientation: landscape) and (min-height: 501px) {

    /* Galeria */
    .gallery-col { width: 220px; height: 420px; }

    /* Servicios: grid 3 columnas */
    #servicios, #testimonios { padding: 3rem 1.5rem; }
    .servicios-header, .testimonios-header { margin-bottom: 2rem; }
    .servicios-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    /* Testimonios: 2 tarjetas visibles */
    .testimonio-card { padding: 2rem 1.5rem; }
}

/* ---- Reglas compartidas landscape (ambos tamaños) ---- */
@media (max-width: 1023px) and (orientation: landscape) {
    #servicios,
    #testimonios {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .servicios-header,
    .testimonios-header {
        margin-bottom: 2rem;
    }

    /* Titulos de seccion mas compactos en landscape */
    .servicios-header h2 .st-line--white,
    .testimonios-header h2 .st-line--white,
    .gallery-header h2 .st-line--white {
        font-size: clamp(2rem, 5vw, 3.5rem);
    }
    .servicios-header h2 .st-line--accent,
    .testimonios-header h2 .st-line--accent,
    .gallery-header h2 .st-line--accent {
        font-size: clamp(1rem, 2vw, 1.5rem);
    }
}

/*=============== RECIPE ===============*/


/*=============== POPULAR ===============*/


/*=============== DELIVERY ===============*/


/*=============== CONTACT ===============*/


/*=============== FOOTER ===============*/


/*=============== SCROLL BAR ===============*/


/*=============== SCROLL UP ===============*/


/* Show Scroll Up */


/*=============== BREAKPOINTS ===============*/
/* For small devices — nav handled above in dedicated breakpoints */

/* For medium devices */


/* For large devices */

/*=============== PINTEREST GALLERY — masonry + auto-scroll ===============*/
#pinterest-gallery {
    background: linear-gradient(180deg, transparent 0%, var(--color-bg-body) 10%, var(--color-bg-body) 90%, transparent 100%);
    padding: 4rem 0;
    overflow: hidden;
}

.gallery-header {
    padding: 0 1.5rem 2.5rem;
    text-align: center;
}
.gallery-header h2 {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 400;
    line-height: 0.92;
    margin-bottom: 0.5rem;
}
.gallery-header h2 .st-line {
    display: block;
    text-transform: uppercase;
    line-height: 0.92;
}
.gallery-header h2 .st-line--accent { color: #7BB8D4; font-size: clamp(1.32rem, 2.75vw, 2.2rem); }
.gallery-header h2 .st-line--white  { color: #FFFFFF; font-size: clamp(2.75rem, 5.5vw, 5.5rem); letter-spacing: -1px; }
/* Separador dorado */
.gallery-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-accent-gold);
    margin: 0.75rem auto 0;
}
.gallery-header p {
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #A0B4C8;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Viewport que recorta la cinta */
.gallery-scroll {
    overflow: hidden;
    width: 100%;
}

/* Cinta horizontal: columnas lado a lado */
.gallery-belt {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: belt-slide 50s linear infinite;
}
.gallery-scroll:hover .gallery-belt {
    animation-play-state: paused;
}

@keyframes belt-slide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Cada columna: altura fija, tarjetas se reparten dentro */
.gallery-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
    width: 260px;
    height: 500px;
}

/* Tarjetas con proporciones variadas — estilo Pinterest */
.gallery-card {
    display: flex;
    width: 100%;
    min-height: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    background: var(--color-bg-card);
    transform: translateZ(0); /* fuerza capa GPU individual en Chrome */
}
.gallery-card--tall   { flex: 1.8; }
.gallery-card--xtall  { flex: 2.07; }
.gallery-card--xtall img { object-position: top; }
.gallery-card--medium { flex: 1.3; }
.gallery-card--short  { flex: 1; }
/* Cuadrada: para comparativas antes/después (se ven completas, sin recorte ni barras) */
.gallery-card--square { flex: 0 0 auto; aspect-ratio: 1 / 1; }

.gallery-card img {
    flex: 1;
    min-height: 0;
    width: 100%;
    filter: contrast(1.02) saturate(1.05);
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(.25,.46,.45,.94);
}
.gallery-card:hover img {
    transform: scale(1.06);
}

/* Columna ancha para lateral + foto lugar */
.gallery-col--wide { width: 340px; height: 500px; }


/* -- Responsive -- */
@media (max-width: 640px) {
    #pinterest-gallery { padding: 2rem 0; overflow: visible; }
    .gallery-scroll { overflow: hidden; }
    .gallery-belt { gap: 10px; animation-duration: 35s; }
    .gallery-col  { width: 160px; height: 320px; gap: 10px; }
    .gallery-col--wide { width: 184px; height: 320px; }
    .gallery-card { border-radius: 4px; min-height: 0; }
    .gallery-card img { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .gallery-col  { width: 210px; height: 410px; }
    .gallery-col--wide { width: 242px; height: 410px; }
}

/*=============== SERVICIOS ===============*/
#servicios {
    background: linear-gradient(180deg, transparent 0%, var(--color-bg-card) 8%, var(--color-bg-card) 92%, transparent 100%);
    padding: 5rem 1.5rem;
}

.servicios-header {
    text-align: center;
    margin-bottom: 3rem;
}
.servicios-header h2 {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 0.5rem;
}
.servicios-header h2 .st-line {
    display: block;
    text-transform: uppercase;
    line-height: 0.9;
}
.servicios-header h2 .st-line--accent { color: #7BB8D4; font-size: clamp(1.2rem, 2.5vw, 2rem); }
.servicios-header h2 .st-line--white  { color: #FFFFFF; font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -2px; }
/* Separador dorado */
.servicios-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-accent-gold);
    margin: 0.75rem auto 0;
}
.servicios-header p {
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #A0B4C8;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Pantallas grandes: las 4 tarjetas en una sola fila balanceada (evita la huerfana 3+1) */
@media (min-width: 1024px) {
    .servicios-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1280px;
    }
}

/* --- Tarjeta --- */
.servicio-card {
    background: var(--color-bg-card);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
}
.servicio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    border-color: var(--color-accent-main);
}

/* Animacion: solo si JS cargo y anadio .will-animate */
.servicio-card.will-animate {
    opacity: 0;
    transform: translateY(30px);
}
.servicio-card.will-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.35s ease;
}
.servicio-card.will-animate.is-visible:hover {
    transform: translateY(-6px);
}

.servicio-card__img {
    display: flex;
    aspect-ratio: 4 / 5; /* igual a la proporcion de las fotos (1200x1500): se ven completas, sin recorte */
    padding: 5%;         /* 5% por lado = foto 10% mas pequena, con aire respecto a la tarjeta */
    overflow: hidden;
    background: var(--color-bg-surface);
}
.servicio-card__img img {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* con height 100% + contain la foto entra entera, nunca se recorta */
    object-position: center;
    display: block;
    /* Sin escalado: la caja ya tiene la proporcion de la foto, asi que se ve entera */
    filter: contrast(1.02) saturate(1.04);
    transition: filter 0.5s ease;
}
.servicio-card:hover .servicio-card__img img {
    filter: contrast(1.05) saturate(1.08);
}

.servicio-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.servicio-card__body h3 {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    /* Tipografia fluida: escala con el viewport (responde al zoom) hasta ~1415px */
    font-size: clamp(1.05rem, 0.45rem + 1.3vw, 1.6rem);
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    text-wrap: balance;          /* reparte el titulo en lineas parejas */
    hyphens: none;
    overflow-wrap: break-word;   /* evita desbordes en tarjetas estrechas */
}
.servicio-card__body p {
    font-family: "Lato", sans-serif;
    font-size: clamp(0.82rem, 0.62rem + 0.42vw, 0.98rem);
    font-weight: 300;
    color: #A0B4C8;
    line-height: 1.6;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/* --- Botón WhatsApp en cards de servicio --- */
.servicio-card__wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    padding: 0.6rem 1.25rem;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
    background: #25D366;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: clamp(0.78rem, 0.68rem + 0.3vw, 0.88rem);
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
}
.servicio-card__wa-btn:hover {
    background: #1ebe5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
}
.servicio-card__wa-btn i {
    font-size: 1.1rem;
}

/* --- Llamado a agendar al final de Tratamientos --- */
.servicios-cta {
    max-width: 720px;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem);
    text-align: center;
    border-radius: 18px;
    border: 1px solid rgba(201, 168, 76, 0.35);
    background:
        radial-gradient(120% 130% at 50% 0%, rgba(201, 168, 76, 0.12), transparent 60%),
        rgba(255, 255, 255, 0.03);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.servicios-cta__eyebrow {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: clamp(0.68rem, 1.6vw, 0.8rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #c9a84c;
    margin: 0 0 0.6rem;
}
.servicios-cta__title {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    font-size: clamp(1.45rem, 1rem + 2.3vw, 2.3rem);
    letter-spacing: 0.5px;
    line-height: 1.05;
    margin: 0 0 0.7rem;
    text-wrap: balance;
}
.servicios-cta__desc {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    color: #A0B4C8;
    font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 auto 1.5rem;
    text-wrap: pretty;
}
.servicios-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 2rem;
    background: #25D366;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
    letter-spacing: 0.5px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.servicios-cta__btn:hover {
    background: #1ebe5a;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
}
.servicios-cta__btn i {
    font-size: 1.2rem;
}

/* --- Flecha animada swipe --- */
.swipe-arrow {
    display: inline-flex;
    color: #c9a84c;
    animation: bounceX 1.3s ease-in-out infinite;
}
.swipe-arrow i {
    font-size: 1.25rem;
    filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.6));
}
@keyframes bounceX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}
@media (prefers-reduced-motion: reduce) {
    .swipe-arrow { animation: none; }
}

/* --- Modal --- */
.servicio-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.servicio-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.servicio-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.servicio-modal__panel {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    max-width: 600px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(123,184,212,0.08);
    border: 1px solid var(--glass-border);
    transform: scale(0.95);
    transition: transform 0.35s cubic-bezier(.25,.46,.45,.94);
    /* Scrollbar elegante dentro del modal */
    scrollbar-width: thin;
    scrollbar-color: rgba(123,184,212,0.25) transparent;
}
.servicio-modal__panel::-webkit-scrollbar {
    width: 6px;
}
.servicio-modal__panel::-webkit-scrollbar-track {
    background: transparent;
}
.servicio-modal__panel::-webkit-scrollbar-thumb {
    background: rgba(123,184,212,0.25);
    border-radius: 3px;
}
.servicio-modal__panel::-webkit-scrollbar-thumb:hover {
    background: rgba(123,184,212,0.4);
}
.servicio-modal.is-open .servicio-modal__panel {
    transform: scale(1);
}

.servicio-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(126, 207, 234, 0.1);
    color: var(--color-accent-main);
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 1;
}
.servicio-modal__close:hover {
    background: rgba(126, 207, 234, 0.2);
}

.servicio-modal__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 16px 16px 0 0;
    background: var(--color-bg-surface);
    filter: contrast(1.02) saturate(1.04);
}

.servicio-modal__content {
    padding: 1.5rem 2rem 2rem;
}
.servicio-modal__content h3 {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.servicio-modal__content p {
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #A0B4C8;
    line-height: 1.7;
}

/* Responsive modal */
@media (max-width: 640px) {
    .servicio-modal__content {
        padding: 1.25rem 1.5rem 1.5rem;
    }
}

/*=============== VIDEOS REDES SOCIALES ===============*/
#videos-redes {
    background: linear-gradient(180deg, transparent 0%, rgba(15,28,53,0.6) 8%, rgba(15,28,53,0.6) 92%, transparent 100%);
    padding: 5rem 0;
    overflow: hidden;
}

/* --- Header --- */
.videos-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 0 1.5rem;
}
.videos-header h2 {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 0.5rem;
}
.videos-header h2 .st-line {
    display: block;
    text-transform: uppercase;
    line-height: 0.9;
}
.videos-header h2 .st-line--accent { color: #7BB8D4; font-size: clamp(1.2rem, 2.5vw, 2rem); }
.videos-header h2 .st-line--white  { color: #FFFFFF; font-size: clamp(2.8rem, 5.5vw, 5.5rem); letter-spacing: -1px; }
.videos-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-accent-gold);
    margin: 0.75rem auto 0;
}
.videos-header p {
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-text-secondary);
    margin-top: 0.75rem;
}

/* --- Carousel wrapper --- */
.videos-carousel {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Track: scroll horizontal con snap --- */
.videos-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 4rem 1.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.videos-track::-webkit-scrollbar {
    display: none;
}

/* --- Flechas de navegación --- */
.videos-arrow {
    display: none; /* ocultas en móvil */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(123,184,212,0.2);
    background: rgba(15,28,53,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #7BB8D4;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.videos-arrow:hover {
    background: rgba(123,184,212,0.15);
    border-color: rgba(123,184,212,0.4);
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(123,184,212,0.2);
}
.videos-arrow--left  { left: 12px; }
.videos-arrow--right { right: 12px; }
.videos-arrow:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

/* --- Tarjeta de video --- */
.video-card {
    position: relative;
    flex: 0 0 280px;
    scroll-snap-align: center;
    border-radius: 18px;
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease;
}
.video-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0,0,0,0.45),
                0 0 0 1px rgba(123,184,212,0.15);
}

/* Iframe container — ratio 9:16 para reels */
.video-card__embed {
    position: relative;
    width: 100%;
    padding-bottom: 177.78%; /* 9:16 */
    background: rgba(0,0,0,0.3);
    overflow: hidden;
}
.video-card__embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* Instagram official embeds */
.video-card__embed .instagram-media {
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
.video-card__embed .instagram-media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* --- Placeholder de video --- */
.video-card__placeholder {
    background: linear-gradient(160deg, rgba(30,40,55,0.95) 0%, rgba(15,20,30,0.98) 100%) !important;
    border: 1px dashed rgba(123,184,212,0.25);
    overflow: visible;
}
.video-card__placeholder .placeholder-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.video-card__placeholder i {
    font-size: 3.5rem;
    color: rgba(123,184,212,0.45);
    transition: color 0.3s ease, transform 0.3s ease;
}
.video-card:hover .video-card__placeholder i {
    color: rgba(123,184,212,0.7);
    transform: scale(1.1);
}
.video-card__placeholder span {
    margin-top: 0.75rem;
    font-family: "Lato", sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(160,180,200,0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Badge de red social */
.video-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2;
    pointer-events: none;
}
.video-card__badge i {
    font-size: 0.85rem;
}
.video-card__badge--fb {
    background: rgba(24,119,242,0.25);
    color: #6CB4FF;
    border: 1px solid rgba(24,119,242,0.2);
}
.video-card__badge--ig {
    background: rgba(225,48,108,0.2);
    color: #FF6B9D;
    border: 1px solid rgba(225,48,108,0.15);
}

/* --- Lazy embed placeholders --- */
.lazy-embed__placeholder,
.lazy-map__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(30,40,55,0.95) 0%, rgba(15,20,30,0.98) 100%);
    z-index: 3;
    cursor: pointer;
    transition: opacity 0.4s ease;
}
.lazy-embed__placeholder i,
.lazy-map__placeholder i {
    font-size: 3rem;
    color: rgba(123,184,212,0.5);
    transition: color 0.3s ease, transform 0.3s ease;
}
.video-card:hover .lazy-embed__placeholder i {
    color: rgba(123,184,212,0.8);
    transform: scale(1.15);
}
.lazy-embed__placeholder span,
.lazy-map__placeholder span {
    margin-top: 0.75rem;
    font-family: "Lato", sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    color: rgba(160,180,200,0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.lazy-embed__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(123,184,212,0.2);
    border-top-color: rgba(123,184,212,0.8);
    border-radius: 50%;
    animation: lazyEmbedSpin 0.8s linear infinite;
}
@keyframes lazyEmbedSpin {
    to { transform: rotate(360deg); }
}

/* --- Dots indicadores --- */
.videos-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.25rem;
}
.videos-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(160,180,200,0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.35s ease;
}
.videos-dots .dot.active {
    background: var(--color-accent-gold);
    width: 24px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(201,168,76,0.4);
}

/* --- Fade en los bordes (efecto elegante) --- */
.videos-carousel::before,
.videos-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 3;
    pointer-events: none;
}
.videos-carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg-body) 0%, transparent 100%);
}
.videos-carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg-body) 0%, transparent 100%);
}

/* ===== MÓVIL (< 640px) ===== */
@media (max-width: 639px) {
    #videos-redes { padding: 3rem 0; }
    .videos-header { margin-bottom: 1.5rem; }
    .videos-track {
        gap: 1rem;
        padding: 0.75rem 2.5rem 1.25rem;
    }
    .video-card {
        flex: 0 0 75vw;
        max-width: 300px;
    }
    .videos-arrow { display: none; }
    .videos-carousel::before,
    .videos-carousel::after {
        width: 30px;
    }
}

/* ===== TABLET (640–1023px) ===== */
@media (min-width: 640px) and (max-width: 1023px) {
    .video-card { flex: 0 0 260px; }
    .videos-track { padding: 1rem 3.5rem 1.5rem; }
    .videos-arrow { display: flex; }
}

/* ===== DESKTOP (≥1024px) ===== */
@media (min-width: 1024px) {
    .video-card { flex: 0 0 300px; }
    .videos-track {
        padding: 1rem 3.5rem 1.5rem;
        gap: 1.5rem;
    }
    .videos-arrow { display: flex; }
    .videos-arrow--left  { left: 8px; }
    .videos-arrow--right { right: 8px; }
}

/* ===== LANDSCAPE en pantalla pequeña ===== */
@media (min-width: 1024px) and (orientation: landscape) {
    .videos-header h2 .st-line--white { font-size: clamp(2rem, 5vw, 3.5rem); }
    .videos-header h2 .st-line--accent { font-size: clamp(1rem, 2vw, 1.5rem); }
    #videos-redes { padding: 3rem 0; }
    .videos-header { margin-bottom: 1.5rem; }
}

/*=============== TESTIMONIOS ===============*/
#testimonios {
    background: linear-gradient(180deg, transparent 0%, var(--color-bg-surface) 8%, var(--color-bg-surface) 92%, transparent 100%);
    padding: 5rem 1.5rem;
    overflow: hidden;
}

.testimonios-header {
    text-align: center;
    margin-bottom: 3rem;
}
.testimonios-header h2 {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 0.5rem;
}
.testimonios-header h2 .st-line {
    display: block;
    text-transform: uppercase;
    line-height: 0.9;
}
.testimonios-header h2 .st-line--accent { color: #7BB8D4; font-size: clamp(1.2rem, 2.5vw, 2rem); }
.testimonios-header h2 .st-line--white  { color: #FFFFFF; font-size: clamp(2.8rem, 5.5vw, 5.5rem); letter-spacing: -1px; }
/* Separador dorado */
.testimonios-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-accent-gold);
    margin: 0.75rem auto 0;
}
.testimonios-header p {
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #A0B4C8;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* --- Slider track --- */
.testimonios-track {
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
}
.testimonios-slider {
    display: flex;
    transition: transform 0.5s cubic-bezier(.25,.46,.45,.94);
    gap: 2rem;
}

/* --- Tarjeta testimonio --- */
.testimonio-card {
    flex: 0 0 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Animacion: solo si JS cargo y anadio .will-animate */
.testimonio-card.will-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.testimonio-card.will-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) {
    .testimonio-card {
        flex: 0 0 calc(50% - 1rem);
    }
}
@media (min-width: 1024px) {
    .testimonio-card {
        flex: 0 0 calc(33.333% - 1.34rem);
    }
}

.testimonio-card__stars {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 1rem;
}
.testimonio-card__stars i {
    color: var(--color-accent-gold);
    font-size: 1.1rem;
}

.testimonio-card__quote {
    font-family: "Playfair Display", serif;
    font-size: 1rem;
    color: #A0B4C8;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.testimonio-card__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.testimonio-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent-main);
    color: var(--color-bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.testimonio-card__author strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    text-transform: none;
}
.testimonio-card__author span {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* --- Dots de navegacion --- */
.testimonios-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}
.testimonios-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(126, 207, 234, 0.2);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}
.testimonios-dots button.active {
    background: var(--color-accent-main);
    transform: scale(1.3);
}

/* Ocultar dots en desktop donde se ven todas */
@media (min-width: 1024px) {
    .testimonios-dots {
        display: none;
    }
}

/*=============== RESULTADOS — Antes y Después ===============*/
.resultados-section {
    background: linear-gradient(180deg, transparent 0%, #0d0d0d 6%, #0d0d0d 94%, transparent 100%);
    padding: 5rem 1.5rem;
}

.resultados-header {
    text-align: center;
    margin-bottom: 3rem;
}
.resultados-kicker {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #7BB8D4;
    margin-bottom: 0.75rem;
}
.resultados-header h2 {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 400;
    line-height: 0.92;
    margin-bottom: 0.5rem;
}
.resultados-header h2 .st-line {
    display: block;
    text-transform: uppercase;
    line-height: 0.92;
}
.resultados-header h2 .st-line--accent { color: #7BB8D4; font-size: clamp(1.2rem, 2.5vw, 2rem); }
.resultados-header h2 .st-line--white  { color: #FFFFFF; font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -2px; }
.resultados-separator {
    width: 60px;
    height: 2px;
    background: #c9a96e;
    margin: 0.75rem auto 0.75rem;
}
.resultados-sub {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    font-weight: 300;
    font-style: italic;
    color: #A0B4C8;
    letter-spacing: 1px;
}

/* --- Grid de sliders --- */
.resultados-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .resultados-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}
@media (min-width: 1024px) {
    .resultados-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* --- Comparison Slider --- */
.comparison-slider {
    position: relative;
}

.comparison-slider__wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3 / 3.4;
    overflow: hidden;
    border-radius: 14px;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(201, 169, 110, 0.15);
    /* Nitidez mejorada */
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Fuerza una capa de composición propia: garantiza que el border-radius
       recorte la imagen aunque tenga transform: scale (si no, al hacer zoom
       las esquinas de la foto escapan del contenedor redondeado). */
    transform: translateZ(0);
    isolation: isolate;
}

.comparison-slider__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Zoom ligero para recortar bordes oscuros de las fotos */
    transform: scale(1.06);
    /* Mejora de nitidez */
    image-rendering: -webkit-optimize-contrast;
    filter: contrast(1.03) saturate(1.05);
}

.comparison-slider__img--after {
    position: absolute;
    inset: 0;
}

.comparison-slider__before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
    z-index: 2;
}

.comparison-slider__before img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Labels --- */
.comparison-slider__label {
    position: absolute;
    top: 0.75rem;
    z-index: 5;
    font-family: "Montserrat", sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #f5f0eb;
    padding: 0.3rem 0.65rem;
    border-radius: 3px;
    background: rgba(13, 13, 13, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.comparison-slider.is-ready .comparison-slider__label {
    opacity: 1;
}
.comparison-slider__label--before {
    left: 0.75rem;
}
.comparison-slider__label--after {
    right: 0.75rem;
}

/* --- Handle (barra + circulo) --- */
.comparison-slider__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3px;
    cursor: ew-resize;
    touch-action: none;
}

.comparison-slider__handle-line {
    flex: 1;
    width: 2px;
    background: #c9a96e;
    box-shadow: 0 0 6px rgba(201, 169, 110, 0.4);
}

.comparison-slider__handle-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(13, 13, 13, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid #c9a96e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9a96e;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comparison-slider__wrapper.is-dragging .comparison-slider__handle-circle,
.comparison-slider__handle-circle:hover {
    transform: scale(1.12);
    box-shadow: 0 0 16px rgba(201, 169, 110, 0.5);
}

/* --- Responsive landscape celular --- */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {
    .resultados-section { padding: 2.5rem 1rem; }
    .resultados-header { margin-bottom: 1.5rem; }
    .resultados-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .comparison-slider__handle-circle {
        width: 32px;
        height: 32px;
    }
    .comparison-slider__handle-circle svg {
        width: 16px;
        height: 16px;
    }
}

/* --- Tablets landscape --- */
@media (max-width: 1023px) and (orientation: landscape) and (min-height: 501px) {
    .resultados-section { padding: 3rem 1.5rem; }
    .resultados-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* ==================== GALERÍA RESULTADOS TECNOLOGÍA ==================== */
#galeria-tech {
    padding: 5rem 1.5rem;
}

.galeria-tech-header {
    text-align: center;
    margin-bottom: 3rem;
}
.galeria-tech-header h2 {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 1rem;
}
.galeria-tech-header h2 .st-line {
    display: block;
    text-transform: uppercase;
    line-height: 0.92;
}
.galeria-tech-header h2 .st-line--accent { color: #7BB8D4; font-size: clamp(1.2rem, 2.5vw, 2rem); }
.galeria-tech-header h2 .st-line--white  { color: #FFFFFF; font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -2px; }
.galeria-tech-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: #c9a96e;
    margin: 1rem auto 0;
}
.galeria-tech-header p {
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #A0B4C8;
    margin-top: 0.75rem;
}

.galeria-tech-masonry {
    columns: 4;
    column-gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
}

.galeria-tech-item {
    break-inside: avoid;
    margin-bottom: 14px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.galeria-tech-item img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.galeria-tech-item:hover img {
    transform: scale(1.03);
}

.galeria-tech-caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1rem;
    background: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0);
    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.35s ease, color 0.35s ease;
}
.galeria-tech-item:hover .galeria-tech-caption {
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 1);
}

/* --- Responsive Galería Tech --- */
@media (max-width: 767px) {
    #galeria-tech { padding: 2.5rem 1rem; }
    .galeria-tech-header { margin-bottom: 1.5rem; }
    .galeria-tech-masonry { columns: 2; column-gap: 10px; }
    .galeria-tech-item { margin-bottom: 10px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    #galeria-tech { padding: 3rem 1.5rem; }
    .galeria-tech-header { margin-bottom: 2rem; }
    .galeria-tech-masonry { columns: 3; column-gap: 12px; }
    .galeria-tech-item { margin-bottom: 12px; }
}
@media (min-width: 1024px) {
    .galeria-tech-header h2 .st-line--white { font-size: clamp(2rem, 5vw, 3.5rem); }
    .galeria-tech-header h2 .st-line--accent { font-size: clamp(1rem, 2vw, 1.5rem); }
}

/*=============== CONTACTO ===============*/
#contact {
    background: linear-gradient(180deg, transparent 0%, var(--color-bg-surface) 6%, var(--color-bg-surface) 94%, transparent 100%);
    padding: 5rem 1.5rem;
}

.contact-header {
    text-align: center;
    margin-bottom: 3rem;
}
.contact-header h2 {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 0.5rem;
}
.contact-header h2 .st-line {
    display: block;
    text-transform: uppercase;
    line-height: 0.9;
}
.contact-header h2 .st-line--accent { color: #7BB8D4; font-size: clamp(1.2rem, 2.5vw, 2rem); }
.contact-header h2 .st-line--white  { color: #FFFFFF; font-size: clamp(2.8rem, 5.5vw, 5.5rem); letter-spacing: -1px; }
.contact-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-accent-gold);
    margin: 0.75rem auto 0;
}
.contact-header p {
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-text-secondary);
    margin-top: 0.75rem;
}

/* Layout mapa + info */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        align-items: start;
    }
}

/* Mapa */
.contact-map {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    aspect-ratio: 4 / 3;
}
.contact-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    filter: brightness(0.95) contrast(1.05);
}

/* Pin con logo sobre el mapa */
.contact-map__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.contact-map__pin-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    animation: pinBounce 2s ease-in-out infinite;
}
.contact-map__pin img {
    width: 47px;
    height: 47px;
    object-fit: contain;
    border-radius: 50%;
    background: #000;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 3px rgba(123,184,212,0.4);
}
.contact-map__pin-arrow {
    width: 18px;
    height: auto;
    margin-top: -2px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.contact-map__pin-pulse {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(123,184,212,0.2);
    z-index: 1;
    animation: pulse 2s ease-out infinite;
}

@keyframes pinBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes pulse {
    0% { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* Info cards */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.contact-info__card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-info__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.contact-info__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(123,184,212,0.1);
    color: var(--color-accent-main);
    font-size: 1.25rem;
}
.contact-info__card h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-accent-main);
    margin-bottom: 0.3rem;
}
.contact-info__card p {
    font-family: "Lato", sans-serif;
    font-size: 0.92rem;
    font-weight: 300;
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.contact-info__card p a {
    color: inherit;
    text-decoration: none;
}
.contact-info__card p a:hover {
    text-decoration: underline;
}

/* Social links en contacto */
.contact-info__social {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.5rem;
}
.contact-info__social a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(123,184,212,0.08);
    border: 1px solid var(--glass-border);
    color: var(--color-accent-main);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}
.contact-info__social a:hover {
    background: rgba(123,184,212,0.2);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(123,184,212,0.2);
}

/* Responsive contacto */
/* ===== Contacto — Móvil ≤ 767px ===== */
@media (max-width: 767px) {
    #contact { padding: 3rem 1rem; }
    .contact-header { margin-bottom: 1.5rem; }
    .contact-map { aspect-ratio: 16 / 10; }
    .contact-info__card { padding: 1rem 1.1rem; gap: 0.75rem; }
    .contact-info__icon { width: 38px; height: 38px; font-size: 1.1rem; }
    .contact-info__card h3 { font-size: 0.7rem; }
    .contact-info__card p { font-size: 0.85rem; }
    .contact-info__social a { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ===== Contacto — Móvil extra pequeño ≤ 380px ===== */
@media (max-width: 380px) {
    #contact { padding: 2.5rem 0.75rem; }
    .contact-header h2 .st-line--white { font-size: 2.2rem; }
    .contact-header h2 .st-line--accent { font-size: 1rem; }
    .contact-info__card { padding: 0.85rem 1rem; }
}

/* ===== Contacto — Tablet portrait (768–1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    #contact { padding: 4rem 1.5rem; }
    .contact-map { aspect-ratio: 1 / 1; }
    .contact-info__card { padding: 1.1rem 1.25rem; }
}

/* ===== Contacto — Tablet landscape (768–1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    #contact { padding: 3rem 1.5rem; }
    .contact-header { margin-bottom: 2rem; }
    .contact-map { aspect-ratio: 4 / 3; }
}

/* ===== Contacto — Landscape celular (h ≤ 500px) ===== */
@media (orientation: landscape) and (max-height: 500px) {
    #contact { padding: 2.5rem 1rem; }
    .contact-header { margin-bottom: 1.5rem; }
    .contact-header h2 .st-line--white { font-size: clamp(1.8rem, 4vw, 2.5rem); }
    .contact-header h2 .st-line--accent { font-size: clamp(0.9rem, 1.5vw, 1.2rem); }
    .contact-wrapper { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .contact-map { aspect-ratio: 16 / 10; }
    .contact-info__card { padding: 0.75rem 1rem; gap: 0.6rem; }
    .contact-info__icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 8px; }
    .contact-info__card h3 { font-size: 0.65rem; }
    .contact-info__card p { font-size: 0.8rem; line-height: 1.4; }
}

/* ===== Contacto — Desktop landscape ≥ 1024px ===== */
@media (min-width: 1024px) and (orientation: landscape) {
    .contact-header h2 .st-line--white { font-size: clamp(2rem, 5vw, 3.5rem); }
    .contact-header h2 .st-line--accent { font-size: clamp(1rem, 2vw, 1.5rem); }
    #contact { padding: 3rem 1.5rem; }
    .contact-header { margin-bottom: 2rem; }
}

/*=============== FAQ ===============*/
.faq-section {
    padding: 4rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}
.faq-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.faq-header h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.faq-header h2 .st-line--accent {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-accent-main);
}
.faq-header h2 .st-line--white {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 400;
    text-transform: uppercase;
    color: #FFFFFF;
    line-height: 1;
}
.faq-header p {
    font-family: "Lato", sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
}
.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.faq-item {
    border-bottom: 1px solid var(--glass-border);
}
.faq-item:first-child {
    border-top: 1px solid var(--glass-border);
}
.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0.5rem;
    cursor: pointer;
    list-style: none;
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #FFFFFF;
    transition: color 0.3s ease;
}
.faq-item__question::-webkit-details-marker {
    display: none;
}
.faq-item__question:hover {
    color: var(--color-accent-main);
}
.faq-item__icon {
    font-size: 1.25rem;
    color: var(--color-accent-main);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.faq-item[open] .faq-item__icon {
    transform: rotate(45deg);
}
.faq-item__answer {
    padding: 0 0.5rem 1.25rem;
}
.faq-item__answer p {
    font-family: "Lato", sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--color-text-secondary);
}
.faq-item__answer a {
    color: var(--color-accent-main);
    text-decoration: none;
    font-weight: 400;
}
.faq-item__answer a:hover {
    text-decoration: underline;
}
@media (max-width: 767px) {
    .faq-section { padding: 3rem 1rem; }
    .faq-item__question { font-size: 0.9rem; padding: 1rem 0.25rem; }
    .faq-item__answer { padding: 0 0.25rem 1rem; }
    .faq-item__answer p { font-size: 0.85rem; }
}

/*=============== FOOTER ===============*/
.site-footer {
    background: var(--color-bg-card);
    border-top: 1px solid var(--glass-border);
    padding: 2rem 1.5rem;
}
.site-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.site-footer__logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.site-footer__logo img {
    height: 2rem;
    width: auto;
}
.site-footer__logo span {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.site-footer__copy {
    font-family: "Lato", sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

/* ===== Footer — Móvil ===== */
@media (max-width: 767px) {
    .site-footer { padding: 1.5rem 1rem; }
    .site-footer__logo img { height: 1.6rem; }
    .site-footer__logo span { font-size: 0.9rem; letter-spacing: 1.5px; }
    .site-footer__copy { font-size: 0.7rem; }
}

/* ===== Footer — Landscape celular ===== */
@media (orientation: landscape) and (max-height: 500px) {
    .site-footer { padding: 1.25rem 1rem; }
    .site-footer__logo img { height: 1.4rem; }
    .site-footer__logo span { font-size: 0.85rem; letter-spacing: 1px; }
    .site-footer__copy { font-size: 0.65rem; }
}

/*=============== TIPOGRAFÍA GLOBAL — toda la web con la fuente del logo ===============*/
* {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", "Montserrat", sans-serif !important;
}
/* Preservar los iconos (Remixicon) y campos de formulario nativos */
[class^="ri-"], [class*=" ri-"], i {
    font-family: "remixicon" !important;
}

/*=============== SOBRE MÍ ===============*/
#sobre-mi {
    background: var(--color-bg-body);
    padding: 4rem 1.5rem;
}
.sobremi-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.sobremi-photo {
    width: min(320px, 80vw);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    background: #FFFFFF;
}
.sobremi-photo img {
    display: block;
    width: 100%;
    height: auto;
}
.sobremi-content {
    text-align: center;
    max-width: 560px;
}
.sobremi-content h2 {
    font-family: "Posterama 2001 W04 Regular", "Bebas Neue", sans-serif;
    font-weight: 400;
    line-height: 0.92;
    margin-bottom: 1rem;
}
.sobremi-content h2 .st-line {
    display: block;
    text-transform: uppercase;
    line-height: 0.92;
}
.sobremi-content h2 .st-line--accent { color: #7BB8D4; font-size: clamp(1.2rem, 2.5vw, 2rem); }
.sobremi-content h2 .st-line--white  { color: #FFFFFF; font-size: clamp(2.2rem, 4.5vw, 4rem); letter-spacing: -1px; }
.sobremi-content h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-accent-gold);
    margin: 0.75rem auto 0;
}
.sobremi-lead {
    font-family: "Lato", sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: #A0B4C8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.sobremi-content p:not(.sobremi-lead) {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.sobremi-cta { margin-top: 0.5rem; }

@media screen and (min-width: 768px) {
    .sobremi-container {
        flex-direction: row;
        justify-content: center;
        gap: 3.5rem;
    }
    .sobremi-photo { flex-shrink: 0; }
    .sobremi-content { text-align: left; }
    .sobremi-content h2::after { margin-left: 0; }
}