/* ===== LOADER ===== */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(ellipse at center,#1a0e08 0%,#0a0503 100%);
  display:grid;place-items:center;
  transition:opacity .6s ease,visibility .6s ease;
}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:24px;animation:loader-pop .6s ease-out both}
.loader-logo{height:90px;filter:drop-shadow(0 6px 20px rgba(232,154,74,.45));animation:loader-pulse 1.4s ease-in-out infinite}
.loader-bar{width:220px;height:3px;background:rgba(232,154,74,.18);border-radius:3px;overflow:hidden;position:relative}
.loader-bar span{
  position:absolute;inset:0;width:0;border-radius:3px;
  background:linear-gradient(90deg,#a85220,#e89a4a,#a85220);
  animation:loader-fill 2s ease-out forwards;
  box-shadow:0 0 12px rgba(232,154,74,.6);
}
.loader-text{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.45em;color:#e89a4a;
  font-size:14px;text-indent:.45em;opacity:0;animation:loader-fade .8s ease-out .3s forwards;
}
.is-loading{overflow:hidden;height:100vh}
.loader.is-done{opacity:0;visibility:hidden}
@keyframes loader-fill{0%{width:0}100%{width:100%}}
@keyframes loader-pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 6px 20px rgba(232,154,74,.45))}50%{transform:scale(1.05);filter:drop-shadow(0 6px 30px rgba(232,154,74,.75))}}
@keyframes loader-pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes loader-fade{to{opacity:.9}}

/* ===== ENTRANCE ANIMATIONS ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
body:not(.is-loading) .hero .kicker{animation:fadeUp .8s .1s ease-out both}
body:not(.is-loading) .hero .title span{animation:titleIn 1s .25s cubic-bezier(.2,.7,.2,1) both}
body:not(.is-loading) .hero .title span:last-of-type{animation-delay:.45s}
body:not(.is-loading) .hero .alfarero{animation:alfareroIn 1.4s .35s cubic-bezier(.2,.7,.2,1) both}
body:not(.is-loading) .hero .subtitle{animation:fadeUp 1s .9s ease-out both}
body:not(.is-loading) .hero .countdown{animation:fadeUp 1s 1.05s ease-out both}
body:not(.is-loading) .hero .event-info{animation:fadeUp 1s 1.2s ease-out both}
body:not(.is-loading) .hero .btn-cta.big{animation:fadeUp 1s 1.35s ease-out both}
body:not(.is-loading) .brochazo,
body:not(.is-loading) .particulas,
body:not(.is-loading) .salpicaduras{animation:brochIn 1.4s .1s ease-out both}
body:not(.is-loading) .b2{animation-delay:.3s}
body:not(.is-loading) .b3{animation-delay:.5s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes titleIn{from{opacity:0;transform:translateY(40px) scale(.96);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes alfareroIn{from{opacity:0;transform:translateY(30px) rotate(-6deg) scale(.9)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes brochIn{from{opacity:0;transform:scale(.7) rotate(var(--rot,0deg))}to{opacity:.85;transform:scale(1) rotate(var(--rot,0deg))}}
@keyframes textureDrift{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.06) translate(-1%,-1%)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

:root{

  --bg:#1a0e08;
  --bg-2:#0f0805;
  --cream:#e8dcc4;
  --cream-soft:#d9c9a8;
  --copper:#c87936;
  --copper-glow:#e89a4a;
  --copper-deep:#7a3f1a;
  --brown:#4a2614;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg-2);color:var(--cream);font-family:'Barlow',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 32px;
  background:linear-gradient(180deg,rgba(15,8,5,.85),rgba(15,8,5,0));
  backdrop-filter:blur(6px);
}
.logo img{height:48px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}

/* BUTTON */
.btn-cta{
  display:inline-block;
  font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:18px;
  padding:14px 28px;border-radius:999px;
  color:#fff8e8;
  background:linear-gradient(180deg,#d68345 0%,#a85220 55%,#6b3210 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,220,170,.5),
    inset 0 -2px 6px rgba(0,0,0,.35),
    0 8px 24px rgba(200,121,54,.35),
    0 0 0 1px rgba(0,0,0,.25);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  transition:transform .2s ease,box-shadow .2s ease;
  cursor:pointer;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,220,170,.6),inset 0 -2px 6px rgba(0,0,0,.35),0 12px 32px rgba(232,154,74,.55),0 0 0 1px rgba(0,0,0,.25)}
.btn-cta.big{font-size:22px;padding:18px 44px;margin-top:32px}

