/* Danza del Sol Chile — el afiche hecho página: cielo, tierra roja y papel. */
@font-face{font-family:"Bowlby One SC";src:url(../fonts/bowlby-one-sc.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lora";src:url(../fonts/lora.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Lora";src:url(../fonts/lora-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --noche:#052F4E;--cielo:#0A456C;--cielo-bajo:#2F7592;
  --rojo:#8E130A;--rojo-hondo:#6B0D06;
  --sol:#F3B531;--sol-fuerte:#E9A21B;--brasa:#DE4B1A;
  --hueso:#F6E7C8;--papel:#F1DFBD;--papel-hondo:#E6D0A6;
  --tinta:#22160F;--tinta-suave:#5A4333;--oro:#F6C461;
  --titular:"Bowlby One SC","Arial Black",sans-serif;
  --texto:"Lora",Georgia,serif;
  /* ancho del "afiche": todo lo de la escena se mide contra él */
  --w:min(100vw,116svh);
  --sale:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--rojo) var(--noche)}
body{margin:0;background:var(--noche);color:var(--tinta);font:400 1.125rem/1.6 var(--texto);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--sol);color:var(--tinta)}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.08em}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:2px}
.papel :focus-visible,.hoja :focus-visible{outline-color:var(--rojo)}
h1,h2,h3{font-family:var(--titular);font-weight:400;line-height:1.04;margin:0;text-wrap:balance;letter-spacing:.005em;text-transform:uppercase}
p{margin:0 0 1em}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;z-index:50;background:var(--sol);color:var(--tinta);padding:10px 14px;font-family:var(--titular)}
.saltar:focus{top:12px}
.espejo{transform:scaleX(-1)}

