/* Uvamejai · lo común a todo el sitio.
   La noche uva de Casa Taller, el papel de las libretas, el oro de las pestañas del ojo y la plata. */

:root{
  --noche:#140b1b;
  --ciruela:#1f1229;
  --ciruela-2:#2a1936;
  --ciruela-3:#382247;
  --hoja:#f4ece4;
  --hoja-2:#e9dccf;
  --tinta:#23172a;
  --tinta-suave:#605067;
  --crema:#f2ebf2;
  --crema-suave:#b9aabf;
  --plata:#cfcbd9;
  --uva:#7a3b9c;
  --uva-clara:#b58fd0;
  --oro:#e3b24c;
  --oro-claro:#f1cd78;
  --oro-hondo:#a3740f;
  --turquesa:#1ba6bc;
  --rojo:#b8402f;
  --linea:rgba(242,235,242,.14);
  --linea-tinta:rgba(35,23,42,.16);

  --display:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --texto:'Hanken Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --mano:'Kalam','Segoe Print','Bradley Hand',cursive;
  --pluma:'Caveat','Kalam',cursive;

  --lado:clamp(16px,5vw,72px);
  --arco:999px 999px 26px 26px;
  --curva:cubic-bezier(.2,.7,.2,1);
  --alto-cabecera:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--alto-cabecera) + 12px)}
html.bloqueado{overflow:hidden}
body{
  margin:0;background:var(--noche);color:var(--crema);
  font-family:var(--texto);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.visual-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:var(--oro);color:var(--tinta);padding:8px 14px;border-radius:8px;z-index:200}
.saltar:focus{left:12px}

h1,h2,h3{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:400;margin:0;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;color:var(--oro)}
p{margin:0 0 1em}
.antetitulo{
  font-family:var(--texto);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plata);margin:0 0 18px
}
.a-mano{font-family:var(--mano);color:var(--oro)}
.titulo-seccion{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.04;margin-bottom:18px}
.bajada{color:var(--crema-suave);font-size:1.08rem;max-width:38rem}

/* ---------- botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 15.5px/1.1 var(--texto);letter-spacing:.02em;text-decoration:none;text-align:center;
  padding:17px 28px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s ease,background-color .25s ease,box-shadow .25s ease,color .25s ease,border-color .25s ease;
}
.boton svg{width:18px;height:18px;flex:none}
.boton-oro{background:var(--oro);color:var(--tinta);box-shadow:0 10px 30px -12px rgba(227,178,76,.65)}
.boton-oro:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(227,178,76,.14),0 16px 34px -12px rgba(227,178,76,.75)}
.boton-linea{border-color:rgba(242,235,242,.35);color:var(--crema);background:transparent}
.boton-linea:hover{border-color:var(--crema);background:rgba(242,235,242,.06)}
.boton-tinta{background:var(--tinta);color:var(--hoja)}
.boton-tinta:hover{transform:translateY(-2px);background:#000}
.boton-ancho{width:100%}
.boton-chico{padding:12px 18px;font-size:14px}
.boton[disabled],.boton[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.enlace{background:none;border:0;padding:6px 0;font:500 14.5px var(--texto);color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.8}
.enlace:hover{opacity:1}
.icono-boton{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--linea);
  background:rgba(242,235,242,.04);color:inherit;cursor:pointer;flex:none;transition:background-color .2s,border-color .2s
}
.icono-boton:hover{background:rgba(242,235,242,.1);border-color:rgba(242,235,242,.3)}
.icono-boton svg{width:20px;height:20px}

/* ---------- cabecera ---------- */
.cabecera{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--alto-cabecera);
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--lado);
  border-bottom:1px solid transparent;
  transition:background-color .35s ease,backdrop-filter .35s ease,border-color .35s ease;
}
.cabecera.solida{background:rgba(20,11,27,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--linea)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.marca img{width:46px;height:auto}
.marca span{font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:16px;letter-spacing:.28em;text-transform:uppercase;color:var(--plata)}
.nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);font-size:14.5px;font-weight:500}
.nav a{position:relative;text-decoration:none;color:var(--crema-suave);padding:6px 0;transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--crema)}
.nav a::after{
  content:"";position:absolute;left:50%;bottom:-4px;width:7px;height:7px;transform:translateX(-50%) scale(0);
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.2 6.8L19 10l-6.8 2.2L10 19l-2.2-6.8L1 10l6.8-2.2z' fill='%23e3b24c'/%3E%3C/svg%3E");
  transition:transform .3s var(--curva)
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:translateX(-50%) scale(1)}
.cab-acciones{display:flex;align-items:center;gap:10px}
.cab-canasta,.cab-menu{
  position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(242,235,242,.05);border:1px solid var(--linea);color:var(--crema);transition:background-color .2s,border-color .2s
}
.cab-canasta:hover,.cab-menu:hover{background:rgba(242,235,242,.12);border-color:rgba(242,235,242,.3)}
.cab-canasta svg,.cab-menu svg{width:22px;height:22px}
.cab-cuenta{
  position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;
  background:var(--oro);color:var(--tinta);font:700 11.5px/21px var(--texto);text-align:center;box-shadow:0 0 0 3px var(--noche)
}
.cab-canasta.late{animation:late .6s var(--curva)}
@keyframes late{0%{transform:scale(1)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.96) rotate(3deg)}100%{transform:none}}
.cab-menu{display:none}
@media (max-width:1020px){
  .nav{display:none}
  .cab-menu{display:grid}
}
@media (max-width:420px){.marca span{display:none}}

