/* ── Guayaneo Premium CSS ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800;900&display=swap');

:root {
    --navy:      #0D1B2A;
    --navy-2:    #112236;
    --navy-3:    #1a3350;
    --gold:      #F59E0B;
    --gold-dark: #D97706;
    --blue:      #3B82F6;
    --text:      #E2E8F0;
    --muted:     #94A3B8;
    --border:    rgba(255,255,255,.08);
    --radius:    16px;
    --radius-lg: 24px;
    --shadow:    0 24px 60px rgba(0,0,0,.5);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:'Outfit',sans-serif; background:var(--navy); color:var(--text); line-height:1.6; overflow-x:hidden }
img  { max-width:100%; display:block }
a    { color:inherit; text-decoration:none }

/* ── NAV ── */
#nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:.875rem 2rem;
    display:flex; align-items:center; justify-content:space-between;
    transition:.3s;
}
#nav.scrolled { background:rgba(13,27,42,.95); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.nav-logo img { height:36px }
.nav-links { display:flex; gap:2rem; list-style:none }
.nav-links a { font-weight:600; font-size:.9rem; color:var(--muted); transition:.2s; }
.nav-links a:hover { color:var(--gold) }
.nav-cta { background:var(--gold); color:var(--navy); font-weight:800; padding:.625rem 1.5rem; border-radius:50px; font-size:.9rem; transition:.2s; }
.nav-cta:hover { background:var(--gold-dark); transform:translateY(-1px) }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:.5rem }
.hamburger span { display:block; width:22px; height:2px; background:white; margin:5px 0; border-radius:2px; transition:.3s }
.mobile-menu { display:none; flex-direction:column; gap:1rem; padding:1.5rem 2rem; background:var(--navy-2); border-top:1px solid var(--border) }
.mobile-menu a { font-weight:600; color:var(--muted); }
.mobile-menu a:hover { color:var(--gold) }

/* ── HERO ── */
#hero {
    min-height:100vh; display:flex; align-items:center;
    padding:8rem 2rem 6rem;
    position:relative; overflow:hidden;
}

/* Background slider */
.hero-slider {
    position:absolute; inset:0; z-index:0;
}
.hero-slide {
    position:absolute; inset:0;
    background-size:cover; background-position:center center;
    opacity:0;
    transition:opacity 1.4s ease-in-out;
    will-change:opacity;
}
.hero-slide.active { opacity:1; }
/* Dark overlay */
.hero-overlay {
    position:absolute; inset:0; z-index:1;
    pointer-events:none;
}

/* Fallback radial glow (shows when no slides) */
#hero::after {
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,158,11,.10) 0%, transparent 70%),
               radial-gradient(ellipse 60% 40% at 80% 80%, rgba(59,130,246,.06) 0%, transparent 70%);
}
.hero-content {
    max-width:1200px; margin:0 auto;
    position:relative; z-index:3;   /* above slider, overlay, and glow */
    text-align:center;
}
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); border-radius:50px; padding:.4rem 1.2rem; font-size:.8rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.5rem }
.hero-content h1 { font-size:clamp(2.5rem,7vw,5rem); font-weight:900; line-height:1.1; color:white; margin-bottom:1.25rem }
.hero-content h1 span { color:var(--gold) }
.hero-content p { font-size:clamp(1rem,2.5vw,1.3rem); color:rgba(255,255,255,.8); max-width:600px; margin:0 auto 2.5rem }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }
.btn-primary { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--navy); font-weight:800; padding:1rem 2.5rem; border-radius:50px; font-size:1rem; transition:.25s; display:inline-flex; align-items:center; gap:.5rem; border:none; cursor:pointer; font-family:inherit }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(245,158,11,.4) }
.btn-outline { background:transparent; color:white; font-weight:700; padding:1rem 2.5rem; border-radius:50px; font-size:1rem; border:1.5px solid rgba(255,255,255,.4); transition:.25s; display:inline-flex; align-items:center; gap:.5rem }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-3px) }
.hero-stats { display:flex; justify-content:center; gap:3rem; margin-top:4rem; flex-wrap:wrap }
.stat { text-align:center }
.stat strong { display:block; font-size:2rem; font-weight:900; color:white }
.stat span { font-size:.85rem; color:rgba(255,255,255,.65) }


/* ── SECTION BASE ── */
section { padding:6rem 2rem }
.container { max-width:1200px; margin:0 auto }
.section-badge { display:inline-block; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); border-radius:50px; padding:.35rem 1rem; font-size:.75rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem }
.section-title { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:900; color:white; margin-bottom:.75rem }
.section-sub { color:var(--muted); font-size:1.05rem; max-width:560px }
.text-center { text-align:center }
.text-center .section-sub { margin:0 auto }

