/* Es por Langreo · Participaciones Lotería de Navidad */
:root{
  --navy-deep:#0b1530;
  --navy:#101f45;
  --navy-soft:#16295c;
  --gold:#cfa233;
  --gold-bright:#e6c568;
  --cream:#f7f1e1;
  --cream-card:#fbf7ec;
  --burgundy:#8f1f2b;
  --forest:#1e5b3a;
  --ink:#221a0e;
  --line:rgba(207,162,51,0.35);
  color-scheme: dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
  :root{
  --page-bg:var(--navy-deep);
  --panel-bg:var(--cream-card);
  --panel-text:var(--ink);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page-bg:#070c1c;
    --panel-bg:#efe7d2;
  }
}
:root[data-theme="dark"]{
  --page-bg:#070c1c;
  --panel-bg:#efe7d2;
}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
*{box-sizing:inherit;}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--cream);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif; margin:0; letter-spacing:.01em;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  width:100%;
  max-width:896px;
  margin:0 auto;
}
.hero img{
  width:100%;
  height:auto;
}
.hero-veil{
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(11,21,48,0) 78%, rgba(7,10,25,0.55) 100%);
}

/* ---------- CTA BAND (reemplaza el "¡DE VENTA AQUÍ!") ---------- */
.cta-band{
  background:
    radial-gradient(ellipse at 50% 0%, #16295c 0%, #0c1836 55%, #070c1c 100%);
  padding:2.6rem 1.5rem 3.4rem;
  text-align:center;
  position:relative;
}
.cta-band::before{
  content:"";
  display:block;
  width:64px; height:2px;
  background:var(--gold);
  margin:0 auto 1.4rem;
  opacity:.7;
}
.cta-eyebrow{
  font-size:.8rem;
  color:var(--gold-bright);
  letter-spacing:.08em;
  margin-bottom:.6rem;
  font-weight:500;
}
.cta-button{
  display:inline-block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:700;
  font-style:italic;
  font-size:clamp(2.6rem, 9vw, 4.4rem);
  line-height:1;
  color:var(--gold-bright);
  text-decoration:none;
  background:none;
  border:none;
  padding:.2em .1em;
  cursor:pointer;
  text-shadow:
    0 1px 0 #7a5a12,
    0 2px 10px rgba(0,0,0,.55);
  transition:transform .25s ease, text-shadow .25s ease, color .25s ease;
}
.cta-button:hover, .cta-button:focus-visible{
  color:#fff3cf;
  transform:translateY(-2px) scale(1.015);
  text-shadow:
    0 1px 0 #7a5a12,
    0 4px 18px rgba(207,162,51,.55);
}
.cta-button:focus-visible{outline:2px solid var(--gold-bright); outline-offset:6px; border-radius:6px;}
.cta-sub{
  margin-top:.9rem;
  font-size:.95rem;
  color:#cbd3ec;
  max-width:30em;
  margin-left:auto; margin-right:auto;
}
.cta-arrow{
  display:block;
  margin:1.6rem auto 0;
  width:22px; height:22px;
  border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:rotate(45deg);
  opacity:.75;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:rotate(45deg) translate(0,0);}
  50%{transform:rotate(45deg) translate(4px,4px);}
}
@media (prefers-reduced-motion: reduce){
  .cta-arrow{animation:none;}
}