/* ---------- botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;cursor:pointer;text-decoration:none;font:400 1rem/1 var(--titular);letter-spacing:.03em;text-transform:uppercase;padding:.95em 1.4em;border-radius:3px;transition:background-color .2s,transform .25s var(--sale),box-shadow .25s var(--sale)}
.boton--sol{background:var(--sol);color:var(--tinta);box-shadow:0 3px 10px -3px rgba(20,8,3,.7)}
.boton--sol:hover{background:#FFC94D;transform:translateY(-2px);box-shadow:0 8px 16px -6px rgba(20,8,3,.75)}
.boton--sol:active{transform:translateY(2px);box-shadow:0 1px 4px -1px rgba(20,8,3,.7)}
.boton--rojo{background:var(--rojo);color:var(--hueso);box-shadow:0 3px 10px -3px rgba(34,22,15,.6)}
.boton--rojo:hover{background:#A51A0F;transform:translateY(-2px);box-shadow:0 8px 16px -6px rgba(34,22,15,.6)}
.boton--rojo:active{transform:translateY(2px);box-shadow:0 1px 4px -1px rgba(34,22,15,.6)}
.boton--linea{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.boton--linea:hover{background:rgba(34,22,15,.08)}
.boton--grande{font-size:1.35rem;padding:1em 1.9em}
.boton[disabled]{opacity:.55;cursor:progress}

/* ---------- cabecera */
.cabecera{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,3vw,40px);color:var(--hueso)}
.cabecera__marca{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 .95rem/1 var(--titular);letter-spacing:.04em;text-transform:uppercase}
.cabecera__marca b{font-weight:400;color:var(--sol)}
.cabecera__marca img{width:40px;height:40px}
.cabecera__nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);font-size:1rem}
.cabecera__nav a:not(.boton){text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.cabecera__nav a:not(.boton):hover{border-color:var(--sol)}
.cabecera__nav .boton{font-size:.95rem;padding:.8em 1.2em}
.es-portada .cabecera__marca{visibility:hidden}
.es-interior .cabecera{position:relative;background:var(--noche)}
@media (max-width:760px){
  .cabecera__nav a:not(.boton){display:none}
  .es-portada .cabecera{display:none}
  .cabecera__marca span{font-size:.9rem}
}

/* ---------- cielo (portada) */
.cielo{position:relative;height:calc(var(--w)*.655);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#04304F 0%,var(--cielo) 46%,var(--cielo-bajo) 100%)}
.cielo::after{content:"";position:absolute;inset:0;background:url(../img/papel.webp) center/cover;mix-blend-mode:multiply;opacity:.55;pointer-events:none;z-index:6}
.cielo__sol{position:absolute;left:50%;top:calc(var(--w)*-.163);width:calc(var(--w)*.858);margin-left:calc(var(--w)*-.429);z-index:1;translate:0 var(--y,0);animation:amanecer 1.9s var(--sale) both}
.cielo__sol img{width:100%;animation:giro 420s linear infinite}
.cielo__titulo{position:absolute;left:50%;top:calc(var(--w)*.113);width:calc(var(--w)*.5);margin-left:calc(var(--w)*-.25);z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;animation:asoma 1.2s .5s var(--sale) both}
.cielo__titulo h1{display:flex;flex-direction:column;align-items:center}
.cielo__danza{width:calc(var(--w)*.385)}
.cielo__delsol{width:calc(var(--w)*.384);margin-top:calc(var(--w)*-.008)}
.cielo__titulo p{margin:0;font-family:var(--titular);line-height:1;text-transform:uppercase}
.cielo__chile{font-size:calc(var(--w)*.0665);color:var(--rojo);margin-top:calc(var(--w)*-.004)!important;letter-spacing:.01em}
.cielo__lugar{font-size:calc(var(--w)*.0372);color:var(--tinta);margin-top:calc(var(--w)*.008)!important}
.cielo__anio{font-size:calc(var(--w)*.0445);color:var(--rojo);margin-top:calc(var(--w)*.022)!important;display:flex;align-items:center;gap:.28em}
.cielo__anio img{width:.52em;height:auto}
.cielo__cordillera{position:absolute;left:50%;bottom:calc(var(--w)*-.012);width:max(100vw,calc(var(--w)*1.44));max-width:none;transform:translateX(-50%);translate:0 var(--y,0);z-index:4}
.cielo__tipi{position:absolute;left:calc(50% - var(--w)*.337);bottom:calc(var(--w)*-.012);width:calc(var(--w)*.324);translate:0 var(--y,0);z-index:5}
@keyframes amanecer{from{transform:translateY(34%)}to{transform:none}}
@keyframes asoma{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes giro{to{rotate:360deg}}

/* ---------- borde rasgado: el mismo borde de la tierra roja del afiche, usado como máscara */
.tierra,.papel,.pie{position:relative;z-index:2}
.tierra::before,.papel::before,.pie::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(46px,9.5vw,150px);background:inherit;background-position:center top;
  -webkit-mask:url(../img/rojo-borde.webp) center bottom/100% 100% no-repeat;mask:url(../img/rojo-borde.webp) center bottom/100% 100% no-repeat;pointer-events:none}

/* ---------- tierra roja */
.tierra{background:var(--rojo) url(../img/rojo-tex.webp) center top/max(100%,900px) auto;color:var(--hueso);padding:0 clamp(16px,4vw,48px) clamp(72px,9vw,130px)}
.tierra__in{max-width:1080px;margin:0 auto;padding-top:clamp(40px,6vw,90px)}
.tierra h2{font-size:clamp(1.8rem,4.6vw,3.8rem);text-align:center;color:var(--hueso);max-width:16ch;margin:0 auto clamp(40px,6vw,72px)}

.escena{display:grid;grid-template-columns:1fr calc(var(--w)*.38) 1fr;align-items:center;gap:calc(var(--w)*.03);max-width:calc(var(--w)*1.02);margin:0 auto}
.tambor{position:relative;margin-top:calc(var(--w)*-.118);z-index:3}
.tambor__cuero{width:100%;filter:drop-shadow(0 calc(var(--w)*.012) calc(var(--w)*.018) rgba(20,4,2,.55))}
.tambor__baqueta{position:absolute;top:-5.5%;width:32%;filter:drop-shadow(0 6px 8px rgba(20,4,2,.5))}
.tambor__baqueta--izq{left:-4.5%;transform-origin:50% 88%;animation:golpe-izq 5.5s 2.2s var(--sale) infinite}
.tambor__baqueta--der{left:74.9%;scale:-1 1;transform-origin:50% 88%;animation:golpe-der 5.5s 2.2s var(--sale) infinite}
.tambor__craneo{position:absolute;left:22.3%;top:49.8%;width:55.6%;filter:drop-shadow(0 8px 10px rgba(20,4,2,.55))}
@keyframes golpe-izq{0%,86%,100%{transform:none}90%{transform:rotate(-7deg)}93%{transform:rotate(3deg)}}
@keyframes golpe-der{0%,88%,100%{transform:none}92%{transform:rotate(-7deg)}95%{transform:rotate(3deg)}}
.familia{margin:calc(var(--w)*.12) 0 0;text-align:center;text-transform:uppercase;font-size:clamp(.82rem,calc(var(--w)*.0235),1.5rem);line-height:1.25;letter-spacing:.02em;text-wrap:balance}
.familia img{width:min(100%,calc(var(--w)*.2));margin:0 auto .9em}

.fechas{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,3vw,40px);max-width:calc(var(--w)*.92);margin:clamp(34px,calc(var(--w)*.07),96px) auto 0;text-align:center}
.fechas p{margin:0}
.fechas b{display:block;font:400 clamp(1.25rem,calc(var(--w)*.0345),2.6rem)/1.05 var(--titular);text-transform:uppercase}
.fechas time{display:block;margin-top:.25em;color:var(--oro);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1rem,calc(var(--w)*.03),2.2rem);line-height:1.15}
.fechas img{width:clamp(18px,calc(var(--w)*.031),44px)}
.llamado{text-align:center;margin:clamp(34px,5vw,60px) 0 0}

