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

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

/* Títulos principales */
h1, h2, h3 {
  font-family: "Jolly Lodger", system-ui !important ;
  font-weight: 400;
  font-style: normal;
  color: #ffffff !important; /* Verde neón */
  text-transform: uppercase;
}

h1, h2, h3 .text-primary {
  color:#1aff5c; 
}
/* Frases con estilo manuscrito */
.handwritten {
  font-family: 'Dancing Script', cursive !;
  font-size: 2rem;
  color: #ffffff;
  font-style: italic;
}



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, 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;
}

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

    /* ── Section header labels (e.g. "SOBRE MÍ ——") ─────────── */
    /* Center the inline label + decorative line in every section */
    .section-label-row {
        justify-content: center;
    }

    /* ── Sección "Sobre Mí" ──────────────────────────────────── */
    /* Right column (text) becomes center-aligned on mobile */
    #sobre-mi .lg\:col-span-7 {
        text-align: center;
    }
    /* Center the "SOBRE MÍ ——" badge row */
    #sobre-mi .flex.items-center.gap-sm {
        justify-content: center;
    }
    /* Center the stat cards row */
    #sobre-mi .grid.grid-cols-1 {
        text-align: left; /* keep card internals left */
    }

    /* ── Sección "Cómo Funciona" ─────────────────────────────── */
    /* Center the header block */
    #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;
    }
    /* Reduce the secondary image height on mobile */
    #como-funciona img.h-\[380px\] {
        height: 220px;
    }

    /* ── Sección "Contacto" ──────────────────────────────────── */
    #contacto > div > div:first-child {
        text-align: center;
    }
    /* Center the "CONTACTO ——" badge */
    #contacto .flex.items-center.gap-sm {
        justify-content: center;
    }
    /* Keep contact cards left-aligned internally */
    #contacto .glass-card {
        text-align: left;
    }

    /* ── Galería: mostrar colores en móvil (sin grayscale) ───── */
    #gallery img {
        filter: grayscale(0%) !important;
    }

    /* ── "Qué hacemos" section: full-width bento cards ──────── */
    /* The lg:h-[600px] fixed height grid causes overflow on mobile */
    #inicio ~ section .grid.h-auto {
        height: auto !important;
    }

    /* ── Uniform section vertical padding ───────────────────── */
    /* stack-lg is 64px; reduce to 40px on mobile for breathing room */
    main > section,
    section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    /* Hero keeps full-screen height, don't override its padding */
    #inicio {
        padding-top: 0;
        padding-bottom: 0;
    }
}