/* ============================================================
   EVENTOS DE FUEGO — Design System
   Palette: carbón (charcoal) + brasa (ember) + oro (gold)
   Display: Fraunces (italic, black) · Body: Work Sans · Utility: JetBrains Mono
   Signature: grill-grate line motif + ember glow
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,900;1,9..144,500;1,9..144,600;1,9..144,900&family=Work+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face{
  font-family:'A Love of Thunder';
  src:url('fonts/a-love-of-thunder.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:block;
}

:root{
  /* colors */
  --carbon-950:#14100d;
  --carbon-900:#1d1712;
  --carbon-800:#271f18;
  --carbon-line: rgba(244,239,230,0.10);
  --brasa-500:#ff6a34;
  --brasa-400:#ff8c5c;
  --brasa-700:#b23a1e;
  --oro-400:#e8a33d;
  --oro-300:#f0bd6c;
  --hueso-50:#f5efe3;
  --hueso-100:#efe6d4;
  --humo-300:#bcb2a2;
  --humo-500:#8b8072;
  --carbon-text:#231b14;

  /* type */
  --font-display:'A Love of Thunder', 'Fraunces', 'Times New Roman', serif;
  --font-body:'Work Sans', Helvetica, Arial, sans-serif;
  --font-mono:'JetBrains Mono', 'Courier New', monospace;

  --container: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--hueso-50);
  color:var(--carbon-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

:focus-visible{
  outline:2px solid var(--brasa-500);
  outline-offset:3px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:500;
}
.eyebrow--on-dark{ color:var(--oro-300); }
.eyebrow--on-light{ color:var(--brasa-700); }

.eyebrow::before{
  content:"◆ ";
  font-size:9px;
  vertical-align:middle;
  color:var(--brasa-500);
}

.tag-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--hueso-50);
  background:var(--brasa-500);
  padding:4px 11px;
  border-radius:20px;
}

.marker-highlight{
  display:inline-block;
  background:#f5d90a;
  color:var(--carbon-950);
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:15px;
  letter-spacing:0.03em;
  padding:6px 16px 4px;
  transform:rotate(-1.5deg);
  box-shadow:0 2px 0 rgba(0,0,0,0.15);
}

.badge-trophy{
  display:inline-flex;
  align-items:center;
  gap:14px;
  border:2px solid var(--brasa-500);
  color:var(--brasa-500);
  font-family:var(--font-mono);
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:700;
  padding:18px 28px;
  border-radius:16px;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.badge-trophy-icon{ font-size:30px; line-height:1; }
.badge-trophy-text{ font-size:15px; line-height:1.35; }
.badge-trophy:hover{
  background:var(--brasa-500);
  color:var(--hueso-50);
  transform:translateY(-2px);
}

.card-highlight{
  border-color:var(--brasa-500) !important;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card-highlight:hover{
  transform:scale(1.03);
  box-shadow:0 12px 30px -14px rgba(255,106,52,0.45);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid transparent;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--brasa-500);
  color:var(--hueso-50);
  box-shadow:0 8px 24px -8px rgba(255,106,52,0.65);
}
.btn-primary:hover{ background:var(--brasa-400); }
.btn-ghost-dark{
  border-color:rgba(245,239,227,0.35);
  color:var(--hueso-50);
}
.btn-ghost-dark:hover{ border-color:var(--oro-300); color:var(--oro-300); }
.btn-ghost-light{
  border-color:rgba(35,27,20,0.25);
  color:var(--carbon-text);
}
.btn-ghost-light:hover{ border-color:var(--brasa-700); color:var(--brasa-700); }
.btn-whatsapp{
  border-color:rgba(245,239,227,0.35);
  color:var(--hueso-50);
  background:transparent;
}
.btn-whatsapp:hover{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
}
.btn-whatsapp-light{
  border-color:rgba(35,27,20,0.25);
  color:var(--carbon-text);
}

.btn-sm{ padding:11px 22px; font-size:11.5px; }

.btn-marquee{
  overflow:hidden;
  width:170px;
  flex-shrink:0;
  justify-content:flex-start;
}
.marquee-track{
  display:flex;
  gap:36px;
  white-space:nowrap;
  animation:marquee-scroll 7s linear infinite;
}
.btn-marquee:hover .marquee-track{ animation-play-state:running; }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

/* ---------- Grate motif ---------- */
.grate{
  height:26px;
  width:100%;
  background-image:repeating-linear-gradient(
    to right,
    currentColor 0px, currentColor 2px,
    transparent 2px, transparent 22px
  );
  color:var(--carbon-line);
  opacity:0.9;
}
.grate--ember{ color:rgba(255,106,52,0.35); }

.divider{
  border:0;
  height:1px;
  background:var(--carbon-line);
  margin:0;
}

/* ---------- Nav ---------- */
.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:22px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-nav.is-solid{
  background:rgba(20,16,13,0.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  box-shadow:0 8px 30px -12px rgba(0,0,0,0.6);
}
.site-nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-weight:900;
  font-style:italic;
  font-size:22px;
  color:var(--hueso-50);
  letter-spacing:0.01em;
}
.brand img{ height:58px; width:58px; object-fit:contain; }
.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.nav-links a{
  color:var(--humo-300);
  position:relative;
  padding-bottom:4px;
  transition:color .25s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--hueso-50); }