/* ---------- papel */
.papel{background:var(--papel) url(../img/papel.webp) center/cover;padding:clamp(28px,5vw,70px) clamp(18px,4vw,48px) clamp(96px,12vw,170px)}
.papel__in{max-width:1080px;margin:0 auto}
.papel h2{color:var(--rojo);font-size:clamp(1.8rem,4.6vw,3.8rem);max-width:16ch;margin-bottom:clamp(24px,3.5vw,44px)}
.prosa{max-width:62ch;font-size:clamp(1.1rem,1.4vw,1.28rem)}
.prosa a{color:var(--rojo)}
.cita{margin:clamp(48px,7vw,90px) 0 0;padding:0;max-width:22ch;margin-left:auto;font:400 clamp(1.5rem,3.6vw,2.9rem)/1.08 var(--titular);text-transform:uppercase;color:var(--tinta);text-wrap:balance}
.cita p{margin:0}
.cita p::before{content:"“"}.cita p::after{content:"”"}
.cita footer{font:italic 400 1.15rem/1.4 var(--texto);text-transform:none;color:var(--tinta-suave);margin-top:.9em}

/* contacto: texto a la izquierda, formulario a la derecha */
@media (min-width:900px){
  .papel--contacto .papel__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;gap:0 clamp(40px,6vw,96px);align-items:start}
  .papel--contacto h2,.papel--contacto .prosa{grid-column:1}
  .papel--contacto .formulario{grid-column:2;grid-row:1/span 2;margin-top:.4em;max-width:none}
}
/* ---------- participar */
.caminos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,110px);align-items:start}
.camino{display:flex;flex-direction:column;align-items:flex-start;font-size:1.12rem}
.camino p{max-width:44ch}
.rotulo{font-size:clamp(1.35rem,2.7vw,2.2rem);color:var(--tinta);margin:0 0 .9em -4%;width:min(108%,460px);aspect-ratio:632/222;display:grid;place-items:center;background:center/100% 100% no-repeat;rotate:-1.5deg}
.rotulo span{translate:0 4%}
.rotulo--a{background-image:url(../img/papel-a.webp)}
.rotulo--b{background-image:url(../img/papel-b.webp);rotate:1.2deg}
.camino__aporte{font:400 1.05rem/1 var(--titular);text-transform:uppercase;color:var(--oro);margin:.3em 0 1.3em}
.camino__aporte b{font-weight:400;font-size:1.8em;color:var(--hueso);margin-left:.25em}
.camino .boton{margin-top:auto}
.pasos{list-style:none;counter-reset:paso;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin:clamp(56px,8vw,100px) 0 0;padding:clamp(28px,4vw,44px) 0 0;border-top:2px solid rgba(246,231,200,.3)}
.pasos li{counter-increment:paso;font-size:1.05rem;line-height:1.5}
.pasos li::before{content:counter(paso);display:block;font:400 2.6rem/1 var(--titular);color:var(--sol);margin-bottom:.25em}
.pasos b{display:block;font:400 1.15rem/1.2 var(--titular);text-transform:uppercase;margin-bottom:.3em}

