/* =========================================================
   BOCADOS SORPRESA — Sistema de diseño
   Paleta de la marca (sello dorado, crema, cacao, rosa).
   Las fuentes se cargan con <link> en inc/head.php.
   ========================================================= */

:root{
  --crema:        #FBF6ED;
  --crema-2:      #F4EBDA;
  --crema-3:      #EFE3CC;
  --cacao:        #3B2A1F;
  --cacao-suave:  #6B5240;
  --cacao-tenue:  #8C7562;
  --rosa:         #F6E3E0;
  --rosa-fuerte:  #C97A72;
  --dorado:       #B8912E;
  --dorado-claro: #E4C976;
  --berry:        #8A2E2E;
  --verde:        #4E7A4A;
  --linea:        #E7DCC8;
  --blanco:       #FFFFFF;

  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --sombra:    0 10px 30px rgba(59, 42, 31, .10);
  --sombra-sm: 0 2px 10px rgba(59, 42, 31, .07);
  --alto-header: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

/* ---------- Reset de controles (Safari los pinta distinto si no se resetean) ---------- */
button, input, select, textarea{
  -webkit-appearance:none; appearance:none;
  border-radius:0; font-family:inherit; font-size:inherit; color:inherit;
  background-color:transparent;
}
input[type="checkbox"], input[type="radio"]{ -webkit-appearance:auto; appearance:auto; }
button{ -webkit-tap-highlight-color:transparent; cursor:pointer; }
input, textarea, select{ -webkit-text-fill-color:currentColor; }

html{ scroll-behavior:smooth; overflow-x:clip; background:var(--crema); scroll-padding-top:calc(var(--alto-header) + 16px); }
html.sin-scroll{ overflow:hidden; }
html{ scrollbar-color: var(--dorado) var(--crema-2); scrollbar-width: thin; }

body{
  margin:0;
  background:var(--crema);
  color:var(--cacao);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
:focus-visible{ outline:2px solid var(--dorado); outline-offset:3px; border-radius:4px; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:500; margin:0 0 .4em; color:var(--cacao); line-height:1.12; letter-spacing:-.005em; }
h1{ font-size:clamp(2.3rem, 4.4vw, 3.7rem); }
h2{ font-size:clamp(1.85rem, 3vw, 2.6rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
strong{ font-weight:600; }

.contenedor{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px; }
.contenedor-angosto{ max-width:820px; }

.saltar{ position:absolute; left:-9999px; top:8px; z-index:200; background:var(--cacao); color:var(--crema); padding:10px 16px; border-radius:var(--r-sm); }
.saltar:focus{ left:8px; }

.rotulo{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-body); font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dorado);
  margin-bottom:.7em;
}
.rotulo::before{ content:''; width:22px; height:1px; background:currentColor; }
.rotulo-claro{ color:var(--dorado-claro); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:13px 26px; min-height:46px;
  border-radius:999px; border:1.5px solid transparent;
  font-family:var(--f-body); font-size:.86rem; font-weight:600; letter-spacing:.04em;
  text-align:center; line-height:1.2;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:none; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-primario{ background:var(--cacao); color:var(--crema); }
.btn-primario:hover{ background:var(--berry); box-shadow:0 8px 20px rgba(138,46,46,.22); }
.btn-secundario{ background:transparent; color:var(--cacao); border-color:rgba(59,42,31,.35); }
.btn-secundario:hover{ border-color:var(--cacao); background:var(--blanco); }
.btn-dorado{ background:var(--dorado); color:var(--blanco); }
.btn-dorado:hover{ background:var(--berry); }
.btn-claro{ background:var(--crema); color:var(--cacao); }
.btn-claro:hover{ background:var(--blanco); }
.btn-enlace{ background:none; color:var(--cacao-suave); text-decoration:underline; text-underline-offset:3px; min-height:auto; padding:10px; }
.btn-enlace:hover{ color:var(--berry); transform:none; }
.btn-grande{ padding:15px 30px; font-size:.92rem; }
.btn-bloque{ width:100%; }
.btn-whatsapp{ background:#25D366; color:#0B3D1E; }
.btn-whatsapp:hover{ background:#1FBE5B; }

.btn-icono{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; border:none; background:none; color:var(--cacao);
  position:relative; transition:background .2s ease;
}
.btn-icono:hover{ background:var(--crema-2); }

/* ---------- Barra de anuncios ---------- */
.barra-anuncio{ background:var(--cacao); color:var(--crema-2); font-size:.78rem; letter-spacing:.04em; }
.barra-anuncio-int{ display:flex; justify-content:center; gap:28px; padding-top:8px; padding-bottom:8px; }
.barra-anuncio-int span{ display:inline-flex; align-items:center; gap:28px; white-space:nowrap; }
.barra-anuncio-int span + span::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--dorado-claro); margin-left:-14px; margin-right:-14px; }
@media (max-width:900px){
  .barra-anuncio-int{ display:grid; text-align:center; }
  .barra-anuncio-int span{ grid-area:1/1; justify-content:center; opacity:0; transform:translateY(4px); transition:opacity .4s ease, transform .4s ease; }
  .barra-anuncio-int span.activo{ opacity:1; transform:none; }
  .barra-anuncio-int span + span::before{ display:none; }
}

/* ---------- Encabezado ---------- */
.encabezado{
  position:sticky; top:0; z-index:50;
  background:rgba(251,246,237,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.encabezado.con-sombra{ border-bottom-color:var(--linea); box-shadow:0 6px 20px rgba(59,42,31,.06); }
.encabezado-int{ display:flex; align-items:center; gap:28px; height:var(--alto-header); }
.logo{ display:flex; align-items:center; flex:none; }
.logo img{ height:68px; width:auto; }
.btn-menu{ display:none; }

.nav-principal{ display:flex; align-items:center; gap:28px; margin:0 auto; }
.nav-principal > a{
  position:relative; padding:6px 0;
  font-size:.92rem; font-weight:500; color:var(--cacao-suave);
  transition:color .2s ease;
}
.nav-principal > a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--dorado); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-principal > a:hover{ color:var(--cacao); }
.nav-principal > a:hover::after, .nav-principal > a.activo::after{ transform:scaleX(1); }
.nav-principal > a.activo{ color:var(--cacao); }
.nav-principal > a.nav-club{ color:var(--dorado); font-weight:600; }
.nav-movil-cabecera, .nav-movil-pie{ display:none; }

.iconos-header{ display:flex; align-items:center; gap:4px; flex:none; }
.contador{
  position:absolute; top:3px; right:1px;
  min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--berry); color:var(--blanco);
  font-size:.68rem; font-weight:700; line-height:19px; text-align:center;
}
.contador[hidden]{ display:none; }

.velo{
  position:fixed; inset:0; z-index:80; background:rgba(40,28,20,.45);
  opacity:0; transition:opacity .25s ease;
}
.velo.visible{ opacity:1; }

@media (max-width:1024px){
  :root{ --alto-header:64px; }
  .encabezado-int{ gap:8px; }
  .btn-menu{ display:inline-flex; margin-left:-10px; }
  .logo{ margin:0 auto; }
  .logo img{ height:52px; }
  .iconos-header{ margin-right:-10px; }
  .ocultar-movil{ display:none; }

  .nav-principal{
    position:fixed; top:0; bottom:0; left:0; z-index:90;
    width:min(86vw, 360px); margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:16px 22px 28px; overflow-y:auto;
    background:var(--crema);
    box-shadow:20px 0 40px rgba(0,0,0,.12);
    transform:translateX(-102%); transition:transform .3s ease;
    visibility:hidden;
  }
  .nav-principal.abierto{ transform:none; visibility:visible; }
  .nav-movil-cabecera{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .nav-movil-cabecera .rotulo{ margin:0; }
  .nav-principal > a{ font-family:var(--f-display); font-size:1.5rem; color:var(--cacao); padding:12px 0; border-bottom:1px solid var(--linea); }
  .nav-principal > a::after{ display:none; }
  .nav-principal > a.activo{ color:var(--berry); }
  .nav-movil-pie{ display:flex; flex-direction:column; gap:14px; margin-top:auto; padding-top:26px; }
  .nav-movil-cuenta{ text-align:center; font-weight:500; }
  .nav-movil-pie p{ font-size:.82rem; color:var(--cacao-suave); text-align:center; margin:0; }
}

/* ---------- Secciones ---------- */
.seccion{ padding:84px 0; }
.encabezado-seccion{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap; }
.encabezado-seccion h2{ margin:0; }
.encabezado-seccion.centrado{ display:block; text-align:center; }
.encabezado-desc{ color:var(--cacao-suave); margin:10px 0 0; max-width:60ch; }
.ver-todo{
  font-size:.88rem; font-weight:600; color:var(--berry); white-space:nowrap;
  padding-bottom:2px; border-bottom:1.5px solid currentColor;
}
.ver-todo:hover{ color:var(--cacao); }
@media (max-width:760px){
  .seccion{ padding:56px 0; }
  .encabezado-seccion{ margin-bottom:24px; }
}

/* ---------- Aparición suave ---------- */
.js .aparecer{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .aparecer.visible{ opacity:1; transform:none; }

/* ---------- Hero del inicio ---------- */
.hero{ padding:44px 0 72px; background:linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
.hero-texto h1{ margin-bottom:.35em; }
.hero-lead{ font-size:1.14rem; color:var(--cacao-suave); max-width:46ch; }
.hero-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 32px; }
.hero-confianza{ display:flex; flex-wrap:wrap; gap:14px 26px; }
.hero-confianza li{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--cacao-suave); line-height:1.3; }
.hero-confianza svg{ color:var(--dorado); width:26px; height:26px; }
.hero-confianza strong{ display:block; color:var(--cacao); }

.hero-collage{
  position:relative; display:grid;
  grid-template-columns:1.25fr 1fr; grid-template-rows:1fr 1fr; gap:14px;
  aspect-ratio:1.08/1;
}
.hc{ display:block; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra); background:var(--crema-3); }
.hc img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.hc:hover img{ transform:scale(1.04); }
.hc-1{ grid-row:1 / span 2; }
.hero-sello{
  position:absolute; left:-26px; bottom:34px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  width:128px; height:128px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--dorado-claro), var(--dorado) 72%);
  color:var(--blanco); box-shadow:0 10px 26px rgba(184,145,46,.35), inset 0 0 0 4px rgba(255,255,255,.25);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.25;
  transform:rotate(-8deg);
}
.hero-sello strong{ font-family:var(--f-display); font-size:1.12rem; letter-spacing:0; text-transform:none; font-style:italic; font-weight:500; margin-top:4px; }

@media (max-width:900px){
  .hero{ padding:22px 0 52px; }
  .hero-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-collage{ order:-1; aspect-ratio:1.35/1; gap:10px; }
  .hc{ border-radius:var(--r-md); }
  .hero-sello{ width:96px; height:96px; left:auto; right:-6px; bottom:-18px; font-size:.58rem; }
  .hero-sello strong{ font-size:.92rem; }
  .hero-acciones{ margin:22px 0 26px; }
  .hero-acciones .btn{ flex:1 1 220px; }
}
@media (max-width:480px){
  .hero-lead{ font-size:1.02rem; }
  .hero-confianza{ display:grid; grid-template-columns:1fr; gap:10px; }
}

/* ---------- Categorías ---------- */
.seccion-categorias{ padding-top:76px; }
.categorias-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.categoria-tile{
  position:relative; display:block; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  background:var(--crema-3); box-shadow:var(--sombra-sm);
}
.categoria-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.categoria-tile:hover img{ transform:scale(1.05); }
.categoria-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,20,14,0) 45%, rgba(30,20,14,.72) 100%); }
.categoria-tile-texto{ position:absolute; left:22px; right:22px; bottom:20px; z-index:1; color:var(--blanco); display:flex; flex-direction:column; gap:2px; }
.categoria-tile-texto strong{ font-family:var(--f-display); font-size:1.85rem; font-weight:500; line-height:1.1; }
.categoria-tile-texto span{ font-size:.86rem; opacity:.9; }
.categorias-extra{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.categoria-banda{
  display:flex; flex-direction:column; gap:4px; padding:26px 28px; border-radius:var(--r-lg);
  background:var(--blanco); border:1px solid var(--linea); transition:border-color .2s ease, transform .2s ease;
}
.categoria-banda:hover{ border-color:var(--dorado); transform:translateY(-2px); }
.categoria-banda .rotulo{ margin-bottom:2px; }
.categoria-banda strong{ font-family:var(--f-display); font-size:1.5rem; font-weight:500; line-height:1.15; }
.categoria-banda span:last-child{ color:var(--cacao-suave); font-size:.92rem; }
.categoria-banda-club{ background:var(--cacao); border-color:var(--cacao); color:var(--crema); }
.categoria-banda-club strong{ color:var(--crema); }
.categoria-banda-club span:last-child{ color:#D8C9B8; }
.categoria-banda-club .rotulo{ color:var(--dorado-claro); }
@media (max-width:760px){
  .categorias-grid{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:72%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -24px; padding:0 24px 6px; gap:12px; scrollbar-width:none; }
  .categorias-grid::-webkit-scrollbar{ display:none; }
  .categoria-tile{ scroll-snap-align:center; border-radius:var(--r-md); }
  .categoria-tile-texto strong{ font-size:1.55rem; }
  .categorias-extra{ grid-template-columns:1fr; gap:12px; }
  .categoria-banda{ padding:20px 22px; border-radius:var(--r-md); }
}

/* ---------- Tarjeta de producto ---------- */
.grilla-productos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px 22px; }
@media (max-width:1024px){ .grilla-productos{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:760px){ .grilla-productos{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 12px; } }

.tarjeta{ display:flex; flex-direction:column; min-width:0; }
.tarjeta-foto{
  position:relative; display:block; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden;
  background:var(--crema-3);
}
.tarjeta-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease, opacity .4s ease; }
.tarjeta-foto-alt{ position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
@media (hover:hover){
  .tarjeta:hover .tarjeta-foto-alt{ opacity:1; }
  .tarjeta:hover .tarjeta-foto img{ transform:scale(1.035); }
}
.etiqueta{
  position:absolute; top:12px; left:12px; z-index:1;
  padding:5px 11px; border-radius:999px; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--blanco); color:var(--cacao);
}
.etiqueta-agotado{ background:var(--cacao); color:var(--crema); }
.tarjeta-cuerpo{ display:flex; flex-direction:column; gap:6px; padding:14px 2px 0; flex:1; }
.tarjeta-nombre{ font-size:1.18rem; line-height:1.2; margin:0; }
.tarjeta-nombre a:hover{ color:var(--berry); }
.tarjeta-pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px; }
.tarjeta-precio{ font-weight:600; font-size:1.02rem; color:var(--cacao); }
.tarjeta-nodisp{ font-size:.8rem; color:var(--cacao-tenue); }
.btn-agregar{
  display:inline-flex; align-items:center; gap:6px;
  height:38px; padding:0 14px 0 12px; border-radius:999px;
  border:1.5px solid var(--cacao); background:var(--blanco); color:var(--cacao);
  font-size:.8rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.btn-agregar svg{ width:16px; height:16px; stroke-width:2.2; }
.btn-agregar:hover{ background:var(--cacao); color:var(--crema); }
.btn-agregar.agregado{ background:var(--verde); border-color:var(--verde); color:var(--blanco); }
a.btn-agregar{ padding:0 14px; }
@media (max-width:480px){
  .tarjeta-nombre{ font-size:1.05rem; }
  .tarjeta-pie{ flex-wrap:wrap; gap:8px; }
  .tarjeta-precio{ font-size:.95rem; }
  .btn-agregar{ width:100%; justify-content:center; height:40px; }
}
.sin-productos{ color:var(--cacao-suave); padding:20px 0; }
.sin-productos a{ color:var(--berry); text-decoration:underline; }

/* ---------- Carrusel horizontal ---------- */
.carrusel{ position:relative; }
.carrusel-pista{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * 22px) / 4); gap:22px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px;
}
.carrusel-pista::-webkit-scrollbar{ display:none; }
.carrusel-pista .tarjeta{ scroll-snap-align:start; }
.carrusel-flecha{
  position:absolute; top:calc(50% - 50px); z-index:2;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--linea);
  background:var(--blanco); color:var(--cacao); box-shadow:var(--sombra-sm);
  display:flex; align-items:center; justify-content:center; transition:opacity .2s ease, background .2s ease;
}
.carrusel-flecha:hover{ background:var(--cacao); color:var(--crema); }
.carrusel-flecha[disabled]{ opacity:0; pointer-events:none; }
.carrusel-flecha[data-dir="-1"]{ left:-22px; }
.carrusel-flecha[data-dir="1"]{ right:-22px; }
@media (max-width:1024px){ .carrusel-pista{ grid-auto-columns:calc((100% - 2 * 22px) / 3); } }
@media (max-width:760px){
  .carrusel-pista{ grid-auto-columns:46%; gap:12px; margin:0 -24px; padding:0 24px 4px; scroll-padding:0 24px; }
  .carrusel-flecha{ display:none; }
}
.seccion-carrusel + .seccion-carrusel{ padding-top:0; }

