/* ============================================================
   GARCIA FOLKLORICO STUDIO — Design A: Papel Picado
   ============================================================ */

/* --- Palette & Tokens --- */
:root {
    --orange:      #E8620A;
    --orange-dark: #D4570A;
    --orange-glow: #f4832e;
    --lavender:    #C9A0DC;
    --peach:       #FFB347;
    --purple:      #4A154B;
    --cream:       #FFF5E6;
    --cream-dark:  #F5E6D0;
    --white:       #FFFFFF;
    --brown:       #7A3300;

    --font-display: 'Abril Fatface', serif;
    --font-script:  'Great Vibes', cursive;
    --font-body:    'Nunito', sans-serif;

    --nav-h: 70px;
    --banner-h: 56px;
    --radius: 14px;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--banner-h) + 16px); overflow-x: hidden; }
body {
    font-family: var(--font-body);
    color: var(--purple);
    background: var(--cream);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { width: 90%; max-width: 1100px; margin: 0 auto; }

/* ============================================================
   OPENING SOON BANNER
   ============================================================ */
#opening-soon {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: var(--orange);
    color: var(--cream);
    height: var(--banner-h);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
    overflow: hidden;
}
.opening-inner { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
.opening-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--cream);
    animation: pulse-dot 2s ease-in-out infinite;
}
.opening-sep { opacity: .5; }
.opening-sub { font-weight: 600; letter-spacing: .04em; text-transform: none; font-size: .95rem; opacity: 1; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,245,230,.6); }
    50%      { opacity: .5; box-shadow: 0 0 0 6px rgba(255,245,230,0); }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#navbar {
    position: fixed; top: var(--banner-h); left: 0; right: 0; z-index: 900;
    height: var(--nav-h);
    display: flex; align-items: center;
    transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
#navbar.scrolled {
    background: rgba(255,245,230,.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(74,21,75,.08);
}
.nav-container {
    width: 90%; max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
}
.nav-logo img { width: 48px; height: 48px; border-radius: 50%; transition: transform .3s var(--ease); }
.nav-logo img:hover { transform: scale(1.1) rotate(-5deg); }

.nav-links { display: flex; gap: 32px; }
.nav-links a {
    font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--white); transition: color .3s, opacity .3s;
    position: relative;
}
#navbar.scrolled .nav-links a { color: var(--purple); }
.nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
    background: var(--orange); transition: width .3s var(--ease);
}
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 16px; }
#lang-toggle {
    background: none; border: 2px solid rgba(255,255,255,.5); border-radius: 20px;
    color: var(--white); font-weight: 700; font-size: .75rem; padding: 5px 14px;
    cursor: pointer; letter-spacing: .06em; transition: all .3s var(--ease);
}
#navbar.scrolled #lang-toggle { border-color: var(--orange); color: var(--purple); }
#lang-toggle:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
.lang-active { opacity: 1; }
.lang-inactive { opacity: .5; }

/* Hamburger */
.hamburger {
    display: none; background: none; border: none; cursor: pointer;
    width: 28px; height: 20px; position: relative; flex-direction: column; justify-content: space-between;
}
.hamburger span {
    display: block; width: 100%; height: 2px; background: var(--white);
    border-radius: 2px; transition: all .3s var(--ease); transform-origin: center;
}
#navbar.scrolled .hamburger span { background: var(--purple); }
.hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
#hero {
    position: relative; min-height: 100vh; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(170deg, var(--orange) 0%, var(--orange-dark) 35%, var(--lavender) 100%);
    padding-top: calc(var(--banner-h) + var(--nav-h));
}

