/* Diseños Casa Arte. El aro dorado del logo vestido de Navidad, con bloques festoneados y tarjetas en arco.
   Pensado para señoras con celular: letra grande, todo a la altura del pulgar, nada escondido. */
@font-face{font-family:Raillouise;src:url(/s/fuentes/raillouise.woff2) format("woff2");font-display:swap}
@font-face{font-family:Raillouise;src:url(/s/fuentes/readex-colon-600.woff2) format("woff2");font-display:swap;unicode-range:U+20A1}
@font-face{font-family:"Readex Pro";font-weight:400;src:url(/s/fuentes/readex-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Readex Pro";font-weight:600;src:url(/s/fuentes/readex-600.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Readex Pro";font-weight:400;src:url(/s/fuentes/readex-colon-400.woff2) format("woff2");font-display:swap;unicode-range:U+20A1}
@font-face{font-family:"Readex Pro";font-weight:600;src:url(/s/fuentes/readex-colon-600.woff2) format("woff2");font-display:swap;unicode-range:U+20A1}
@font-face{font-family:Parisienne;src:url(/s/fuentes/parisienne.woff2) format("woff2");font-display:swap}

:root{
  --crema:#FBF4EA;--marfil:#FFFBF4;--cacao:#3D2314;--cacao-2:#5F4030;
  --vino:#6F2533;--vino-2:#521A26;--pino:#1F3D32;--salvia:#A9BC9F;
  --rosa:#F4D4CC;--mantequilla:#F7E3B4;--salvia-2:#CBD8C0;
  --oro:#B98B35;--oro-claro:#E9CB85;--wa:#0E6F46;--error:#A3172C;
  --titulo:Raillouise,Georgia,"Times New Roman",serif;
  --texto:"Readex Pro","Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --firma:Parisienne,"Yeseva One",Georgia,serif;
  --r:20px;--dock:76px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:118.75%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--crema);color:var(--cacao);font-family:var(--texto);font-size:1rem;font-weight:400;line-height:1.6;
  padding-block:0 calc(var(--dock) + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
html.con-ventana{overflow:hidden}
img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--titulo);font-weight:400;line-height:1.14;margin:0;text-wrap:balance}
h1{font-size:clamp(2.7rem,7.5vw,4.5rem)}
h2{font-size:clamp(2rem,5vw,2.9rem)}
h3{font-size:1.6rem}
p{margin:0}
a{color:inherit}
.ancho{width:100%;max-width:1180px;margin-inline:auto}
:focus-visible{outline:3px solid var(--cacao);outline-offset:3px;box-shadow:0 0 0 3px var(--marfil)}

/* Botones: nunca menos de 56px de alto */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;padding:.7rem 1.5rem;border:2px solid transparent;
  border-radius:999px;font:600 1.05rem/1.2 var(--texto);text-align:center;text-decoration:none;cursor:pointer;background:none;color:inherit;touch-action:manipulation}
.btn svg{width:26px;height:26px;flex:none}
.relleno{fill:currentColor}
.nowrap{white-space:nowrap}
.btn-oro{background:var(--oro-claro);color:var(--cacao)}
.btn-vino{background:var(--vino);color:var(--marfil)}
.btn-vino:disabled{opacity:.6}
.btn-wa{background:var(--wa);color:#fff}
.btn-linea{border-color:currentColor}
.btn-linea-oscura{border-color:var(--cacao-2);color:var(--cacao)}
.btn-ancho{width:100%}
.btn-texto{background:none;border:0;padding:.4rem;min-height:48px;color:var(--error);font:600 1rem var(--texto);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

.franja{padding:.7rem 1rem;margin-inline:auto;max-width:1180px;border-radius:0 0 14px 14px;font-weight:600;text-align:center}
.franja-falla{background:var(--error);color:#fff}

/* Cabecera. En celular solo logo e idioma: lo demás está abajo, donde llega el pulgar. */
.cabecera-interior{display:flex;align-items:center;gap:.75rem;padding-block:.75rem}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--titulo);font-size:1.2rem;line-height:1.1;margin-right:auto}
.marca img{width:56px;height:56px}
.menu{display:none}
.btn-pedido{display:none}
.idiomas{display:flex;padding:3px;border:2px solid var(--vino);border-radius:999px;background:var(--marfil)}
.idiomas a{display:grid;place-items:center;min-width:48px;min-height:44px;border-radius:999px;font-weight:600;text-decoration:none;color:var(--vino)}
.idiomas a[aria-current]{background:var(--vino);color:var(--marfil)}
.conteo{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding-inline:.3em;border-radius:99px;background:var(--oro-claro);color:var(--cacao);font-variant-numeric:tabular-nums}
.conteo.salta{animation:salta .35s ease}
@keyframes salta{50%{transform:scale(1.35)}}

/* Barra inferior: la navegación del celular */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--marfil);
  padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  box-shadow:0 -4px 18px rgba(61,35,20,.16);border-radius:20px 20px 0 0}