/* ---------- Pasos ---------- */
.seccion-pasos{ background:var(--blanco); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.pasos-lista{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:paso; }
.pasos-lista li{ display:flex; flex-direction:column; gap:6px; position:relative; }
.pasos-lista strong{ font-family:var(--f-display); font-size:1.35rem; font-weight:500; line-height:1.2; }
.pasos-lista li > span:last-child{ color:var(--cacao-suave); font-size:.94rem; }
.paso-num{
  width:44px; height:44px; border-radius:50%; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--crema-2); color:var(--dorado); font-family:var(--f-display); font-size:1.35rem; font-weight:600;
  border:1px solid var(--linea);
}
@media (max-width:900px){ .pasos-lista{ grid-template-columns:1fr 1fr; gap:26px 18px; } }

/* ---------- Banners de temporada (editor de tienda) ---------- */
.banner-temporada{ position:relative; aspect-ratio:16/5; min-height:280px; overflow:hidden; background:var(--cacao); }
.banner-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .8s ease, visibility .8s; }
.banner-slide.activo{ opacity:1; visibility:visible; }
.banner-slide img{ width:100%; height:100%; object-fit:cover; }
.banner-contenido{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:min(90%, 640px); padding:20px 24px; border-radius:var(--r-md);
  background:rgba(59,42,31,.82); color:var(--crema); text-align:center;
}
.banner-contenido h1, .banner-contenido h2{ color:inherit; margin:0 0 6px; font-size:clamp(1.6rem, 3vw, 2.3rem); }
.banner-contenido p{ margin:0 0 12px; }
.banner-puntos{ position:absolute; top:14px; right:16px; display:flex; gap:8px; z-index:2; }
.banner-puntos button{ width:10px; height:10px; border-radius:50%; border:none; padding:0; background:rgba(251,246,237,.55); }
.banner-puntos button[aria-pressed="true"]{ background:var(--dorado-claro); }
@media (max-width:760px){ .banner-temporada{ aspect-ratio:4/5; min-height:0; } }