/* ── SERVICES ── */
#servicios { background:var(--navy-2) }
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.25rem; margin-top:3rem }
.service-card {
    background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem;
    transition:.3s; cursor:default; position:relative; overflow:hidden;
}
.service-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(245,158,11,.05),transparent); opacity:0; transition:.3s }
.service-card:hover { border-color:rgba(245,158,11,.3); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.3) }
.service-card:hover::before { opacity:1 }
.service-icon { width:52px; height:52px; background:rgba(245,158,11,.1); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.25rem }
.service-card h3 { font-size:1.1rem; font-weight:800; color:white; margin-bottom:.5rem }
.service-card p { color:var(--muted); font-size:.9rem; line-height:1.6 }
.service-card .tag { display:inline-block; margin-top:1rem; font-size:.75rem; font-weight:700; color:var(--gold); background:rgba(245,158,11,.1); border-radius:50px; padding:.25rem .75rem }

/* ── ABOUT / JOSE ── */
#nosotros .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-top:3rem }
.jose-img-wrap { position:relative }
.jose-img-wrap img { width:100%; border-radius:var(--radius-lg); object-fit:cover; max-height:520px; object-position:top }
.jose-img-wrap .ig-badge { position:absolute; bottom:1.5rem; left:1.5rem; background:rgba(13,27,42,.9); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:50px; padding:.6rem 1.25rem; display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.875rem }
.about-text h2 { font-size:clamp(1.5rem,3.5vw,2.25rem); font-weight:900; color:white; margin-bottom:1.25rem }
.about-text p { color:var(--muted); line-height:1.8; margin-bottom:1.25rem }
.about-text .social-link { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:50px; padding:.6rem 1.25rem; font-weight:700; font-size:.875rem; transition:.2s }
.about-text .social-link:hover { border-color:var(--gold); color:var(--gold) }

/* ── PRODUCTS (MIFLOWQR + CURSOS) ── */
#productos { background:var(--navy-2) }
.products-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem }
.product-card { border-radius:var(--radius-lg); padding:2.5rem; position:relative; overflow:hidden; transition:.3s }
.product-card:hover { transform:translateY(-4px) }
.product-card.miflow { background:linear-gradient(135deg,#1e1b4b 0%,#312e81 100%); border:1px solid rgba(99,102,241,.3) }
.product-card.cursos { background:linear-gradient(135deg,#0c4a1e 0%,#166534 100%); border:1px solid rgba(16,185,129,.3) }
.product-card .product-icon { font-size:3rem; margin-bottom:1rem }
.product-card h3 { font-size:1.35rem; font-weight:900; color:white; margin-bottom:.5rem }
.product-card p { color:rgba(255,255,255,.7); font-size:.9rem; line-height:1.6; margin-bottom:1.5rem }
.product-link { display:inline-flex; align-items:center; gap:.5rem; font-weight:800; font-size:.9rem; color:white; background:rgba(255,255,255,.15); padding:.625rem 1.25rem; border-radius:50px; transition:.2s }
.product-link:hover { background:rgba(255,255,255,.25) }

/* ── TESTIMONIOS ── */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; margin-top:3rem }
.testi-card { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; transition:.3s }
.testi-card:hover { border-color:rgba(245,158,11,.2); transform:translateY(-2px) }
.stars { color:var(--gold); font-size:1rem; margin-bottom:1rem }
.testi-card p { color:var(--muted); font-size:.9rem; line-height:1.7; margin-bottom:1.5rem; font-style:italic }
.testi-author { display:flex; align-items:center; gap:.75rem }
.testi-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--navy); font-size:1.1rem; flex-shrink:0; overflow:hidden }
.testi-avatar img { width:100%; height:100%; object-fit:cover }
.testi-info strong { display:block; color:white; font-size:.9rem }
.testi-info span { color:var(--muted); font-size:.8rem }

/* ── INSTAGRAM FEED ── */
#instagram { background:var(--navy-2) }
.ig-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; flex-wrap:wrap; gap:1rem }
.ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem }
.ig-post { aspect-ratio:1; border-radius:var(--radius); overflow:hidden; position:relative; cursor:pointer }
.ig-post img { width:100%; height:100%; object-fit:cover; transition:.4s }
.ig-post:hover img { transform:scale(1.08) }
.ig-post .overlay { position:absolute; inset:0; background:rgba(13,27,42,.6); opacity:0; transition:.3s; display:flex; align-items:center; justify-content:center }
.ig-post:hover .overlay { opacity:1 }
.ig-post .overlay svg { color:white }
.ig-empty { grid-column:1/-1; text-align:center; padding:3rem; color:var(--muted) }

