/* =========================================================
   ROLBOOM — Librería, Juguetería y Figuritas
   Paleta: midnight navy + llama naranja/amarillo (del logo)
   ========================================================= */

:root{
  --navy-900:#070d22;
  --navy-800:#0a1230;
  --navy-700:#101c47;
  --navy-600:#16265e;
  --line:rgba(255,255,255,.10);
  --ink:#eaf0ff;
  --ink-soft:#aeb9da;
  --flame-1:#ff7a18;
  --flame-2:#ffc400;
  --blue:#3b82f6;
  --cyan:#38bdf8;
  --wa:#25d366;
  --wa-dark:#1ebe5a;
  --r-lg:24px;
  --r-md:16px;
  --max:1180px;
  --flame:linear-gradient(100deg,var(--flame-1),var(--flame-2));
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  background:var(--navy-900);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:"Outfit",sans-serif;line-height:1.05;letter-spacing:-.02em}

.flame{
  background:var(--flame);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:700;font-family:"Outfit",sans-serif;
  padding:.8rem 1.4rem;border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;border:0;font-size:1rem;white-space:nowrap;
}
.btn--big{padding:1rem 1.8rem;font-size:1.08rem}
.btn--wa{background:var(--wa);color:#04210f;box-shadow:0 10px 30px -8px rgba(37,211,102,.55)}
.btn--wa:hover{background:var(--wa-dark);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}

.wa-ico{
  width:20px;height:20px;flex:0 0 20px;border-radius:50%;
  background:#04210f;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2zm5.8 14.3c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.8-.6-3-1.3-5-4.4-5.1-4.6-.2-.2-1.3-1.7-1.3-3.3 0-1.5.8-2.3 1.1-2.6.3-.3.6-.4.8-.4h.6c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.6-.3.3c-.2.2-.3.4-.1.7.2.3.9 1.4 1.9 2.3 1.3 1.1 2.3 1.5 2.6 1.6.3.1.5.1.7-.1l.9-1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.5.3.1.2.1.9-.1 1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2zm5.8 14.3c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.8-.6-3-1.3-5-4.4-5.1-4.6-.2-.2-1.3-1.7-1.3-3.3 0-1.5.8-2.3 1.1-2.6.3-.3.6-.4.8-.4h.6c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.6-.3.3c-.2.2-.3.4-.1.7.2.3.9 1.4 1.9 2.3 1.3 1.1 2.3 1.5 2.6 1.6.3.1.5.1.7-.1l.9-1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.5.3.1.2.1.9-.1 1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Kickers / encabezados ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:"Outfit",sans-serif;font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--flame-2);
  margin-bottom:1rem;
}
.kicker__num{color:var(--flame-1)}
.section-head{max-width:640px;margin:0 auto 3rem;text-align:center}
.section-head h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:800}
.section-head p{color:var(--ink-soft);margin-top:.8rem;font-size:1.1rem}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:1.5rem;
  padding:.9rem clamp(1rem,4vw,2.5rem);
  background:rgba(7,13,34,.6);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
.nav.scrolled{background:rgba(7,13,34,.92);border-bottom-color:var(--line)}
.nav__brand{display:flex;align-items:center}
.nav__logo{height:42px;width:auto;border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.nav__links{display:flex;gap:1.6rem;margin-left:auto;font-weight:600;font-size:.96rem}
.nav__links a{color:var(--ink-soft);transition:color .2s}
.nav__links a:hover{color:var(--flame-2)}
.nav__cta{padding:.6rem 1.15rem;font-size:.95rem}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.3s}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:7.5rem clamp(1rem,4vw,2.5rem) 4rem;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(255,122,24,.20), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(59,130,246,.22), transparent 55%),
    var(--navy-900);
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.spark{position:absolute;border-radius:50%;filter:blur(.5px);opacity:.0;animation:twinkle 4s ease-in-out infinite}
.spark::before{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 14px 3px currentColor}
.s1{width:6px;height:6px;top:18%;left:14%;color:var(--flame-2);animation-delay:.1s}
.s2{width:5px;height:5px;top:30%;left:62%;color:var(--cyan);animation-delay:1.2s}
.s3{width:7px;height:7px;top:62%;left:22%;color:var(--flame-1);animation-delay:.6s}
.s4{width:4px;height:4px;top:74%;left:54%;color:var(--flame-2);animation-delay:2s}
.s5{width:5px;height:5px;top:12%;left:46%;color:var(--cyan);animation-delay:1.6s}
.s6{width:6px;height:6px;top:48%;left:84%;color:var(--flame-1);animation-delay:.9s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}