/* ---------- Zonas de entrega ---------- */
.seccion-zonas{ background:var(--crema-2); }
.zonas-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.zonas-texto p{ color:var(--cacao-suave); max-width:48ch; }
.zonas-tabla{ background:var(--blanco); border-radius:var(--r-lg); padding:10px 28px; box-shadow:var(--sombra-sm); }
.zonas-tabla li{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 0; border-bottom:1px solid var(--linea); }
.zonas-tabla li:last-child{ border-bottom:none; }
.zonas-tabla strong{ font-weight:600; }
.zonas-tabla strong.gratis{ color:var(--verde); }
.zonas-horario{ justify-content:flex-start !important; color:var(--cacao-suave); font-size:.9rem; }
.zonas-horario svg{ color:var(--dorado); }
@media (max-width:900px){ .zonas-grid{ grid-template-columns:1fr; gap:28px; } .zonas-tabla{ padding:6px 20px; } }

/* ---------- Testimonios ---------- */
.testimonios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testimonio{ margin:0; padding:28px; background:var(--blanco); border-radius:var(--r-lg); box-shadow:var(--sombra-sm); }
.testimonio blockquote{ margin:0 0 14px; font-family:var(--f-display); font-size:1.25rem; line-height:1.4; font-style:italic; }
.testimonio figcaption{ font-size:.86rem; color:var(--cacao-suave); }
@media (max-width:900px){ .testimonios-grid{ grid-template-columns:1fr; } }

