/* ============================================================
   MINTUS · sistema de diseño
   Paleta tomada del logotipo oficial: menta acuarela, crema y
   gris cálido, con el oro del producto como acento.
   Los colores NO se definen aquí: los inyecta PHP desde
   config.json (ver lib/mintus.php → tema_css). Este archivo
   solo define los tonos de respaldo y toda la estructura.
   ============================================================ */

:root{
  /* Respaldo por si config.json no carga */
  --menta:#B8E7D7; --menta-claro:#DCF1E9; --menta-medio:#8FD5C2; --menta-fuerte:#2E7D6B;
  --crema:#F8F4EB; --crema-tono:#F1EBDF;
  --tinta:#35362F; --tinta-suave:#5D5E59; --oro:#B08A46;
  --boton:#2E7D6B; --boton-texto:#FFFFFF;

  /* Derivados */
  --papel:#FFFFFF;
  --linea:#E4DED1;
  --tinta-tenue:#8B877E;
  --exito:#2E7D6B; --alerta:#8A5F12; --error:#A8443C;

  /* Los campos de formulario llevan un borde MÁS marcado que las tarjetas.
     En una tarjeta el borde es adorno —ya se distingue por fondo y sombra—,
     pero en un campo el borde es la única señal de que ahí se escribe, y
     WCAG pide 3:1 para eso. Con --linea daba 1.5:1. */
  --linea-campo:#8D8981;

  --r-sm:8px; --r:14px; --r-lg:24px; --r-full:999px;
  --sombra:0 1px 2px rgba(53,54,47,.04), 0 6px 20px rgba(53,54,47,.06);
  --sombra-lg:0 2px 6px rgba(53,54,47,.05), 0 18px 50px rgba(53,54,47,.12);

  --display:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,ui-serif,serif;
  --texto:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,'Cascadia Code',Consolas,monospace;

  --ancho:1180px; --nav-h:76px;
}

/* ============================================================
   SOBRE EL MODO OSCURO

   Se quitó la inversión automática, a propósito. Tres razones:

   1. Estaba rota. La paleta de config.json se inyecta después de
      esta hoja y solo cubría parte de las variables, así que en
      modo oscuro quedaba fondo claro con tarjetas negras: texto
      con 1.31:1 de contraste, o sea invisible.

   2. La marca es clara. Menta, crema y gris cálido salen del
      logotipo; invertirlos da algo que ya no es Mintus.

   3. Ahora el modo oscuro es una DECISIÓN, no un accidente: la
      plantilla «Atelier» es exactamente eso, y se elige a mano.

   Además, con inversión automática la dueña previsualizaba en
   claro y la mitad de sus visitantes veía otra cosa — lo que
   volvía inútil el botón de vista previa.
   ============================================================ */

/* ============================================================ BASE */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--texto); font-size:16px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--menta-fuerte); outline-offset:3px; border-radius:4px}

/* ============================================================
   REGLA ÚNICA DE ICONOS
   Todos los iconos decorativos son de TRAZO. Antes cada contexto
   definía su propio estilo: unos traían remates redondeados y
   otros no, así que se veían picudos e inconsistentes; y donde
   faltaba la regla el navegador los pintaba como mancha negra,
   porque su valor por omisión es fill:black; stroke:none.
   Los logotipos (Instagram, WhatsApp) traen fill="currentColor"
   propio y quedan fuera por el :not([fill]).
   ============================================================ */
/* El :not([fill]) es la clave: los logotipos (WhatsApp, Instagram) traen
   fill="currentColor" propio y quedan fuera. Toda regla de trazo por
   contexto lleva el mismo filtro, porque poner fill:none a un logotipo
   relleno lo deja invisible — que es justo lo que pasaba en los caminos. */
svg[aria-hidden="true"]:not([fill]){
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

h1,h2,h3{font-family:var(--display); font-weight:400; letter-spacing:-.015em; line-height:1.18; margin:0}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.1rem; font-family:var(--texto); font-weight:650; letter-spacing:0}
p{margin:0 0 1rem}

.contenedor{width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:22px}
.seccion{padding:clamp(54px,8.5vw,104px) 0}
.centrado{text-align:center}
.oculto{display:none!important}

