:root{
  /* Paleta */
  --fondo: #000000; /*#066f82;           /* Verde muy oscuro tipo pino */
  --tinta: #ffffff;           /* Blanco cálido */
  --acento: #ddc9ca;          /* Rojo principal */
  --vidrio: rgba(0, 0, 0, 0.08);
  --borde: rgba(255,255,255,0.08);
  --sombra: 0 8px 30px rgba(0,0,0,.4);

  /* Altura dinámica del hero */
  --hero-offset: calc(min(100vw, 1920px) * (300 / 1920) * .58); 
  --hero-mobile-offset: calc(min(100vw, 1080px) * (400 / 1080) * .68); 
  --radio: 18px;
}

/*  Fondo con degradado navideño cálido + textura */
html, body { height: 100%; }


body{
  background:
    radial-gradient(
      circle at 15% 15%,
      #ffffff22 0%,
      #bfc7d622 18%,
      transparent 45%
    ),

    radial-gradient(
      circle at 85% 85%,
      #8b000055 0%,
      #35000088 25%,
      transparent 55%
    ),

    linear-gradient(
      135deg,
      #0b0b0d 0%,
      #050505 45%,
      #111111 100%
    );

  background-attachment: fixed;
  color: var(--tinta);
  font-family: 'Raleway', sans-serif;
}
/*
body{
  background:
    radial-gradient(1900px 1000px at 30% -10%,
     #0097b2 0%, 
     #066f82 15%,
     #5fb13b 35%, 
     #478f28 70%, 
     #0097b2 100%,
     #066f82 115%,
     #5fb13b 185%, 
     #478f28 235%, 
     #0097b2 275%,
     #066f82 335%,
     #5fb13b 385%, 
     #478f28 435%, 
     #0097b2 475%,
     #066f82 535%
     ) fixed,
    linear-gradient(#0d3d24, var(--fondo)) fixed;
  background-blend-mode: screen, normal;
  color: var(--tinta);
  font-family: 'Raleway', sans-serif;
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*/

@font-face {
  font-family: 'Lawler';
  src: url("../fonts/LAWLER.1bb417316dea.otf") format('truetype');
  font-weight: normal;
  font-style: normal;
}



.font-logo {
  font-family: 'Lawler', serif;
  font-size: 64px;
  color: #ffffff;
  text-shadow:
    0 6px 12px rgba(0,0,0,.6);
}



/* 📱 Fondo adaptado a móviles */
@media (max-width: 768px){

  /*
  body{
    background:
      radial-gradient(
        1300px 1100px at 10% 20%,
        #0097b2 10%,      
        #529a34 35%,   
        #478f28 65%,     
        #066f82 95%,
        #0b2a30 125%,      
        #142a0a 155%,
        #529a34 185%,
        #0097b2 215%,  
        #066f82 235%,
        #478f28 265%,
        #529a34 295%,
        #0097b2 325%,  
        #066f82 345%,
        #478f28 365%,
        #0b2a30 395%,      
        #142a0a 425%,
        #529a34 445%,
        #0097b2 465%,  
        #066f82 495%,
        #478f28 525%,
        #529a34 545%,
        #0097b2 565%,
        #0b2a30 585%
      ) fixed,
      linear-gradient(#066f82, #0a262a) fixed;
    background-blend-mode: screen, normal;
    color: var(--tinta);
  }
    */
  .body{
    background:
      radial-gradient(
        circle at 15% 15%,
        #ffffff22 0%,
        #bfc7d622 18%,
        transparent 45%
      ),

      radial-gradient(
        circle at 85% 85%,
        #8b000055 0%,
        #35000088 25%,
        transparent 55%
      ),

      linear-gradient(
        135deg,
        #0b0b0d 0%,
        #050505 45%,
        #111111 100%
      );

    background-attachment: fixed;
    color: var(--tinta);
  }
  

  .font-logo {
    font-family: 'Lawler', serif;
    font-size: 46px;
    color: #ffffff;
    text-shadow:
      0 6px 12px rgba(0,0,0,.6);
  }
}


body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='1' cy='1' r='.7' fill='white' opacity='.05'/%3E%3C/svg%3E");
}

/* ===== HERO (fijo) ===== */
.hero-fixed{
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 1000; pointer-events: none; width: 100vw; max-width: 1920px;
}
.hero-fixed img{ display:block; width:100%; height:auto; aspect-ratio:1920/200; transition: filter .3s ease; }
.hero-fixed img.scroll-up{ filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); }