/* Papel Picado (generated by JS) */
#papel-picado {
    position: absolute; top: calc(var(--banner-h) + var(--nav-h)); left: 0; right: 0;
    height: 320px; pointer-events: none; z-index: 1;
}
.pp-row { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }
.pp-string {
    position: absolute; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.25), transparent);
    top: 0;
}
.pp-flag {
    flex-shrink: 0; position: relative;
    clip-path: polygon(
        0% 0%, 100% 0%, 100% 85%,
        90% 95%, 80% 85%, 70% 95%, 60% 85%, 50% 95%, 40% 85%, 30% 95%, 20% 85%, 10% 95%, 0% 85%
    );
    animation: sway var(--dur, 4s) ease-in-out infinite;
    animation-delay: var(--d, 0s);
    transform-origin: top center;
    opacity: 0;
    animation: sway var(--dur, 4s) ease-in-out infinite, flag-drop .8s var(--ease) forwards;
    animation-delay: var(--d, 0s), var(--drop, 0s);
}
.pp-flag::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12%;
    background: rgba(0,0,0,.12); z-index: 1;
}
/* Cut-out patterns via CSS masks */
.pp-cutout {
    position: absolute; inset: 15% 10% 20% 10%;
    background: inherit; filter: brightness(1.3);
    mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
    opacity: 0;
}
.pp-flag::after {
    content: ''; position: absolute;
    inset: 18% 15% 25% 15%;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50%;
}
/* Pattern variations */
.pp-pattern-0::after { border-radius: 50%; }
.pp-pattern-1::after { border-radius: 0; transform: rotate(45deg) scale(.7); }
.pp-pattern-2::after { border-radius: 50% 0; }
.pp-pattern-3::after { border-radius: 0 50%; }
.pp-pattern-4::after { clip-path: polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%); border: none; background: rgba(255,255,255,.15); }
.pp-pattern-5::after {
    clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    border: none; background: rgba(255,255,255,.18);
}
/* Inner detail circles */
.pp-flag .pp-dot {
    position: absolute; border-radius: 50%; background: rgba(255,255,255,.2);
}

@keyframes sway {
    0%, 100% { transform: rotate(var(--r, -2deg)); }
    50%      { transform: rotate(calc(var(--r, -2deg) * -1)); }
}
@keyframes flag-drop {
    from { opacity: 0; transform: translateY(-40px) rotate(var(--r, 0deg)); }
    to   { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
}

/* Cempasuchil Petals */
.petal {
    position: absolute; pointer-events: none; z-index: 2;
    border-radius: 50% 0 50% 0;
    background: radial-gradient(ellipse at 30% 30%, #FFD54F, #F4A623);
    opacity: 0;
    animation: petal-fall linear infinite;
}
@keyframes petal-fall {
    0%   { opacity: 0; transform: translateY(-20px) rotate(0deg) scale(.7); }
    10%  { opacity: .85; }
    90%  { opacity: .6; }
    100% { opacity: 0; transform: translateY(calc(100vh + 20px)) rotate(720deg) scale(.4); }
}

/* Hero Content */
.hero-content {
    position: relative; z-index: 3; text-align: center;
    padding: 40px 20px 60px;
    animation: hero-in 1.2s var(--ease) .6s both;
}
@keyframes hero-in {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-logo {
    width: 220px; height: 220px; margin: 0 auto 28px;
    border-radius: 50%;
    box-shadow: 0 8px 40px rgba(74,21,75,.25), 0 0 0 6px rgba(255,255,255,.15);
    animation: logo-glow 4s ease-in-out infinite alternate;
}
@keyframes logo-glow {
    from { box-shadow: 0 8px 40px rgba(74,21,75,.25), 0 0 0 6px rgba(255,255,255,.15); }
    to   { box-shadow: 0 8px 60px rgba(74,21,75,.35), 0 0 0 10px rgba(255,255,255,.25); }
}
.hero-title {
    font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.6rem);
    color: var(--white); line-height: 1.1; margin-bottom: 8px;
    text-shadow: 0 3px 20px rgba(74,21,75,.3);
}
.hero-tagline {
    font-family: var(--font-script); font-size: clamp(1.6rem, 4vw, 2.8rem);
    color: var(--peach); margin-bottom: 6px;
}
.hero-location {
    font-size: .85rem; letter-spacing: .25em; text-transform: uppercase;
    color: rgba(255,255,255,.7); margin-bottom: 36px;
}

/* Scroll hint */
.hero-scroll-hint {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3;
}
.scroll-arrow {
    display: block; width: 24px; height: 24px;
    border-right: 2px solid rgba(255,255,255,.5); border-bottom: 2px solid rgba(255,255,255,.5);
    transform: rotate(45deg); animation: bounce-arrow 2s infinite;
}
@keyframes bounce-arrow {
    0%, 100% { transform: rotate(45deg) translateY(0); opacity: .5; }
    50%      { transform: rotate(45deg) translateY(8px); opacity: 1; }
}

/* ============================================================
   CTA BUTTONS
   ============================================================ */
.cta-btn {
    display: inline-block; padding: 14px 40px;
    font-family: var(--font-body); font-weight: 700; font-size: .95rem;
    letter-spacing: .06em; text-transform: uppercase; border-radius: 50px;
    background: var(--orange); color: var(--white); border: 2px solid var(--orange);
    cursor: pointer; transition: all .35s var(--ease);
    box-shadow: 0 4px 20px rgba(232,98,10,.3);
}
.cta-btn:hover {
    background: var(--orange-dark); border-color: var(--orange-dark);
    transform: translateY(-2px); box-shadow: 0 6px 28px rgba(232,98,10,.4);
}
.cta-hero { font-size: 1rem; padding: 16px 48px; }
.cta-outline {
    background: transparent; color: var(--brown);
    border-color: var(--brown); box-shadow: none;
}
.cta-outline:hover { background: var(--brown); color: var(--white); box-shadow: 0 4px 20px rgba(122,51,0,.2); }

/* ============================================================
   SECTIONS — SHARED
   ============================================================ */
section { padding: 100px 0; }
.section-label {
    display: block; text-align: center;
    font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    opacity: .6; margin-bottom: 8px;
}
.section-divider {
    width: 48px; height: 3px; background: var(--orange);
    margin: 0 auto 20px; border-radius: 3px;
}
.section-heading {
    font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem);
    text-align: center; margin-bottom: 40px; line-height: 1.2;
}

/* ============================================================
   ABOUT
   ============================================================ */
#about { background: var(--lavender); color: var(--purple); }
.about-text { max-width: 720px; margin: 0 auto; text-align: center; font-size: 1.05rem; }
.about-text p { margin-bottom: 20px; }

/* ============================================================
   CLASSES
   ============================================================ */
#classes { background: var(--peach); color: var(--brown); }
#classes .container,
#rental .container { display: flex; flex-direction: column; align-items: center; }
.classes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-bottom: 48px; width: 100%; }
.class-card {
    background: rgba(255,255,255,.45); backdrop-filter: blur(6px);
    border-radius: var(--radius); padding: 36px 28px; text-align: center;
    border: 1px solid rgba(255,255,255,.6);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.class-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(122,51,0,.1); }