/* ---------- Instagram ---------- */
.seccion-instagram{ background:var(--cacao); color:var(--crema); padding:52px 0; }
.instagram-int{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.seccion-instagram h2{ color:var(--crema); margin:0; max-width:24ch; }
.seccion-instagram h2 a{ color:var(--dorado-claro); }

/* ---------- Preguntas frecuentes ---------- */
.faq{ border-top:1px solid var(--linea); }
.faq-item{ border-bottom:1px solid var(--linea); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:20px 44px 20px 2px; font-weight:500; font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:1.5rem; font-weight:300; color:var(--dorado); transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item summary:hover{ color:var(--berry); }
.faq-item p{ margin:0; padding:0 2px 22px; color:var(--cacao-suave); max-width:70ch; }

/* ---------- Encabezado de páginas internas ---------- */
.banner-categoria{ padding:42px 0 34px; background:var(--crema-2); border-bottom:1px solid var(--linea); }
.banner-categoria h1{ margin-bottom:.2em; }
.banner-categoria p{ max-width:62ch; color:var(--cacao-suave); margin:0; font-size:1.05rem; }
.banner-categoria.centrado{ text-align:center; }
.banner-categoria.centrado p{ margin:0 auto; }
.migas{ font-size:.82rem; color:var(--cacao-tenue); margin-bottom:14px; }
.migas a{ color:var(--cacao-suave); }
.migas a:hover{ color:var(--berry); text-decoration:underline; }
.migas span[aria-hidden]{ margin:0 6px; }

/* ---------- Página de categoría ---------- */
.categoria-cabecera{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; }
.categoria-cabecera-foto{ width:150px; height:150px; border-radius:50%; overflow:hidden; box-shadow:var(--sombra); border:5px solid var(--blanco); }
.categoria-cabecera-foto img{ width:100%; height:100%; object-fit:cover; }
.categorias-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px;
  border:1px solid var(--linea); background:var(--blanco); font-size:.86rem; font-weight:500; color:var(--cacao-suave);
  transition:all .2s ease;
}
.chip:hover{ border-color:var(--cacao); color:var(--cacao); }
.chip.activo, .chip[aria-pressed="true"]{ background:var(--cacao); border-color:var(--cacao); color:var(--crema); }
.barra-listado{ display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap; padding:26px 0 26px; }
.filtros-precio{ display:flex; gap:8px; flex-wrap:wrap; }
.barra-listado-der{ display:flex; align-items:center; gap:16px; }
.contador-productos{ font-size:.88rem; color:var(--cacao-suave); white-space:nowrap; }
.selector-orden{ display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--cacao-suave); }
.selector-orden select{
  border:1px solid var(--linea); border-radius:999px; padding:9px 34px 9px 14px; background:var(--blanco);
  color:var(--cacao); font-size:.88rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B2A1F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
}
.categoria-seo{ padding:20px 0 72px; }
.categoria-seo-caja{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:30px 34px; display:grid; grid-template-columns:1.3fr 1fr; gap:34px; }
.categoria-seo-caja h2{ font-size:1.6rem; }
.categoria-seo-caja p{ color:var(--cacao-suave); }
.tarjeta[hidden]{ display:none; }
@media (max-width:760px){
  .banner-categoria{ padding:26px 0 22px; }
  .categoria-cabecera{ grid-template-columns:1fr; }
  .categoria-cabecera-foto{ display:none; }
  .barra-listado{ padding:18px 0; }
  .filtros-precio{ flex-wrap:nowrap; overflow-x:auto; margin:0 -24px; padding:0 24px; width:calc(100% + 48px); scrollbar-width:none; }
  .filtros-precio::-webkit-scrollbar{ display:none; }
  .filtros-precio .chip{ flex:none; }
  .barra-listado-der{ width:100%; justify-content:space-between; }
  .categoria-seo-caja{ grid-template-columns:1fr; padding:24px 22px; gap:10px; }
}

/* ---------- Ficha de producto ---------- */
.pagina-producto{ padding:22px 0 72px; }
.producto-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; align-items:start; }
.galeria{ position:sticky; top:calc(var(--alto-header) + 20px); display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px; }
.galeria.una-foto{ grid-template-columns:minmax(0,1fr); }
.galeria-miniaturas{ display:flex; flex-direction:column; gap:10px; }
.galeria-miniaturas button{ padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; aspect-ratio:1/1; background:var(--crema-3); opacity:.7; transition:opacity .2s ease, border-color .2s ease; }
.galeria-miniaturas button:hover{ opacity:1; }
.galeria-miniaturas button[aria-current="true"]{ border-color:var(--cacao); opacity:1; }
.galeria-miniaturas img{ width:100%; height:100%; object-fit:cover; }
.galeria-principal{ min-width:0; position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--crema-3); }
.galeria-pista{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; aspect-ratio:1/1; }
.galeria-pista::-webkit-scrollbar{ display:none; }
.galeria-pista > *{ flex:0 0 100%; scroll-snap-align:center; }
.galeria-pista img{ width:100%; height:100%; object-fit:cover; }
.galeria-contador{ position:absolute; right:14px; bottom:14px; background:rgba(59,42,31,.75); color:var(--crema); font-size:.76rem; padding:4px 10px; border-radius:999px; display:none; }

.info-producto{ min-width:0; }
.info-producto h1{ font-size:clamp(2rem, 3.4vw, 2.8rem); margin-bottom:.25em; }
.producto-precio{ display:flex; align-items:baseline; gap:12px; margin:6px 0 18px; }
.producto-precio strong{ font-size:1.65rem; font-weight:600; }
.producto-precio span{ font-size:.82rem; color:var(--cacao-tenue); }
.producto-resumen{ color:var(--cacao-suave); margin-bottom:22px; }
.producto-bloque{ border-top:1px solid var(--linea); padding:20px 0; }
.producto-bloque h2{ font-family:var(--f-body); font-size:.9rem; font-weight:600; letter-spacing:.02em; margin:0 0 12px; }
.producto-bloque h2 small{ font-weight:400; color:var(--cacao-tenue); font-size:.84rem; }
.opciones-variante{ display:flex; flex-wrap:wrap; gap:8px; }
.opciones-variante label{ position:relative; }
.opciones-variante input{ position:absolute; opacity:0; inset:0; }
.opciones-variante span{ display:inline-flex; padding:9px 16px; border-radius:999px; border:1.5px solid var(--linea); background:var(--blanco); font-size:.88rem; cursor:pointer; transition:all .2s ease; }
.opciones-variante input:checked + span{ border-color:var(--cacao); background:var(--cacao); color:var(--crema); }
.opciones-variante input:focus-visible + span{ outline:2px solid var(--dorado); outline-offset:2px; }
.campo-dedicatoria textarea{
  width:100%; min-height:96px; resize:vertical; padding:13px 15px;
  border:1.5px solid var(--linea); border-radius:var(--r-sm); background:var(--blanco); font-size:.95rem; line-height:1.5;
}
.campo-dedicatoria textarea:focus{ border-color:var(--dorado); outline:none; }
.contador-caracteres{ font-size:.76rem; color:var(--cacao-tenue); text-align:right; margin-top:4px; }