.hero-fixed-mobile { position: fixed; top: 0; left: 0; width: 100vw; z-index: 1000; pointer-events: none; }
.hero-fixed-mobile img{ display:block; width:100%; height:auto; aspect-ratio:1080/300; transition: filter .3s ease; }
.hero-fixed-mobile img.scroll-up-mob{ filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); }

.hero-spacer{ height: var(--hero-offset); }
.hero-spacer-mobile{ height: var(--hero-mobile-offset); }

/* Fix @media duplicada y llave extra */
@media (max-width: 768px){
  .hero-fixed{ display:none; }
  .hero-mobile{ display:block; }
}

/* NAV escritorio */
.hero-nav{
  font-family: 'Lawler', serif;
  position: fixed; top: 0; left: 0; height: 150px; width: 100%; z-index: 1100;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding-top: clamp(16px, 2.604vw, 50px);
  padding-right: clamp(24px, 11.458vw, 220px);
  pointer-events: none;
}
.hero-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:36px; white-space:nowrap; pointer-events:auto; }
.hero-nav a{
  text-decoration:none; font-weight:600; letter-spacing:.02em;
  font-size: clamp(18px, 2.2vw, 30px); line-height:1; color:#ffffff;
  text-shadow: 0 1px 1px #000, 0 4px 10px rgba(0,0,0,.6);
  text-decoration-line: underline; text-decoration-thickness:.08em; text-underline-offset:.18em; text-decoration-color:transparent;
  transition: text-decoration-color .2s, opacity .2s;
  cursor: pointer;
}
.hero-nav a:hover, .hero-nav a:focus{ text-decoration-color: currentColor; opacity:1; }
@media (max-width: 768px){ .hero-nav{ display:none; } }

/* Secciones con ancla compensan el header fijo */
section[id]{ scroll-margin-top: 400px; }

/* === Botón hamburguesa === */
.mobile-nav-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 15px);
  left: 16px;
  z-index: 2000;
  background: transparent;
  border: 0;
  padding: 12px;
  color: #ffffff;
  transition: opacity .2s ease, color .3s ease;
}
.mobile-nav-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.mobile-nav-btn svg {
  display: block;
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.mobile-nav-btn:hover { color: #5fb13b; }
.mobile-nav-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 3px;
  border-radius: 10px;
}

/* === Offcanvas móvil Twinki === */
.offcanvas.twinki {
  width: min(80vw, 340px);
  background: #0097b2;
  color: #113d0b;
  backdrop-filter: none;
  border-right: 2px solid rgba(255, 255, 255, .08);
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

/* Encabezado */
.offcanvas.twinki .offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.offcanvas.twinki .btn-close {
  filter: invert(1) grayscale(1);
  opacity: .8;
}

/* Links de navegación */
.offcanvas.twinki .mobile-nav .nav-link {
  display: block;
  padding: 1rem .5rem;
  font-family: 'Lawler', serif;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 2px #000, 0 6px 12px rgba(0,0,0,.6);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  transition: color .25s ease, text-shadow .25s ease;
}
.offcanvas.twinki .mobile-nav .nav-link:hover {
  color: #5fb13b;
  text-shadow: 0 2px 2px #000, 0 8px 16px rgba(0, 0, 0, 0.8);
}

/* Fondo detrás del offcanvas */
.offcanvas-backdrop.show {
  background-color: rgba(0,0,0,.75);
}

/* Secciones con ancla compensan el header fijo */
section[id]{ scroll-margin-top: 180px; }





@keyframes fall {
  0%   { transform: translateY(-6vh)  translateX(0)    rotate(0deg);   opacity:.95; }
  50%  { transform: translateY(35vh)  translateX(6vw)  rotate(90deg);  opacity:.85; }
  100% { transform: translateY(100vh) translateX(-4vw) rotate(180deg); opacity:.7; }
}

/* Responsive (igual que tenías) */
@media (max-width:520px){
  .wrap::after { display:none; }
  .glow::before { width:50vmin; height:50vmin; filter: blur(14px); }
  .countdown{ font-size:16px; padding:12px 18px; }
  .logo{ width: clamp(120px, 34vw, 200px) }
}