/* ---------- lugares en la mesa (cupos) ---------- */
.mesa-cupos{margin:22px 0}
.mesa-cupos svg{display:block;width:100%;max-width:360px;height:auto;overflow:visible}
.mesa-tabla{fill:rgba(227,178,76,.07);stroke:rgba(227,178,76,.7);stroke-width:1.5}
.mesa-mantel{fill:none;stroke:rgba(227,178,76,.28);stroke-width:1;stroke-dasharray:3 5}
.mesa-vela rect{fill:var(--crema)}
.mesa-vela path{fill:var(--oro);filter:drop-shadow(0 0 5px rgba(241,205,120,.9))}
.puesto.ocupado{fill:rgba(207,203,217,.32)}
.puesto.libre circle{fill:rgba(227,178,76,.14);stroke:var(--oro);stroke-width:1.5}
.puesto.libre path{fill:var(--oro)}
.puesto.libre{transform-box:fill-box;transform-origin:center;animation:puestoLibre 3.2s ease-in-out calc(var(--i) * -.37s) infinite}
@keyframes puestoLibre{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.puesto.libre{animation:none}}
.mesa-texto{margin:10px 0 2px;font-size:1rem;color:var(--crema)}
.mesa-texto b{font-family:var(--display);font-size:1.5rem;font-weight:500;color:var(--oro);margin:0 2px}
.mesa-texto small{display:block;font-size:12.5px;color:var(--crema-suave)}
.mesa-leyenda{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--crema-suave);margin:6px 0 0}
.mesa-leyenda span{width:11px;height:11px;border-radius:50%;flex:none}
.ley-libre{border:1.5px solid var(--oro);background:rgba(227,178,76,.2)}
.ley-ocupado{background:rgba(207,203,217,.32);margin-left:10px}
.mesa-cupos.compacta{margin:12px 0}
.mesa-cupos.compacta svg{max-width:260px}
.mesa-cupos.compacta .mesa-texto{font-size:.92rem}
.mesa-cupos.compacta .mesa-texto b{font-size:1.25rem}

/* ---------- menú móvil ---------- */
.menu-movil{
  position:fixed;inset:0;z-index:90;background:
    radial-gradient(60% 40% at 80% 10%,rgba(122,59,156,.4),transparent 70%),
    radial-gradient(50% 40% at 10% 90%,rgba(227,178,76,.12),transparent 70%),var(--noche);
  display:flex;flex-direction:column;padding:0 var(--lado) 30px;overflow-y:auto;
  opacity:0;transition:opacity .3s ease;
}
.menu-movil.abierto{opacity:1}
.menu-movil-cabeza{height:var(--alto-cabecera);display:flex;align-items:center;justify-content:space-between;flex:none}
.menu-movil-lista{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:4px}
.menu-movil-lista li{opacity:0;transform:translateY(16px);transition:opacity .45s ease calc(var(--i) * 60ms + 80ms),transform .45s var(--curva) calc(var(--i) * 60ms + 80ms)}
.menu-movil.abierto li{opacity:1;transform:none}
.menu-movil-lista a{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline;text-decoration:none;padding:16px 0;border-bottom:1px solid var(--linea)}
.menu-num{font-family:var(--mano);color:var(--oro);font-size:16px;grid-row:span 2}
.menu-movil-lista b{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:400;font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.05}
.menu-movil-lista a[aria-current="page"] b{color:var(--oro);font-style:italic}
.menu-movil-lista small{color:var(--crema-suave);font-size:14px}
.menu-movil-pie{margin-top:auto;padding-top:30px;font-size:14px;color:var(--crema-suave)}
.menu-movil-pie a{color:var(--plata)}