.extras-lista{ display:grid; grid-auto-flow:column; grid-auto-columns:132px; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.extra{ position:relative; display:flex; flex-direction:column; border:1.5px solid var(--linea); border-radius:12px; overflow:hidden; background:var(--blanco); cursor:pointer; transition:border-color .2s ease; }
.extra input{ position:absolute; opacity:0; }
.extra img{ aspect-ratio:1/1; width:100%; object-fit:cover; background:var(--crema-3); }
.extra-info{ padding:8px 10px 10px; display:flex; flex-direction:column; gap:2px; }
.extra-info span{ font-size:.78rem; line-height:1.25; min-height:2.5em; }
.extra-info strong{ font-size:.8rem; }
.extra::after{
  content:''; position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  background:var(--blanco) no-repeat center/14px; border:1.5px solid var(--linea);
}
.extra:has(input:checked){ border-color:var(--cacao); }
.extra:has(input:checked)::after{
  background-color:var(--cacao); border-color:var(--cacao);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.extra:has(input:focus-visible){ outline:2px solid var(--dorado); outline-offset:2px; }

.compra-fila{ display:flex; gap:10px; align-items:stretch; }
.stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--linea); border-radius:999px; background:var(--blanco); }
.stepper button{ width:40px; height:40px; border:none; background:none; font-size:1.15rem; color:var(--cacao); border-radius:50%; }
.stepper button:hover{ background:var(--crema-2); }
.stepper span, .stepper output{ min-width:26px; text-align:center; font-weight:600; font-size:.95rem; }
.compra-fila .stepper button{ height:50px; }
.compra-fila .btn{ flex:1; }
.compra-total{ font-size:.9rem; color:var(--cacao-suave); margin:14px 0 10px; }
.compra-total strong{ color:var(--cacao); font-size:1.05rem; }
.garantias{ display:grid; gap:12px; margin-top:22px; padding:18px 20px; background:var(--crema-2); border-radius:var(--r-md); font-size:.88rem; }
.garantias li{ display:flex; gap:12px; align-items:flex-start; color:var(--cacao-suave); line-height:1.45; }
.garantias svg{ color:var(--dorado); width:22px; height:22px; margin-top:1px; }
.garantias strong{ color:var(--cacao); }
.producto-detalles{ margin-top:26px; }
.producto-detalles .faq-item summary{ font-size:.95rem; font-weight:600; }
.producto-detalles ul{ list-style:disc; padding:0 0 18px 20px; color:var(--cacao-suave); }
.producto-detalles li{ margin-bottom:4px; }
.producto-detalles .faq-item p{ white-space:pre-line; }
.link-whatsapp{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:.9rem; color:var(--cacao-suave); }
.link-whatsapp:hover{ color:var(--verde); }
.link-whatsapp svg{ color:#25D366; }

.barra-compra-movil{ display:none; }
@media (max-width:900px){
  .pagina-producto{ padding-top:14px; }
  .producto-grid{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .galeria{ position:static; grid-template-columns:minmax(0,1fr); margin:0 -24px; }
  .galeria-miniaturas{ display:none; }
  .galeria-principal{ border-radius:0; }
  .galeria-contador{ display:block; }
  .barra-compra-movil{
    display:flex; align-items:center; gap:14px;
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97); border-top:1px solid var(--linea); box-shadow:0 -8px 24px rgba(59,42,31,.08);
    transform:translateY(110%); transition:transform .3s ease;
  }
  .barra-compra-movil.visible{ transform:none; }
  .barra-compra-movil div{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
  .barra-compra-movil small{ font-size:.74rem; color:var(--cacao-tenue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .barra-compra-movil strong{ font-size:1.1rem; }
  .barra-compra-movil .btn{ margin-left:auto; flex:none; }
  body.con-barra-compra .whatsapp-flotante{ bottom:86px; }
}
.relacionados{ padding:0 0 80px; }

/* ---------- Carrito lateral ---------- */
.cajon-carrito{
  position:fixed; top:0; right:0; bottom:0; z-index:90;
  width:min(92vw, 420px); display:flex; flex-direction:column;
  background:var(--crema); box-shadow:-20px 0 40px rgba(0,0,0,.14);
  transform:translateX(102%); transition:transform .3s ease; visibility:hidden;
}
.cajon-carrito.abierto{ transform:none; visibility:visible; }
.cajon-cabecera{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 14px 22px; border-bottom:1px solid var(--linea); }
.cajon-cabecera h2{ font-size:1.6rem; margin:0; }
.cajon-cuerpo{ flex:1; overflow-y:auto; padding:6px 22px; }
.cajon-linea{ display:grid; grid-template-columns:72px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--linea); }
.cajon-linea img{ width:72px; height:72px; object-fit:cover; border-radius:10px; background:var(--crema-3); }
.cajon-linea-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cajon-linea-info strong{ font-weight:500; line-height:1.3; }
.cajon-linea-info small{ color:var(--cacao-tenue); font-size:.78rem; }
.cajon-linea-acciones{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.cajon-linea-acciones .stepper button{ width:32px; height:32px; font-size:1rem; }
.cajon-linea-precio{ font-weight:600; }
.cajon-quitar{ width:30px; height:30px; border:none; background:none; color:var(--cacao-tenue); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.cajon-quitar:hover{ background:var(--crema-2); color:var(--berry); }
.cajon-quitar svg{ width:16px; height:16px; }
.cajon-pie{ padding:18px 22px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--linea); background:var(--blanco); }
.cajon-pie:empty{ display:none; }
.cajon-total{ display:flex; justify-content:space-between; align-items:baseline; font-size:1.05rem; margin-bottom:4px; }
.cajon-total strong{ font-size:1.25rem; }
.cajon-nota{ font-size:.8rem; color:var(--cacao-tenue); margin:0 0 14px; }
.cajon-pie .btn-enlace{ margin-top:4px; }
.cajon-vacio{ display:flex; flex-direction:column; gap:10px; padding:40px 0; text-align:center; color:var(--cacao-suave); }

/* ---------- Aviso flotante ---------- */
.aviso-flotante{
  position:fixed; left:50%; bottom:24px; z-index:95;
  display:flex; align-items:center; gap:16px; max-width:calc(100vw - 32px);
  padding:12px 12px 12px 20px; border-radius:999px;
  background:var(--cacao); color:var(--crema); font-size:.9rem; box-shadow:0 14px 30px rgba(0,0,0,.2);
  transform:translate(-50%, 140%); opacity:0; transition:transform .3s ease, opacity .3s ease; pointer-events:none;
}
.aviso-flotante.visible{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
.aviso-flotante strong{ color:var(--dorado-claro); font-weight:600; }
.aviso-flotante button{ flex:none; border:none; border-radius:999px; padding:9px 16px; background:var(--crema); color:var(--cacao); font-weight:600; font-size:.82rem; }
@media (max-width:480px){ .aviso-flotante{ border-radius:var(--r-md); width:calc(100vw - 24px); bottom:12px; } }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.2); transition:transform .2s ease, bottom .3s ease;
}
.whatsapp-flotante:hover{ transform:scale(1.06); }
.whatsapp-flotante svg{ width:31px; height:31px; stroke:none; }
@media (max-width:760px){ .whatsapp-flotante{ width:52px; height:52px; right:14px; bottom:14px; } }

/* ---------- Formularios ---------- */
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo label, .campo .etiqueta-campo{ font-size:.84rem; font-weight:600; color:var(--cacao); }
.campo label small{ font-weight:400; color:var(--cacao-tenue); }
.campo input, .campo select, .campo textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--linea); border-radius:var(--r-sm);
  background:var(--blanco); color:var(--cacao); font-size:16px; line-height:1.4;
  transition:border-color .2s ease;
}
.campo select{
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B2A1F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-color:var(--dorado); outline:none; }
.campo input:user-invalid, .campo select:user-invalid{ border-color:var(--berry); }
.campo-ayuda{ font-size:.8rem; color:var(--cacao-tenue); margin:0; }
.fila-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fila-3col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.casilla{ display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color:var(--cacao-suave); line-height:1.45; }
.casilla input{ width:18px; height:18px; margin-top:2px; accent-color:var(--cacao); flex:none; }
.casilla a{ color:var(--berry); text-decoration:underline; }
@media (max-width:760px){ .fila-2col, .fila-3col{ grid-template-columns:1fr; } }

/* ---------- Carrito (página) ---------- */
.pagina-carrito, .pagina-checkout{ padding:34px 0 80px; }
.grid-carrito{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:44px; align-items:start; }
.lineas-carrito{ border-top:1px solid var(--linea); }
.linea-carrito{ display:grid; grid-template-columns:96px 1fr auto; gap:18px; padding:20px 0; border-bottom:1px solid var(--linea); align-items:start; }
.linea-carrito img{ width:96px; height:96px; object-fit:cover; border-radius:12px; background:var(--crema-3); }
.linea-carrito h3{ font-size:1.2rem; margin:0 0 4px; }
.linea-carrito h3 a:hover{ color:var(--berry); }
.linea-detalle{ font-size:.84rem; color:var(--cacao-suave); margin:0 0 2px; }
.linea-acciones{ display:flex; align-items:center; gap:16px; margin-top:10px; }
.linea-precio{ font-weight:600; font-size:1.05rem; text-align:right; white-space:nowrap; }
.btn-quitar{ border:none; background:none; color:var(--cacao-tenue); font-size:.84rem; text-decoration:underline; text-underline-offset:3px; padding:4px; }
.btn-quitar:hover{ color:var(--berry); }
.resumen-carrito{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:26px; position:sticky; top:calc(var(--alto-header) + 20px); }
.resumen-carrito h2{ font-size:1.6rem; margin-bottom:14px; }
.fila-resumen{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:.92rem; color:var(--cacao-suave); }
.fila-resumen span:last-child{ text-align:right; white-space:nowrap; }
.fila-resumen.total{ border-top:1px solid var(--linea); margin-top:10px; padding-top:16px; font-size:1.15rem; color:var(--cacao); font-weight:600; }
.resumen-carrito .btn{ margin-top:14px; }
.resumen-nota{ font-size:.8rem; color:var(--cacao-tenue); margin:12px 0 0; text-align:center; }
.carrito-vacio{ text-align:center; padding:60px 0; }
.carrito-vacio p{ color:var(--cacao-suave); }
.carrito-vacio .hero-acciones{ justify-content:center; }
@media (max-width:900px){
  .grid-carrito{ grid-template-columns:1fr; gap:26px; }
  .resumen-carrito{ position:static; }
  .linea-carrito{ grid-template-columns:76px 1fr; gap:14px; }
  .linea-carrito img{ width:76px; height:76px; }
  .linea-precio{ grid-column:2; text-align:left; }
}

/* ---------- Checkout ---------- */
.pasos-compra{ display:flex; gap:10px; align-items:center; font-size:.82rem; color:var(--cacao-tenue); margin-bottom:10px; }
.pasos-compra span{ display:inline-flex; align-items:center; gap:8px; }
.pasos-compra span.hecho{ color:var(--cacao); }
.pasos-compra span + span::before{ content:''; width:18px; height:1px; background:var(--linea); margin-right:2px; }
.grid-checkout{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:44px; align-items:start; }
.formulario-checkout{ display:flex; flex-direction:column; gap:22px; }
.bloque-checkout{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:26px 28px; display:flex; flex-direction:column; gap:16px; }
.bloque-checkout > h2{ font-size:1.55rem; margin:0; display:flex; align-items:center; gap:12px; }
.bloque-checkout > h2 .paso-num{ width:32px; height:32px; font-size:1.05rem; margin:0; }
.bloque-checkout > p{ margin:-6px 0 0; color:var(--cacao-suave); font-size:.9rem; }
.opciones-pago{ display:flex; flex-direction:column; gap:10px; }
.opcion-pago{
  display:flex; align-items:center; gap:12px; padding:15px 16px; cursor:pointer;
  border:1.5px solid var(--linea); border-radius:var(--r-sm); transition:border-color .2s ease, background .2s ease;
}
.opcion-pago input{ accent-color:var(--cacao); width:18px; height:18px; flex:none; }
.opcion-pago-texto{ display:flex; flex-direction:column; line-height:1.3; }
.opcion-pago-texto small{ color:var(--cacao-tenue); font-size:.8rem; }
.opcion-pago-logos{ margin-left:auto; display:flex; gap:6px; }
.opcion-pago-logos img{ height:22px; width:auto; }
.opcion-pago:has(input:checked){ border-color:var(--cacao); background:var(--crema); }
.caja-info{ background:var(--crema-2); border-radius:var(--r-sm); padding:14px 16px; font-size:.88rem; color:var(--cacao); }
.caja-info.dorada{ border:1px solid var(--dorado); }
.resumen-linea{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:8px 0; font-size:.88rem; }
.resumen-linea img{ width:56px; height:56px; border-radius:10px; object-fit:cover; background:var(--crema-3); }
.resumen-linea small{ display:block; color:var(--cacao-tenue); font-size:.78rem; }
.resumen-linea .cant{ color:var(--cacao-tenue); }
.mensaje-error{ background:#FBEAEA; color:var(--berry); border-radius:var(--r-sm); padding:12px 16px; font-size:.9rem; }
.mensaje-error[hidden]{ display:none; }
@media (max-width:1024px){ .grid-checkout{ grid-template-columns:1fr; } .grid-checkout .resumen-carrito{ position:static; order:-1; } }
@media (max-width:760px){ .bloque-checkout{ padding:20px 18px; border-radius:var(--r-md); } }

/* ---------- Gracias ---------- */
.pagina-gracias{ text-align:center; padding:70px 0 90px; }
.sello{
  width:76px; height:76px; border-radius:50%; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 34% 30%, var(--dorado-claro), var(--dorado) 70%);
  color:var(--blanco); font-size:1.9rem; box-shadow:0 8px 20px rgba(184,145,46,.35);
}
.gracias-caja{ margin-top:28px; text-align:left; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-md); padding:20px 22px; font-size:.92rem; }
.gracias-caja.alerta{ background:#FBEAEA; border-color:#F0CACA; color:var(--berry); }
.gracias-total{ font-size:1.5rem; font-weight:600; display:block; margin:6px 0; }

/* ---------- Páginas de texto (políticas) ---------- */
.texto-legal{ padding:46px 0 80px; }
.texto-legal h2{ font-size:1.7rem; margin-top:1.6em; }
.texto-legal h3{ font-size:1.2rem; margin-top:1.2em; }
.texto-legal p, .texto-legal li{ color:var(--cacao-suave); }
.texto-legal ul{ list-style:disc; padding-left:22px; margin-bottom:1em; }

/* ---------- Pie de página ---------- */
.pie{ background:var(--cacao); color:#D8C9B8; padding:64px 0 28px; font-size:.92rem; }
.pie a{ color:#E9DDCB; transition:color .2s ease; }
.pie a:hover{ color:var(--dorado-claro); }
.pie-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:40px; }
.pie-logo img{ height:84px; width:auto; margin-bottom:16px; }
.pie-marca p{ max-width:34ch; }
.pie-redes{ display:flex; gap:8px; }
.pie-redes a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(251,246,237,.22); display:flex; align-items:center; justify-content:center; }
.pie-redes a:hover{ border-color:var(--dorado-claro); }
.pie-redes svg{ width:19px; height:19px; }
.pie-titulo{ font-family:var(--f-body); font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dorado-claro); margin-bottom:16px; }
.pie-links{ display:flex; flex-direction:column; gap:10px; }
.pie-pagos{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:22px 0; border-top:1px solid rgba(251,246,237,.12); border-bottom:1px solid rgba(251,246,237,.12); }
.pie-pagos span{ font-size:.82rem; margin-right:6px; }
.pie-pagos img{ height:32px; width:52px; object-fit:contain; background:var(--crema); border-radius:6px; padding:3px; }
.pie-inferior{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding-top:22px; font-size:.8rem; color:#B8A692; }
.pie-creditos{ display:flex; gap:10px; flex-wrap:wrap; }
.pie-credito{ padding:6px 14px; border:1px solid rgba(251,246,237,.18); border-radius:999px; font-size:.76rem; }
.pie-credito strong{ color:var(--dorado-claro); font-weight:600; }
@media (max-width:900px){
  .pie{ padding:48px 0 calc(24px + env(safe-area-inset-bottom)); }
  .pie-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  .pie-marca{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .pie-grid{ grid-template-columns:1fr; }
  .pie-inferior{ flex-direction:column; text-align:center; }
  .pie-creditos{ justify-content:center; }
}

/* ---------- Bloques usados por páginas internas (eventos, contacto, club, cuenta) ---------- */
.pasos{ background:var(--crema-2); padding:64px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.pasos-titulo{ text-align:center; margin-bottom:40px; }
.paso{ text-align:center; }
.icono-paso{
  width:56px; height:56px; margin:0 auto 12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--crema); border:1.5px solid var(--linea); color:var(--dorado);
}
.icono-paso svg{ width:26px; height:26px; }
.hero-acciones{ display:flex; flex-wrap:wrap; gap:12px; }
.tarjeta-precio{ font-weight:600; }
.franja-confianza{ background:var(--verde); color:var(--blanco); text-align:center; font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:12px; }
@media (max-width:760px){ .pasos{ padding:44px 0; } }

/* ---------- Estilos conservados de páginas existentes ---------- */
/* ---------- Página Eventos y Empresas ---------- */
.servicios-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
}
.servicios-grid .paso{ text-align:center; }
@media (max-width:900px){
  .servicios-grid{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
}
@media (max-width:520px){
  .servicios-grid{ grid-template-columns:1fr; }
}

.seccion-video-eventos{ padding:64px 0; }
.video-eventos-grid{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:56px;
  align-items:center;
}
.video-eventos-marco{
  aspect-ratio:9/16;
  max-height:600px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 48px rgba(59,42,31,.22);
  border:6px solid var(--blanco);
  background:var(--cacao);
  justify-self:center;
}
.video-eventos-texto h2{ margin:6px 0 16px; }
.video-eventos-texto p{ color:var(--cacao-suave); margin-bottom:14px; line-height:1.6; }
@media (max-width:880px){
  .video-eventos-grid{ grid-template-columns:1fr; gap:32px; }
  .video-eventos-marco{ max-width:280px; max-height:498px; width:100%; }
  .video-eventos-texto{ text-align:center; }
  .video-eventos-texto .hero-acciones{ justify-content:center; }
}

.cta-eventos{
  padding:70px 0;
  background:var(--crema-2);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.cta-eventos h2{ margin:6px 0 14px; }

/* ---------- Club Bocados Sorpresa ---------- */
.club-planes{ padding:64px 0; }
.planes-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  align-items:stretch;
  max-width:1060px;
  margin:0 auto;
}
.plan-card{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:12px;
  padding:30px 26px 24px;
  display:flex; flex-direction:column;
  position:relative;
  text-align:center;
}
.plan-destacado{
  border:2px solid var(--dorado);
  box-shadow:0 18px 44px rgba(59,42,31,.16);
  transform:scale(1.03);
  z-index:1;
}
.plan-insignia{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--dorado); color:var(--blanco);
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 16px; border-radius:20px; white-space:nowrap;
}
.plan-nombre{ font-size:1.5rem; margin-bottom:2px; }
.plan-tagline{ font-size:.86rem; color:var(--cacao-suave); margin-bottom:18px; font-style:italic; }
.plan-precio-antes{
  font-size:.92rem; color:var(--cacao-suave);
  text-decoration:line-through; margin-bottom:2px;
}
.plan-precio{
  font-family:var(--f-body); font-weight:700; font-size:2rem; color:var(--cacao);
}
.plan-precio span{ font-size:.9rem; font-weight:500; color:var(--cacao-suave); }
.plan-equivale{
  font-size:.78rem; color:var(--dorado); font-weight:600;
  margin:6px 0 20px;
}
.plan-beneficios{
  list-style:none; padding:0; margin:0 0 24px;
  text-align:left; flex:1;
}
.plan-beneficios li{
  font-size:.86rem; color:var(--cacao);
  padding:8px 0 8px 26px;
  border-bottom:1px solid var(--crema-2);
  position:relative;
  line-height:1.45;
}
.plan-beneficios li::before{
  content:'✓';
  position:absolute; left:2px; top:8px;
  color:var(--dorado); font-weight:700;
}
.plan-ahorro{
  margin-top:12px;
  font-size:.8rem; font-weight:700; color:var(--dorado);
  letter-spacing:.02em;
}
@media (max-width:900px){
  .planes-grid{ grid-template-columns:1fr; max-width:420px; }
  .plan-destacado{ transform:none; order:-1; }
}

/* Modal del Club */
.modal-club{
  position:fixed; inset:0; z-index:100;
  background:rgba(59,42,31,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-club-caja{
  background:var(--crema);
  border-radius:12px;
  max-width:420px; width:100%;
  padding:30px 28px;
  position:relative;
  max-height:90vh; overflow-y:auto;
}
.modal-club-cerrar{
  position:absolute; top:12px; right:14px;
  background:none; border:none; font-size:1.5rem; line-height:1;
  color:var(--cacao-suave); cursor:pointer;
}
.modal-club-cerrar:hover{ color:var(--cacao); }

/* ---------- "Club BS" con brillo de diamante ---------- */
.nav-club-brillante{
  position:relative;
  background:linear-gradient(90deg, var(--dorado) 0%, var(--dorado-claro) 25%, var(--dorado) 50%, var(--dorado-claro) 75%, var(--dorado) 100%);
  background-size:250% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  font-weight:600;
  animation:navClubBrillo 3.2s linear infinite;
}
.nav-club-brillante:hover{ opacity:.85; }
.nav-club-brillante::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--dorado);
  animation:navClubPulso 2.2s ease-in-out infinite;
}
@keyframes navClubBrillo{
  0%{ background-position:250% center; }
  100%{ background-position:-250% center; }
}
@keyframes navClubPulso{
  0%, 100%{ opacity:.3; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .nav-club-brillante, .nav-club-brillante::after{ animation:none; }
}
/* ---------- Selector de productos del Club ---------- */
.club-selector{ padding:64px 0 40px; }
.selector-tabs{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  margin-bottom:28px;
}
.selector-tab{
  font-family:var(--f-body); font-size:.84rem; font-weight:500;
  padding:10px 20px; border-radius:30px;
  border:1px solid var(--linea); background:var(--blanco); color:var(--cacao-suave);
  cursor:pointer; transition:all .2s ease;
}
.selector-tab.activa{ background:var(--cacao); border-color:var(--cacao); color:var(--crema); }
.selector-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
}
.selector-item{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px; padding:14px 12px 16px;
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:10px;
  font-family:var(--f-body); transition:border-color .2s ease, box-shadow .2s ease;
}
.selector-item:hover{ border-color:var(--dorado); }
.selector-item.elegido{ border-color:var(--dorado); box-shadow:0 0 0 1px var(--dorado); background:var(--crema-2); }
.selector-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; }
.selector-item-nombre{ font-size:.86rem; color:var(--cacao); font-weight:500; margin-top:2px; }
.selector-item-precio{ font-size:.8rem; color:var(--cacao-suave); }
.selector-item-vermas{
  position:absolute; top:8px; left:8px; z-index:1;
  width:24px; height:24px; border-radius:50%;
  background:rgba(251,246,237,.9); border:1.5px solid var(--linea);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; color:var(--cacao-suave); cursor:pointer;
}
.selector-item-vermas:hover{ border-color:var(--dorado); color:var(--dorado); }
.selector-item-stepper{
  display:flex; align-items:center; justify-content:center; gap:0;
  margin-top:6px;
  border:1px solid var(--linea); border-radius:20px; overflow:hidden;
}
.selector-item-stepper button{
  width:28px; height:28px; border:none; background:var(--crema-2);
  color:var(--cacao); font-size:1rem; cursor:pointer; line-height:1;
}
.selector-item-stepper button:hover{ background:var(--dorado); color:var(--blanco); }
.selector-item-cantidad{ min-width:26px; font-size:.85rem; font-weight:600; color:var(--cacao); }