/* ---------- FORM SECTION ---------- */
.solicitud{
  color-scheme:light;
  background:var(--cream);
  color:var(--ink);
  padding:3.4rem 1.4rem 4rem;
}
.panel{
  max-width:600px;
  margin:0 auto;
  background:var(--panel-bg);
  color:var(--panel-text);
  border:1px solid rgba(34,26,14,.12);
  border-radius:4px;
  padding:2.2rem 1.8rem 2.4rem;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.35);
}
.panel h2{
  font-size:clamp(1.7rem,4vw,2.1rem);
  color:var(--burgundy);
  text-align:center;
}
.panel .kicker{
  text-align:center;
  font-size:.85rem;
  color:var(--forest);
  font-weight:600;
  margin-bottom:.3rem;
}
.resumen{
  display:flex; justify-content:center; gap:1.4rem; flex-wrap:wrap;
  margin:1.3rem 0 1.8rem;
  padding:.9rem 1rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.resumen div{text-align:center;}
.resumen b{display:block; font-size:1.05rem; color:var(--ink);}
.resumen span{color:#6b5c3a;}

form{display:flex; flex-direction:column; gap:1.1rem; margin-top:.4rem;}
label{font-size:.82rem; font-weight:600; letter-spacing:.02em; display:block; margin-bottom:.35rem;}
.req{color:var(--burgundy);}
input[type=text], input[type=tel], input[type=email], input[type=number]{
  width:100%;
  padding:.72rem .8rem;
  border:1px solid #c9bd9c;
  border-radius:3px;
  font-size:1rem;
  font-family:inherit;
  background:#fff;
  color:var(--ink);
}
input:focus-visible{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}
.hint{font-size:.76rem; color:#6b5c3a; margin-top:.3rem;}
.error-msg{font-size:.78rem; color:var(--burgundy); margin-top:.3rem; display:none;}
.field.invalid .error-msg{display:block;}
.field.invalid input,
input[aria-invalid="true"]{border-color:var(--burgundy); box-shadow:0 0 0 1px var(--burgundy);}
#dni{text-transform:uppercase;}

.qty-row{display:flex; align-items:center; gap:.9rem;}
.stepper{display:flex; align-items:center; border:1px solid #c9bd9c; border-radius:3px; overflow:hidden;}
.stepper button{
  width:38px; height:42px; border:none; background:#efe6cd; font-size:1.2rem; cursor:pointer; color:var(--ink);
}
.stepper button:hover{background:#e2d5ac;}
.stepper button:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}
.stepper button:disabled{opacity:.4; cursor:not-allowed;}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
.stepper input{
  -moz-appearance:textfield;
  appearance:textfield;
  width:52px; padding:0; border-radius:0; text-align:center; border:none; border-left:1px solid #c9bd9c; border-right:1px solid #c9bd9c;
  height:42px; font-size:1rem; font-family:inherit; background:#fff; color:var(--ink);
}
.total-box{
  margin-left:auto;
  text-align:right;
  font-size:.85rem;
  color:#6b5c3a;
}
.total-box output{
  display:block;
  font-size:1.5rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  color:var(--burgundy);
}

.consent{
  display:flex; gap:.65rem; align-items:flex-start;
  font-size:.82rem; line-height:1.4;
  padding-top:.3rem;
}
.consent input{margin-top:.2rem; width:18px; height:18px; flex:none; accent-color:var(--forest);}
.consent label{font-size:inherit; font-weight:400; letter-spacing:0; margin:0;}
.field.invalid .consent input{outline:2px solid var(--burgundy); outline-offset:2px;}
.consent a{color:var(--forest); text-decoration:underline; cursor:pointer; font-weight:600;}

.submit-btn{
  margin-top:.4rem;
  background:var(--forest);
  color:#fff;
  border:none;
  padding:.95rem 1.4rem;
  font-size:1rem;
  font-weight:700;
  border-radius:3px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
  font-family:inherit;
}
.submit-btn:hover{background:#164a2e;}
.submit-btn:active{transform:scale(.99);}
.submit-btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.submit-btn:disabled{background:#9aa79c; cursor:not-allowed;}

.form-intro{font-size:.78rem; color:#6b5c3a; margin:0 0 .2rem;}
.form-note{font-size:.76rem; color:#6b5c3a; text-align:center; margin-top:-.2rem;}
.form-status{
  font-size:.85rem; text-align:center; padding:.7rem; border-radius:3px; display:none;
}
.form-status.show{display:block;}
.form-status.ok{background:#e4efe3; color:var(--forest);}
.form-status a{color:var(--forest); font-weight:700;}

/* ---------- LEGAL ---------- */
.legal{
  background:var(--navy-deep);
  color:#dfe3f2;
  padding:3.2rem 1.4rem 3.6rem;
}
.legal-wrap{max-width:680px; margin:0 auto;}
.legal h2{
  color:var(--gold-bright);
  font-size:1.8rem;
  text-align:center;
  margin-bottom:1.6rem;
}
details{
  border-bottom:1px solid rgba(207,162,51,.25);
  padding:.9rem 0;
}
details:first-of-type{border-top:1px solid rgba(207,162,51,.25);}
summary{
  cursor:pointer;
  font-weight:600;
  font-size:.98rem;
  color:var(--cream);
  list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
summary::-webkit-details-marker{display:none;}
summary::after{
  content:"+";
  font-size:1.3rem;
  color:var(--gold);
  flex:none;
}
details[open] summary::after{content:"–";}
details p, details ul{
  font-size:.86rem;
  line-height:1.6;
  color:#c3c9e0;
  margin:.8rem 0 .2rem;
}
details ul{padding-left:1.1rem;}
details li{margin-bottom:.4rem;}

footer{
  background:#050912;
  color:#7d84a3;
  text-align:center;
  font-size:.76rem;
  padding:1.6rem 1.2rem calc(1.6rem + env(safe-area-inset-bottom,0px));
}
footer a{color:#a9b1d6;}

#toast{
  position:fixed; left:50%; bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));
  transform:translate(-50%, 20px);
  background:var(--navy-deep); color:var(--cream);
  border:1px solid var(--gold);
  padding:.7rem 1.1rem; border-radius:4px;
  font-size:.82rem; max-width:88vw;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:50;
}
#toast.show{opacity:1; transform:translate(-50%,0);}

/* Solo para lectores de pantalla */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .cta-button, .submit-btn, #toast{transition:none;}
}
.resumen dd{margin:0;}