/* ---------- diálogos ---------- */
.dialogo{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.dialogo-fondo{position:absolute;inset:0;background:rgba(10,5,14,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.dialogo-panel{position:relative;width:min(100%,560px);max-height:calc(100svh - 32px);overflow-y:auto;border-radius:24px;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .3s ease,transform .4s var(--curva)}
.dialogo.abierto .dialogo-fondo{opacity:1}
.dialogo.abierto .dialogo-panel{opacity:1;transform:none}
.dialogo-cerrar{position:absolute;top:14px;right:14px;z-index:3}

/* ---------- cajón de la canasta ---------- */
.cajon{position:fixed;inset:0;z-index:95}
.cajon-fondo{position:absolute;inset:0;background:rgba(10,5,14,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease}
.cajon-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ciruela),var(--noche));border-left:1px solid var(--linea);
  transform:translateX(100%);transition:transform .45s var(--curva);box-shadow:-30px 0 80px -30px rgba(0,0,0,.8)
}
.cajon.abierto .cajon-fondo{opacity:1}
.cajon.abierto .cajon-panel{transform:none}
.cajon-cabeza{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--linea)}
.cajon-cabeza h2{font-size:1.7rem}
.cajon-lista{list-style:none;margin:0;padding:8px 22px;overflow-y:auto;flex:1}
.cajon-lista li{display:grid;grid-template-columns:74px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--linea)}
.cajon-foto{display:block;width:74px;height:92px;border-radius:999px 999px 12px 12px;overflow:hidden;background:var(--ciruela-2);box-shadow:0 0 0 1px var(--linea)}
.cajon-foto img{width:100%;height:100%;object-fit:cover}
.cajon-lista b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:500;font-size:1.05rem;line-height:1.2}
.cajon-lista small{display:block;color:var(--crema-suave);font-size:13px;margin:2px 0 4px}
.cajon-precio{font-weight:600;color:var(--oro)}
.enlace-quitar{background:none;border:0;color:var(--crema-suave);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 0;align-self:start}
.enlace-quitar:hover{color:var(--crema)}
.cajon-pie{padding:18px 22px 24px;border-top:1px solid var(--linea);display:grid;gap:10px}
.cajon-total{display:flex;justify-content:space-between;align-items:baseline;margin:0}
.cajon-total b{font-family:var(--display);font-size:1.7rem;font-weight:500}
.cajon-nota{font-size:13px;color:var(--crema-suave);margin:0 0 6px}
.cajon-vacio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:4px}
.cajon-vacio .ilustracion{width:130px;margin-bottom:10px;opacity:.85}
.cajon-vacio p{color:var(--crema-suave);max-width:18rem}
.cajon-vacio p b{color:var(--crema);font-family:var(--display);font-size:1.3rem;font-weight:400}
.cajon-vacio .boton{margin:8px 0 4px}
.miniatura-dibujo{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(80% 60% at 50% 40%,rgba(122,59,156,.35),var(--ciruela-2))}
.miniatura-dibujo .ilustracion{width:80%}

/* ---------- aviso ---------- */
.aviso{
  position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,160%);
  background:var(--hoja);color:var(--tinta);padding:13px 20px;border-radius:999px;font-size:14.5px;font-weight:500;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7);transition:transform .45s var(--curva);max-width:calc(100vw - 32px);text-align:center
}
.aviso.visible{transform:translate(-50%,0)}
@media (max-width:760px){.aviso{bottom:auto;top:calc(var(--alto-cabecera) + 8px);transform:translate(-50%,-220%)}.aviso.visible{transform:translate(-50%,0)}}
.aviso a{font-weight:700}

