:root{
  --fondo:#F2F5F1; --fondo-2:#E8EEE7; --superficie:#FFFFFF;
  --tinta:#141A15; --tinta-2:#4C5C4F; --borde:#D4DED2;
  --ambar:#C97C05; --ambar-viva:#EFA92B;
  --cta-bg:#12432D; --cta-tinta:#F2F5F1; --cta-bg-hover:#1B6844;
  --banda-bg:#12432D; --banda-tinta:#E7EFE8; --banda-tinta-2:#A6C3B1; --banda-borde:rgba(255,255,255,.16);
  --tarjeta-bg:#12432D; --tarjeta-tinta:#F0F4EE;
  --sombra:0 1px 2px rgba(20,26,21,.05), 0 12px 28px -18px rgba(20,26,21,.35);
  --ancho:70rem; --prosa:36rem;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-texto:"Source Serif 4",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#0E130F; --fondo-2:#141B15; --superficie:#18211A;
    --tinta:#E9EEE7; --tinta-2:#A0B1A3; --borde:#2A3629;
    --ambar:#EFAF33; --ambar-viva:#F5C45E;
    --cta-bg:#3FBF86; --cta-tinta:#07170F; --cta-bg-hover:#5AD09B;
    --banda-bg:#0A2419; --banda-tinta:#DEEADF; --banda-tinta-2:#8FAF9A; --banda-borde:rgba(255,255,255,.10);
    --tarjeta-bg:#0F3A27; --tarjeta-tinta:#EAF1E9;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --fondo:#0E130F; --fondo-2:#141B15; --superficie:#18211A;
  --tinta:#E9EEE7; --tinta-2:#A0B1A3; --borde:#2A3629;
  --ambar:#EFAF33; --ambar-viva:#F5C45E;
  --cta-bg:#3FBF86; --cta-tinta:#07170F; --cta-bg-hover:#5AD09B;
  --banda-bg:#0A2419; --banda-tinta:#DEEADF; --banda-tinta-2:#8FAF9A; --banda-borde:rgba(255,255,255,.10);
  --tarjeta-bg:#0F3A27; --tarjeta-tinta:#EAF1E9;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  background:var(--fondo); color:var(--tinta);
  font-family:var(--f-texto); font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:var(--f-display); text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
img,svg{display:block}

.env{width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:1.5rem}
.prosa{max-width:var(--prosa)}
.prosa p + p{margin-top:1rem}

.etiqueta{
  font-family:var(--f-display); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; color:var(--tinta-2);
}

/* ---------- cabecera ---------- */
.cab{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--borde);
}
.cab .env{display:flex; align-items:center; gap:1.25rem; min-height:4rem}
.marca{display:flex; align-items:baseline; gap:.6rem; text-decoration:none; margin-right:auto}
.marca b{font-family:var(--f-display); font-weight:800; font-size:1.22rem; font-stretch:105%; letter-spacing:-.025em}
.marca span{font-family:var(--f-display); font-size:.72rem; font-weight:500; color:var(--tinta-2); letter-spacing:.02em}
.cab nav{display:none; gap:1.5rem}
.cab nav a{font-family:var(--f-display); font-size:.85rem; font-weight:500; text-decoration:none; color:var(--tinta-2)}
.cab nav a:hover{color:var(--tinta)}
@media (min-width:820px){ .cab nav{display:flex} .marca span{border-left:1px solid var(--borde); padding-left:.6rem} }
.cab .btn{white-space:nowrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-display); font-size:.92rem; font-weight:600;
  padding:.7rem 1.25rem; border-radius:2px; border:1px solid transparent;
  background:var(--cta-bg); color:var(--cta-tinta); text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{background:var(--cta-bg-hover)}
.btn:active{transform:translateY(1px)}
.btn-fantasma{background:transparent; color:var(--tinta); border-color:var(--borde)}
.btn-fantasma:hover{background:var(--fondo-2); border-color:var(--tinta-2)}
.btn-grande{padding:.9rem 1.6rem; font-size:1rem; width:100%}
:focus-visible{outline:2px solid var(--ambar); outline-offset:3px; border-radius:2px}