.dock a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;padding:4px 2px;border-radius:14px;
  font-size:.84rem;font-weight:600;line-height:1.1;text-align:center;text-decoration:none;touch-action:manipulation}
.dock svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock .conteo{position:absolute;top:0;right:calc(50% - 36px);font-size:.84rem}
html:not(.con-pedido) .dock .conteo{display:none}
html.con-pedido .dock-pedido{background:var(--vino);color:var(--marfil)}

/* WhatsApp flotante, a la altura del pulgar derecho */
.flotante{position:fixed;z-index:21;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(var(--dock) + 14px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--wa);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 8px 22px rgba(14,70,46,.42);touch-action:manipulation}
.flotante svg{width:36px;height:36px}
.flotante::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:pulso 1.8s ease-out 3s 3}
@keyframes pulso{from{box-shadow:0 0 0 0 rgba(14,111,70,.55)}to{box-shadow:0 0 0 20px rgba(14,111,70,0)}}
.flotante span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media (min-width:880px){
  html{scroll-padding-top:104px}
  body{padding-bottom:0}
  .cabecera{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;background:var(--crema)}
  .cabecera-interior{gap:1.1rem}
  .marca{margin-right:0}
  .marca img{width:68px;height:68px}
  .menu{display:flex;gap:.2rem 1.2rem;margin-inline:auto;flex-wrap:wrap;justify-content:center}
  .menu a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:5px}
  .btn-pedido{display:inline-flex;background:var(--vino);color:var(--marfil);padding-inline:1.1rem}
  .dock{display:none}
  .flotante{bottom:calc(24px + env(safe-area-inset-bottom,0px));right:24px;width:auto;height:64px;padding:0 1.4rem 0 1.1rem;gap:.55rem;border-radius:999px}
  .flotante span{position:static;width:auto;height:auto;clip-path:none}
}

/* Festones */
.feston,.feston-arriba{position:relative;--f:var(--vino)}
.feston::after,.feston-arriba::before{content:"";position:absolute;left:0;right:0;height:var(--r)}
.feston::after{top:calc(100% - 1px);background:radial-gradient(circle at 50% 0,var(--f) calc(var(--r) - .6px),transparent var(--r)) 0 0/calc(var(--r)*2) 100% round no-repeat}
.feston-arriba::before{bottom:calc(100% - 1px);background:radial-gradient(circle at 50% 100%,var(--f) calc(var(--r) - .6px),transparent var(--r)) 0 0/calc(var(--r)*2) 100% round no-repeat}

/* Hero */
.hero{display:grid;gap:1.75rem;align-items:center;background:var(--vino);color:var(--marfil);border-radius:30px 30px 0 0;padding:2rem 1.5rem 1.5rem}
.hero-texto{display:grid;gap:1.1rem;justify-items:start;min-width:0}
.hero-texto p{font-size:1.25rem;max-width:30ch}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem;width:100%}
.acciones .btn{flex:1 1 15rem;padding-inline:1rem}
.hero-corona{position:relative;width:min(100%,560px);aspect-ratio:1;margin-inline:auto}
.hero-corona img{position:absolute}
.hero-anillo{inset:0;width:100%;height:100%}
.hero-logo{left:20%;top:19%;width:60%;height:60%;border-radius:50%}

/* El momento de entrada: el texto sube, la corona se posa y queda meciéndose, y caen destellos dorados */
.destellos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:inherit}
.hero>:not(.destellos){position:relative}
.hero-texto>*{animation:entrada .8s cubic-bezier(.2,.7,.2,1) both}
.hero-texto>:nth-child(2){animation-delay:.12s}
.hero-texto>:nth-child(3){animation-delay:.24s}
.hero-anillo{animation:posa 1.2s cubic-bezier(.2,.7,.2,1) both,mece 7s ease-in-out 1.2s infinite alternate}
.hero-logo{animation:aparece .9s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes entrada{from{transform:translateY(22px)}}
@keyframes posa{from{transform:rotate(-40deg) scale(.86)}}
@keyframes mece{to{transform:rotate(3deg)}}
@keyframes aparece{from{transform:scale(.9)}}
@media (min-width:880px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);padding:2.5rem 3rem 1.75rem}
  .acciones .btn{flex:0 1 auto;padding-inline:1.5rem}
}