/* ---------- ayuda ---------- */
.ayuda{
  position:fixed;right:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:9px;
  background:rgba(207,203,217,.94);color:var(--tinta);text-decoration:none;font-weight:600;font-size:14px;
  padding:11px 16px 11px 13px;border-radius:999px;box-shadow:0 14px 34px -12px rgba(0,0,0,.6);
  transform:translateY(160%);transition:transform .45s var(--curva),background-color .2s
}
.ayuda svg{width:20px;height:20px}
.ayuda.visible{transform:none}
.ayuda:hover{background:#ece9f2}
@media (max-width:560px){.ayuda span{display:none}.ayuda{padding:13px}}

/* ---------- cinta de plantilla ---------- */
.cinta-prueba{
  position:fixed;left:14px;bottom:14px;z-index:55;margin:0;max-width:min(360px,calc(100vw - 100px));
  background:rgba(20,11,27,.9);border:1px dashed rgba(227,178,76,.6);color:var(--crema-suave);
  font-size:11.5px;line-height:1.35;padding:8px 12px;border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:opacity .4s ease,transform .4s ease
}
.cinta-prueba.retirada{opacity:0;transform:translateY(12px)}
.cinta-prueba b{color:var(--oro);font-weight:600}

/* ---------- listón marcapáginas ---------- */
.liston{
  position:fixed;left:22px;top:0;z-index:35;width:9px;height:calc(var(--avance,0) * 100vh + 14px);pointer-events:none;
  background:linear-gradient(90deg,#b8841a,#f1cd78 45%,#c99526);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 9px),0 100%);
  box-shadow:0 0 18px rgba(227,178,76,.35);
}
.liston::before{content:"";position:absolute;left:50%;top:0;bottom:12px;width:1px;background:rgba(255,255,255,.45)}
@media (max-width:760px){.liston{left:5px;width:5px}}

/* ---------- papel (tarjetas claras) ---------- */
.papel{
  position:relative;background:var(--hoja);color:var(--tinta);border-radius:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 30px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.08);
  background-image:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.55),transparent 60%),radial-gradient(90% 70% at 100% 100%,rgba(163,116,15,.10),transparent 60%);
}
.papel.costura::before{content:"";position:absolute;left:16px;top:22px;bottom:22px;border-left:1.5px dashed rgba(35,23,42,.18)}
.papel h2 em,.papel h3 em{color:var(--uva)}
.papel .antetitulo{color:var(--tinta-suave)}
.papel .boton-linea{border-color:var(--linea-tinta);color:var(--tinta)}
.papel .boton-linea:hover{border-color:var(--tinta);background:rgba(35,23,42,.05)}

/* ---------- formularios ---------- */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label,.campo .etiqueta{font-size:13px;font-weight:600;letter-spacing:.03em}
.campo small{font-size:12.5px;color:var(--tinta-suave)}
.opcional{font-family:var(--texto);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--tinta-suave);margin-left:4px}
[hidden]{display:none !important}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:16px;padding:13px 14px;border-radius:12px;border:1.5px solid var(--linea-tinta);
  background:rgba(255,255,255,.72);color:var(--tinta);width:100%;min-width:0
}
.campo textarea{min-height:110px;resize:vertical;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--uva);box-shadow:0 0 0 3px rgba(122,59,156,.2)}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:#9c2a1a;box-shadow:0 0 0 3px rgba(156,42,26,.14)}
.campos-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
@media (max-width:560px){.campos-2{grid-template-columns:1fr}}
.telefono{display:flex;gap:8px}
.telefono .prefijo{flex:none;display:flex;align-items:center;padding:0 12px;border-radius:12px;border:1.5px solid var(--linea-tinta);font-weight:600;background:rgba(255,255,255,.4)}
.telefono select.prefijo{width:auto;padding:0 8px;font-size:15px}
.acepto{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--tinta-suave);margin:4px 0 16px}
.acepto input{margin-top:2px;accent-color:var(--tinta);width:17px;height:17px;flex:none}
.error{color:#9c2a1a;font-size:14px;margin:0 0 12px;font-weight:500}
.error:empty{display:none}

/* opciones grandes (radio o checkbox dibujados como tarjetas) */
.eleccion{position:relative;display:block;cursor:pointer}
.eleccion input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.eleccion-caja{
  display:flex;gap:12px;align-items:center;height:100%;
  background:rgba(255,255,255,.45);border:1.5px solid var(--linea-tinta);border-radius:14px;padding:14px 16px;
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease
}
.eleccion:hover .eleccion-caja{transform:translateY(-2px);border-color:var(--tinta);background:rgba(255,255,255,.75);box-shadow:0 10px 24px -16px rgba(35,23,42,.5)}
.eleccion input:checked + .eleccion-caja{background:var(--tinta);color:var(--hoja);border-color:var(--tinta)}
.eleccion input:focus-visible + .eleccion-caja{outline:2px solid var(--uva);outline-offset:3px}
.eleccion-caja b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:500;font-size:1.06rem;line-height:1.2}
.eleccion-caja small{display:block;font-size:.88rem;line-height:1.35;color:var(--tinta-suave)}
.eleccion input:checked + .eleccion-caja small{color:rgba(244,236,228,.75)}
.eleccion-precio{margin-left:auto;font-weight:600;font-size:.92rem;white-space:nowrap;padding-left:8px}
.eleccion .glifo{width:30px;height:30px;flex:none}