.class-icon { font-size: 2.4rem; margin-bottom: 12px; }
.class-card h3 {
    font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 12px; color: var(--purple);
}
.class-card p { font-size: .93rem; opacity: .85; }

/* Counters */
.counters-intro {
    text-align: center;
    font-size: .95rem;
    font-style: italic;
    opacity: .75;
    margin: 40px auto 0;
    max-width: 640px;
}
.counters {
    display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
    margin-bottom: 36px; padding: 20px 0 36px;
}
.counter-item { text-align: center; }
.counter-number {
    font-family: var(--font-display); font-size: 3rem; color: var(--purple);
    display: inline; line-height: 1;
}
.counter-plus { font-family: var(--font-display); font-size: 2rem; color: var(--orange); }
.counter-label { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; opacity: .7; }

/* ============================================================
   RENTAL
   ============================================================ */
#rental { background: var(--orange); color: var(--white); }
#rental .section-divider { background: var(--peach); }
#rental .section-label { opacity: .7; }
.rental-text { max-width: 720px; text-align: center; font-size: 1.05rem; margin-bottom: 36px; }
.rental-features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px; margin-bottom: 40px; max-width: 700px; width: 100%;
}
.feature-item {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.12); border-radius: var(--radius);
    padding: 16px 20px; font-weight: 600;
    border: 1px solid rgba(255,255,255,.15);
    transition: background .3s;
}
.feature-item:hover { background: rgba(255,255,255,.2); }
.feature-icon { font-size: 1.4rem; }
#rental .cta-btn { background: var(--white); color: var(--orange); border-color: var(--white); }
#rental .cta-btn:hover { background: var(--cream); border-color: var(--cream); }

/* ============================================================
   GALLERY
   ============================================================ */