/* ---------- hero ---------- */
.hero{padding:3.5rem 0 3rem}
.hero .env{display:grid; grid-template-columns:minmax(0,1fr); gap:2.75rem}
@media (min-width:900px){
  .hero{padding:5rem 0 4.5rem}
  .hero .env{grid-template-columns:1.08fr .8fr; align-items:center; gap:3.5rem}
}
.hero h1{
  font-size:clamp(2.05rem,4.6vw,3.15rem); font-weight:800; font-stretch:108%;
  line-height:1.03; letter-spacing:-.028em;
}
.hero h1 em{font-style:normal; color:var(--ambar)}
.hero .entradilla{margin-top:1.35rem; font-size:1.1rem; color:var(--tinta-2); max-width:33rem}
.hero-acciones{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.sellos{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--borde)}
.sellos li{display:flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-size:.83rem; font-weight:500; color:var(--tinta-2)}
.sellos svg{flex:none; color:var(--ambar)}
ul{margin:0; padding:0; list-style:none}

/* ---------- fotos ---------- */
.escena{display:grid; place-items:center; margin:0}
.escena-foto img{
  width:100%; max-width:27rem; height:auto; border-radius:6px; box-shadow:var(--sombra);
}
.foto-ancha{margin:2.5rem 0 0}
.foto-ancha img, .galeria img{width:100%; height:auto; border-radius:4px; display:block}
.galeria{display:grid; gap:1rem; margin-top:2rem}
@media (min-width:760px){ .galeria{grid-template-columns:repeat(3,1fr)} .galeria img{aspect-ratio:4/3; object-fit:cover} }
.galeria figure{margin:0}
.galeria figcaption{
  margin-top:.6rem; font-family:var(--f-display); font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:var(--banda-tinta-2);
}

/* ---------- secciones ---------- */
.seccion{padding:4rem 0; border-top:1px solid var(--borde)}
.seccion h2{font-size:clamp(1.55rem,3.2vw,2.15rem); font-weight:700; font-stretch:104%; letter-spacing:-.022em; line-height:1.12}
.seccion .etiqueta{display:block; margin-bottom:.7rem}
.seccion h2 + .prosa, .seccion h2 + p{margin-top:1.15rem}