.nav-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--brasa-500);
}
.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-ig{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(245,239,227,0.3);
  border-radius:50%;
  color:var(--hueso-50);
  transition:border-color .25s ease, color .25s ease;
}
.nav-ig:hover{ border-color:var(--oro-300); color:var(--oro-300); }
.nav-toggle{
  display:none;
  background:none; border:0; color:var(--hueso-50);
  width:32px; height:24px; position:relative;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:2px; background:currentColor;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:11px; }
.nav-toggle span:nth-child(3){ bottom:0; }
.nav-toggle.is-active span:nth-child(1){ transform:translateY(11px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }

/* ---------- Section spacing ---------- */
.section{ padding:120px 0; position:relative; }
.section-tight{ padding:80px 0; }
.section--dark{ background:var(--carbon-950); color:var(--hueso-50); }
.section--dark .body-text{ color:var(--humo-300); }
.section--panel{ background:var(--carbon-900); color:var(--hueso-50); }

.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{
  font-family:var(--font-display);
  font-weight:900;
  font-style:italic;
  font-size:clamp(32px, 4vw, 52px);
  line-height:1.08;
  margin-top:14px;
}
.section--dark .section-head h2,
.section--panel .section-head h2{ color:var(--hueso-50); }
.section-head p{
  margin-top:18px;
  font-size:17px;
  color:var(--humo-500);
  line-height:1.7;
}
.section--dark .section-head p,
.section--panel .section-head p{ color:var(--humo-300); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  background:var(--carbon-950);
  color:var(--hueso-50);
  padding:190px 0 90px;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:26px;
  background-image:repeating-linear-gradient(to right, rgba(255,106,52,0.4) 0 2px, transparent 2px 22px);
}
.page-hero h1{
  font-family:var(--font-display);
  font-weight:900;
  font-style:italic;
  font-size:clamp(40px, 6vw, 74px);
  line-height:1.02;
  margin-top:18px;
  max-width:820px;
}
.page-hero p{
  margin-top:20px;
  max-width:560px;
  color:var(--humo-300);
  font-size:17px;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--carbon-950);
  color:var(--humo-300);
  padding:80px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:56px;
}
.footer-brand{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:26px;
  color:var(--hueso-50);
  display:flex; align-items:center; gap:12px;
}
.footer-brand img{ height:60px; }
.footer-tagline{ margin-top:16px; max-width:280px; font-size:14.5px; }
.footer-col h4{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:12px;
  color:var(--oro-300);
  margin-bottom:18px;
}
.footer-col a, .footer-col li{
  display:block;
  font-size:14.5px;
  margin-bottom:11px;
  color:var(--humo-300);
  transition:color .2s ease;
}
.footer-col a:hover{ color:var(--hueso-50); }
.footer-bottom{
  border-top:1px solid var(--carbon-line);
  padding-top:26px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-size:13px;
  color:var(--humo-500);
  font-family:var(--font-mono);
}
.footer-bottom a{ color:var(--humo-300); }
.footer-bottom a:hover{ color:var(--oro-300); }