/* HERO */
.hero{
  position:relative;min-height:100vh;
  padding:140px 24px 120px;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(232,154,74,.25),transparent 55%),
    radial-gradient(ellipse at 50% 100%,rgba(122,63,26,.4),transparent 60%),
    linear-gradient(180deg,#1a0e08 0%,#0f0805 100%);
  overflow:hidden;
}
.bg-texture{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.18;mix-blend-mode:overlay;pointer-events:none;
  animation:textureDrift 18s ease-in-out infinite;
}
.brochazo,.particulas,.salpicaduras{position:absolute;pointer-events:none;opacity:.85}
.b1{top:8%;left:-4%;width:380px;transform:rotate(-15deg)}
.b2{bottom:25%;right:-3%;width:420px;transform:rotate(10deg)}
.b3{top:38%;right:8%;width:280px;opacity:.6}
.p1{top:12%;right:5%;width:340px;opacity:.55}
.salpicaduras{bottom:18%;left:6%;width:300px;opacity:.55}

.kicker{
  position:relative;z-index:2;
  font-family:'Bebas Neue',sans-serif;
  color:var(--copper-glow);letter-spacing:.5em;font-size:clamp(12px,1.4vw,18px);
  margin-bottom:20px;text-indent:.5em;
}

.title{
  position:relative;z-index:2;
  font-family:'Big Shoulders Display','Bebas Neue',sans-serif;
  font-weight:900;
  font-size:clamp(72px,16vw,240px);
  line-height:.78;color:var(--cream);text-shadow:0 4px 20px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  flex-wrap:nowrap;gap:0;
  letter-spacing:-.02em;
}
.title .word{
  display:inline-block;height:clamp(110px,22vw,300px);width:auto;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.5));
}

.alfarero{
  width:clamp(220px,28vw,460px);height:auto;
  margin:0 -2vw;z-index:3;position:relative;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));
}
.subtitle{
  position:relative;z-index:2;
  font-family:'Dancing Script',cursive;
  color:var(--cream);font-size:clamp(24px,3.5vw,46px);
  margin-top:8px;font-weight:600;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}

.event-info{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:40px;
  margin:56px auto 40px;max-width:720px;flex-wrap:wrap;
}
.info{display:flex;gap:14px;align-items:center;text-align:left}
.info .big{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:.05em;line-height:1.05}
.info .small{font-family:'Bebas Neue',sans-serif;color:var(--copper-glow);letter-spacing:.3em;font-size:12px;margin-top:4px}
.divider{width:1px;height:60px;background:linear-gradient(transparent,rgba(232,154,74,.5),transparent)}

.countdown{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  padding:14px 22px;border-top:1px solid rgba(232,154,74,.25);border-bottom:1px solid rgba(232,154,74,.25);
}
.cd-box{
  min-width:78px;padding:10px 12px;border-radius:8px;
  background:rgba(15,8,5,.55);border:1px solid rgba(232,154,74,.3);
  display:flex;flex-direction:column;align-items:center;
}
.cd-box span{font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--cream);line-height:1}
.cd-box small{font-family:'Bebas Neue',sans-serif;color:var(--copper-glow);letter-spacing:.25em;font-size:11px;margin-top:4px}
.cd-sep{color:var(--copper);font-size:18px;opacity:.7}


.ondas{
  position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
  width:min(900px,90%);opacity:.7;pointer-events:none;
}

/* FRASE */
.frase{
  padding:60px 24px;text-align:center;
  background:var(--bg-2);
  font-family:'Bebas Neue',sans-serif;letter-spacing:.15em;
  color:var(--cream-soft);font-size:clamp(16px,2.2vw,22px);line-height:1.5;
}
.frase strong{color:var(--cream);font-size:1.15em;letter-spacing:.18em}

/* VALORES */
.valores{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  max-width:1200px;margin:0 auto;padding:40px 32px 100px;
}
.valores article{padding:16px}
.valores h3{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.15em;
  color:var(--cream);font-size:18px;margin-bottom:10px;
}
.valores p{color:var(--cream-soft);opacity:.75;font-size:14px;line-height:1.55}

/* FOOT */
.foot{
  padding:30px 24px;text-align:center;
  border-top:1px solid rgba(232,154,74,.15);
  color:var(--cream-soft);opacity:.6;font-size:13px;
  letter-spacing:.1em;
}

/* RESPONSIVE */
@media (max-width:760px){
  .nav{padding:14px 18px}
  .nav-cta{font-size:14px;padding:10px 18px}
  .logo img{height:38px}
  .hero{padding:120px 18px 100px}
  .title{flex-direction:column;line-height:.9;gap:0}
  .alfarero{width:min(78vw,360px);margin:-8px 0}
  .event-info{flex-direction:column;gap:24px}
  .divider{width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(232,154,74,.5),transparent)}
  .countdown{padding:12px 14px;gap:4px}
  .cd-box{min-width:62px;padding:8px 6px}
  .cd-box span{font-size:26px}
  .valores{grid-template-columns:1fr 1fr;gap:20px;padding:30px 20px 80px}
}
@media (max-width:420px){
  .valores{grid-template-columns:1fr}
}