.plan-card.tramo-activo{ border-color:var(--dorado); box-shadow:0 0 0 2px var(--dorado); }

/* Botón de confirmar, resaltado cuando ya se alcanzó un tramo de descuento */
.resumen-club #btnConfirmarSeleccion.boton-desbloqueado{
  background:var(--dorado); border-color:var(--dorado); color:var(--cacao);
  font-weight:700;
  animation:pulsoDesbloqueado 1.6s ease-in-out infinite;
}
@keyframes pulsoDesbloqueado{
  0%, 100%{ box-shadow:0 0 0 0 rgba(184,145,46,.55); }
  50%{ box-shadow:0 0 0 8px rgba(184,145,46,0); }
}
@media (prefers-reduced-motion: reduce){
  .resumen-club #btnConfirmarSeleccion.boton-desbloqueado{ animation:none; }
}

/* ---------- Barra de resumen fija ---------- */
.resumen-club{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:var(--cacao); color:var(--crema);
  border-top:2px solid var(--dorado);
  box-shadow:0 -10px 30px rgba(59,42,31,.32);
}
.resumen-club-interior{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:14px 24px;
  max-width:1160px;
  margin:0 auto;
}
.resumen-club-info{ display:flex; flex-direction:column; gap:3px; }
.resumen-club-info strong{ font-size:1rem; letter-spacing:.01em; }
.resumen-club-info span{ font-size:.78rem; color:var(--dorado-claro); font-weight:500; }
.resumen-club-precios{ display:flex; align-items:baseline; gap:12px; }
.resumen-subtotal{ font-size:.84rem; color:#B8A692; }
.resumen-total{ font-family:var(--f-body); font-size:1.4rem; font-weight:700; color:var(--dorado-claro); letter-spacing:.01em; }
.resumen-club #btnConfirmarSeleccion{ padding:14px 30px; font-size:.78rem; letter-spacing:.06em; }
.resumen-club #btnConfirmarSeleccion:disabled{ opacity:.4; cursor:not-allowed; }

@media (max-width:760px){
  .selector-grid{ grid-template-columns:repeat(2, 1fr); }
  .resumen-club-interior{ justify-content:center; text-align:center; padding:14px 16px 16px; }
  .resumen-club-precios{ order:2; }
  .resumen-club #btnConfirmarSeleccion{ width:100%; order:3; }
  .resumen-total{ font-size:1.3rem; }
}

/* ---------- Tarjetas de canje individual (canjear.php) ---------- */
.tarjeta-canje{
  border:1px solid var(--linea); border-radius:10px;
  margin-bottom:14px; overflow:hidden; background:var(--blanco);
}
.tarjeta-canje-cabecera{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background:none; border:none; cursor:pointer;
  font-family:var(--f-body); font-size:.94rem; color:var(--cacao); text-align:left;
}
.tarjeta-canje-cabecera .mas{ font-size:1.2rem; color:var(--dorado); transition:transform .2s ease; flex:none; margin-left:12px; }
.tarjeta-canje.abierta .tarjeta-canje-cabecera .mas{ transform:rotate(45deg); }
.tarjeta-canje-cuerpo{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  padding:0 18px;
}
.tarjeta-canje.abierta .tarjeta-canje-cuerpo{ max-height:900px; padding:0 18px 20px; }
/* =========================================================
   MI CUENTA — diseño por paneles
   ========================================================= */
.cuenta-hero{
  background:var(--crema-2);
  padding:44px 0 30px;
  border-bottom:1px solid var(--linea);
}
.cuenta-hero h1{ margin-top:4px; }

.cuenta-stats{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-bottom:28px;
}
.cuenta-stat{
  flex:1 1 auto; min-width:150px;
  background:var(--blanco); border:1px solid var(--linea); border-radius:10px;
  padding:18px 20px;
}
.cuenta-stat-valor{ display:block; font-family:var(--f-body); font-weight:700; font-size:1.3rem; color:var(--cacao); }
.cuenta-stat-label{ display:block; font-size:.76rem; color:var(--cacao-suave); margin-top:4px; }
.cuenta-stat-dorado .cuenta-stat-valor{ color:var(--dorado); }

.cuenta-grid-2col{
  display:grid; grid-template-columns:1.3fr 1fr; gap:20px;
}
.cuenta-tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-radius:10px;
  padding:26px 28px;
}
.cuenta-tarjeta-club{ border-top:3px solid var(--dorado); }
.cuenta-tarjeta-invitacion{ background:var(--crema-2); }