/* ---------- formularios */
.formulario{max-width:640px;margin-top:clamp(24px,3vw,40px)}
.campo{margin:0 0 1.35em}
.campo label,.opciones legend{display:block;font-weight:600;margin-bottom:.4em;line-height:1.35;padding:0}
.campo__opc{font-weight:400;color:var(--tinta-suave)}
.campo__ayuda{font-size:.95rem;color:var(--tinta-suave);margin:-.15em 0 .5em}
.campo input:not([type=radio],[type=checkbox],[type=file]),.campo textarea,.campo select{width:100%;font:inherit;color:var(--tinta);background:#FFF9EC;border:2px solid var(--tinta);border-radius:3px;padding:.7em .8em;caret-color:var(--rojo)}
.campo input::placeholder,.campo textarea::placeholder{color:#75604f}
.campo textarea{resize:vertical;min-height:7em}
.campo input:focus-visible,.campo textarea:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}
.campo--mal input:not([type=radio],[type=checkbox]),.campo--mal textarea{border-color:#B3200F;background:#FFF1EA}
.campo__error{color:#9C1A0C;font-weight:600;font-size:.98rem;margin:.45em 0 0}
.opciones{border:0;padding:0;margin:0;min-width:0}
.campo .opcion,.opcion{display:flex;align-items:flex-start;gap:.7em;font-weight:400;padding:.65em .85em;margin:0 0 .4em;line-height:1.4;background:#FFF9EC;border:2px solid var(--papel-hondo);border-radius:3px;cursor:pointer;transition:border-color .15s,background-color .15s}
.opcion:hover{border-color:var(--tinta-suave)}
.opcion:has(input:checked){border-color:var(--rojo);background:#FFF1DC}
.opcion input{flex:none;width:1.25em;height:1.25em;margin:.18em 0 0;accent-color:var(--rojo)}
.opcion--acuerdo{background:transparent;border-color:transparent;padding-left:0}
.bloque{border:0;padding:0;margin:2.4em 0 0;min-width:0}
.bloque>legend{font:400 1.5rem/1.1 var(--titular);color:var(--rojo);text-transform:uppercase;padding:0;margin-bottom:.9em}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{background:#FFF1DC;border:2px solid var(--rojo);border-radius:3px;padding:14px 18px;margin:0 0 1.6em;font-weight:600;color:#7A1108}
.aviso--bien{border-color:#2F6B3C;color:#1F4D2A;background:#EEF4DF}
.aviso ul{margin:.4em 0 0;padding-left:1.2em;font-weight:400}

/* ---------- páginas interiores (inscripción, pago, privacidad) */
.es-interior{background:var(--papel) url(../img/papel.webp) center top/cover fixed}
.hoja{padding:clamp(34px,6vw,80px) clamp(18px,4vw,48px) clamp(96px,12vw,160px)}
.hoja__in{max-width:720px;margin:0 auto}
.hoja h1{font-size:clamp(1.9rem,5.4vw,3.4rem);color:var(--rojo);margin-bottom:.45em}
.hoja h2{font-size:clamp(1.35rem,3vw,1.9rem);color:var(--tinta);text-transform:uppercase;margin:1.8em 0 .6em}
.hoja__tipo{font:400 1rem/1 var(--titular);text-transform:uppercase;color:var(--tinta-suave);letter-spacing:.06em;margin:0 0 .6em}
.intro{font-size:1.08rem;max-width:64ch}
.elegir{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,32px);margin-top:1.6em}
.elegir a{display:flex;flex-direction:column;gap:.5em;text-decoration:none;background:#FFF9EC;border:2px solid var(--tinta);border-radius:3px;padding:clamp(18px,3vw,28px);box-shadow:0 6px 16px -8px rgba(34,22,15,.55);transition:transform .25s var(--sale),box-shadow .25s var(--sale)}
.elegir a:hover{transform:translateY(-3px);box-shadow:0 14px 24px -12px rgba(34,22,15,.6)}
.elegir b{font:400 1.6rem/1 var(--titular);color:var(--rojo);text-transform:uppercase}
.elegir span{font-size:1rem}
.elegir em{font:400 1.05rem/1 var(--titular);font-style:normal;margin-top:auto;padding-top:.6em}
.datos{width:100%;border-collapse:collapse;margin:1em 0 1.6em;font-size:1.05rem}
.datos th,.datos td{text-align:left;vertical-align:top;padding:.6em 0;border-bottom:1px solid var(--papel-hondo)}
.datos th{font-weight:400;color:var(--tinta-suave);width:38%;padding-right:1em}
.banco{background:#FFF9EC;border:2px dashed var(--tinta);border-radius:3px;padding:16px 20px;white-space:pre-line;font-size:1.05rem;margin:0 0 1.4em}
.estado{display:inline-block;font:400 .95rem/1 var(--titular);text-transform:uppercase;letter-spacing:.04em;padding:.5em .8em;border-radius:3px;background:var(--tinta);color:var(--hueso)}
.estado--ok{background:#2F6B3C}.estado--warn{background:var(--sol);color:var(--tinta)}.estado--bad{background:var(--rojo)}
.acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:1.4em}

/* ---------- pie */
.pie{background:var(--noche);color:var(--hueso);padding:clamp(20px,4vw,50px) clamp(18px,4vw,48px) clamp(40px,6vw,70px);text-align:center;font-size:1rem}
.pie__in{max-width:1080px;margin:0 auto}
.pie p{margin:0 0 .5em}
.pie__titulo{font:400 clamp(1.4rem,3.6vw,2.4rem)/1.05 var(--titular);text-transform:uppercase;margin-bottom:.5em!important}
.pie__titulo span{color:var(--sol)}
.pie__enlaces{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:1.4em!important}
.pie__enlaces a{padding:6px 0}

/* ---------- pantallas angostas */
@media (max-width:760px){
  body{font-size:1.0625rem}
  .escena{grid-template-columns:1fr 1fr;gap:18px 14px;max-width:none}
  .tambor{grid-column:1/-1;order:-1;width:min(72vw,340px);margin:calc(var(--w)*-.118) auto 0}
  .familia{margin-top:0;font-size:.78rem;letter-spacing:0}
  .boton--grande{font-size:1.1rem;padding:1em 1.3em;max-width:100%}
  .familia img{width:min(100%,150px)}
  .caminos{grid-template-columns:1fr;gap:56px}
  .pasos{grid-template-columns:1fr}
  .cita{margin-left:0}
  .elegir{grid-template-columns:1fr}
  .datos th{width:44%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-capa]{translate:none!important}
}