/* =====================================================================
   ESTILO de Moni's Todo Hogar. Lo usan las dos páginas del sitio: la
   portada (index.html) y la página de pedidos (pedir.html). Antes vivía
   dentro de un <style> en index.html.
   Las páginas de cada pieza (/jabon/...) llevan su propia hoja, más corta,
   dentro de src/paginas.js.
   ===================================================================== */
:root{
  --marfil:#f7f3ec; --crema:#efe8dc; --papel:#fffdf9; --lino:#ddd3c3; --linea:#e7dfd2;
  --vino:#4a1526; --vino-2:#6b2239; --vino-suave:#f3e7ea; --oro:#a8844a; --oro-suave:#efe4cf;
  --tinta:#2a2320; --gris:#6f655d; --sobre-vino:#f7efe6; --wa:#1f7a4a;
  --display:"Cormorant Garamond","Palatino Linotype",Palatino,Georgia,serif;
  --texto:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ancho:76rem;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--marfil);color:var(--tinta);font:300 17px/1.65 var(--texto);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance;line-height:1.08}
p{margin:0 0 1rem;max-width:60ch}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 1.5rem}
.sobretitulo{font:500 .72rem/1 var(--texto);letter-spacing:.28em;text-transform:uppercase;color:var(--oro);margin:0 0 1.1rem;display:flex;align-items:center;gap:.8rem}
.sobretitulo::before{content:"";width:2rem;height:1px;background:var(--oro)}
.centro .sobretitulo{justify-content:center}
.centro .sobretitulo::after{content:"";width:2rem;height:1px;background:var(--oro)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ornamento{display:block;margin:0 auto;width:4.5rem;height:auto;color:var(--oro)}

/* Aviso superior */
.aviso-sup{background:var(--vino);color:var(--sobre-vino);text-align:center;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;padding:.55rem 1rem}

/* Encabezado */
header.encabezado{position:sticky;top:0;z-index:20;background:rgba(247,243,236,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
header.encabezado .envoltura{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:4.4rem}
.logo{text-decoration:none;display:flex;flex-direction:column;align-items:center;line-height:1}
.logo b{font:italic 500 1.85rem/1 var(--display);color:var(--vino)}
.logo small{font:500 .56rem/1 var(--texto);letter-spacing:.42em;text-transform:uppercase;color:var(--oro);margin-top:.3rem;padding-left:.42em}
nav.menu{display:flex;gap:2.2rem}
nav.menu a{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--tinta);position:relative;padding:.3rem 0}
nav.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--oro);transform:scaleX(0);transition:transform .25s}
nav.menu a:hover::after{transform:scaleX(1)}
@media (max-width:820px){nav.menu{display:none}}
.bolsa{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.bolsa svg{width:1.25rem;height:1.25rem}
.bolsa .cuenta{min-width:1.35rem;height:1.35rem;border-radius:999px;background:var(--vino);color:var(--sobre-vino);font-size:.7rem;letter-spacing:0;display:inline-grid;place-items:center;padding:0 .3rem}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;font:500 .8rem/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;padding:1.05rem 1.8rem;text-decoration:none;border:1px solid transparent;cursor:pointer;background:none;transition:background .2s,color .2s,border-color .2s}
.boton svg{width:1.1rem;height:1.1rem;flex:none}
.boton.vino{background:var(--vino);color:var(--sobre-vino)}
.boton.vino:hover{background:var(--vino-2)}
.boton.contorno{border-color:var(--tinta);color:var(--tinta)}
.boton.contorno:hover{background:var(--tinta);color:var(--marfil)}
.boton.wa{background:var(--wa);color:#fff}
.boton.wa:hover{filter:brightness(1.08)}
.boton[disabled]{opacity:.4;cursor:not-allowed}
.enlace{font:500 .76rem/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--oro);padding-bottom:.35rem;color:var(--vino);background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}