.eyebrow{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.22em;
  font-weight:700; color:var(--menta-fuerte); margin-bottom:.75rem;
}
.entrada{max-width:60ch; color:var(--tinta-suave); font-size:1.04rem}
.centrado .entrada{margin-inline:auto}
.resaltado{font-style:italic; color:var(--menta-fuerte)}

/* ============================================================ BOTONES */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.9em 1.7em; border-radius:var(--r-full); font-weight:600; font-size:.93rem;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s;
  white-space:nowrap; line-height:1;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primario{background:var(--boton); color:var(--boton-texto); box-shadow:0 4px 16px rgba(46,125,107,.22)}
.btn-primario:hover{box-shadow:0 10px 26px rgba(46,125,107,.3)}
.btn-contorno{border:1.5px solid var(--linea); color:var(--tinta)}
.btn-contorno:hover{border-color:var(--menta-fuerte); color:var(--menta-fuerte)}
.btn-claro{background:var(--papel); color:var(--menta-fuerte); box-shadow:var(--sombra)}
/* Verde de WhatsApp adaptado a la paleta: el #25D366 original daba
   1.98:1 con texto blanco —ilegible— y con luminancia 0.479 pesaba el
   triple que menta y oro, así que se comía la atención de la página.
   Este conserva la lectura de «WhatsApp» con 5.15:1 y el mismo peso
   óptico que los otros acentos. */
.btn-wa{background:var(--whatsapp); color:#fff; box-shadow:0 4px 16px rgba(23,125,76,.28)}
.btn-wa:hover{box-shadow:0 10px 26px rgba(23,125,76,.38)}
.btn-bloque{width:100%}
.btn-sm{padding:.62em 1.2em; font-size:.85rem}

/* ============================================================ NAV */
.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:color-mix(in srgb, var(--crema) 90%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea);
}
.nav-in{height:100%; display:flex; align-items:center; gap:1.5rem}
.logo{display:flex; align-items:center; gap:.6rem}
.logo img{width:46px; height:46px; border-radius:50%; object-fit:cover}
.logo span{font-family:var(--display); font-size:1.4rem; letter-spacing:-.02em}
.nav-links{display:flex; gap:1.7rem; margin-left:auto; align-items:center}
.nav-links a:not(.btn){font-size:.91rem; font-weight:500; color:var(--tinta-suave); transition:color .15s}
/* El :not(.btn) es indispensable. Sin él, `.nav-links a` (especificidad
   0-1-1) vencía a `.btn-primario` (0-1-0) y pintaba el texto del botón
   «Escríbenos» en gris sobre verde: 1.33:1 de contraste, ilegible. */
.nav-links a:not(.btn):hover,.nav-links a:not(.btn)[aria-current="page"]{color:var(--menta-fuerte)}
.nav-cta{margin-left:.3rem}
.hamburguesa{display:none; margin-left:auto; padding:.5rem; border-radius:var(--r-sm)}
.hamburguesa svg{width:24px;height:24px;stroke-width:1.8}

@media(max-width:880px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:var(--crema); border-bottom:1px solid var(--linea);
    padding:.5rem 22px 1.3rem; margin:0; align-items:stretch;
    transform:translateY(-130%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--sombra-lg);
  }
  .nav-links.abierto{transform:translateY(0)}
  .nav-links a:not(.btn){padding:.9rem 0; border-bottom:1px solid var(--linea); font-size:1rem}
  .nav-cta{margin:1rem 0 0}
  .hamburguesa{display:block}
}

/* ============================================================ HERO */
.hero{position:relative; padding:clamp(48px,7vw,92px) 0 clamp(44px,6vw,80px); overflow:hidden}
.hero::before{
  content:''; position:absolute; top:-25%; right:-12%; width:62vw; height:62vw;
  max-width:760px; max-height:760px; border-radius:50%;
  background:var(--menta); opacity:.4; filter:blur(70px); pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; position:relative}
.hero h1{margin-bottom:1.2rem}
.hero-acciones{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem}
.hero-datos{display:flex; gap:2.4rem; margin-top:2.8rem; flex-wrap:wrap}
.hero-dato strong{display:block; font-family:var(--display); font-size:1.55rem; line-height:1.1; font-weight:400}
.hero-dato span{font-size:.74rem; color:var(--tinta-tenue); text-transform:uppercase; letter-spacing:.11em}
.hero-visual{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra-lg); aspect-ratio:4/5}
.hero-visual img{width:100%; height:100%; object-fit:cover}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:420px; margin-inline:auto; aspect-ratio:1}
  .hero-datos{gap:1.6rem}
}