.banda{background:var(--banda-bg); color:var(--banda-tinta); border-top:0}
.banda h2{color:var(--banda-tinta)}
.banda .etiqueta{color:var(--banda-tinta-2)}
.banda p{color:var(--banda-tinta)}
.banda .apagado{color:var(--banda-tinta-2)}
/* El botón verde desaparece sobre la banda verde: dentro de ella va en ámbar. */
.banda .btn:not(.btn-fantasma){background:var(--ambar-viva); color:#141A15}
.banda .btn:not(.btn-fantasma):hover{background:#F5C45E}
.banda .caja-form .btn:not(.btn-fantasma){background:var(--cta-bg); color:var(--cta-tinta)}
.banda .caja-form .btn:not(.btn-fantasma):hover{background:var(--cta-bg-hover)}

.remate{font-family:var(--f-display); font-weight:700; font-size:1.15rem; font-stretch:102%; letter-spacing:-.01em; margin-top:1.5rem}

/* ---------- pasos ---------- */
.pasos{display:grid; gap:0; margin-top:2.5rem; border-top:1px solid var(--banda-borde)}
@media (min-width:780px){ .pasos{grid-template-columns:repeat(3,1fr)} }
.paso{padding:1.6rem 0; border-bottom:1px solid var(--banda-borde)}
@media (min-width:780px){
  .paso{padding:1.75rem 1.75rem 2rem 0; border-bottom:0; border-right:1px solid var(--banda-borde)}
  .paso:last-child{border-right:0; padding-right:0}
  .paso + .paso{padding-left:1.75rem}
}
.paso .num{
  font-family:var(--f-display); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  color:var(--ambar-viva); display:block; margin-bottom:.6rem;
}
.paso h3{font-size:1.08rem; font-weight:700; margin-bottom:.45rem}
.paso p{font-size:.98rem; color:var(--banda-tinta-2)}

/* ---------- precios ---------- */
.precios{display:grid; gap:1rem; margin-top:2.5rem}
@media (min-width:800px){ .precios{grid-template-columns:repeat(3,1fr); align-items:start} }
.plan{
  background:var(--superficie); border:1px solid var(--borde); border-radius:4px;
  padding:1.6rem 1.5rem 1.75rem; display:flex; flex-direction:column; gap:1rem;
}
.plan-destacado{border-color:var(--cta-bg); border-width:2px; box-shadow:var(--sombra)}
.plan .cinta{
  font-family:var(--f-display); font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; color:var(--ambar); min-height:1rem;
}
.plan h3{font-size:1.12rem; font-weight:700}
.plan .cifra{
  font-family:var(--f-display); font-size:2.7rem; font-weight:800; font-stretch:104%;
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.plan .cifra sup{font-size:1.1rem; font-weight:600; vertical-align:super; margin-left:.12em}
.plan .unidad{font-size:.9rem; color:var(--tinta-2); margin-top:.35rem}
.plan ul{display:grid; gap:.5rem; font-size:.95rem; color:var(--tinta-2); flex:1}
.plan li{display:flex; gap:.55rem; align-items:flex-start}
.plan li svg{flex:none; margin-top:.42em; color:var(--ambar)}

.volumen{
  margin-top:1rem; background:var(--fondo-2); border:1px solid var(--borde); border-radius:4px;
  padding:1.35rem 1.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
}
.volumen div{flex:1 1 22rem}
.volumen h3{font-size:1.02rem; font-weight:700; margin-bottom:.3rem}
.volumen p{font-size:.95rem; color:var(--tinta-2)}
.nota-precios{margin-top:1.5rem; font-size:.95rem; color:var(--tinta-2); max-width:40rem}

.aviso-preventa{
  margin-top:2rem; border-left:3px solid var(--ambar); background:var(--fondo-2);
  padding:.9rem 1.15rem; font-size:.95rem; color:var(--tinta-2);
}

/* ---------- ruta del toque ---------- */
.rutas{margin-top:2.25rem; display:grid; gap:1rem}
@media (min-width:760px){ .rutas{grid-template-columns:1fr 1fr} }
.ruta{
  background:var(--superficie); border:1px solid var(--borde); border-radius:4px;
  padding:1.5rem; display:flex; flex-direction:column; gap:1.1rem;
}
.ruta-directa{border-color:var(--cta-bg); border-width:2px; box-shadow:var(--sombra)}
.ruta .etiqueta{margin:0}
.ruta-directa .etiqueta{color:var(--ambar)}
.ruta-pasos{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .55rem}
.ruta-pasos span{
  font-family:var(--f-display); font-size:.85rem; font-weight:600; white-space:nowrap;
  padding:.45rem .8rem; border:1px solid var(--borde); border-radius:3px; background:var(--fondo);
}
.ruta-pasos i{font-style:normal; color:var(--tinta-2)}
.ruta-pasos .ruta-medio{border-style:dashed; border-color:var(--ambar); color:var(--ambar)}
.ruta-pasos .ruta-google{background:var(--cta-bg); border-color:var(--cta-bg); color:var(--cta-tinta)}
.ruta p{font-size:.95rem; color:var(--tinta-2)}
.comparativa ul{display:grid; gap:.6rem}
.comparativa li{display:grid; grid-template-columns:1rem 1fr; gap:.55rem; font-size:.95rem; color:var(--tinta-2)}
.comparativa li::before{content:"–"; color:var(--tinta-2)}
.comparativa .ruta-directa li{color:var(--tinta)}
.comparativa .ruta-directa li::before{content:"✓"; color:var(--ambar); font-weight:700}

/* ---------- faq ---------- */
.faq{margin-top:2rem; border-top:1px solid var(--borde)}
.faq details{border-bottom:1px solid var(--borde)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.05rem 2.5rem 1.05rem 0; position:relative;
  font-family:var(--f-display); font-weight:600; font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:.25rem; top:.95rem;
  font-size:1.35rem; font-weight:400; color:var(--ambar); line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
.faq .respuesta{padding:0 0 1.25rem; max-width:var(--prosa); color:var(--tinta-2)}
.faq .respuesta p + p{margin-top:.8rem}

/* ---------- cierre y pie ---------- */
.cierre .env{display:grid; gap:1.5rem}
@media (min-width:860px){ .cierre .env{grid-template-columns:1.2fr .8fr; align-items:center; gap:3rem} }

.pie{background:var(--fondo-2); border-top:1px solid var(--borde); padding:2.5rem 0; font-size:.9rem; color:var(--tinta-2)}
.pie .env{display:grid; gap:1.5rem}
@media (min-width:760px){ .pie .env{grid-template-columns:1.4fr 1fr; gap:3rem} }
.pie a{color:var(--tinta-2); text-decoration-color:var(--borde); text-underline-offset:3px}
.pie a:hover{color:var(--tinta)}
.pie-enlaces{display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-family:var(--f-display); font-size:.85rem}
.pie-legal{margin-top:1.25rem; font-size:.8rem; line-height:1.6}
.marca-madre{font-family:var(--f-display); font-size:.9rem; color:var(--tinta)}

/* ================= formularios ================= */
.formulario{display:grid; gap:1rem}
.campo{display:grid; gap:.4rem}
.campo label{font-family:var(--f-display); font-size:.82rem; font-weight:600; letter-spacing:.01em}
.campo .ayuda{font-family:var(--f-texto); font-size:.85rem; color:var(--tinta-2); font-weight:400}
.campo input{
  font-family:var(--f-texto); font-size:1rem; color:var(--tinta);
  background:var(--superficie); border:1px solid var(--borde); border-radius:3px;
  padding:.7rem .85rem; width:100%;
}
.campo input::placeholder{color:var(--tinta-2); opacity:.62}
.campo input:focus-visible{border-color:var(--cta-bg); outline:2px solid var(--ambar); outline-offset:1px}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consiente{display:grid; gap:.7rem; margin-top:.25rem}
.consiente label{
  display:grid; grid-template-columns:1.15rem 1fr; gap:.65rem; align-items:start;
  font-size:.9rem; line-height:1.5; color:var(--tinta-2); cursor:pointer;
}
.consiente input{margin-top:.2rem; accent-color:var(--cta-bg); width:1.15rem; height:1.15rem}
.consiente a{color:var(--tinta); text-underline-offset:3px}
.aviso-form{
  font-size:.82rem; line-height:1.55; color:var(--tinta-2);
  border-top:1px solid var(--borde); padding-top:.9rem; margin-top:.25rem;
}
.respuesta-form{
  display:none; padding:1rem 1.15rem; border-radius:3px; font-size:.95rem;
  border-left:3px solid var(--ambar); background:var(--fondo-2);
}
.respuesta-form.visible{display:block}
.respuesta-form.bien{border-left-color:var(--cta-bg)}

/* ================= sorteo ================= */
.contador{
  display:inline-flex; align-items:baseline; gap:.5rem; margin-bottom:1.25rem;
  font-family:var(--f-display); font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ambar);
}
.contador::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--ambar); align-self:center}
.rejilla-21{
  display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; margin-top:2rem;
  max-width:22rem;
}
.rejilla-21 span{
  aspect-ratio:1; display:grid; place-items:center; border-radius:2px;
  border:1px solid var(--banda-borde); font-family:var(--f-display);
  font-size:.72rem; font-weight:600; color:var(--banda-tinta-2);
  font-variant-numeric:tabular-nums;
}
.rejilla-21 span.dado{background:var(--ambar); border-color:var(--ambar); color:#231502}
.caja-form{
  background:var(--superficie); border:1px solid var(--borde); border-radius:4px;
  padding:1.75rem 1.6rem; box-shadow:var(--sombra);
  color:var(--tinta); /* la caja es clara aunque este dentro de una banda oscura */
}
.caja-form h2, .caja-form label, .caja-form .campo label{color:var(--tinta)}
.caja-form h2{font-size:1.28rem; font-weight:700; margin-bottom:.4rem}
.caja-form > p{font-size:.95rem; color:var(--tinta-2); margin-bottom:1.35rem}

/* ================= documentos legales ================= */
.doc{padding:3rem 0 4rem}
.doc .env{max-width:46rem}
.doc h1{font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; letter-spacing:-.025em; line-height:1.1}
.doc .fecha{margin-top:.85rem; font-family:var(--f-display); font-size:.82rem; color:var(--tinta-2)}
.doc h2{
  font-size:1.18rem; font-weight:700; letter-spacing:-.01em;
  margin:2.5rem 0 .85rem; padding-top:1.5rem; border-top:1px solid var(--borde);
}
.doc h3{font-size:1rem; font-weight:600; margin:1.5rem 0 .5rem}
.doc p, .doc li{color:var(--tinta-2)}
.doc p + p, .doc ul + p, .doc ol + p, .doc p + ul, .doc p + ol{margin-top:.9rem}
.doc ul, .doc ol{padding-left:1.3rem; display:grid; gap:.45rem}
.doc ul{list-style:disc}
.doc ol{list-style:decimal}
.doc li::marker{color:var(--ambar)}
.doc strong{color:var(--tinta); font-weight:600}
.doc a{color:var(--tinta); text-underline-offset:3px}
.doc .ficha{
  background:var(--fondo-2); border:1px solid var(--borde); border-radius:4px;
  padding:1.25rem 1.4rem; margin-top:1.25rem; font-size:.95rem; line-height:1.75;
}
.doc .ficha b{font-family:var(--f-display); font-size:.82rem; text-transform:uppercase; letter-spacing:.09em; color:var(--tinta)}
.doc .tabla{overflow-x:auto; margin-top:1.25rem; border:1px solid var(--borde); border-radius:4px}
.doc table{border-collapse:collapse; width:100%; font-size:.94rem; min-width:26rem}
.doc th, .doc td{text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--borde); color:var(--tinta-2)}
.doc th{font-family:var(--f-display); font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; color:var(--tinta); background:var(--fondo-2)}
.doc tr:last-child td{border-bottom:0}
.doc td:last-child{font-variant-numeric:tabular-nums}
.volver{
  display:inline-flex; align-items:center; gap:.45rem; margin-bottom:1.75rem;
  font-family:var(--f-display); font-size:.85rem; font-weight:500;
  color:var(--tinta-2); text-decoration:none;
}
.volver:hover{color:var(--tinta)}

/* ================= franja del sorteo ================= */
.franja-sorteo{
  margin-top:2rem; background:var(--fondo-2); border:1px solid var(--borde);
  border-left:3px solid var(--ambar); border-radius:4px;
  padding:1.5rem 1.6rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
}
.franja-sorteo div{flex:1 1 24rem}
.franja-sorteo h3{font-family:var(--f-display); font-size:1.08rem; font-weight:700; margin-bottom:.35rem}
.franja-sorteo p{font-size:.95rem; color:var(--tinta-2)}

/* ================= garantía: un golpe, no un capítulo ================= */
.garantia{padding:3.25rem 0; border-bottom:1px solid var(--banda-borde)}
.garantia h2{
  font-size:clamp(1.95rem,4.6vw,3.1rem); font-weight:800; font-stretch:106%;
  letter-spacing:-.03em; line-height:1.05; max-width:23ch;
}
.garantia h2 em{font-style:normal; color:var(--ambar-viva)}
.garantia .apoyo{margin-top:1.15rem; font-size:1.05rem; max-width:46ch}
.garantia .detalle{
  margin-top:1.5rem; display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--f-display); font-size:.88rem; font-weight:600;
  color:var(--ambar-viva); text-underline-offset:4px;
}