/* Portada */
.portada{display:grid;grid-template-columns:1fr 1fr;min-height:min(46rem,88vh)}
@media (max-width:900px){.portada{grid-template-columns:1fr;min-height:0}}
.portada .texto{display:flex;flex-direction:column;justify-content:center;padding:4rem clamp(1.5rem,6vw,6rem)}
.portada h1{font-size:clamp(2.9rem,6.2vw,5.4rem);color:var(--vino)}
.portada h1 em{font-style:italic;color:var(--oro)}
.portada .entrada{font-size:1.12rem;color:var(--gris);margin:1.6rem 0 2.4rem;max-width:34rem}
.portada .acciones{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.portada .foto{position:relative;overflow:hidden;background:var(--crema)}
.portada .foto img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
@media (max-width:900px){.portada .foto{aspect-ratio:4/4.2;order:-1}}
.sello-portada{position:absolute;left:1.5rem;bottom:1.5rem;background:var(--papel);padding:1rem 1.3rem;max-width:15rem;border-left:2px solid var(--oro)}
.sello-portada b{display:block;font:500 1.35rem/1.1 var(--display);color:var(--vino)}
.sello-portada span{font-size:.82rem;color:var(--gris)}

/* Portada de temporada: en vez de una foto recortada va el cartel entero, como un póster.
   El guinda no llena la columna: es el marco del propio cartel, del tamaño de la imagen. */
.portada.temporada{min-height:auto}
.portada.temporada .foto{background:none;display:grid;place-items:center;
  padding:clamp(1rem,2.5vw,2.2rem)}
.portada.temporada .foto img{width:100%;max-width:34rem;height:auto;
  background:linear-gradient(160deg,#2b0f2b 0%,#4a1526 55%,#1d0a1a 100%);
  padding:clamp(.4rem,1vw,.7rem);border-radius:6px;
  box-shadow:0 26px 60px -22px rgba(74,21,38,.6)}
.portada.temporada .texto{background:var(--papel)}
.portada.temporada .sobretitulo{color:var(--vino-2)}
.portada.temporada .acciones{gap:.9rem}
@media (max-width:900px){
  .portada.temporada .foto{aspect-ratio:auto;order:-1;padding:1rem 1.2rem 0}
  .portada.temporada .foto img{max-width:30rem}
}

/* Valores */
.valores{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--papel)}
.valores ul{list-style:none;margin:0 auto;padding:1.6rem 1.5rem;max-width:var(--ancho);display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media (max-width:820px){.valores ul{grid-template-columns:repeat(2,1fr)}}
.valores li{display:flex;align-items:center;gap:.85rem;font-size:.9rem;color:var(--gris)}
.valores svg{width:1.7rem;height:1.7rem;color:var(--oro);flex:none}
.valores b{display:block;font-weight:500;color:var(--tinta);font-size:.92rem}

/* Marca de agua de temporada (Día de Muertos): cempasúchil y papel picado dibujados en
   vectores, en el dorado de la marca al 10%. Pesa ~2 KB y no pide nada al servidor.
   Para quitarla al acabar la temporada, se borra este bloque. Ver LEEME.md. */
section.seccion:not(.paleta),.nosotros,.editorial:not(.muertos){
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23a8844a' stroke-width='1.4' opacity='.10'><g transform='translate(70,60)'><circle r='6'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(0)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(30)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(60)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(90)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(120)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(150)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(180)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(210)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(240)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(270)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(300)'/><ellipse cy='-15' rx='4.2' ry='9' transform='rotate(330)'/></g><g transform='translate(230,200)'><circle r='5'/><ellipse cy='-12' rx='3.5' ry='7.2' transform='rotate(0)'/><ellipse cy='-12' rx='3.5' ry='7.2' transform='rotate(36)'/><ellipse cy='-12' rx='3.5' ry='7.2' transform='rotate(72)'/><ellipse cy='-12' rx='3.5' ry='7.2' transform='rotate(108)'/><ellipse cy='-12' rx='3.5' ry='7.2' transform='rotate(144)'/><ellipse cy='-12' rx='3.5' ry='7.2' transform='rotate(180)'/><ellipse cy='-12' rx='3.5' ry='7.2' transform='rotate(216)'/><ellipse cy='-12' rx='3.5' ry='7.2' transform='rotate(252)'/><ellipse cy='-12' rx='3.5' ry='7.2' transform='rotate(288)'/><ellipse cy='-12' rx='3.5' ry='7.2' transform='rotate(324)'/></g><g transform='translate(150,260)'><circle r='4.5'/><ellipse cy='-11' rx='3.15' ry='6.6' transform='rotate(0)'/><ellipse cy='-11' rx='3.15' ry='6.6' transform='rotate(36)'/><ellipse cy='-11' rx='3.15' ry='6.6' transform='rotate(72)'/><ellipse cy='-11' rx='3.15' ry='6.6' transform='rotate(108)'/><ellipse cy='-11' rx='3.15' ry='6.6' transform='rotate(144)'/><ellipse cy='-11' rx='3.15' ry='6.6' transform='rotate(180)'/><ellipse cy='-11' rx='3.15' ry='6.6' transform='rotate(216)'/><ellipse cy='-11' rx='3.15' ry='6.6' transform='rotate(252)'/><ellipse cy='-11' rx='3.15' ry='6.6' transform='rotate(288)'/><ellipse cy='-11' rx='3.15' ry='6.6' transform='rotate(324)'/></g><path d='M215 55l11 11-11 11-11-11z'/><path d='M60 195l9 9-9 9-9-9z'/></g></svg>");background-size:300px 300px}

/* Secciones */
section.seccion{padding:6rem 0}
@media (max-width:760px){section.seccion{padding:4rem 0}}
.cabeza{margin-bottom:3.2rem}
.cabeza.centro{text-align:center}
.cabeza.centro p{margin-left:auto;margin-right:auto}
.cabeza h2{font-size:clamp(2.3rem,4.6vw,3.6rem);color:var(--vino)}
.cabeza h2 em{font-style:italic;color:var(--oro)}
.cabeza p{color:var(--gris);margin-top:1rem;font-size:1.05rem}

/* Colección */
.coleccion{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem}
@media (max-width:1000px){.coleccion{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.coleccion{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}}
.producto{display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--linea);transition:box-shadow .3s,transform .3s}
.producto:hover{box-shadow:0 18px 40px -22px rgba(74,21,38,.35);transform:translateY(-3px)}
.producto .foto{aspect-ratio:4/5;overflow:hidden;background:var(--crema)}
.producto .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.producto:hover .foto img{transform:scale(1.04)}
.producto .cuerpo{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1;text-align:center}
.producto h3{font-size:1.65rem;color:var(--vino)}
.producto h3 a{text-decoration:none;color:inherit}
.producto h3 a:hover{text-decoration:underline;text-decoration-color:var(--oro);text-underline-offset:4px}
.producto .desc{font-size:.9rem;color:var(--gris);margin:0 auto}
.producto .desde{font:500 .72rem/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin-top:.4rem}
.producto .desde b{font:500 1.5rem/1 var(--display);letter-spacing:0;color:var(--tinta);margin-left:.25rem}
/* Galería de colores de cada pieza */
.colores-foto{margin-top:.7rem}
.colores-foto p{font:500 .7rem/1 var(--texto);letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin:0 0 .4rem}
.colores-foto .tiras{display:flex;flex-wrap:wrap;gap:.4rem}
.mini{width:3.1rem;height:3.1rem;padding:0;border:1px solid var(--linea);background:var(--papel);border-radius:6px;overflow:hidden;cursor:pointer;line-height:0}
.mini img{width:100%;height:100%;object-fit:cover}
.mini:hover{border-color:var(--lino)}
.mini[aria-pressed="true"]{border-color:var(--vino);box-shadow:inset 0 0 0 1px var(--vino)}
.colores-foto .pie-foto{font:italic 400 .86rem/1.35 var(--texto);letter-spacing:0;text-transform:none;color:var(--vino);margin:.5rem 0 0;min-height:1.2em}

/* Ficha con la reseña de cada pieza */
.ficha{margin-top:.7rem;border-top:1px solid var(--linea);padding-top:.7rem}
.ficha summary{cursor:pointer;font:500 .74rem/1 var(--texto);letter-spacing:.16em;text-transform:uppercase;color:var(--vino);list-style:none;display:flex;align-items:center;gap:.4rem}
.ficha summary::-webkit-details-marker{display:none}
.ficha summary::after{content:"+";font-size:1.1rem;line-height:1;color:var(--oro)}
.ficha[open] summary::after{content:"–"}
.ficha p{font-size:.9rem;color:var(--gris);margin:.6rem 0 0}
.ficha ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.3rem}
.ficha li{font-size:.9rem;display:grid;grid-template-columns:1rem 1fr;gap:.4rem}
.ficha li::before{content:"·";color:var(--oro);font-weight:700;text-align:center}
.ficha .nota{background:var(--crema);border-left:3px solid var(--oro);padding:.6rem .7rem;font-size:.84rem;color:var(--tinta);margin-top:.7rem}
.ficha .fuente{font-size:.8rem;margin-top:.5rem}
.ficha .fuente a{color:var(--vino)}

/* Quiénes somos */
.nosotros{background:var(--papel)}
.somos{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
@media (max-width:880px){.somos{grid-template-columns:1fr;gap:1.8rem}}
.somos .cabeza{margin:0;text-align:left}
.somos .cabeza .sobretitulo{justify-content:flex-start}
.somos-foto{margin:0;padding:.5rem 1rem}
.somos-foto img{display:block;width:100%;height:auto;border:10px solid var(--papel);border-radius:4px;
  box-shadow:0 22px 45px rgba(42,35,32,.2);transform:rotate(-3deg)}
@media (max-width:880px){.somos-foto{padding:.5rem}.somos-foto img{transform:rotate(-2deg)}}
.somos-lista{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.somos-lista li{border:1px solid var(--linea);background:var(--marfil);padding:1.3rem 1.4rem}
.somos-lista b{display:block;font:500 1.35rem/1.2 var(--display);color:var(--vino);margin-bottom:.4rem}
.somos-lista span{font-size:.94rem;color:var(--gris)}
.producto .enlace{align-self:center;margin-top:auto;padding-top:1rem}
.producto .foto a{display:block;height:100%}
@media (max-width:899px){
  /* Tarjeta compacta: lo demás se ve al entrar a la pieza (/jabon/...). */
  .producto .desc,.producto .colores-foto,.producto .ficha{display:none}
  .producto .cuerpo{padding:.9rem .7rem 1.1rem;gap:.35rem}
  .producto h3{font-size:1.2rem}
  .producto .desde{font-size:.66rem;letter-spacing:.14em}
  .producto .desde b{font-size:1.25rem}
  .producto .oferta{font-size:.74rem;line-height:1.3}
  .producto .nota-precio{font-size:.74rem;margin-top:.3rem}
  .producto .enlace{font-size:.68rem;letter-spacing:.14em;padding-top:.7rem}
}

/* Esencias y colores */
.paleta{background:var(--vino);color:var(--sobre-vino)}
.paleta .cabeza h2{color:var(--sobre-vino)}
.paleta .cabeza p{color:rgba(247,239,230,.75)}
.paleta-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
@media (max-width:820px){.paleta-grid{grid-template-columns:1fr;gap:3rem}}
.paleta h3{font:500 .72rem/1 var(--texto);letter-spacing:.28em;text-transform:uppercase;color:var(--oro);margin-bottom:1.6rem}
.esencias{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 2rem}
.esencias li{font:400 1.55rem/1 var(--display);padding:.95rem 0;border-bottom:1px solid rgba(247,239,230,.18);display:flex;align-items:center;gap:.8rem}
.esencias li::before{content:"";width:.4rem;height:.4rem;transform:rotate(45deg);background:var(--oro);flex:none}
.colores{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem .8rem}
@media (max-width:420px){.colores{grid-template-columns:repeat(4,1fr)}}
.colores li{display:flex;flex-direction:column;align-items:center;gap:.55rem;font-size:.8rem;text-align:center;line-height:1.2}
.gota{width:2.9rem;height:2.9rem;border-radius:50%;box-shadow:inset -4px -6px 10px rgba(0,0,0,.25),inset 4px 5px 8px rgba(255,255,255,.35),0 0 0 1px rgba(255,255,255,.25)}

/* Arma tu paquete */
.armador{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:3rem;align-items:start}
@media (max-width:960px){.armador{grid-template-columns:1fr;gap:2rem}}
.pasos{display:grid;gap:2.4rem}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{display:flex;align-items:baseline;gap:.9rem;padding:0;margin-bottom:1rem;width:100%}
legend .n{font:italic 400 1.9rem/1 var(--display);color:var(--oro)}
.pasos{counter-reset:paso}
.pasos fieldset:not([hidden]){counter-increment:paso}
legend .n::before{content:counter(paso,lower-roman) "."}
legend .t{font:500 .8rem/1 var(--texto);letter-spacing:.22em;text-transform:uppercase}
legend .v{margin-left:auto;font:italic 400 1.15rem/1 var(--display);color:var(--vino)}

.opc{position:relative;display:block}
.opc input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.opc input:focus-visible + *{outline:2px solid var(--oro);outline-offset:3px}

.elegir-producto{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
@media (max-width:640px){.elegir-producto{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .elegir-producto .caja span{font-size:.9rem;padding:.45rem .25rem .55rem}}
.elegir-producto .caja{background:var(--papel);border:1px solid var(--linea);height:100%;transition:border-color .2s}
.elegir-producto .caja img{aspect-ratio:1;width:100%;object-fit:cover}
.elegir-producto .caja span{display:block;padding:.65rem .5rem .75rem;text-align:center;font:500 1.1rem/1.15 var(--display)}
.elegir-producto .opc:hover .caja{border-color:var(--lino)}
.elegir-producto input:checked + .caja{border-color:var(--vino);box-shadow:inset 0 0 0 1px var(--vino)}
.elegir-producto input:checked + .caja span{color:var(--vino)}

.elegir-tipo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
@media (max-width:520px){.elegir-tipo{gap:.5rem}}
.elegir-tipo .caja{background:var(--papel);border:1px solid var(--linea);height:100%;transition:border-color .2s}
.elegir-tipo .caja img,.elegir-tipo .caja .sin-foto{aspect-ratio:1;width:100%;height:auto;object-fit:cover}
.elegir-tipo .caja .nom{display:block;padding:.65rem .4rem .75rem;text-align:center;font:500 1.08rem/1.15 var(--display)}
.elegir-tipo .caja .nom small{display:block;margin-top:.25rem;font:500 .95rem/1 var(--texto);color:var(--vino)}
.nota-precio{font-size:.86rem;color:var(--gris);margin:.5rem 0 0;font-style:italic}
@media (max-width:520px){.elegir-tipo .caja .nom{font-size:.95rem;padding:.5rem .25rem .6rem}}
.elegir-tipo .opc:hover .caja{border-color:var(--lino)}
.elegir-tipo input:checked + .caja{border-color:var(--vino);box-shadow:inset 0 0 0 1px var(--vino)}
.elegir-tipo input:checked + .caja .nom{color:var(--vino)}

.sin-foto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;width:100%;height:100%;background:radial-gradient(circle at 50% 42%,var(--papel) 0,var(--crema) 75%);color:var(--oro)}
.sin-foto svg{width:36%;max-width:5.5rem;height:auto}
.sin-foto .leyenda{font:500 .58rem/1.3 var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--gris);text-align:center;padding:0 .3rem}

.elegir-tamano{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem}
.elegir-tamano .caja{border:1px solid var(--linea);background:var(--papel);padding:1rem;text-align:center;height:100%}
.elegir-tamano .caja b{display:block;font:500 1.25rem/1.1 var(--display)}
.elegir-tamano .caja span{font:500 1.05rem var(--texto);color:var(--vino)}
.elegir-tamano input:checked + .caja{border-color:var(--vino);background:var(--vino);color:var(--sobre-vino)}
.elegir-tamano input:checked + .caja span{color:var(--oro-suave)}
.nota-mas{font-size:.86rem;color:var(--gris);margin:.8rem 0 0;font-style:italic}
.nota-paso{font-size:.88rem;color:var(--gris);margin:-.4rem 0 .9rem;font-style:italic}
.ahorro{color:var(--wa);font-size:.85rem;margin:.2rem 0 0}
.ahorro:empty{display:none}
.producto .oferta{font-size:.82rem;color:var(--wa);margin-top:.35rem}

.elegir-color{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem .5rem}
@media (max-width:640px){.elegir-color{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:420px){.elegir-color{grid-template-columns:repeat(4,minmax(0,1fr))}}
.elegir-color .caja{display:flex;flex-direction:column;align-items:center;gap:.45rem;font-size:.8rem;text-align:center;line-height:1.2;cursor:pointer}
.elegir-color .gota{width:2.6rem;height:2.6rem;transition:transform .2s}
.gota-ninguno{background:var(--papel);box-shadow:inset 0 0 0 1px var(--lino);position:relative}
.gota-ninguno::after{content:"";position:absolute;inset:0;margin:auto;width:70%;height:1px;background:var(--lino);transform:rotate(-45deg)}
.elegir-color input:checked + .caja .gota{box-shadow:inset -4px -6px 10px rgba(0,0,0,.25),inset 4px 5px 8px rgba(255,255,255,.35),0 0 0 3px var(--marfil),0 0 0 4px var(--vino);transform:scale(1.05)}
.elegir-color input:checked + .caja{font-weight:500;color:var(--vino)}

.elegir-esencia{display:flex;flex-wrap:wrap;gap:.6rem}
.elegir-esencia .caja{border:1px solid var(--lino);padding:.6rem 1.25rem;font:400 1.15rem/1 var(--display);background:var(--papel);border-radius:999px}
.elegir-esencia input:checked + .caja{background:var(--vino);border-color:var(--vino);color:var(--sobre-vino)}

.cantidad{display:inline-flex;align-items:center;border:1px solid var(--lino);background:var(--papel)}
.cantidad button{width:3rem;height:3rem;border:0;background:none;font-size:1.3rem;cursor:pointer;color:var(--vino)}
.cantidad button:disabled{color:var(--lino);cursor:not-allowed}
.cantidad input{width:3.2rem;text-align:center;border:0;background:none;font:500 1.1rem var(--texto);-moz-appearance:textfield}
.cantidad input::-webkit-inner-spin-button,.cantidad input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.fila-cant{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.fila-cant small{color:var(--gris);font-size:.88rem}

/* Barra para agregar el paquete, siempre junto a los pasos */
.agregar-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;background:var(--papel);border:1px solid var(--linea);border-left:3px solid var(--vino);padding:1.1rem 1.3rem}
.agregar-barra .sub{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.agregar-barra .sub span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.agregar-barra .sub b{font:500 2rem/1.1 var(--display);color:var(--tinta)}
.agregar-barra .sub small{font-size:.85rem;color:var(--gris)}
.agregar-barra .boton{flex:1 1 13rem}
.aviso-agregado{flex-basis:100%;margin:0;font-size:.92rem;color:var(--wa)}
.aviso-agregado:empty{display:none}
.aviso-agregado a{color:var(--vino);font-weight:500;margin-left:.3rem}
.aviso-agregado.error{color:#a3261f}
.resumen .chip[hidden]{display:none}

/* Resumen */
.resumen{position:sticky;top:6rem;background:var(--papel);border:1px solid var(--linea)}
@media (max-width:960px){.resumen{position:static}}
.resumen .foto{aspect-ratio:5/4;overflow:hidden;background:var(--crema);position:relative}
.resumen .foto img{width:100%;height:100%;object-fit:cover}
.resumen .foto .foto-dentro{width:100%;height:100%}
.resumen .sin-foto .leyenda{font-size:.7rem}
.resumen .chips{position:absolute;left:1rem;bottom:1rem;display:flex;gap:.4rem;flex-wrap:wrap}
.resumen .chip{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,253,249,.94);padding:.35rem .75rem .35rem .4rem;font-size:.8rem;border-radius:999px}
.resumen .chip i{width:1.1rem;height:1.1rem;border-radius:50%;box-shadow:inset -2px -3px 5px rgba(0,0,0,.25)}
.resumen .chip.solo{padding-left:.75rem}
.resumen .cuerpo{padding:1.6rem}
.resumen h3{font-size:2rem;color:var(--vino)}
.resumen .det{color:var(--gris);font-size:.95rem;margin:.35rem 0 1.2rem}
.resumen .precio{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--linea);padding-top:1.1rem}
.resumen .precio span{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.resumen .precio b{font:500 2.3rem/1 var(--display);color:var(--tinta)}

/* Pedido */
.pedido-seccion{background:var(--crema)}
.pedido{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:3rem;align-items:start}
@media (max-width:960px){.pedido{grid-template-columns:1fr;gap:2rem}}
.vacio{border:1px dashed var(--lino);padding:2.6rem 1.5rem;text-align:center;color:var(--gris);background:var(--papel)}
.vacio b{display:block;font:italic 400 1.6rem/1.2 var(--display);color:var(--vino);margin-bottom:.4rem}
.lineas{list-style:none;margin:0;padding:0;background:var(--papel);border:1px solid var(--linea)}
.linea{display:grid;grid-template-columns:4.5rem 1fr auto;gap:1.1rem;align-items:center;padding:1.1rem 1.2rem;border-bottom:1px solid var(--linea)}
.linea:last-child{border-bottom:0}
.linea img,.linea .sin-foto{width:4.5rem;height:4.5rem;object-fit:cover}
.linea .sin-foto .leyenda{display:none}
.linea h4{margin:0;font:500 1.3rem/1.15 var(--display);color:var(--vino)}
.linea small{display:block;color:var(--gris);font-size:.86rem;line-height:1.45}
.linea .der{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}
.linea .der b{font:500 1.3rem/1 var(--display)}
.linea .cantidad button{width:2.1rem;height:2.1rem;font-size:1rem}
.linea .cantidad input{width:2.2rem;font-size:.92rem}
.quitar{border:0;background:none;color:var(--gris);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.quitar:hover{color:var(--vino)}
@media (max-width:520px){.linea{grid-template-columns:3.6rem 1fr}.linea img,.linea .sin-foto{width:3.6rem;height:3.6rem}.linea .der{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}
.linea .num{display:block;font:500 .64rem/1 var(--texto);letter-spacing:.22em;text-transform:uppercase;color:var(--oro);margin-bottom:.35rem}
.totales{background:var(--papel);border:1px solid var(--linea);border-top:0;padding:1rem 1.2rem 1.3rem}
.totales .fila{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.35rem 0;color:var(--gris);font-size:.95rem}
.totales .fila b{font:500 1.35rem/1 var(--display);color:var(--tinta)}
.totales .fila em{font:italic 400 1.1rem/1 var(--display);color:var(--oro);text-align:right}
.totales .fila.total{border-top:1px solid var(--linea);margin-top:.5rem;padding-top:.95rem}
.totales .fila.total span{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);font-weight:500}
.totales .fila.total b{font-size:2.4rem;color:var(--vino)}
.nota-total{margin:.7rem 0 0;padding:.75rem .9rem;border-left:3px solid var(--oro);background:#fbf6ec;font-size:.88rem;color:var(--tinta)}

.datos{background:var(--papel);border:1px solid var(--linea);padding:1.8rem;display:grid;gap:1.1rem}
.datos h3{font-size:1.8rem;color:var(--vino)}
.campo label{display:block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:.45rem}
.campo input,.campo textarea{width:100%;padding:.8rem .9rem;border:1px solid var(--lino);background:var(--marfil);border-radius:0}
.campo textarea{resize:vertical;min-height:6rem}
.campo .ayuda{font-size:.82rem;color:var(--gris);margin:.4rem 0 0;font-style:italic}
.datos .boton{width:100%}
@media (max-width:520px){
  .boton{letter-spacing:.12em;padding:1rem 1.2rem}
  .datos .boton{font-size:.74rem;letter-spacing:.08em}
  .aviso-sup{letter-spacing:.12em;font-size:.68rem}
}
.datos .nota{font-size:.82rem;color:var(--gris);margin:0;text-align:center}
.campo .opcional{text-transform:none;letter-spacing:0;font-style:italic}
.campo .error{margin:.35rem 0 0;font-size:.82rem;color:#a3261f}
.campo .error:empty{display:none}
.campo input[aria-invalid="true"]{border-color:#a3261f;background:#fdf3f2}
.campo .opc-copia{display:flex;align-items:flex-start;gap:.6rem;margin:.75rem 0 0;font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--tinta);cursor:pointer}
.campo .opc-copia input{flex:none;width:1.05rem;height:1.05rem;margin:.15rem 0 0;padding:0;accent-color:var(--vino);cursor:pointer}
.entrega{border:0;padding:0;margin:0;display:grid;gap:.6rem;min-width:0}
.entrega legend{display:block;width:100%;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:.6rem;padding:0}
.opc-entrega{position:relative;display:block;cursor:pointer}
.opc-entrega input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opc-entrega span{display:grid;grid-template-columns:1.1rem 1fr;column-gap:.85rem;padding:.85rem 1rem;border:1px solid var(--lino);background:var(--marfil);transition:border-color .2s}
.opc-entrega span::before{content:"";grid-row:1/3;width:1.1rem;height:1.1rem;border-radius:50%;border:1px solid var(--gris);margin-top:.25rem;box-shadow:inset 0 0 0 3px var(--marfil)}
.opc-entrega b{font-weight:500}
.opc-entrega small{color:var(--gris);font-size:.85rem}
.opc-entrega input:checked + span{border-color:var(--vino);background:var(--papel)}
.opc-entrega input:checked + span::before{border-color:var(--vino);background:var(--vino)}
.opc-entrega input:focus-visible + span{outline:2px solid var(--oro);outline-offset:2px}
.paqueteria{display:grid;gap:1rem;padding:1.1rem;border:1px solid var(--oro-suave);background:#fbf6ec}
.aviso-envio{margin:0;padding:.8rem .95rem;border-left:3px solid var(--oro);background:var(--papel);font-size:.9rem;color:var(--tinta)}
.dos-campos{display:grid;grid-template-columns:1fr 8rem;gap:.8rem}
@media (max-width:420px){.dos-campos{grid-template-columns:1fr}}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.estado-envio{margin:0;font-size:.9rem;text-align:center;color:var(--gris)}
.estado-envio:empty{display:none}
.estado-envio.error{color:#a3261f}
.estado-envio a{color:var(--vino);font-weight:500}
.boton.cargando{opacity:.7;cursor:progress}
.enviado{background:var(--papel);border:1px solid var(--linea);padding:clamp(2rem,5vw,3.5rem);text-align:center;max-width:44rem;margin:0 auto}
.enviado:focus{outline:none}
.enviado svg{width:3.4rem;height:3.4rem;color:var(--wa);margin:0 auto 1.2rem;display:block}
.enviado h3{font-size:clamp(2rem,4vw,2.7rem);color:var(--vino);margin-bottom:1rem}
.enviado p{margin:0 auto 1rem;color:var(--gris)}
.enviado b{color:var(--tinta);font-weight:500}
.enviado .nota-total{text-align:left}
.enviado .boton{margin-top:.8rem}
.pago-mp{border:1px solid var(--linea);border-left:3px solid var(--vino);background:var(--marfil);padding:1.2rem 1.3rem;margin:1.4rem 0 .6rem;text-align:left}
.pago-mp p{margin:0}
.pago-mp .boton{width:100%;margin-top:1rem}

/* Regalo editorial */
.editorial{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--papel);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
@media (max-width:860px){.editorial{grid-template-columns:1fr}}
.editorial .foto{min-height:24rem;overflow:hidden}
.editorial .foto img{width:100%;height:100%;object-fit:cover}
.editorial .texto{padding:clamp(2.5rem,6vw,5rem);display:flex;flex-direction:column;justify-content:center}
.editorial h2{font-size:clamp(2.2rem,4.2vw,3.2rem);color:var(--vino)}
.editorial h2 em{color:var(--oro)}
.editorial p{color:var(--gris);margin:1.2rem 0 2rem}
.editorial .boton{align-self:flex-start}

/* Franja de temporada (Día de Muertos). Para quitarla: se le borra la clase "muertos"
   a la sección y se regresa la foto y los textos de antes. Ver LEEME.md. */
.editorial.muertos{position:relative;background:linear-gradient(160deg,#2b0f2b 0%,#4a1526 55%,#1d0a1a 100%);border-color:#1d0a1a}
.editorial.muertos::before{content:"";position:absolute;inset:0 0 auto;height:6px;
  background:repeating-linear-gradient(90deg,#f0921f 0 28px,#d63384 28px 56px,#7b3fa0 56px 84px,#1f9e8f 84px 112px)}
.editorial.muertos .foto{background:#1d0a1a;display:grid;place-items:center;padding:clamp(1rem,2.5vw,2rem)}
.editorial.muertos .foto img{width:100%;height:auto;max-height:32rem;object-fit:contain;border-radius:4px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.8)}
.editorial.muertos .texto{color:var(--sobre-vino)}
.editorial.muertos .sobretitulo{color:#f0921f}
.editorial.muertos .sobretitulo::before{background:#f0921f}
.editorial.muertos h2{color:var(--sobre-vino)}
.editorial.muertos h2 em{color:#f0921f;font-style:italic}
.editorial.muertos p{color:rgba(247,239,230,.82)}
.editorial.muertos .acciones{display:flex;flex-wrap:wrap;gap:.9rem}
.editorial.muertos .boton.contorno{border-color:var(--sobre-vino);color:var(--sobre-vino)}
.editorial.muertos .boton.contorno:hover{background:var(--sobre-vino);color:var(--vino)}

/* Contacto */
.contacto{background:var(--vino);color:var(--sobre-vino);text-align:center;padding:6rem 0}
.contacto h2{font-size:clamp(2.4rem,5vw,3.8rem)}
.contacto h2 em{color:var(--oro)}
.contacto p{margin:1.2rem auto 2.4rem;color:rgba(247,239,230,.8);font-size:1.08rem}
.contacto .numero{display:block;font:italic 400 clamp(2rem,5vw,3rem)/1 var(--display);color:var(--sobre-vino);text-decoration:none;margin-bottom:2.2rem;letter-spacing:.02em}
.contacto .boton.wa{padding:1.2rem 2.2rem}
.contacto .horario{display:block;margin-top:1.6rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}

footer{background:#35101c;color:rgba(247,239,230,.7);font-size:.82rem;padding:2rem 0}
footer .envoltura{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem}
footer .logo b{color:var(--sobre-vino);font-size:1.5rem}

/* Barra inferior en celular */
.barra-movil{display:none}
@media (max-width:960px){
  .barra-movil{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));background:var(--papel);border-top:1px solid var(--linea);justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 -8px 24px -16px rgba(0,0,0,.3)}
  .barra-movil span{font:500 1.15rem var(--display);color:var(--vino)}
  .barra-movil .boton{padding:.8rem 1.1rem}
  footer{padding-bottom:6rem}
}

/* Franja que invita a armar el paquete (la portada ya no trae el armador) */
.llamada .cabeza{margin-bottom:0}
.llamada .acciones{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.2rem}

/* Migaja de pan de /pedir */
.migaja{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding-top:2rem;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.migaja a{color:var(--vino);text-decoration:none;border-bottom:1px solid var(--oro-suave)}
.migaja a:hover{border-color:var(--oro)}
.migaja span{color:var(--lino)}