.nav-backdrop{
  position:fixed; inset:0;
  background:rgba(10,8,6,0.55);
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
@media (max-width:900px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:340px; height:100vh;
    background:var(--carbon-950);
    flex-direction:column; align-items:flex-start;
    padding:110px 34px 40px;
    gap:26px;
    z-index:200;
    transform:translateX(100%);
    transition:transform .35s ease;
    overflow-y:auto;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-toggle{ display:block; position:relative; z-index:201; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-bottom{ flex-direction:column; gap:10px; align-items:center; }
}

/* Stack any inline multi-column grid on narrow screens so columns never
   collapse to 0 width (grid items default to min-width:auto). */
@media (max-width:760px){
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:0.95fr 1.05fr"],
  [style*="grid-template-columns:1.15fr 0.85fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:2.7fr 1.6fr"]{
    grid-template-columns:1fr !important;
  }
  .premios-photo{ order:-1; margin-bottom:8px; }
}
@media (max-width:600px){
  .section{ padding:76px 0; }
  .container{ padding:0 20px; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }

  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .hero-actions .btn-marquee{ width:100%; justify-content:flex-start; }

  .site-nav .container{ gap:10px; }
  .brand{ font-size:15px; gap:8px; }
  .brand img{ height:38px; width:38px; }
  .nav-ig{ display:none; }
  .nav-actions{ gap:10px; }
  .nav-actions .btn-primary{ padding:10px 14px; font-size:11px; }
  .nav-toggle{ width:26px; }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- Floating actions stack (WhatsApp + back to top) ---------- */
.float-actions{
  position:fixed;
  right:22px;
  bottom:40px;
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
@media (max-width:600px){
  .float-actions{ right:16px; bottom:32px; gap:10px; }
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  width:66px;
  height:66px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  transition:transform .2s ease;
  opacity:0;
  animation:whatsapp-appear .4s ease 3s forwards;
}
.whatsapp-float:hover{ transform:scale(1.08); }
@keyframes whatsapp-appear{
  to{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float{ animation-duration:.01s; animation-delay:0s; }
}
.whatsapp-float svg{ width:34px; height:34px; position:relative; z-index:2; }
@media (max-width:600px){
  .whatsapp-float{ width:58px; height:58px; }
}

/* ---------- Back to top (grill icon) ---------- */
.back-to-top{
  padding:10px 14px 8px;
  border-radius:14px;
  background:var(--carbon-950);
  border:1px solid rgba(245,239,227,0.3);
  color:var(--hueso-50);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, border-color .25s ease, color .25s ease;
}
.back-to-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.back-to-top:hover{ border-color:var(--brasa-500); color:var(--brasa-500); }
.back-to-top svg{ width:24px; height:28px; }
.back-to-top-label{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  white-space:nowrap;
}
@media (max-width:600px){
  .back-to-top{ padding:8px 11px 6px; }
  .back-to-top svg{ width:20px; height:24px; }
  .back-to-top-label{ font-size:8px; }
}

.smoke-puff{
  position:absolute;
  bottom:58%;
  left:50%;
  width:20px;
  height:32px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.7), rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 78%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  pointer-events:none;
  opacity:0;
  filter:blur(3px);
  animation:smoke-rise 3.4s ease-out infinite;
  z-index:1;
}
.smoke-puff:nth-child(2){ left:38%; width:15px; height:25px; animation-duration:3s; animation-delay:1.1s; }
.smoke-puff:nth-child(3){ left:62%; width:17px; height:27px; animation-duration:3.8s; animation-delay:2.2s; }
@keyframes smoke-rise{
  0%{ transform:translate(-50%,0) rotate(0deg) scale(0.5); opacity:0; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; }
  25%{ opacity:0.65; }
  50%{ transform:translate(-75%,-32px) rotate(10deg) scale(1.5); border-radius:40% 60% 50% 50% / 50% 40% 60% 50%; }
  75%{ opacity:0.3; transform:translate(-25%,-54px) rotate(-8deg) scale(2.1); }
  100%{ transform:translate(-50%,-78px) rotate(6deg) scale(2.7); opacity:0; border-radius:50% 50% 60% 40% / 40% 60% 40% 60%; }
}
@media (prefers-reduced-motion: reduce){
  .smoke-puff{ animation:none; display:none; }
}

/* ---------- Animated fire cursor on quote buttons ---------- */
a[href="cotiza.html"],
a[href="cotiza.html"] *,
a[href="/cotiza"],
a[href="/cotiza"] *,
a[href="/cotiza.html"],
a[href="/cotiza.html"] *,
button[type="submit"]{
  cursor:none;
}
.fire-cursor{
  position:fixed;
  top:0; left:0;
  z-index:10000;
  pointer-events:none;
  font-size:28px;
  line-height:1;
  opacity:0;
  transform:translate(-50%,-60%);
}
.fire-cursor.is-active{
  opacity:1;
  animation:fire-flicker .45s ease-in-out infinite alternate;
}
@keyframes fire-flicker{
  0%  { transform:translate(-50%,-60%) scale(1)    rotate(-5deg); }
  50% { transform:translate(-50%,-60%) scale(1.14) rotate(4deg); }
  100%{ transform:translate(-50%,-60%) scale(0.94) rotate(-3deg); }
}

/* ---------- Animated fire emoji next to headings ---------- */
.title-fire{
  display:inline-block;
  animation:title-fire-flicker .6s ease-in-out infinite alternate;
  transform-origin:50% 90%;
}
@keyframes title-fire-flicker{
  0%  { transform:scale(1)    rotate(-6deg); }
  50% { transform:scale(1.12) rotate(5deg); }
  100%{ transform:scale(0.95) rotate(-4deg); }
}

/* ---------- Site credit bar ---------- */
.site-credit{
  background:var(--carbon-950);
  color:var(--humo-300);
  text-align:center;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.04em;
  padding:16px 20px;
  border-top:1px solid var(--carbon-line);
}
.site-credit a{
  color:var(--hueso-50);
  text-decoration:underline;
  text-underline-offset:2px;
}
.site-credit a:hover{ color:var(--brasa-500); }
.heart-beat{
  display:inline-block;
  animation:heart-beat 1.1s ease-in-out infinite;
}
@keyframes heart-beat{
  0%, 100%{ transform:scale(1); }
  15%{ transform:scale(1.3); }
  30%{ transform:scale(1); }
  45%{ transform:scale(1.22); }
  60%{ transform:scale(1); }
}

/* ---------- Hero "Ken Burns" slow zoom, simulates subtle video motion ---------- */
.hero-media{
  animation:hero-kenburns 22s ease-in-out infinite alternate;
  transform-origin:center center;
}
@keyframes hero-kenburns{
  0%  { transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.12) translate(-1.5%,-1%); }
}
@media (prefers-reduced-motion: reduce){
  .hero-media{ animation:none; }
}