/* Encabezado de sección */
.seccion{padding-block:calc(var(--r) + 3rem) 3rem}
.seccion-justa{padding-top:0}
.encabezado{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:.5rem;text-align:center;margin-bottom:2.25rem}
.encabezado p{max-width:46ch;font-size:1.1rem}
.onda{width:92px;height:16px;fill:none;stroke:var(--oro);stroke-width:3;stroke-linecap:round}
.encabezado-flores{position:relative}
.encabezado-flores .adorno{display:none}
@media (min-width:760px){
  .encabezado-flores .adorno{display:block;position:absolute;top:-1.5rem;width:150px;height:150px}
  .adorno-izq{left:6%}.adorno-der{right:6%}
}

/* Catálogo */
.catalogo{display:grid;gap:2.5rem 1.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),360px));justify-content:center}
.catalogo-vacio{display:grid;justify-items:center;gap:1rem;text-align:center;padding:2rem 1rem;border-radius:26px;background:var(--marfil)}
.tarjeta{display:flex;flex-direction:column;gap:.45rem;text-align:center;min-width:0}
.arco{position:relative;aspect-ratio:4/4.7;border-radius:999px 999px 26px 26px;overflow:hidden;margin-bottom:.6rem;background:var(--rosa);outline:1.5px solid var(--oro);outline-offset:-9px}
.fotos{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.fotos::-webkit-scrollbar{display:none}
.fotos img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center}
.fondo-rosa{background:var(--rosa)}.fondo-mantequilla{background:var(--mantequilla)}.fondo-salvia{background:var(--salvia-2)}
.etiquetas{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:.4rem;pointer-events:none}
.etiqueta{padding:.1rem .8rem;border-radius:99px;background:var(--marfil);font-size:.84rem;font-weight:600}
.detalle{color:var(--cacao-2);flex:1}
.precio{font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums}
.agotado{min-height:56px;display:grid;place-items:center;font-weight:600;color:var(--cacao-2);border:2px dashed var(--oro);border-radius:999px}

/* Fotos sin fondo: el arreglo queda sobre el color del arco */
.fotos img.recorte{object-fit:contain;padding:10% 7% 6%;filter:drop-shadow(0 14px 14px rgba(61,35,20,.22))}
.puntos{display:flex;justify-content:center;margin:-.6rem 0 -.3rem}
.puntos button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation}
.puntos button::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--vino);transition:background .2s,transform .2s}
.puntos button[aria-current=true]::before{background:var(--vino);transform:scale(1.15)}
.precio-consulta{font-size:1.15rem;color:var(--cacao-2)}