.cuenta-tarjeta-encabezado{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cuenta-saldo{ text-align:center; flex:none; }
.cuenta-saldo-numero{ display:block; font-family:var(--f-body); font-weight:700; font-size:1.6rem; color:var(--dorado); }
.cuenta-saldo-etiqueta{ font-size:.7rem; color:var(--cacao-suave); line-height:1.3; }

.cuenta-lista-productos{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:8px; }
.cuenta-lista-productos li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; background:var(--crema-2); border-radius:6px; font-size:.86rem;
}
.cuenta-lista-productos li.canjeado{ opacity:.55; }
.cuenta-lista-productos li .valor{ color:var(--cacao-suave); white-space:nowrap; font-weight:600; }

.cuenta-dato{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--linea); font-size:.88rem;
}
.cuenta-dato:last-of-type{ border-bottom:none; }
.cuenta-dato-label{ color:var(--cacao-suave); }

.cuenta-tabla-pedidos th{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--cacao-suave); }

.cuenta-badge{
  display:inline-block; padding:4px 11px; border-radius:20px;
  font-size:.72rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.cuenta-badge-pendiente_pago{ background:#FBF0DD; color:#8A6D1E; }
.cuenta-badge-pagado{ background:#E4F1E5; color:#2E6B37; }
.cuenta-badge-en_preparacion{ background:#E4ECF7; color:#2E4F8A; }
.cuenta-badge-en_camino{ background:#EBE4F7; color:#5B2E8A; }
.cuenta-badge-entregado{ background:#DCEFE9; color:#1E6B57; }
.cuenta-badge-cancelado{ background:#FBEAEA; color:#8A2E2E; }

@media (max-width:880px){
  .cuenta-grid-2col{ grid-template-columns:1fr; }
  .cuenta-stat{ min-width:130px; padding:14px 16px; }
  .cuenta-stat-valor{ font-size:1.1rem; }
}

/* ---------- Campo de contraseña con "ojito" para mostrar/ocultar ---------- */
.campo-password{ position:relative; }
.campo-password input{ padding-right:44px; }
.campo-password .btn-ver-clave{
  position:absolute; right:10px; top:50%; transform:translateY(calc(-50% + 12px));
  background:none; border:none; cursor:pointer; padding:6px;
  color:var(--cacao-suave); display:flex; align-items:center;
}
.campo-password .btn-ver-clave:hover{ color:var(--dorado); }
.campo-password .icono-ojo-cerrado{ display:none; }
.campo-password.mostrando .icono-ojo-abierto{ display:none; }
.campo-password.mostrando .icono-ojo-cerrado{ display:block; }

@media (max-width:760px){
  .modal-club{ padding:12px; align-items:flex-end; }
  .modal-club-caja{ max-width:none; border-radius:14px 14px 0 0; padding:26px 20px; max-height:94vh; }
}

/* ---------- Utilidades ---------- */
.sr-solo{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.extra[hidden]{ display:none; }
.seccion-categorias + .seccion{ padding-top:20px; }
.galeria-miniaturas{ max-height:calc(100vh - var(--alto-header) - 60px); overflow-y:auto; scrollbar-width:none; }
.testimonio-estrellas{ color:var(--dorado); letter-spacing:3px; margin-bottom:10px; }