/* ============================================================
   PRINT MY PROT — Custom Styles
   Fuentes: Jolly Lodger (headlines) · Space Grotesk (títulos) · DM Sans (cuerpo)
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #10150b;
    background-image: radial-gradient(rgba(157, 250, 95, 0.05) 1px, transparent 0);
    background-size: 32px 32px;
    font-family: 'DM Sans', sans-serif;
}

h1, h2, h3 {
    font-family: 'Jolly Lodger', system-ui !important;
    font-weight: 400;
    font-style: normal;
    color: #ffffff !important;
    text-transform: uppercase;
}

h1 .text-primary,
h2 .text-primary,
h3 .text-primary {
    color: #1aff5c;
}

h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
}

/* ── Glass card ───────────────────────────────────────────── */
.glass-card {
    background: rgba(28, 33, 23, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(138, 148, 127, 0.2);
}

/* ── Material Symbols ─────────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Lightbox image transition ────────────────────────────── */
#lightbox-img {
    transition: opacity 0.15s ease;
}

/* ── Navigation links ─────────────────────────────────────── */
.nav-link {
    color: #c0cab3;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-link:hover {
    color: #9dfa5f;
}

.nav-link.active {
    color: #9dfa5f;
    border-bottom-color: #9dfa5f;
}

/* ── Mobile nav links ─────────────────────────────────────── */
.mobile-nav-link {
    color: #c0cab3;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.mobile-nav-link.active {
    color: #9dfa5f;
    background: rgba(130, 221, 69, 0.08);
}

/* ── Hamburger button animation ───────────────────────────── */
#mobile-menu-btn.open .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#mobile-menu-btn.open .hamburger-line:nth-child(2) {
    opacity: 0;
}

#mobile-menu-btn.open .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── WhatsApp floating button ─────────────────────────────── */
#whatsapp-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 90;
    width: 60px;
    height: 60px;
    border-radius: 9999px;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

#whatsapp-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 32px rgba(37, 211, 102, 0.6);
}

#whatsapp-fab svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

/* ── Bio card photo ───────────────────────────────────────── */
.hero-photo-outer {
    width: 440px;
    height: 440px;
}

.hero-photo-inner {
    width: 416px;
    height: 416px;
}

/* ── Hero Carousel (desktop) ──────────────────────────────── */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    user-select: none;
}

.hero-carousel .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    border-radius: 12px;
}

.hero-carousel .hero-slide.prev {
    opacity: 1;
    z-index: 1;
    clip-path: inset(0);
}

.hero-carousel .hero-slide.active {
    opacity: 1;
    z-index: 2;
    clip-path: inset(0 50% 0 50%);
}

.hero-carousel .hero-slide.active.revealing {
    clip-path: inset(0);
    transition: clip-path 500ms ease-in-out;
}

.hero-carousel .hero-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
    color: #fff;
    z-index: 3;
    pointer-events: none;
}

.hero-carousel .hero-info h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: none;
}

.hero-carousel .hero-info p {
    margin: 4px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    font-family: 'DM Sans', sans-serif;
}

.hero-carousel .hero-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    transition: background .2s;
}

.hero-carousel .hero-nav-btn:hover {
    background: rgba(255, 255, 255, .35);
}

.hero-carousel .hero-prev {
    left: 10px;
}

.hero-carousel .hero-next {
    right: 10px;
}

.hero-carousel .hero-nav-btn svg {
    width: 20px;
    height: 20px;
}

/* ── Hero dots ────────────────────────────────────────────── */
.hero-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 9999px;
    background: rgba(157, 250, 95, 0.25);
    cursor: pointer;
    padding: 0;
    transition: all .3s;
}

.hero-dot:hover {
    background: rgba(157, 250, 95, 0.5);
}

.hero-dot.active {
    background: #9dfa5f;
    width: 24px;
}

/* ── Hero Carousel (mobile) ───────────────────────────────── */
.hero-carousel-mobile {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-carousel-mobile .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
}

.hero-carousel-mobile .hero-slide.prev {
    opacity: 1;
    z-index: 1;
    clip-path: inset(0);
}

.hero-carousel-mobile .hero-slide.active {
    opacity: 1;
    z-index: 2;
    clip-path: inset(0 50% 0 50%);
}

.hero-carousel-mobile .hero-slide.active.revealing {
    clip-path: inset(0);
    transition: clip-path 500ms ease-in-out;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE STYLES (max-width: 1023px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* ── Global section padding ────────────────────────────── */
    section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* ── Hero ─────────────────────────────────────────────── */
    #inicio {
        padding: 0;
    }

    #inicio .grid {
        gap: 16px !important;
    }

    #inicio h1 {
        font-size: 32px !important;
    }

    #inicio .space-y-lg > * + * {
        margin-top: 12px !important;
    }

    /* ── Sobre Mí ─────────────────────────────────────────── */
    #sobre-mi .lg\:col-span-7 {
        text-align: center;
    }

    #sobre-mi .flex.items-center.gap-sm {
        justify-content: center;
    }

    #sobre-mi .glass-card {
        aspect-ratio: auto !important;
        min-height: auto !important;
    }

    .hero-photo-outer {
        width: 200px !important;
        height: 200px !important;
    }

    .hero-photo-inner {
        width: 184px !important;
        height: 184px !important;
    }

    /* ── Cómo Funciona ────────────────────────────────────── */
    #como-funciona {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    #como-funciona .space-y-sm.text-left {
        text-align: center;
    }

    #como-funciona .space-y-sm.text-left .flex.items-center.gap-sm {
        justify-content: center;
    }

    #como-funciona img.h-\[380px\] {
        height: 220px;
    }

    /* ── Qué hacemos ──────────────────────────────────────── */
    #inicio ~ section .grid.h-auto {
        height: auto !important;
    }

    /* ── Galería ──────────────────────────────────────────── */
    #gallery {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    #gallery img {
        filter: grayscale(0%) !important;
    }

    /* ── Contacto ─────────────────────────────────────────── */
    #contacto {
        overflow: hidden;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    #contacto > div {
        max-width: 100%;
        overflow: hidden;
    }

    #contacto > div > * {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #contacto .glass-card.rounded-xl:last-child {
        padding: 14px !important;
    }

    #contacto input,
    #contacto textarea {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    #contacto .space-y-md > a,
    #contacto .space-y-md > div {
        max-width: 100%;
        box-sizing: border-box;
    }
}