/* El arreglo vuela a Mi pedido para que se vea a dónde fue */
.volando{position:fixed;z-index:45;left:0;top:0;width:84px;height:84px;border-radius:50%;object-fit:cover;background:var(--rosa);box-shadow:0 8px 20px rgba(61,35,20,.3);pointer-events:none}
.volando.recorte{object-fit:contain;padding:8px;background:var(--marfil)}
.recibe{animation:recibe .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes recibe{40%{transform:scale(1.18)}}

/* Calculadora de cajas y detalles: un paso por bloque, todo grande y a la mano */
.pestanas{display:flex;gap:.35rem;padding:.35rem;margin:0 auto 1.5rem;max-width:640px;border-radius:999px;background:var(--marfil);outline:1.5px solid var(--oro-claro);outline-offset:-1.5px}
.pestanas button{flex:1;min-height:56px;padding:.4rem .8rem;border:0;border-radius:999px;background:none;color:var(--cacao);font:600 1rem/1.2 var(--texto);cursor:pointer;touch-action:manipulation}
.pestanas button[aria-pressed=true]{background:var(--vino);color:var(--marfil)}
.cotiza{display:grid;gap:1.4rem;max-width:760px;margin-inline:auto;padding:1.75rem 1.1rem;border-radius:30px;background:var(--marfil);outline:1.5px solid var(--oro-claro);outline-offset:-10px}
.cotizas{display:grid;gap:2rem}
.cotiza-titulo{text-align:center;font-size:1.9rem}
.cotiza-ayuda{text-align:center;color:var(--cacao-2);margin-top:-.8rem}
.paso{display:grid;gap:.75rem;border:0;margin:0;padding:0;min-width:0}
.paso legend{display:flex;align-items:center;gap:.7rem;padding:0;margin-bottom:.75rem;font:400 1.6rem/1.2 var(--titulo)}
.paso legend label{font:inherit}
.num{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--vino);color:var(--marfil);font:600 1.1rem var(--texto)}
.elecciones{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr)}
.eleccion{position:relative;display:block;min-width:0;cursor:pointer;touch-action:manipulation}
.eleccion input{position:absolute;left:1rem;top:1rem;width:26px;height:26px;margin:0;accent-color:var(--vino)}
.eleccion-cuerpo{display:grid;gap:.15rem;min-width:0;min-height:64px;height:100%;padding:.85rem 1rem .85rem 3.25rem;border:2px solid var(--cacao-2);border-radius:18px;background:#fff}
.eleccion input:checked+.eleccion-cuerpo{border-color:var(--vino);background:var(--rosa)}
.eleccion input:focus-visible{outline:none}
.eleccion input:focus-visible+.eleccion-cuerpo{outline:3px solid var(--cacao);outline-offset:2px}
.eleccion-cuerpo strong{font-size:1.1rem;line-height:1.25}
.eleccion-cuerpo small{color:var(--cacao-2);font-size:.92rem}
.eleccion-precio{font-weight:600;color:var(--vino);font-variant-numeric:tabular-nums}
.paso .control{justify-content:center;gap:.6rem}
.cantidad-entrada{flex:1 1 4rem;min-width:0;max-width:8rem;min-height:58px;text-align:center;font:600 1.4rem var(--texto);border:2px solid var(--cacao-2);border-radius:14px;background:#fff;color:var(--cacao)}
.rapidos{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.rapidos button{min-width:64px;min-height:48px;padding:.3rem .9rem;border:2px solid var(--oro);border-radius:999px;background:var(--marfil);color:var(--cacao);font:600 1rem var(--texto);cursor:pointer;touch-action:manipulation}
.resultado{display:grid;gap:.25rem;padding:1.1rem 1.2rem;border-radius:20px;background:var(--salvia-2);text-align:center}
.res-unidad{font-size:1.1rem}
.res-total{font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums}
.res-total:empty{display:none}
.cotiza-listo{display:grid;gap:.8rem}
@media (min-width:640px){.elecciones{grid-template-columns:repeat(2,minmax(0,1fr))}.cotiza{padding:2.25rem 2rem}}

/* Cantidad */
.control{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:56px}
.cantidad{font-weight:600;font-variant-numeric:tabular-nums;text-align:center;flex:1}
.mas-menos{width:56px;height:56px;flex:none;border:2px solid var(--vino);border-radius:50%;background:var(--marfil);color:var(--vino);font:600 1.6rem/1 var(--texto);cursor:pointer;touch-action:manipulation}

/* Cómo pedir */
.pasos{background:var(--salvia);padding:2.25rem 1.5rem;--f:var(--salvia);margin-top:var(--r);margin-bottom:calc(var(--r) + 3rem)}
.pasos h2{text-align:center;margin-bottom:1.75rem}
.pasos ol{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;counter-reset:paso}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem 1rem;align-items:center}
.pasos li::before{content:counter(paso);grid-row:span 2;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--marfil);border:2px solid var(--oro);font:400 1.7rem var(--titulo)}
@media (min-width:880px){
  .pasos{padding:2.5rem 3rem}
  .pasos ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
  .pasos li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .pasos li::before{grid-row:auto;margin-bottom:.6rem}
}

/* Asesoría: cuatro mosaicos grandes, cómodos con el pulgar */
.espacios{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.espacio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:144px;padding:1rem .6rem;border-radius:999px 999px 24px 24px;
  background:var(--mantequilla);text-align:center;text-decoration:none;line-height:1.25;touch-action:manipulation}
.espacios li:nth-child(4n+2) .espacio{background:var(--rosa)}
.espacios li:nth-child(4n+3) .espacio{background:var(--salvia-2)}
.espacios li:nth-child(4n) .espacio{background:var(--marfil);outline:1.5px solid var(--oro);outline-offset:-1.5px}
.espacio svg{width:52px;height:52px;fill:none;stroke:var(--cacao);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:880px){.espacios{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}.espacio{min-height:180px}}

/* Decoración de lujo */
.lujo{position:relative;display:grid;gap:2rem;background:var(--pino);color:var(--marfil);border-radius:30px;padding:2.5rem 1.75rem;outline:1.5px solid var(--oro-claro);outline-offset:-11px;margin-bottom:3rem}
.lujo-texto{display:grid;gap:1rem;justify-items:start;min-width:0}
.lujo-texto p{max-width:46ch;font-size:1.1rem}
.lujo-aro{justify-self:center;width:min(78%,300px);aspect-ratio:1;border:2px solid var(--oro-claro);outline:1px solid var(--oro-claro);outline-offset:7px;border-radius:50%}
.lujo-aro img{width:100%;height:100%;transform:scale(1.26)}
@media (min-width:880px){.lujo{grid-template-columns:minmax(0,1fr) 320px;align-items:center;padding:3.25rem}}

/* Banda de la guía */
.banda-guia{display:grid;gap:1rem;justify-items:center;text-align:center;background:var(--rosa);border-radius:30px;padding:2rem 1.5rem;margin-bottom:3rem}
.banda-guia img{width:110px;height:110px}
.banda-guia p{margin-top:.5rem}
.banda-guia .btn{width:100%}
@media (min-width:880px){.banda-guia{grid-template-columns:auto minmax(0,1fr) auto;text-align:left;padding:1.75rem 2.5rem}.banda-guia .btn{width:auto}}

/* Hazel y Grettel + envíos */
.dupla{display:grid;gap:1.25rem;padding-bottom:calc(var(--r) + 3rem)}
.dupla>section{padding:2.25rem 1.75rem;border-radius:30px;display:grid;gap:.9rem;align-content:start;min-width:0}
.ellas{background:var(--rosa)}
.envios{background:var(--mantequilla)}
.firma{font-family:var(--firma);font-size:2.05rem;line-height:1.2;color:var(--vino)}
.formas{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.formas li{font-weight:600;font-size:1.15rem}
@media (min-width:880px){.dupla{grid-template-columns:repeat(2,minmax(0,1fr))}.dupla>section{padding:2.75rem}}

/* Pie */
.pie{background:var(--vino);color:var(--marfil);--f:var(--vino);border-radius:0 0 30px 30px;padding:2.25rem 1.5rem;margin-bottom:1.25rem;display:grid;gap:1.1rem;justify-items:center;text-align:center}
.pie img{width:84px;height:84px}
.pie .lema{font-family:var(--titulo);font-size:1.4rem;max-width:26ch;line-height:1.25}
.pie .chico{font-size:.9rem}

/* Aviso pasajero: arriba de la barra del pulgar */
.aviso{position:fixed;left:50%;bottom:calc(var(--dock) + 92px + env(safe-area-inset-bottom,0px));z-index:30;transform:translateX(-50%);width:min(92vw,520px);padding:.8rem 1.1rem;border-radius:16px;background:var(--pino);color:#fff;font-weight:600;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.28)}
@media (min-width:880px){.aviso{bottom:104px}}

/* Ventanas */
dialog{display:none;position:fixed;margin:0;padding:0;border:0;max-width:none;max-height:none;background:var(--marfil);color:var(--cacao);overflow:hidden}
dialog::backdrop{background:rgba(45,22,12,.6)}
#panel{inset:0 0 0 auto;width:min(100%,600px);height:100%}
#panel[open]{display:flex;flex-direction:column;animation:entra .22s ease both}
@keyframes entra{from{transform:translateY(24px);opacity:.5}}
.panel-cabeza{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(.7rem + env(safe-area-inset-top,0px)) max(1.1rem,env(safe-area-inset-right,0px)) .7rem max(1.1rem,env(safe-area-inset-left,0px));background:var(--vino);color:var(--marfil)}
.panel-cabeza h2{font-size:1.7rem}
.panel-total{font-size:1.3rem;font-weight:600;font-variant-numeric:tabular-nums}
.panel-cuerpo{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:1.25rem max(1.1rem,env(safe-area-inset-right,0px)) 1.25rem max(1.1rem,env(safe-area-inset-left,0px))}
.panel-pie{display:grid;gap:.5rem;padding:.7rem max(1.1rem,env(safe-area-inset-right,0px)) calc(.7rem + env(safe-area-inset-bottom,0px)) max(1.1rem,env(safe-area-inset-left,0px));background:var(--marfil);box-shadow:0 -4px 14px rgba(61,35,20,.12)}
.vista{display:grid;gap:1.25rem;min-width:0}
.lineas{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.linea{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:.15rem .9rem;padding-bottom:1rem;border-bottom:1.5px solid var(--mantequilla)}
.mini{grid-row:span 3;width:76px;height:96px;border-radius:99px 99px 12px 12px;overflow:hidden;background:var(--rosa)}
.mini img{width:100%;height:100%;object-fit:cover}
.mini img.recorte{object-fit:contain;padding:8%}
.linea strong{font-size:1.1rem;line-height:1.3;align-self:center}
.subtotal,.linea .control{grid-column:2/-1}
.subtotal{font-weight:600;font-variant-numeric:tabular-nums}
.totales{display:grid;gap:.3rem;margin:0}
.totales div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1rem}
.totales dd{margin:0}
.totales .fuerte{font-size:1.3rem;font-weight:600;font-variant-numeric:tabular-nums}
form{display:grid;gap:1.1rem;min-width:0}
.campo{display:grid;gap:.3rem;min-width:0;border:0;padding:0;margin:0}
.campo label,.campo legend{font-weight:600;padding:0}
.campo legend{margin-bottom:.4rem}
.ayuda{font-size:.92rem;color:var(--cacao-2)}
input[type=text],input[type=tel],input[type=date],textarea{width:100%;min-height:58px;padding:.7rem .9rem;border:2px solid var(--cacao-2);border-radius:14px;background:#fff;color:var(--cacao);font:400 1.05rem/1.4 var(--texto)}
textarea{resize:vertical}
[aria-invalid=true]{border-color:var(--error)}
.error{color:var(--error);font-weight:600}
.opcion{display:flex;align-items:center;gap:.8rem;min-height:60px;padding:.6rem 1rem;border:2px solid var(--cacao-2);border-radius:14px;background:#fff;font-weight:600!important;cursor:pointer}
.opcion+.opcion{margin-top:.5rem}
.opcion input{width:26px;height:26px;accent-color:var(--vino);flex:none;margin:0}
.opcion:has(input:checked){border-color:var(--vino);background:var(--rosa)}
.nota{font-size:.95rem;color:var(--cacao-2);text-align:center}
.numero{font-size:1.5rem;font-weight:600;user-select:all}
.grande{font-size:1.15rem}

/* Pop-up de la guía: hoja que sube desde abajo en celular */
#popup-guia{inset:auto 0 0 0;width:100%;max-height:92%;border-radius:28px 28px 0 0}
#popup-guia[open]{display:block;overflow-y:auto;animation:entra .22s ease both}
.guia-contenido{display:grid;gap:.9rem;padding:1.5rem max(1.25rem,env(safe-area-inset-right,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) max(1.25rem,env(safe-area-inset-left,0px))}
.guia-contenido h2{font-size:1.8rem}
.guia-flor{width:96px;height:96px;margin:-.5rem auto -.25rem}
.guia-wa{display:none}
.guia-wa.visible{display:inline-flex}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (min-width:640px){#popup-guia{inset:0;margin:auto;width:520px;height:fit-content;border-radius:28px}}

.pagina-error{min-height:100vh;display:grid;place-items:center;padding-bottom:0;text-align:center}
.pagina-error main{display:grid;gap:1rem;justify-items:center;max-width:32rem;padding:2rem 0}

/* Hover solo con mouse: en pantallas táctiles se queda pegado después de tocar */
@media (hover:hover){
  .btn-oro:hover{background:#F1DAA2}
  .btn-vino:hover{background:var(--vino-2)}
  .btn-wa:hover,.flotante:hover{background:#0A5A38}
  .btn-linea:hover{background:rgba(255,255,255,.14)}
  .btn-linea-oscura:hover,.mas-menos:hover{background:var(--rosa)}
  .espacio:hover{filter:brightness(.97)}
  .arco img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .tarjeta:hover .arco img{transform:scale(1.04)}
  .tarjeta:hover .arco img.recorte{transform:translateY(-8px) scale(1.02)}
}

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