/* ============================================================ CINTA */
.cinta{background:var(--menta); color:var(--tinta); padding:.8rem 0; overflow:hidden}
.cinta-track{display:flex; gap:2.6rem; white-space:nowrap; animation:desliza 34s linear infinite; font-size:.82rem; font-weight:600; letter-spacing:.05em}
.cinta-track span{display:inline-flex; align-items:center; gap:.5rem}
@keyframes desliza{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cinta-track{animation:none}}

/* ============================================================ PIEZAS */
.rejilla{display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
@media(max-width:540px){.rejilla{grid-template-columns:repeat(2,1fr); gap:14px}}

.pieza{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  overflow:hidden; transition:transform .24s ease, box-shadow .24s ease, border-color .24s;
  display:flex; flex-direction:column; position:relative;
}
.pieza:hover{transform:translateY(-5px); box-shadow:var(--sombra-lg); border-color:var(--menta-medio)}
.pieza-img{position:relative; aspect-ratio:1; background:var(--crema-tono); overflow:hidden}
.pieza-img img{width:100%; height:100%; object-fit:cover; transition:transform .55s ease}
.pieza:hover .pieza-img img{transform:scale(1.05)}
.pieza-ph{position:absolute; inset:0; display:grid; place-items:center; background:var(--menta-claro)}
.pieza-ph img{width:42%; height:auto; opacity:.45; object-fit:contain}
.pieza-cuerpo{padding:15px 16px 17px; display:flex; flex-direction:column; gap:.28rem; flex:1}
.pieza-cat{font-size:.66rem; text-transform:uppercase; letter-spacing:.13em; color:var(--tinta-tenue); font-weight:700}
.pieza-nombre{font-family:var(--display); font-size:1.05rem; line-height:1.32}
.pieza-codigo{font-family:var(--mono); font-size:.68rem; color:var(--tinta-tenue)}
.pieza-precio{font-size:1.02rem; font-weight:650; margin-top:auto; padding-top:.55rem; color:var(--menta-fuerte)}

.sello{
  position:absolute; top:11px; left:11px; z-index:2;
  padding:.32em .8em; border-radius:var(--r-full);
  font-size:.66rem; font-weight:750; text-transform:uppercase; letter-spacing:.08em;
}
.sello-nuevo{background:var(--menta-fuerte); color:#fff}
.sello-apartada{background:var(--alerta); color:#fff}
.sello-vendida{background:var(--tinta); color:var(--crema)}
.pieza.no-disp .pieza-img img{filter:grayscale(.7) opacity(.6)}

/* ============================================================ FILTROS */
.barra-filtros{
  position:sticky; top:var(--nav-h); z-index:50; background:var(--crema);
  border-bottom:1px solid var(--linea); padding:15px 0; margin-bottom:30px;
}
.filtros-fila{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.buscador{position:relative; flex:1; min-width:210px}
.buscador input{
  width:100%; padding:.72em 1em .72em 2.7em; border:1.5px solid var(--linea-campo);
  border-radius:var(--r-full); background:var(--papel); font-size:.92rem;
}
.buscador input:focus{border-color:var(--menta-fuerte); outline:none}
.buscador svg{position:absolute; left:1em; top:50%; transform:translateY(-50%); width:17px; height:17px; stroke:var(--tinta-tenue); stroke-width:2}
select.filtro{
  padding:.72em 2.3em .72em 1em; border:1.5px solid var(--linea-campo); border-radius:var(--r-full);
  background:var(--papel) no-repeat right 1em center; font-size:.89rem; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B877E' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:13px}
.chip{
  padding:.46em 1.05em; border-radius:var(--r-full); border:1.5px solid var(--linea);
  font-size:.84rem; font-weight:600; color:var(--tinta-suave); transition:all .16s; background:var(--papel);
}
.chip:hover{border-color:var(--menta-medio)}
.chip[aria-pressed="true"]{background:var(--menta-fuerte); color:#fff; border-color:transparent}
.resultados-info{font-size:.87rem; color:var(--tinta-tenue); margin:8px 0 22px}

/* ============================================================ FICHA */
.ficha{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
@media(max-width:880px){.ficha{grid-template-columns:1fr; gap:1.8rem}}
.galeria-principal{border-radius:var(--r-lg); overflow:hidden; background:var(--crema-tono); position:relative}
.galeria-principal img{width:100%; height:auto; display:block}
.galeria-miniaturas{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.galeria-miniaturas button{width:70px; height:70px; border-radius:var(--r-sm); overflow:hidden; border:2px solid transparent; background:var(--crema-tono)}
.galeria-miniaturas button[aria-current="true"]{border-color:var(--menta-fuerte)}
.galeria-miniaturas img{width:100%;height:100%;object-fit:cover}

.ficha-info .precio{font-family:var(--display); font-size:2.2rem; margin:.5rem 0 .3rem; color:var(--menta-fuerte)}
.ficha-atributos{list-style:none; padding:0; margin:1.6rem 0; border-top:1px solid var(--linea)}
.ficha-atributos li{display:flex; justify-content:space-between; gap:1rem; padding:.72rem 0; border-bottom:1px solid var(--linea); font-size:.92rem}
.ficha-atributos .k{color:var(--tinta-tenue)}
.ficha-atributos .v{font-weight:600; text-align:right}
.ficha-acciones{display:flex; flex-direction:column; gap:.7rem; margin-top:1.6rem}
.aviso{padding:.95rem 1.15rem; border-radius:var(--r); font-size:.9rem; background:var(--crema-tono); border-left:3px solid var(--tinta-tenue); margin:1.2rem 0}
.aviso-apartada{background:#FBF3E0; border-color:var(--alerta); color:#6B4A0E}
.aviso-vendida{background:var(--crema-tono); border-color:var(--tinta-tenue)}
.nota-fina{font-size:.85rem; color:var(--tinta-tenue); margin-top:1.3rem}

/* ============================================================ BLOQUES */
.valores{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.valor{padding:28px 25px; border-radius:var(--r); background:var(--papel); border:1px solid var(--linea)}
.valor-icono{width:46px; height:46px; border-radius:var(--r-sm); background:var(--menta-claro); display:grid; place-items:center; margin-bottom:15px}
.valor-icono svg{width:22px; height:22px; stroke:var(--menta-fuerte); stroke-width:1.8}
.valor h3{margin-bottom:.45rem}
.valor p{font-size:.91rem; color:var(--tinta-suave); margin:0}

.cat-rejilla{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cat{
  position:relative; aspect-ratio:3/4; border-radius:var(--r); overflow:hidden;
  display:flex; align-items:flex-end; padding:19px;
  background:var(--menta-claro); border:1px solid var(--linea);
  transition:transform .24s, box-shadow .24s;
}
.cat:hover{transform:translateY(-5px); box-shadow:var(--sombra-lg)}

/* La tarjeta estaba construida para llevar foto —de ahí el overflow
   y el z-index del texto— pero nunca se le puso una. Quedaba un
   rectángulo de menta plana. Ahora se ilustra con una pieza real
   de la categoría. */
.cat img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
         transition:transform .55s ease}
.cat-foto:hover img{transform:scale(1.06)}
/* Velo oscuro solo en la parte baja: sin él, un nombre claro sobre una
   foto clara es ilegible, y el contraste depende de qué joya toque. */
.cat-foto::after{content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top, rgba(20,21,18,.82) 0%, rgba(20,21,18,.35) 38%, rgba(20,21,18,0) 68%)}
.cat span{font-family:var(--display); font-size:1.22rem; position:relative; z-index:1}
.cat small{display:block; font-family:var(--texto); font-size:.74rem; color:var(--tinta-tenue)}
.cat-foto span{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45)}
.cat-foto small{color:rgba(255,255,255,.88)}

.cta-final{background:var(--menta); border-radius:var(--r-lg); padding:clamp(38px,6vw,66px); text-align:center; color:var(--tinta)}
.cta-final h2{margin-bottom:.9rem}
.cta-final p{color:var(--tinta-suave); max-width:50ch; margin-inline:auto}
.cta-final .btn{margin-top:1.5rem}

/* ============================================================ PIE */
.pie{background:var(--crema-tono); border-top:1px solid var(--linea); padding:58px 0 30px}
.pie-grid{display:grid; gap:34px; grid-template-columns:1.7fr 1fr 1fr 1.1fr}
@media(max-width:780px){.pie-grid{grid-template-columns:1fr 1fr; gap:28px}}
.pie h4{font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--tinta-tenue); margin:0 0 1rem; font-weight:700}
.pie ul{list-style:none; padding:0; margin:0}
.pie li{margin-bottom:.58rem}
.pie a{font-size:.89rem; color:var(--tinta-suave)}
.pie a:hover{color:var(--menta-fuerte)}
.pie-desc{font-size:.89rem; color:var(--tinta-suave); max-width:32ch; margin:1rem 0 1.3rem}
.pie-nota{font-size:.85rem; color:var(--tinta-tenue)}
.redes{display:flex; gap:10px}
.redes a{width:38px; height:38px; border-radius:var(--r-full); background:var(--papel); border:1px solid var(--linea); display:grid; place-items:center; transition:all .18s}
.redes a:hover{background:var(--menta-fuerte); border-color:transparent}
.redes svg{width:17px; height:17px; fill:var(--tinta-suave)}
.redes a:hover svg{fill:#fff}
.pie-base{margin-top:42px; padding-top:24px; border-top:1px solid var(--linea); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.81rem; color:var(--tinta-tenue)}

/* ============================================================ FLOTANTE */
.wa-flotante{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:56px; height:56px; border-radius:var(--r-full); background:var(--whatsapp);
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(23,125,76,.42);
  transition:transform .2s; color:#fff;
}
.wa-flotante:hover{transform:scale(1.08)}

/* ============================================================ ESTADOS */
.vacio{text-align:center; padding:70px 20px; color:var(--tinta-tenue)}
.vacio svg{width:56px; height:56px; margin-bottom:16px; opacity:.4; stroke-width:1.4}
.vacio h2,.vacio h3{color:var(--tinta); margin-bottom:.5rem}
.esqueleto{background:linear-gradient(90deg,var(--crema-tono) 25%,var(--linea) 50%,var(--crema-tono) 75%); background-size:200% 100%; animation:brilla 1.4s infinite}
@keyframes brilla{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.esqueleto{animation:none}}

.aparece{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.aparece.visible{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.aparece{opacity:1; transform:none}}

/* ============================================================ IMPRESIÓN */
@media print{
  .nav,.wa-flotante,.barra-filtros,.pie,.cinta{display:none}
  body{background:#fff; color:#000}
}

/* ============================================================
   CARRITO / PEDIDO
   Añadido con el módulo de pedido. Usa las mismas variables de
   la paleta: no introduce colores nuevos.
   ============================================================ */

/* ---- La tarjeta ahora es <article> con el enlace dentro ---- */
.pieza-liga{display:flex; flex-direction:column; flex:1; color:inherit}

.pieza-accion{padding:0 16px 15px; margin-top:-4px}
.btn-agregar{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.42rem;
  padding:.62em 1em; border-radius:var(--r-full); font-size:.82rem; font-weight:650;
  border:1.5px solid var(--linea); color:var(--tinta-suave); background:transparent;
  transition:background .2s, color .2s, border-color .2s, transform .12s;
}
.btn-agregar svg:not([fill]){width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.btn-agregar:hover{border-color:var(--menta-fuerte); color:var(--menta-fuerte); background:var(--menta-claro)}
.btn-agregar.esta-dentro{background:var(--menta-fuerte); border-color:var(--menta-fuerte); color:var(--boton-texto)}
.btn-agregar.esta-dentro svg{stroke-width:2.6}
.btn-agregar.pulso{transform:scale(.94)}
.pieza.no-disp .btn-agregar{opacity:.75}

.btn-agregar-ficha{display:inline-flex; align-items:center; justify-content:center; gap:.5rem}
.btn-agregar-ficha svg:not([fill]){fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.btn-agregar-ficha.esta-dentro{background:var(--menta-fuerte)}

.crt-ir{
  display:block; text-align:center; margin-top:.35rem; font-size:.85rem;
  color:var(--menta-fuerte); font-weight:600; text-decoration:underline; text-underline-offset:3px;
}

/* ---- Botón del pedido en la barra ---- */
.nav-carrito{
  position:relative; display:inline-grid; place-items:center; margin-left:14px;
  width:42px; height:42px; border-radius:var(--r-full); flex-shrink:0;
  border:1px solid var(--linea); background:var(--papel); transition:border-color .2s, color .2s;
}
.nav-carrito:hover,.nav-carrito[aria-current="page"]{border-color:var(--menta-fuerte); color:var(--menta-fuerte)}
.nav-carrito svg:not([fill]){width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.carrito-num{
  position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center; border-radius:var(--r-full);
  background:var(--menta-fuerte); color:var(--boton-texto);
  font-size:.66rem; font-weight:800; line-height:1; border:2px solid var(--crema);
}
.carrito-num[hidden]{display:none}

/* ---- Vista del pedido ---- */
.crt-grid{display:grid; grid-template-columns:1fr 330px; gap:30px; align-items:start}
.crt-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}

.crt-fila{
  display:grid; grid-template-columns:88px 1fr auto auto; gap:16px; align-items:center;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:12px 14px;
}
.crt-foto{display:block; width:88px; height:88px; border-radius:var(--r-sm); overflow:hidden; background:var(--crema-tono); flex-shrink:0}
.crt-foto img{width:100%; height:100%; object-fit:cover}
.crt-datos{display:flex; flex-direction:column; gap:.16rem; min-width:0}
.crt-nombre{font-family:var(--display); font-size:1.04rem; line-height:1.3}
.crt-nombre:hover{color:var(--menta-fuerte)}
.crt-codigo{font-family:var(--mono); font-size:.68rem; color:var(--tinta-tenue)}
.crt-estado{font-size:.72rem; color:var(--alerta); font-weight:600}
.crt-precio{font-size:1rem; font-weight:650; color:var(--menta-fuerte); white-space:nowrap}
.crt-quitar{
  display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-full);
  color:var(--tinta-tenue); transition:background .2s, color .2s;
}
.crt-quitar:hover{background:var(--crema-tono); color:var(--error)}
.crt-quitar svg:not([fill]){width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

.crt-vaciar{
  margin-top:16px; font-size:.82rem; color:var(--tinta-tenue);
  text-decoration:underline; text-underline-offset:3px;
}
.crt-vaciar:hover{color:var(--error)}

.crt-resumen{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:22px; position:sticky; top:calc(var(--nav-h) + 16px); box-shadow:var(--sombra);
}
.crt-resumen h3{font-family:var(--display); font-size:1.2rem; margin-bottom:1rem}
.crt-linea{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:.5rem 0; font-size:.9rem; color:var(--tinta-suave)}
.crt-linea-total{
  border-top:1px solid var(--linea); margin-top:.4rem; padding-top:.9rem;
  font-size:1rem; color:var(--tinta);
}
.crt-linea-total strong{font-size:1.35rem; font-weight:650; color:var(--menta-fuerte); font-family:var(--display)}
.crt-envio{font-size:.76rem; color:var(--tinta-tenue); margin:.2rem 0 1.1rem}
.crt-resumen .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem}
.crt-resumen .btn.cargando{opacity:.6; pointer-events:none}

/* ---- Aviso flotante ---- */
.carrito-aviso{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  z-index:80; max-width:calc(100vw - 32px);
  background:var(--tinta); color:var(--crema);
  padding:.78rem 1.25rem; border-radius:var(--r-full);
  font-size:.86rem; font-weight:550; box-shadow:var(--sombra-lg);
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
}
.carrito-aviso.visible{opacity:1; transform:translate(-50%,0)}
.carrito-aviso[data-tipo="aviso"]{background:var(--alerta); color:#fff}
.carrito-aviso[data-tipo="error"]{background:var(--error); color:#fff}

/* ---- Enlace al sistema en el pie ---- */
.pie-base-der{display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap}
.pie-sistema{
  display:inline-flex; align-items:center; gap:.36rem;
  font-size:.76rem; color:var(--tinta-tenue); opacity:.75; transition:opacity .2s, color .2s;
}
.pie-sistema:hover{opacity:1; color:var(--menta-fuerte)}
.pie-sistema svg:not([fill]){width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ---- Adaptación a pantallas chicas ---- */
@media (max-width:900px){
  .crt-grid{grid-template-columns:1fr}
  .crt-resumen{position:static}
}
@media (max-width:560px){
  .crt-fila{grid-template-columns:64px 1fr auto; gap:12px; padding:10px 12px}
  .crt-foto{width:64px; height:64px}
  .crt-precio{grid-column:2; font-size:.92rem}
  .crt-quitar{grid-row:1 / span 2; grid-column:3}
  .nav-carrito{width:38px; height:38px; margin-left:8px}
}

/* El botón flotante de WhatsApp no debe tapar el aviso del pedido. */
@media (max-width:560px){
  .carrito-aviso{bottom:88px}
}

@media (prefers-reduced-motion:reduce){
  .btn-agregar,.carrito-aviso{transition:none}
  .btn-agregar.pulso{transform:none}
}

/* ============================================================
   CAMINOS DE COMPRA
   Infografía de tres rutas. Cada camino tiene su acento, todos
   tomados de la paleta de la marca: menta, verde de WhatsApp y
   oro (el color del producto).
   ============================================================ */

.caminos{
  display:grid; gap:22px; grid-template-columns:repeat(3,1fr);
  position:relative; margin-top:.5rem;
}

.camino{
  --acento:var(--menta-fuerte);
  --acento-suave:var(--menta-claro);
  position:relative; display:flex; flex-direction:column;
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--r-lg); padding:34px 26px 26px;
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.camino::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--acento); border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.camino:hover{transform:translateY(-6px); box-shadow:var(--sombra-lg); border-color:var(--acento)}

.camino[data-acento="wa"]  {--acento:var(--whatsapp); --acento-suave:#EAF6EF}
.camino[data-acento="oro"] {--acento:var(--oro); --acento-suave:#FBF7EE}


/* Número del camino: guía la lectura de izquierda a derecha */
.camino-num{
  position:absolute; top:-15px; left:26px;
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:var(--r-full); background:var(--acento); color:#fff;
  font-size:.82rem; font-weight:800; font-family:var(--texto);
  border:3px solid var(--crema-tono); line-height:1;
}

.camino-icono{
  width:56px; height:56px; display:grid; place-items:center; margin-bottom:1rem;
  border-radius:var(--r); background:var(--acento-suave); color:var(--acento);
}
/* El trazo SOLO para los iconos de línea. Antes esta regla ponía
   fill:none a todos, y la siguiente les quitaba el trazo a los
   logotipos sin devolverles el relleno: WhatsApp e Instagram
   quedaban sin relleno y sin trazo, o sea invisibles. */
.camino-icono svg{width:27px; height:27px}
.camino-icono svg:not([fill]){fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.camino-icono svg[fill]{fill:currentColor; stroke:none}

.camino-etiqueta{
  align-self:flex-start; font-size:.64rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.13em; color:var(--acento);
  background:var(--acento-suave); padding:.32em .7em; border-radius:var(--r-full);
  margin-bottom:.6rem;
}
.camino h3{font-family:var(--display); font-size:1.34rem; margin-bottom:.4rem}
.camino-entrada{color:var(--tinta-suave); font-size:.92rem; margin:0 0 1.25rem}

/* Los pasos: lista numerada visualmente como palomitas */
.camino-pasos{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:flex; flex-direction:column; gap:.72rem; flex:1;
}
.camino-pasos li{
  display:flex; align-items:flex-start; gap:.65rem;
  font-size:.89rem; line-height:1.5; color:var(--tinta);
}
.camino-check{
  flex-shrink:0; width:19px; height:19px; margin-top:.14rem;
  border-radius:var(--r-full); background:var(--acento-suave);
  position:relative;
}
.camino-check::after{
  content:''; position:absolute; left:6px; top:5px;
  width:4px; height:8px; border:solid var(--acento);
  border-width:0 2px 2px 0; transform:rotate(42deg);
}

.camino-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.82em 1.3em; border-radius:var(--r-full);
  background:var(--acento); color:#fff; font-weight:650; font-size:.9rem;
  transition:filter .2s, transform .12s, box-shadow .2s;
  box-shadow:var(--sombra); /* respaldo si no hay color-mix */
  box-shadow:0 4px 14px color-mix(in srgb, var(--acento) 26%, transparent);
}
.camino-btn:hover{filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 9px 22px color-mix(in srgb, var(--acento) 34%, transparent)}
.camino-btn:active{transform:translateY(0)}
.camino-btn svg:not([fill]){width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
.camino-btn:hover svg{transform:translateX(3px)}

.camino[data-acento="oro"] .camino-btn{color:#fff}

.camino-nota{
  display:block; text-align:center; margin-top:.7rem;
  font-size:.75rem; color:var(--tinta-tenue);
}

/* Cierre: lo que comparten los tres caminos */
.caminos-cierre{
  display:flex; align-items:center; gap:18px;
  margin-top:28px; padding:22px 26px;
  background:var(--menta-claro); border-radius:var(--r-lg);
  border:1px solid var(--menta-medio); /* respaldo si no hay color-mix */
  border-color:color-mix(in srgb, var(--menta-fuerte) 22%, transparent);
}
.caminos-cierre-icono{
  flex-shrink:0; width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--r-full); background:var(--papel); color:var(--menta-fuerte);
}
.caminos-cierre-icono svg:not([fill]){width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.caminos-cierre p{margin:0; font-size:.92rem; line-height:1.62; color:var(--tinta)}

/* ---- Adaptación ---- */
@media (max-width:940px){
  .caminos{grid-template-columns:1fr; gap:30px}
  .camino{padding:30px 24px 24px}
  .camino-pasos{flex:0}
}
@media (max-width:560px){
  .caminos-cierre{flex-direction:column; align-items:flex-start; gap:12px; padding:20px}
  .caminos-cierre p{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  .camino,.camino-btn,.camino-btn svg{transition:none}
  .camino:hover,.camino-btn:hover{transform:none}
}

/* ============================================================
   CONVERSIÓN · lo que la investigación del sector señala
   ============================================================ */

/* Aviso de borrador: tiene que verse imposible de confundir con el
   sitio real, para que nadie crea que ya publicó. */
.cinta-borrador{
  background:#9A6B15; color:#fff; text-align:center;
  padding:.7rem 1rem; font-size:.86rem; font-weight:600;
  position:sticky; top:0; z-index:200;
}
.cinta-borrador strong{ text-decoration:underline }

/* Escasez real: cada joya artesanal es irrepetible. */
.unica{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--menta-claro); color:var(--menta-fuerte);
  padding:.4em .85em; border-radius:var(--r-full);
  font-size:.78rem; font-weight:700; margin:.2rem 0 .8rem;
}
.unica svg{ width:15px; height:15px }

/* Señales de confianza junto al botón de compra. */
.confianza{
  list-style:none; margin:1.3rem 0 0; padding:1.1rem 0 0;
  border-top:1px solid var(--linea);
  display:flex; flex-direction:column; gap:.7rem;
}
.confianza li{
  display:flex; align-items:center; gap:.7rem;
  font-size:.87rem; color:var(--tinta-suave);
}
.confianza svg{ width:19px; height:19px; color:var(--menta-fuerte); flex-shrink:0 }

/* Barra de compra fija en el celular. Solo móvil: en escritorio
   el botón ya está a la vista sin desplazarse. */
.barra-compra{ display:none }

@media (max-width:880px){
  .barra-compra{
    display:flex; align-items:center; gap:.6rem;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:var(--papel); border-top:1px solid var(--linea);
    padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
    box-shadow:0 -4px 20px rgba(53,54,47,.12);
  }
  .barra-compra-info{ display:flex; flex-direction:column; line-height:1.2; margin-right:auto }
  .barra-compra-info strong{ font-size:1.05rem; color:var(--menta-fuerte) }
  .barra-compra-info span{ font-size:.68rem; color:var(--tinta-tenue); font-family:var(--mono) }
  .barra-compra .btn-wa{ padding:.62em .9em }

  /* El botón flotante de WhatsApp estorbaría encima de la barra. */
  .wa-flotante{ display:none }
  /* Espacio al pie para que la barra no tape el contenido. */
  body{ padding-bottom:72px }
  .carrito-aviso{ bottom:86px }
}

@media (prefers-reduced-motion:reduce){
  .unica,.barra-compra{ transition:none }
}