[hidden]{display:none !important}

/* ================= pedido ================= */
.pedir{max-width:44rem}
.pedir h1{margin-top:1rem; font-size:clamp(2rem,4.4vw,2.8rem); font-weight:800; letter-spacing:-.026em; line-height:1.08}
.pedir .entradilla{margin-top:1rem; font-size:1.08rem; color:var(--tinta-2)}
.pedir .formulario{margin-top:2.25rem; gap:1.5rem}
.paso-pedido{border:1px solid var(--borde); border-radius:4px; background:var(--superficie); padding:1.35rem 1.25rem 1.4rem; margin:0; min-width:0; display:grid; gap:.9rem}
.paso-pedido legend{
  float:left; width:100%; display:flex; align-items:center; gap:.65rem; padding:0;
  font-family:var(--f-display); font-size:1.08rem; font-weight:700; letter-spacing:-.01em;
}
.paso-pedido legend + *{clear:both}
.paso-pedido .num{
  flex:none; display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--cta-bg); color:var(--cta-tinta); font-size:.85rem; font-weight:700;
}
.ayuda-paso{font-size:.9rem; color:var(--tinta-2)}

.buscador{position:relative; display:grid; gap:.4rem}
.buscador label{font-family:var(--f-display); font-size:.82rem; font-weight:600}
.buscador input{
  font-family:var(--f-texto); font-size:1.05rem; color:var(--tinta); width:100%;
  background:var(--fondo); border:1px solid var(--borde); border-radius:3px; padding:.8rem .9rem;
}
.buscador input:focus-visible{border-color:var(--cta-bg); outline:2px solid var(--ambar); outline-offset:1px}
.resultados{
  position:absolute; z-index:5; top:100%; left:0; right:0; margin-top:.3rem;
  background:var(--superficie); border:1px solid var(--borde); border-radius:4px; box-shadow:var(--sombra); overflow:hidden;
}
.resultados li{display:grid; gap:.1rem; padding:.7rem .9rem; cursor:pointer; border-bottom:1px solid var(--borde)}
.resultados li b{font-family:var(--f-display); font-size:.95rem; font-weight:600}
.resultados li span{font-size:.85rem; color:var(--tinta-2)}
.resultados li[aria-selected="true"], .resultados li[role="option"]:hover{background:var(--fondo-2)}
.resultados .atribucion{cursor:default; border-bottom:0; padding:.45rem .9rem; font-family:var(--f-display); font-size:.7rem; letter-spacing:.04em; color:var(--tinta-2); text-align:right}