/* ── CONTACTO ── */
#contacto { background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(245,158,11,.08) 0%,transparent 70%),var(--navy) }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; margin-top:3rem; align-items:start }
.contact-info h3 { font-size:1.25rem; font-weight:800; color:white; margin-bottom:1rem }
.contact-info p { color:var(--muted); line-height:1.8; margin-bottom:2rem }
.contact-item { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem }
.contact-item-icon { width:44px; height:44px; background:rgba(245,158,11,.1); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem }
.contact-item strong { display:block; color:white; font-size:.9rem }
.contact-item span { color:var(--muted); font-size:.85rem }
.contact-form { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.5rem }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.form-group { margin-bottom:1.1rem }
.form-group label { display:block; font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem }
.form-group input,.form-group select,.form-group textarea { width:100%; background:rgba(255,255,255,.05); border:1.5px solid var(--border); border-radius:10px; padding:.8rem 1rem; color:white; font-family:inherit; font-size:.95rem; transition:.2s; resize:vertical }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.12) }
.form-group input::placeholder,.form-group textarea::placeholder { color:#475569 }
.form-group select option { background:var(--navy-2); color:white }
.submit-btn { width:100%; padding:1rem; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--navy); border:none; border-radius:12px; font-family:inherit; font-size:1rem; font-weight:800; cursor:pointer; transition:.25s; display:flex; align-items:center; justify-content:center; gap:.5rem }
.submit-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,158,11,.4) }
.submit-btn:disabled { opacity:.6; transform:none; cursor:not-allowed }
.form-msg { text-align:center; padding:1rem; border-radius:10px; margin-top:1rem; font-weight:600; font-size:.9rem; display:none }
.form-msg.ok { background:rgba(16,185,129,.1); color:#6EE7B7; border:1px solid rgba(16,185,129,.3) }
.form-msg.err { background:rgba(239,68,68,.1); color:#FCA5A5; border:1px solid rgba(239,68,68,.3) }

/* ── FOOTER ── */
footer { background:var(--navy-2); border-top:1px solid var(--border); padding:4rem 2rem 2rem }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; max-width:1200px; margin:0 auto }
.footer-brand img { height:36px; margin-bottom:1rem }
.footer-brand p { color:var(--muted); font-size:.875rem; line-height:1.7; max-width:280px }
.footer-col h4 { color:white; font-weight:700; margin-bottom:1.25rem; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em }
.footer-col ul { list-style:none }
.footer-col ul li { margin-bottom:.625rem }
.footer-col ul li a { color:var(--muted); font-size:.875rem; transition:.2s }
.footer-col ul li a:hover { color:var(--gold) }
.footer-social { display:flex; gap:.75rem; margin-top:1.25rem }
.footer-social a { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:.2s; font-size:.9rem }
.footer-social a:hover { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.3) }
.footer-bottom { max-width:1200px; margin:3rem auto 0; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--muted) }
.footer-bottom a { color:var(--gold) }

/* ── ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease }
.fade-up.visible { opacity:1; transform:translateY(0) }

/* ── SCROLL TO TOP ── */
#scroll-top { position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; background:var(--gold); border-radius:50%; border:none; cursor:pointer; display:none; align-items:center; justify-content:center; font-size:1.2rem; color:var(--navy); box-shadow:0 4px 16px rgba(245,158,11,.4); z-index:999; transition:.2s }
#scroll-top.show { display:flex }
#scroll-top:hover { transform:translateY(-3px) }

/* ── MOBILE ── */
@media(max-width:768px) {
    .nav-links,.nav-cta { display:none }
    .hamburger { display:block }
    .mobile-menu.open { display:flex }
    #hero { padding:7rem 1.25rem 4rem; text-align:center }
    .hero-stats { gap:2rem }
    section { padding:4rem 1.25rem }
    .services-grid { grid-template-columns:1fr }
    #nosotros .about-grid { grid-template-columns:1fr }
    .products-grid { grid-template-columns:1fr }
    .ig-grid { grid-template-columns:repeat(3,1fr); gap:.4rem }
    .contact-grid { grid-template-columns:1fr }
    .contact-info { display:none }
    .footer-grid { grid-template-columns:1fr }
    .footer-bottom { flex-direction:column; gap:.5rem; text-align:center }
    .form-row { grid-template-columns:1fr }
    .ig-header { flex-direction:column }
}
@media(max-width:480px) {
    .hero-actions { flex-direction:column; align-items:center }
    .hero-stats { gap:1.5rem }
}