/* ---------- pie ---------- */
.pie-sitio{padding:70px var(--lado) 110px;border-top:1px solid var(--linea);color:var(--crema-suave);font-size:14.5px;
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:40px 60px;
  background:radial-gradient(40% 60% at 10% 30%,rgba(122,59,156,.18),transparent 70%)}
.pie-marca img{width:96px;height:auto;margin-bottom:16px}
.pie-lema{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.15rem;line-height:1.35;color:var(--crema)}
.pie-columnas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.pie-columnas h3{font-family:var(--texto);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--plata);margin-bottom:14px}
.pie-columnas a,.pie-columnas p{display:block;text-decoration:none;color:var(--crema-suave);margin:0 0 8px;line-height:1.45}
.pie-columnas a:hover{color:var(--crema)}
.pie-legal{grid-column:1/-1;font-size:12.5px;opacity:.8;border-top:1px solid var(--linea);padding-top:22px;margin:0}
.pie-legal a{color:inherit}
@media (max-width:900px){.pie-sitio{grid-template-columns:1fr}.pie-columnas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- aparición suave (nunca oculta el contenido) ---------- */
.js .revelar{transform:translateY(22px);transition:transform .9s var(--curva)}
.js .revelar.visto{transform:none}

/* ---------- el ojo ---------- */
.ojo{overflow:visible}
.ojo-parpado{transform-box:view-box;transform-origin:200px 135px;transition:transform .09s ease-in}
.ojo-parpado.parpadea{transform:scaleY(.06)}
.ilustracion{width:100%;height:auto}

/* ---------- fichas (etiquetas pequeñas) ---------- */
.ficha{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:rgba(227,178,76,.14);color:var(--oro);border:1px solid rgba(227,178,76,.35)}
.ficha-plata{background:rgba(207,203,217,.1);color:var(--plata);border-color:rgba(207,203,217,.3)}
.ficha-tinta{background:rgba(35,23,42,.08);color:var(--tinta);border-color:rgba(35,23,42,.18)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .revelar{transform:none}
  .liston{display:none}
}

/* ---------- cabeza de las páginas interiores ---------- */
.cabeza-pagina{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:clamp(24px,5vw,80px);
  padding:calc(var(--alto-cabecera) + clamp(40px,8vh,90px)) var(--lado) clamp(50px,8vh,90px);
  background:radial-gradient(55% 70% at 80% 30%,rgba(122,59,156,.38),transparent 70%),radial-gradient(40% 50% at 5% 100%,rgba(227,178,76,.1),transparent 70%),var(--noche);
}
.cabeza-pagina h1{font-size:clamp(2.8rem,7vw,5.8rem);line-height:.98;letter-spacing:-.02em;margin-bottom:22px}
.cabeza-pagina h1 em{font-weight:300}
.cabeza-pagina .bajada{font-size:clamp(1.05rem,1.5vw,1.2rem)}
.cabeza-foto{justify-self:end;width:min(100%,360px);margin:0;position:relative}
.cabeza-foto img{width:100%;aspect-ratio:3/3.8;object-fit:cover;border-radius:var(--arco);box-shadow:0 0 0 1px rgba(207,203,217,.45),0 0 0 9px var(--noche),0 0 0 10px rgba(227,178,76,.28),0 40px 80px -36px rgba(0,0,0,.85)}
.cabeza-foto figcaption{position:absolute;left:-18%;bottom:12%;font-family:var(--mano);color:var(--oro);font-size:18px;transform:rotate(-7deg);max-width:9rem;line-height:1.2}
.migas{font-size:13px;color:var(--crema-suave);margin:0 0 20px}
.migas a{color:var(--crema-suave);text-decoration:none}
.migas a:hover{color:var(--crema)}
@media (max-width:820px){
  .cabeza-pagina{grid-template-columns:1fr;align-items:start}
  .cabeza-foto{display:none}
}
.seccion{padding:clamp(70px,10vh,120px) var(--lado)}

/* ---------- interruptor ---------- */
.interruptor{display:flex;align-items:center;gap:12px;font-size:14.5px;cursor:pointer;margin:4px 0 16px}
.interruptor input{position:absolute;opacity:0;pointer-events:none}
.interruptor-riel{position:relative;flex:none;width:46px;height:26px;border-radius:999px;background:rgba(35,23,42,.18);transition:background-color .25s}
.interruptor-riel::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .3s var(--curva)}
.interruptor input:checked + .interruptor-riel{background:var(--uva)}
.interruptor input:checked + .interruptor-riel::after{transform:translateX(20px)}
.interruptor input:focus-visible + .interruptor-riel{outline:2px solid var(--uva);outline-offset:3px}