.elegido{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  border:2px solid var(--cta-bg); border-radius:4px; padding:1rem 1.1rem; background:var(--fondo);
}
.elegido div{display:grid; gap:.2rem}
.elegido .etiqueta{color:var(--ambar)}
.elegido b{font-family:var(--f-display); font-size:1.08rem}
.elegido span:last-child{font-size:.92rem; color:var(--tinta-2)}

.opciones{display:grid; gap:.65rem}
@media (min-width:560px){ .opciones{grid-template-columns:repeat(3,1fr)} .opciones.idiomas{grid-template-columns:repeat(2,1fr)} }
.opcion{position:relative; cursor:pointer}
.opcion input{position:absolute; opacity:0; pointer-events:none}
.opcion > span{
  display:grid; gap:.2rem; height:100%; padding:.95rem 1rem; border:1px solid var(--borde); border-radius:4px; background:var(--fondo);
  transition:border-color .15s, box-shadow .15s;
}
.opcion b{font-family:var(--f-display); font-size:1rem; font-weight:700}
.opcion i{font-style:normal; font-size:.9rem; color:var(--tinta-2)}
.opcion img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:3px; margin-bottom:.55rem}
.opcion input:checked + span{border-color:var(--cta-bg); box-shadow:0 0 0 1px var(--cta-bg) inset}
.opcion input:focus-visible + span{outline:2px solid var(--ambar); outline-offset:2px}
.pedir .btn-grande{width:100%}
.pedir .btn-grande:disabled{opacity:.6; cursor:wait}

