/* Día de Bendiciones — landing (rediseño 23-oct-2026).
   Dirección: "boleto de la suerte". Amarillo sol a sangre + chocolate
   profundo para alternar ritmo; tipografía display gruesa (Bricolage
   Grotesque); tarjetas con forma de boleto (perforación lateral). */
:root{
  --sol:#ffd60a; --sol-2:#ffc300; --crema:#fff8d9; --crema-2:#fff0b0;
  --choco:#1d1300; --choco-2:#2e2000; --tinta:#1d1300; --tinta-2:#5a4613;
  --borde:#ecc94b; --verde:#1d1300; --oro:#e8a200; --oro-claro:#ffe27a;
  --wa:#1fa855; --wa-2:#168a45;
  --radio:22px;
  --display:'Bricolage Grotesque','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--tinta);font:16px/1.6 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
.envoltura{width:min(1120px,100% - 32px);margin-inline:auto}
.titular{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0}
.antetitulo{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;padding:6px 12px;border-radius:999px;background:var(--choco);color:var(--sol)}
.seccion{padding:84px 0;position:relative}
.seccion--honda{background:var(--sol)}
.seccion--oscura{background:var(--choco);color:var(--crema)}
.seccion--oscura .antetitulo{background:var(--sol);color:var(--choco)}
.centro{text-align:center}
.lead{color:var(--tinta-2);font-size:1.08rem;max-width:620px}
.centro .lead{margin-inline:auto}
.h2{font-size:clamp(2.2rem,6.4vw,3.6rem)}
.subrayado{background:linear-gradient(transparent 62%,var(--sol) 62%);padding:0 .08em}
.seccion--honda .subrayado{background:linear-gradient(transparent 62%,#fff 62%)}

/* Barra superior */
.barra{position:sticky;top:0;z-index:20;background:rgba(29,19,0,.94);backdrop-filter:blur(10px);color:var(--crema)}
.barra .envoltura{display:flex;align-items:center;gap:12px;height:64px}
.barra img{width:40px;height:40px;object-fit:contain}
.barra strong{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--sol)}
.barra .mayores{margin-left:auto;font-size:.72rem;font-weight:800;border:1.5px solid var(--sol);color:var(--sol);border-radius:999px;padding:3px 10px}
.barra .boton{display:none}
@media(min-width:760px){.barra .boton{display:inline-flex;min-height:42px;padding:0 18px;font-size:.9rem}}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;font-weight:800;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.boton:hover{transform:translateY(-2px)}
.boton:active{transform:scale(.97)}
.boton--wa{background:var(--wa);color:#fff;box-shadow:0 6px 0 var(--wa-2),0 18px 30px -14px rgba(22,138,69,.9)}
.boton--wa:hover{background:#22b65d}
.boton--linea{border:2px solid var(--choco);color:var(--choco);background:transparent}
.boton--linea:hover{background:var(--choco);color:var(--sol)}
.boton svg{width:22px;height:22px;flex:none}

/* Portada */
.portada{position:relative;background:var(--sol);padding:56px 0 0;overflow:hidden;isolation:isolate}
.portada::before{content:"";position:absolute;z-index:-1;left:50%;top:38%;width:1600px;height:1600px;translate:-50% -50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.35) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 18%,transparent 52%);mask:radial-gradient(circle,#000 0,#000 18%,transparent 52%);
  animation:girar 90s linear infinite}
@keyframes girar{to{rotate:360deg}}
.portada .envoltura{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.portada .envoltura{grid-template-columns:1.15fr .85fr}.portada::before{left:76%;top:46%}}
.portada h1{font-size:clamp(2.9rem,10.5vw,5.6rem);color:var(--choco)}
.portada h1 em{font-style:normal;display:inline-block;background:var(--choco);color:var(--sol);padding:0 .16em .04em;border-radius:.14em;rotate:-2deg;margin-top:.08em}
.portada .lead{margin:22px 0 28px;color:var(--choco-2);font-size:1.12rem}
.portada .acciones{display:flex;flex-wrap:wrap;gap:12px}
.portada .nota{margin-top:18px;font-size:.84rem;color:var(--choco-2);opacity:.85;max-width:520px}
.portada figure{margin:0;position:relative}
.portada figure img{width:min(430px,86%);margin-inline:auto;filter:drop-shadow(0 26px 30px rgba(29,19,0,.35));animation:flotar 6s ease-in-out infinite}
@keyframes flotar{50%{translate:0 -12px}}
@media(max-width:899px){.portada{padding-top:26px}.portada figure{order:-1}.portada figure img{width:150px}.portada::before{top:12%}}

/* Cifras: tira de boletos */
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:44px 0 0;position:relative;z-index:1}
@media(min-width:760px){.cifras{grid-template-columns:repeat(4,1fr)}}
.cifra{background:var(--choco);color:var(--crema);border-radius:18px;padding:20px 16px;text-align:center;position:relative;
  -webkit-mask:radial-gradient(circle 10px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 10px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.cifra b{display:block;font-family:var(--display);font-weight:800;font-size:2.1rem;letter-spacing:-.03em;color:var(--sol);line-height:1.1}
.cifra span{font-size:.82rem;opacity:.85}

/* Cinta en movimiento */
.cinta{background:var(--choco);color:var(--sol);overflow:hidden;margin-top:56px;border-block:3px solid var(--choco);rotate:-1.5deg;width:104%;margin-left:-2%}
.cinta div{display:flex;gap:40px;white-space:nowrap;padding:14px 0;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.01em;animation:correr 28s linear infinite;width:max-content}
.cinta span::after{content:"✦";margin-left:40px;color:var(--crema)}
@keyframes correr{to{translate:-50% 0}}

/* Quién está detrás */
.quien{display:grid;gap:40px;align-items:center}
@media(min-width:860px){.quien{grid-template-columns:.8fr 1.2fr}}
.video-marco{border-radius:30px;overflow:hidden;background:#000;max-width:340px;margin-inline:auto;aspect-ratio:9/16;border:6px solid var(--sol);box-shadow:14px 14px 0 var(--sol-2);rotate:-2deg}
.video-marco video{width:100%;height:100%;object-fit:cover}
.quien h2{color:var(--sol)}
.quien p{color:#e9dcb6;font-size:1.05rem}
.quien .firma{display:inline-block;margin-top:8px;font-family:var(--display);font-weight:800;color:var(--sol);font-size:1.1rem}

/* Pasos */
.pasos{display:grid;gap:16px;margin-top:42px;counter-reset:paso}
@media(min-width:760px){.pasos{grid-template-columns:repeat(4,1fr)}}
.paso{background:#fff;border:2px solid var(--choco);border-radius:var(--radio);padding:24px 22px;position:relative;box-shadow:6px 6px 0 var(--choco);transition:transform .2s,box-shadow .2s}
.paso:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--choco)}
.paso::before{counter-increment:paso;content:"0" counter(paso);display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--sol);font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--choco);border:2px solid var(--choco)}
.paso h3{margin:16px 0 6px;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.paso p{margin:0;font-size:.95rem;color:var(--tinta-2)}

/* Modalidades: boletos */
.modalidades{display:grid;gap:22px;margin-top:42px;align-items:center}
@media(min-width:760px){.modalidades{grid-template-columns:repeat(3,1fr)}}
.modalidad{background:var(--crema);border-radius:var(--radio);padding:28px 26px 26px;display:flex;flex-direction:column;gap:4px;position:relative;
  -webkit-mask:radial-gradient(circle 14px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 14px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat}
.modalidad ul{border-top:2px dashed rgba(29,19,0,.25);margin:16px 0 0;padding:16px 0 0 18px;color:var(--tinta-2);font-size:.94rem}
.modalidad--destacada{background:var(--choco);color:var(--crema);padding-block:40px 34px}
@media(min-width:760px){.modalidad--destacada{scale:1.06}}
.modalidad--destacada ul{color:#e9dcb6;border-top-color:rgba(255,214,10,.35)}
.modalidad .valor{font-family:var(--display);font-weight:800;font-size:3rem;letter-spacing:-.04em;line-height:1}
.modalidad--destacada .valor{color:var(--sol)}
.modalidad .etiqueta{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--sol);color:var(--choco);margin-bottom:10px}
.modalidad--destacada .etiqueta{background:var(--wa);color:#fff}
.aviso-chico{margin-top:26px;font-size:.86rem;color:var(--choco-2)}

/* Horarios */
.horarios{display:grid;gap:16px;margin-top:40px}
@media(min-width:760px){.horarios{grid-template-columns:repeat(2,1fr)}}
.horario{display:flex;gap:18px;align-items:center;background:#fff;border-radius:var(--radio);padding:22px;border:2px solid var(--choco)}
.horario .icono{width:58px;height:58px;border-radius:18px;background:var(--sol);display:grid;place-items:center;flex:none;border:2px solid var(--choco)}
.horario .icono svg{width:28px;height:28px;color:var(--choco)}
.horario h3{margin:0 0 2px;font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.horario p{margin:0;color:var(--tinta-2);font-size:.94rem}

/* Ganadores */
.ganadores{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
@media(min-width:760px){.ganadores{grid-template-columns:repeat(4,1fr)}}
.ganador{margin:0;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--choco-2)}
.ganador img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .4s}
.ganador:hover img{transform:scale(1.05)}
.ganador figcaption{position:absolute;inset:auto 10px 10px 10px;background:var(--sol);color:var(--choco);border-radius:14px;padding:10px;text-align:center}
.ganador figcaption b{display:block;font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.03em;line-height:1.1}
.ganador figcaption span{font-size:.76rem;font-weight:600}
.ganador--video{aspect-ratio:auto;grid-column:span 2;background:#000;border:4px solid var(--sol)}
@media(min-width:760px){.ganador--video{grid-column:span 1;grid-row:span 2}}
.ganador--video video{width:100%;height:100%;object-fit:cover}
.seccion--oscura .lead{color:#e9dcb6}
.seccion--oscura .h2{color:var(--crema)}

/* Juego responsable */
.responsable{background:#fff;border:3px solid var(--choco);color:var(--choco);border-radius:30px;padding:34px 26px;display:grid;gap:22px;box-shadow:10px 10px 0 var(--sol)}
@media(min-width:860px){.responsable{grid-template-columns:auto 1fr;padding:44px}}
.responsable .sello{width:96px;height:96px;border-radius:50%;background:var(--choco);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:2rem;color:var(--sol);rotate:-8deg}
.responsable h2{font-size:clamp(1.8rem,5vw,2.4rem)}
.responsable ul{margin:14px 0 0;padding-left:20px;color:var(--tinta-2)}
.responsable li{margin:7px 0}
.responsable a{font-weight:800;color:var(--choco)}

/* Preguntas */
.preguntas{max-width:780px;margin:36px auto 0}
.preguntas details{background:var(--crema);border:2px solid var(--choco);border-radius:18px;margin-bottom:12px;padding:0 22px}
.preguntas summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.01em;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:12px}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:'+';flex:none;width:32px;height:32px;border-radius:50%;background:var(--choco);color:var(--sol);display:grid;place-items:center;font-size:1.3rem;line-height:1;transition:rotate .2s}
.preguntas details[open] summary::after{rotate:45deg}
.preguntas details p{margin:0 0 20px;color:var(--tinta-2)}

/* Cierre y pie */
.cierre{text-align:center;background:var(--choco);color:var(--crema);overflow:hidden;isolation:isolate}
.cierre::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:1400px;height:1400px;translate:-50% -50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,10,.10) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 50%);mask:radial-gradient(circle,#000 0,transparent 50%);animation:girar 120s linear infinite}
.cierre h2{font-size:clamp(2.4rem,8vw,4.4rem);color:var(--sol)}
.cierre .lead{color:#e9dcb6}
.pie{padding:34px 0 96px;background:var(--choco);border-top:1px solid rgba(255,214,10,.2);font-size:.85rem;color:#c9b98c}
.pie .envoltura{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between}
.pie nav{display:flex;gap:18px;flex-wrap:wrap}
.pie a{color:var(--sol)}

/* Botón flotante */
.flotante{position:fixed;right:16px;bottom:16px;z-index:30;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 12px 26px -10px rgba(0,0,0,.5);animation:latir 2.6s ease-in-out infinite}
.flotante svg{width:30px;height:30px;color:#fff}
@keyframes latir{0%,100%{box-shadow:0 0 0 0 rgba(31,168,85,.55),0 12px 26px -10px rgba(0,0,0,.5)}60%{box-shadow:0 0 0 16px rgba(31,168,85,0),0 12px 26px -10px rgba(0,0,0,.5)}}

/* Aparición al hacer scroll */
.aparece{opacity:0;translate:0 24px;transition:opacity .6s ease,translate .6s ease}
.aparece.visto{opacity:1;translate:0 0}

/* Páginas de texto (reglas, privacidad) */
.documento{max-width:760px;margin:0 auto;padding:48px 0 80px}
.documento h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(2.2rem,7vw,3.2rem);color:var(--choco);margin-bottom:8px}
.documento h2{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--choco);margin:34px 0 8px}
.documento p,.documento li{color:var(--tinta-2)}
.documento .fecha{font-size:.85rem}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before{animation:none!important;transition:none!important}.aparece{opacity:1;translate:0 0}}