.hero__inner{
  position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  padding:.45rem .9rem;border-radius:999px;
  font-size:.85rem;color:var(--ink-soft);font-weight:600;margin-bottom:1.5rem;
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--flame-2);box-shadow:0 0 10px var(--flame-2)}
.hero__title{
  font-size:clamp(2.6rem,7vw,5rem);font-weight:900;letter-spacing:-.03em;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.hero__sub{margin:1.4rem 0 2rem;font-size:1.18rem;color:var(--ink-soft);max-width:33ch}
.hero__sub strong{color:var(--ink)}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap}
.hero__tags{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.hero__tags li{
  font-size:.82rem;font-weight:600;color:var(--ink-soft);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  padding:.35rem .8rem;border-radius:999px;
}

.hero__media{position:relative;display:flex;justify-content:center}
.hero__card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);max-width:430px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,196,0,.08);
  transform:rotate(1.5deg);
}
.hero__card img{width:100%;height:520px;object-fit:cover}
.hero__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,13,34,.55))}
.hero__badge{
  position:absolute;bottom:18px;left:18px;z-index:2;
  display:flex;align-items:center;gap:.7rem;
  background:var(--flame);color:#2a1400;
  padding:.7rem 1.1rem;border-radius:14px;
  box-shadow:0 14px 30px -10px rgba(255,140,0,.6);transform:rotate(-2deg);
}
.hero__badge-big{font-family:"Bungee",cursive;font-size:1.7rem;line-height:1}
.hero__badge-small{font-size:.78rem;font-weight:700;line-height:1.1}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background:var(--flame);color:#2a1400;overflow:hidden;
  padding:.7rem 0;border-top:2px solid rgba(0,0,0,.15);border-bottom:2px solid rgba(0,0,0,.15);
}
.marquee__track{display:flex;width:max-content;animation:scroll 26s linear infinite}
.marquee__track span{
  font-family:"Bungee",cursive;font-size:1rem;letter-spacing:.04em;
  white-space:nowrap;padding-right:1rem;
}
@keyframes scroll{to{transform:translateX(-50%)}}

/* =========================================================
   FIGURITAS
   ========================================================= */
.figus{
  max-width:var(--max);margin:0 auto;
  padding:6rem clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;
}
.figus__media{position:relative}
.figus__media img{
  width:100%;height:480px;object-fit:cover;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
}
.figus__chip{
  position:absolute;top:18px;left:18px;
  background:rgba(7,13,34,.85);backdrop-filter:blur(6px);
  border:1px solid var(--line);color:var(--ink);
  font-size:.8rem;font-weight:700;padding:.45rem .85rem;border-radius:999px;
}
.figus__text h2{font-size:clamp(1.9rem,4.5vw,2.9rem);font-weight:800;margin-bottom:1rem}
.figus__text p{color:var(--ink-soft);font-size:1.1rem}
.figus__text p strong{color:var(--ink)}
.figus__list{list-style:none;margin:1.6rem 0 2rem;display:grid;gap:.9rem}
.figus__list li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.05rem}
.figus__list strong{color:var(--flame-2)}
.tick{
  color:var(--flame-1);font-weight:900;font-family:"Outfit";
  flex:0 0 auto;font-size:1.2rem;line-height:1.4;
}

/* =========================================================
   FRANJA MUNDIAL (cover full-bleed con foto de fútbol)
   ========================================================= */
.mundial-band{
  position:relative;overflow:hidden;
  padding:6rem clamp(1rem,4vw,2.5rem);
  background:url("img/argentina-hinchada.jpg") center 30%/cover no-repeat fixed;
  text-align:center;
}
.mundial-band__overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(700px 400px at 50% 50%, rgba(255,122,24,.18), transparent 70%),
    linear-gradient(180deg, rgba(7,13,34,.62), rgba(7,13,34,.80));
}
.mundial-band h2,.mundial-band p{text-shadow:0 2px 16px rgba(0,0,0,.7)}
.mundial-band__ball{
  position:absolute;width:170px;height:170px;border-radius:50%;object-fit:cover;
  top:-40px;right:-30px;opacity:.9;border:4px solid rgba(255,196,0,.25);
  box-shadow:0 20px 50px -10px rgba(0,0,0,.7);transform:rotate(-8deg);
}
.mundial-band__inner{position:relative;z-index:2;max-width:640px;margin:0 auto}
.mundial-band h2{font-size:clamp(2rem,5.5vw,3.4rem);font-weight:900;margin-bottom:1rem}
.mundial-band p{color:var(--ink-soft);font-size:1.15rem;margin-bottom:2rem}

/* =========================================================
   RUBROS
   ========================================================= */