/* ================= panel de pedidos ================= */
.panel-pedidos .env{max-width:64rem}
.panel-pedidos h1{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem}
.estado{
  display:inline-block; font-family:var(--f-display); font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:.25rem .55rem; border-radius:3px; background:var(--fondo-2); color:var(--tinta-2); vertical-align:middle;
}
.estado-pagado{background:var(--ambar); color:#fff}
.estado-grabado{background:var(--cta-bg); color:var(--cta-tinta)}
.estado-enviado{background:transparent; border:1px solid var(--borde)}
.estado-cancelado{text-decoration:line-through}
.aviso-panel{border-left:3px solid var(--cta-bg)}
.alerta-panel{border-left:3px solid var(--ambar); color:var(--tinta)}
.marca-alerta{display:inline-grid; place-items:center; min-width:1.25rem; height:1.25rem; border-radius:50%; background:var(--ambar); color:#fff; font-family:var(--f-display); font-size:.7rem; font-weight:700}
.filtros{display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-top:1.5rem; font-family:var(--f-display); font-size:.9rem}
.filtros a{text-decoration:none; color:var(--tinta-2)}
.filtros a[aria-current]{color:var(--tinta); font-weight:700; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--ambar)}
.filtros span{font-size:.78rem; opacity:.7}
.grabar{display:grid; gap:1.5rem; margin-top:1rem; padding:1.4rem; border:1px solid var(--borde); border-radius:4px; background:var(--superficie)}
.grabar .etiqueta{display:block; margin-bottom:.4rem}
.grabar-datos{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); align-items:start}
.panel-pedidos .dato{margin:0}
.clave{
  display:block; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.35rem; font-weight:700; letter-spacing:.06em;
  color:var(--tinta); background:var(--fondo-2); border-radius:3px; padding:.5rem .7rem; margin-bottom:.6rem;
}
.clave-enlace{font-size:.85rem; letter-spacing:0; font-weight:500; overflow-wrap:anywhere}
.acciones{display:flex; flex-wrap:wrap; gap:.6rem}
.acciones .btn, .grabar-datos .btn{padding:.5rem .9rem; font-size:.85rem}
.fila-form{display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem; margin-top:1.1rem}
.fila-form .campo{flex:1 1 20rem}
.pasos-grabar{margin:0}
.campo textarea{
  font-family:var(--f-texto); font-size:1rem; color:var(--tinta); width:100%;
  background:var(--superficie); border:1px solid var(--borde); border-radius:3px; padding:.7rem .85rem;
}