/* ---------- pasarela simulada (solo modo de prueba) ---------- */
.pasarela-panel{width:min(100%,420px);background:#fff;color:#1d1a22;padding:0 0 22px;font-size:15px}
.pasarela-aviso{margin:0;padding:9px 16px;background:repeating-linear-gradient(135deg,#fff4d6 0 12px,#ffecb8 12px 24px);color:#6b4b00;font-size:12px;font-weight:600;text-align:center;letter-spacing:.02em}
.pasarela-cabeza{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:18px 18px 12px}
.pasarela-cabeza h2{font-family:var(--texto);font-size:1.05rem;font-weight:700}
.pasarela-cabeza p{margin:0;font-size:13px;color:#6a6472}
.pasarela-cabeza .icono-boton{border-color:#e6e3ea;background:#f6f5f8}
.pasarela-candado{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#eef7f0;color:#1f7a3a}
.pasarela-candado svg{width:20px;height:20px}
.pasarela-monto{margin:0 18px 16px;padding:16px;border-radius:14px;background:#f6f5f8;font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums}
.pasarela-monto small{display:block;font-size:12px;font-weight:500;color:#6a6472}
.pasarela-monto span{font-size:.9rem;color:#6a6472;font-weight:600}
.pasarela-medios{display:grid;gap:8px;margin:0 18px 12px}
.pasarela-medios label{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid #e6e3ea;border-radius:12px;cursor:pointer;font-weight:500}
.pasarela-medios label:has(input:checked){border-color:#1d1a22}
.pasarela-medios input{accent-color:#1d1a22}
.pasarela-orden{margin:0 18px 14px;font-size:12px;color:#8a8492}
.pasarela-botones{display:grid;gap:4px;margin:0 18px;justify-items:center}
.pasarela-botones .boton-oro{background:#1d1a22;color:#fff;box-shadow:none}
.pasarela-botones .enlace{color:#6a6472}

/* las leyendas de los grupos de un formulario se comportan como un título normal */
fieldset > legend{float:left;width:100%}
fieldset > legend + *{clear:both}

/* Fase 3 · zonas táctiles de al menos 44 px en celular (enlaces del pie, marca y migas) */
.marca{min-height:44px}
.migas a{display:inline-block;padding:12px 6px;margin:-12px -6px}
@media (pointer:coarse),(max-width:700px){
  .pie-columnas a,.pie-legal a{padding:11px 0;margin:0}
  .pie-columnas p{margin:0 0 8px}
  .pie-legal a{display:inline-block;padding:11px 2px}
}

/* Botón de WhatsApp: verde reconocible, visible desde el inicio */
.ayuda{background:#1fa855;color:#fff;box-shadow:0 14px 34px -12px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.14) inset}
.ayuda:hover{background:#25bd62}
.ayuda svg{width:22px;height:22px;fill:currentColor}
@media (max-width:560px){.ayuda{right:14px;bottom:14px;padding:14px}.ayuda svg{width:26px;height:26px}}