#gallery { background: var(--cream-dark); }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 180px;
    gap: 16px; margin-bottom: 24px;
}
.gallery-card {
    background: var(--g); border-radius: var(--radius);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 20px; color: var(--white); font-weight: 700; font-size: .9rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
    cursor: pointer; overflow: hidden; position: relative;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gallery-card::before {
    content: '📷'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); font-size: 2rem; opacity: .25;
    transition: opacity .3s;
}
.gallery-card:hover { transform: scale(1.03); box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.gallery-card:hover::before { opacity: .5; }
.gallery-tall { grid-row: span 2; }
.gallery-note {
    text-align: center; font-style: italic; opacity: .8; font-size: 1.15rem; margin-top: 16px;
    font-weight: 600; color: var(--purple);
}

/* ============================================================
   CONTACT
   ============================================================ */
#contact { background: var(--cream); }
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.contact-form { display: flex; flex-wrap: wrap; gap: 16px; }
.form-row { display: flex; gap: 16px; width: 100%; }
.form-group { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.form-group label {
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--purple); opacity: .7;
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px; border: 2px solid rgba(74,21,75,.12);
    border-radius: 10px; font-family: var(--font-body); font-size: .95rem;
    background: var(--white); color: var(--purple);
    transition: border-color .3s, box-shadow .3s;
    outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(232,98,10,.12);
}
.contact-form .cta-btn { width: 100%; text-align: center; border: none; font-size: 1rem; }
.form-status { width: 100%; text-align: center; font-weight: 600; font-size: .9rem; min-height: 24px; }
.form-status.success { color: #2e7d32; }
.form-status.error { color: #c62828; }

/* Info sidebar */
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.info-block { display: flex; gap: 14px; align-items: flex-start; }
.info-icon { font-size: 1.3rem; margin-top: 2px; }
.info-block strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin-bottom: 2px; }
.info-block p { font-size: .95rem; }
.info-block a { color: var(--orange); font-weight: 600; }
.info-block a:hover { text-decoration: underline; }
/* Social links (contact sidebar) */
.social-links { display: flex; gap: 14px; margin-top: 6px; }
.social-links a {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(74,21,75,.08); color: var(--purple);
    transition: all .3s var(--ease);
}
.social-links a:hover { background: var(--orange); color: var(--white); transform: translateY(-2px); }

.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.08); margin-top: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    background: var(--purple); color: rgba(255,255,255,.7);
    padding: 32px 0; text-align: center; font-size: .85rem;
}
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.footer-logo { border-radius: 50%; opacity: .7; margin-bottom: 4px; }
.footer-credit { opacity: .5; font-size: .78rem; }
/* Footer social icons */
.footer-social { display: flex; gap: 16px; justify-content: center; margin: 4px 0; }
.footer-social a {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
    transition: all .3s var(--ease);
}
.footer-social a:hover { background: var(--orange); color: var(--white); transform: translateY(-2px); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] {
    opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal="fade"] { transform: translateY(30px); }
[data-reveal="slide-left"] { transform: translateX(-50px); }
[data-reveal="slide-right"] { transform: translateX(50px); }
[data-reveal].revealed { opacity: 1; transform: translate(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-tall { grid-row: span 1; }
    .counters { gap: 32px; }
}

/* Mobile */
@media (max-width: 680px) {
    :root { --nav-h: 60px; --banner-h: 46px; }

    /* Banner */
    #opening-soon { font-size: .7rem; }
    .opening-sub { display: none; }
    .opening-sep { display: none; }

    /* Nav — expand navbar to full viewport when menu is open,
       use absolute (not fixed) on nav-links to avoid nested-fixed bugs */
    #navbar.menu-open {
        bottom: 0;
        height: auto;
        align-items: flex-start;
        background: rgba(255,245,230,.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    #navbar.menu-open .nav-container {
        height: var(--nav-h);
        flex-shrink: 0;
    }
    .nav-links {
        position: absolute;
        top: var(--nav-h); left: 0; right: 0; bottom: 0;
        background: transparent;
        flex-direction: column; align-items: center; justify-content: center;
        gap: 28px; opacity: 0; pointer-events: none;
        transition: opacity .35s var(--ease);
    }
    .nav-links.open { opacity: 1; pointer-events: auto; }
    .nav-links a { color: var(--purple); font-size: 1.1rem; }
    .hamburger { display: flex; }

    /* Hero */
    .hero-logo { width: 160px; height: 160px; }
    .hero-title { font-size: 1.8rem; }
    #papel-picado { height: 200px; }

    /* Sections */
    section { padding: 64px 0; }
    .classes-grid { grid-template-columns: 1fr; }
    .rental-features { grid-template-columns: 1fr 1fr; }
    .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
    .form-row { flex-direction: column; }
    .counters { gap: 24px; }
    .counter-number { font-size: 2.2rem; }
}

@media (max-width: 400px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .rental-features { grid-template-columns: 1fr; }
}

/* --- Accessibility: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}