/* FOOTER LOGO */
.foot{display:flex;flex-direction:column;align-items:center;gap:18px}
.foot-logo{height:64px;width:auto;opacity:.85;transition:opacity .3s ease,transform .3s ease;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.foot-logo:hover{opacity:1;transform:translateY(-2px)}

/* ===== SIDE STRIP (estilo cartel) ===== */
.side-strip{
  position:fixed;top:0;right:0;bottom:0;width:54px;z-index:40;
  background:linear-gradient(180deg,#e8c79a,#d9a872);
  border-left:2px solid rgba(74,38,20,.35);
  box-shadow:-6px 0 18px rgba(0,0,0,.45);
  overflow:hidden;pointer-events:none;
}
.strip-track{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  height:max-content;display:flex;flex-direction:column;
  animation:stripScroll 38s linear infinite;
}
.strip-track span{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:'Antonio','Bebas Neue',sans-serif;font-weight:700;
  font-size:26px;letter-spacing:.04em;color:#4a2614;
  white-space:nowrap;padding:24px 0;
  transform:rotate(180deg);
}
@keyframes stripScroll{from{transform:translate(-50%,0)}to{transform:translate(-50%,-50%)}}

/* ===== MARCA CX26 ESQUINA ===== */
.cx-mark{
  position:absolute;top:90px;left:22px;z-index:4;
  font-family:'Antonio','Bebas Neue',sans-serif;font-weight:700;
  color:#4a2614;line-height:.85;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  text-shadow:0 1px 0 rgba(255,240,210,.4);
}
.cx-mark .cx-top,.cx-mark .cx-bot{font-size:28px;letter-spacing:.02em}
.cx-bar{display:block;margin-top:6px;border-radius:1px}
.cx-bar-dark{width:6px;height:30px;background:#4a2614}
.cx-bar-mid{width:6px;height:18px;background:#a85220;margin-top:4px}

@media (max-width:760px){
  .side-strip{width:36px}
  .strip-track span{font-size:18px;padding:18px 0}
  .cx-mark{top:74px;left:14px}
  .cx-mark .cx-top,.cx-mark .cx-bot{font-size:22px}
}

/* Padding hero para no chocar con strip */
.hero{padding-right:78px}
@media (max-width:760px){.hero{padding-right:52px}}

/* Title con la condensada del cartel */
.top-cta{margin-bottom:24px;margin-top:0}
.hero .top-cta{animation:fadeUp .8s .2s ease-out both}
.alfarero{margin-top:-3vw;margin-bottom:-3vw}

/* ===== MARQUEE DE PALABRAS A PÁGINA COMPLETA ===== */
.word-marquee{
  position:fixed;left:-10vw;right:-10vw;
  pointer-events:none;z-index:1;overflow:hidden;
  opacity:.16;mix-blend-mode:screen;
}
.wm-top{top:18vh;transform:rotate(-6deg)}
.wm-bottom{bottom:14vh;transform:rotate(4deg)}
.wm-track{
  display:flex;align-items:center;gap:6vw;
  width:max-content;
  animation:wmScroll 40s linear infinite;
}
.wm-track img{
  height:clamp(140px,22vw,320px);width:auto;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.4));
  flex-shrink:0;
}
.wm-reverse{animation:wmScrollRev 50s linear infinite}
@keyframes wmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wmScrollRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

@media (prefers-reduced-motion: reduce){
  .wm-track,.wm-reverse{animation:none}
}

/* ===== FONDO GLOBAL ===== */
.page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(122,63,26,.35),transparent 60%),
    linear-gradient(180deg,#1a0e08 0%,#0f0805 100%);
}
.page-bg-texture{
  position:absolute;inset:-6%;width:112%;height:112%;
  object-fit:cover;opacity:.22;mix-blend-mode:overlay;
  animation:textureDrift 22s ease-in-out infinite;
}
.page-spotlight{
  position:absolute;left:50%;top:-10%;transform:translateX(-50%);
  width:90vw;height:80vh;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,
    rgba(255,205,140,.45) 0%,
    rgba(232,154,74,.22) 22%,
    rgba(232,154,74,.08) 42%,
    transparent 65%);
  filter:blur(10px);
  animation:spotPulse 6s ease-in-out infinite;
}
@keyframes spotPulse{0%,100%{opacity:.9}50%{opacity:1}}

/* Asegurar capas sobre el fondo */
.nav{z-index:50}
main.hero,section,footer{position:relative;z-index:2}
.hero{background:transparent}
.hero .bg-texture{display:none}