.rubros{padding:6rem clamp(1rem,4vw,2.5rem);background:
  linear-gradient(180deg,transparent, rgba(16,28,71,.4), transparent)}
.rubros__grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
}
.rubro{
  position:relative;background:linear-gradient(160deg,var(--navy-700),var(--navy-800));
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:2rem 1.5rem;overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.rubro::before{content:"";position:absolute;inset:0;background:var(--flame);opacity:0;transition:opacity .25s;height:4px;bottom:auto}
.rubro:hover{transform:translateY(-6px);border-color:rgba(255,196,0,.35)}
.rubro:hover::before{opacity:1}
.rubro__num{font-family:"Bungee",cursive;font-size:.9rem;color:rgba(255,196,0,.5)}
.rubro__ico{font-size:2.6rem;margin:.8rem 0 .9rem;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.rubro h3{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}
.rubro p{color:var(--ink-soft);font-size:.95rem}

/* =========================================================
   LOCAL / GALERÍA
   ========================================================= */
.local{padding:6rem clamp(1rem,4vw,2.5rem)}
.gallery{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:1rem;
}
.g{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.g img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.g:hover img{transform:scale(1.06)}
.g--tall{grid-row:span 2}
.g--wide{grid-column:span 2}
.g figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(7,13,34,.92));
  padding:1.2rem 1rem .9rem;font-size:.9rem;font-weight:600;
}

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto{padding:6rem clamp(1rem,4vw,2.5rem)}
.contacto__grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:stretch;
}
.contacto__info h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;margin-bottom:1.6rem}
.info-list{list-style:none;display:grid;gap:1.1rem;margin-bottom:2rem}
.info-list li{display:flex;gap:1rem;align-items:flex-start}
.info-ico{font-size:1.3rem;flex:0 0 auto;margin-top:2px}
.info-list strong{color:var(--ink);font-weight:700}
.info-list a{color:var(--flame-2);font-weight:600}
.info-list a:hover{text-decoration:underline}
.info-list div{color:var(--ink-soft);font-size:.98rem}
.contacto__map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-height:420px}
.contacto__map iframe{width:100%;height:100%;min-height:420px;border:0;filter:grayscale(.2) contrast(1.05)}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-final{
  position:relative;text-align:center;
  padding:6rem clamp(1rem,4vw,2.5rem);overflow:hidden;
  margin:2rem clamp(.5rem,3vw,2rem);border-radius:var(--r-lg);
  border:1px solid var(--line);
}
.cta-final__bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(255,122,24,.28), transparent 60%),
    radial-gradient(700px 400px at 50% 120%, rgba(59,130,246,.25), transparent 60%),
    linear-gradient(rgba(7,13,34,.74), rgba(7,13,34,.84)),
    url("img/argentina-festejo.jpg") center/cover no-repeat,
    var(--navy-800);
}
.cta-final h2{font-size:clamp(2rem,5.5vw,3.4rem);font-weight:900;margin-bottom:.8rem}
.cta-final p{color:var(--ink-soft);font-size:1.15rem;margin-bottom:2rem}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{padding:3.5rem clamp(1rem,4vw,2.5rem) 2rem;border-top:1px solid var(--line)}
.footer__top{
  max-width:var(--max);margin:0 auto 2rem;
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
.footer__logo{height:48px;border-radius:7px}
.footer__top p{color:var(--ink-soft);font-size:.95rem}
.footer__bottom{
  max-width:var(--max);margin:0 auto;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--ink-soft);font-size:.88rem;
}
.footer__by a{color:var(--flame-2);font-weight:600}

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:60;
  width:58px;height:58px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -6px rgba(37,211,102,.6);
  animation:pulse 2.4s infinite;
}
.wa-float .wa-ico{width:30px;height:30px;background:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* =========================================================
   REVEAL on scroll
   ========================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:2.5rem}
  .hero__media{order:-1}
  .hero__card img{height:360px}
  .figus{grid-template-columns:1fr;gap:2rem}
  .figus__media img{height:360px}
  .rubros__grid{grid-template-columns:repeat(2,1fr)}
  .contacto__grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .g--wide{grid-column:span 2}
}
@media (max-width:640px){
  .nav__links{
    position:fixed;top:64px;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(7,13,34,.98);border-bottom:1px solid var(--line);
    padding:.5rem 1.5rem;
    transform:translateY(-150%);transition:transform .35s ease;
  }
  .nav__links.open{transform:translateY(0)}
  .nav__links a{padding:.9rem 0;border-bottom:1px solid var(--line)}
  .nav__cta{display:none}
  .nav__burger{display:flex;margin-left:auto}
  .hero{padding-top:6rem}
  .hero__tags{display:none}
  .rubros__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;text-align:center}
}