/* ==========================================================================
   35 · Bodega del Caribe
   Para bebidas artesanales, licores y productos con etiqueta y escudo. Vino
   oscuro de lienzo, pergamino para lo claro y el escudo negro de la marca. La
   firma es la etiqueta: cada sabor se presenta dentro de una tarjeta que imita
   la etiqueta real de la botella, con su franja de datos abajo. Trae banda
   legal obligatoria, que en bebidas alcohólicas no es opcional.
   ========================================================================== */

:root{
  --vino:var(--marca-1, #7A1028);
  --vino-hondo:#4A0A18;
  --vino-claro:#B8324F;
  --pergamino:#EFE7DA;
  --pergamino-2:#E2D6C3;
  --arena:#C9B896;
  --negro:#141110;
  --negro-2:#221C1A;
  --blanco:#FFFFFF;
  --tinta:#2A211F;
  --tinta-suave:#6E5F5A;
  --linea:rgba(42,33,31,.16);
  --linea-clara:rgba(239,231,218,.22);
  --ease:cubic-bezier(.2,.8,.25,1);
  --r:6px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--pergamino); color:var(--tinta); line-height:1.78; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:400; line-height:1.18; letter-spacing:.06em; text-transform:uppercase}
h1 em, h2 em{font-style:normal; color:var(--vino-claro)}
p{margin:0 0 1rem}
.blob{display:none !important}

.wrap{width:min(1140px,92vw); margin:0 auto}
.sec{padding:108px 0; position:relative}
.centrado{text-align:center}
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:.6rem; letter-spacing:.36em; text-transform:uppercase; font-weight:600; color:var(--vino); margin:0 0 18px}
.eyebrow::before, .eyebrow::after{content:""; width:24px; height:1px; background:currentColor}
.oscuro .eyebrow{color:var(--arena)}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 32px; border-radius:var(--r); text-decoration:none; font-weight:600;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s}
.btn svg{width:1.3em; height:1.3em; flex:none}
.btn-primary{background:var(--vino); color:var(--pergamino)}
.btn-primary:hover{background:var(--vino-hondo); transform:translateY(-3px)}
.btn-linea{background:transparent; color:var(--tinta); border-color:var(--tinta)}
.btn-linea:hover{background:var(--tinta); color:var(--pergamino)}
.oscuro .btn-linea{color:var(--pergamino); border-color:var(--linea-clara)}
.oscuro .btn-linea:hover{background:var(--pergamino); color:var(--negro)}
.btn-wa{background:#25D366; color:#04331d; border-color:#25D366}
.btn-wa:hover{transform:translateY(-3px)}
.btn-sm{padding:11px 22px; font-size:.64rem}
.chip{display:inline-flex; align-items:center; gap:9px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.chip svg{width:16px; height:16px; color:var(--vino)}
.oscuro .chip svg{color:var(--arena)}

/* ---------- Encabezado ---------- */
#hdr{position:sticky; top:0; z-index:60; background:rgba(239,231,218,.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--linea)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:22px; height:86px; transition:height .3s var(--ease)}
header.stuck .nav{height:64px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; min-width:0}
.brand img{width:auto; height:64px; max-width:205px; object-fit:contain; flex:none; transition:height .3s var(--ease)}
header.stuck .brand img{height:54px}
.brand > span{display:flex; flex-direction:column; min-width:0}
.brand b{font-family:var(--f-titulo, 'Cinzel', serif); font-weight:600; font-size:1.14rem; letter-spacing:.24em; text-transform:uppercase; color:var(--negro); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand i{font-style:normal; font-size:.5rem; letter-spacing:.32em; text-transform:uppercase; color:var(--vino); font-weight:600}
.nav-links{display:flex; gap:30px}
.nav-links a{position:relative; text-decoration:none; color:var(--tinta); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; padding:6px 0}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--vino); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}

/* ---------- 1 · Portada ---------- */
.z-hero{background:var(--negro); color:var(--pergamino); padding:74px 0 124px; position:relative; overflow:hidden}
.z-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 62% 44%, rgba(122,16,40,.44), transparent 62%)}
.z-hero .wrap{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; position:relative; z-index:1}
.z-hero h1{font-size:clamp(2.2rem,5.2vw,4rem); color:var(--pergamino)}
.z-lead{margin:24px 0 0; max-width:46ch; color:rgba(239,231,218,.76); font-size:1.04rem; text-transform:none}
.z-hero-cta{display:flex; gap:14px; margin:32px 0 30px; flex-wrap:wrap}
.z-firmas{display:flex; flex-wrap:wrap; gap:12px 26px; padding-top:24px; border-top:1px solid var(--linea-clara); color:rgba(239,231,218,.86)}
.z-botellas{position:relative}
.z-botellas img{width:100%; height:auto; border-radius:var(--r)}
.z-escudo{position:absolute; left:50%; top:-26px; transform:translateX(-50%); z-index:3; width:86px; height:86px; background:var(--pergamino); border-radius:50%;
  display:grid; place-items:center; padding:10px; box-shadow:0 16px 32px -14px rgba(0,0,0,.7)}
.z-escudo img{width:100%; height:auto}

/* ---------- 2 · Banda legal ---------- */
.z-legal{background:var(--vino-hondo); color:var(--pergamino)}
.z-legal .wrap{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 32px; padding:16px 0; text-align:center}
.z-legal span{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.z-legal span + span{position:relative}
.z-legal span + span::before{content:"·"; position:absolute; left:-18px}

/* ---------- 3 · Los sabores ---------- */
.z-sabores{background:var(--pergamino)}
.z-cab{max-width:56ch; margin:0 auto 58px; text-align:center}
.z-cab h2{font-size:clamp(2rem,4.4vw,3.2rem); color:var(--negro)}
.z-cab p{margin:18px 0 0; color:var(--tinta-suave); text-transform:none}
.z-rejilla{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
/* la etiqueta: imita la de la botella */
.z-etiqueta{background:linear-gradient(180deg, var(--blanco) 0%, var(--pergamino-2) 100%); border:1px solid var(--linea); border-radius:var(--r);
  padding:34px 26px 0; text-align:center; display:flex; flex-direction:column; box-shadow:0 20px 44px -32px rgba(20,17,16,.6);
  transition:transform .4s var(--ease), box-shadow .4s}
.z-etiqueta:hover{transform:translateY(-6px); box-shadow:0 30px 56px -32px rgba(20,17,16,.65)}
.z-etiqueta::before{content:""; display:block; width:44px; height:1px; background:var(--vino); margin:0 auto 22px}
.z-etiqueta h3{font-size:1.5rem; color:var(--negro); letter-spacing:.16em}
.z-etiqueta .z-latin{display:block; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--tinta-suave); margin:8px 0 16px; font-style:italic}
.z-etiqueta > p{margin:0 0 22px; font-size:.92rem; color:var(--tinta-suave); text-transform:none; flex:1}
.z-franja{margin:0 -26px; background:var(--negro); color:var(--pergamino); display:flex; justify-content:space-around; gap:10px; padding:12px 16px;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; border-radius:0 0 var(--r) var(--r)}
.z-acc{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:22px 0}
.z-nota{margin:48px auto 0; max-width:62ch; text-align:center; font-size:.86rem; color:var(--tinta-suave); text-transform:none}

/* ---------- 4 · Cómo se hace ---------- */
.z-hace{background:var(--negro-2); color:var(--pergamino)}
.z-hace .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
.z-hace-foto{border-radius:var(--r); overflow:hidden}
.z-hace-foto img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover}
.z-hace h2{font-size:clamp(1.9rem,4.2vw,3rem); color:var(--pergamino); margin-bottom:18px}
.z-hace p{color:rgba(239,231,218,.78); text-transform:none}
.z-pasos-h{display:grid; gap:0; margin-top:30px; border-top:1px solid var(--linea-clara)}
/* Ojo con el «>»: sin él esta regla también alcanzaba al div interior que
   envuelve el título y el texto, lo convertía en otra rejilla de dos columnas
   y metía el título en una columna de 44 px. Se veía como texto amontonado. */
.z-pasos-h > div{padding:22px 0; border-bottom:1px solid var(--linea-clara); display:grid; grid-template-columns:44px 1fr; gap:20px; align-items:start}
.z-pasos-h b{font-family:var(--f-titulo, 'Cinzel', serif); font-size:1rem; color:var(--arena)}
.z-pasos-h h3{font-size:.96rem; color:var(--pergamino); margin-bottom:6px; letter-spacing:.1em}
.z-pasos-h p{margin:0; font-size:.9rem; color:rgba(239,231,218,.72)}

/* ---------- 5 · La botella ---------- */
.z-botella{background:var(--pergamino-2)}
.z-botella .wrap{display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center}
.z-botella h2{font-size:clamp(1.9rem,4.2vw,3rem); color:var(--negro); margin-bottom:14px}
.z-botella h2 a{text-decoration:none}
.z-botella > .wrap > div > p{color:var(--tinta-suave); text-transform:none; max-width:48ch}
.z-precio{display:inline-flex; align-items:baseline; gap:12px; border:1px solid var(--negro); border-radius:var(--r); padding:12px 26px; margin:22px 0 26px}
.z-precio b{font-family:var(--f-titulo, 'Cinzel', serif); font-size:1.7rem; color:var(--vino)}
.z-precio small{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-suave); font-weight:600}
.z-foto-b{border-radius:var(--r); overflow:hidden; box-shadow:0 24px 50px -30px rgba(20,17,16,.6)}
.z-foto-b img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}

/* ---------- 6 · Quiénes somos ---------- */
.z-somos{background:var(--pergamino)}
.z-somos .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:start}
.z-somos h2{font-size:clamp(1.9rem,4.2vw,2.9rem); color:var(--negro); margin-bottom:18px}
.z-somos p{color:var(--tinta-suave); text-transform:none}
.z-somos .hist > summary{color:var(--vino)}
.z-datos{display:grid; gap:0; border-top:1px solid var(--linea)}
.z-datos div{padding:20px 0; border-bottom:1px solid var(--linea); display:flex; justify-content:space-between; gap:20px; align-items:baseline}
.z-datos dt{font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--tinta-suave); font-weight:600; margin:0}
.z-datos dd{margin:0; font-family:var(--f-titulo, 'Cinzel', serif); font-size:1rem; color:var(--negro); letter-spacing:.08em; text-align:right}

/* ---------- 7 · Cierre y contacto ---------- */
.z-cierre{background:var(--negro); color:var(--pergamino); text-align:center; position:relative; overflow:hidden}
.z-cierre::after{content:""; position:absolute; left:50%; bottom:-46%; width:76%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(122,16,40,.4), transparent 62%); pointer-events:none}
.z-cierre .wrap{position:relative; z-index:1}
.z-cierre h2{font-size:clamp(2rem,4.8vw,3.3rem); color:var(--pergamino); margin-bottom:18px}
.z-cierre > .wrap > div > p{max-width:52ch; margin:0 auto 30px; color:rgba(239,231,218,.78); text-transform:none}
.z-pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:62px; text-align:center}
.z-pasos div{padding:0 14px}
.z-pasos b{display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--arena); color:var(--arena);
  font-family:var(--f-titulo, 'Cinzel', serif); font-size:.96rem; margin-bottom:16px}
.z-pasos h3{font-size:1rem; color:var(--pergamino); margin-bottom:8px; letter-spacing:.1em}
.z-pasos p{margin:0; font-size:.9rem; color:rgba(239,231,218,.72); text-transform:none}
.z-contacto{background:var(--pergamino); padding:94px 0}
.z-contacto .wrap{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.z-contacto h2{font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--negro); margin-bottom:16px}
.z-canales{display:grid; gap:0; border-top:1px solid var(--linea)}
.z-canales a{display:flex; align-items:center; gap:16px; padding:20px 4px; border-bottom:1px solid var(--linea); text-decoration:none; transition:padding-left .3s var(--ease), color .3s}
.z-canales a:hover{padding-left:14px; color:var(--vino)}
.z-canales svg{width:18px; height:18px; color:var(--vino); flex:none}
.z-canales .et{font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--tinta-suave); display:block; font-weight:600}
.z-canales .va{font-size:.96rem}

footer{background:var(--negro); color:rgba(239,231,218,.7); padding:56px 0 40px}
.foot-top{display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid var(--linea-clara)}
.foot-top .brand b{color:var(--pergamino)}
.foot-top .brand img{background:var(--pergamino); border-radius:50%; padding:6px}
.foot-social{display:flex; gap:12px}
.foot-social a{width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--linea-clara); color:var(--pergamino);
  transition:background .3s, color .3s, border-color .3s}
.foot-social a:hover{background:var(--vino); border-color:var(--vino)}
.foot-social svg{width:18px; height:18px}
.foot-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:22px; font-size:.78rem}
.foot-legal{margin-top:16px; padding-top:16px; border-top:1px solid var(--linea-clara); font-size:.74rem; color:rgba(239,231,218,.62); line-height:1.7; letter-spacing:.04em}

/* ---------- Piezas compartidas ---------- */
.progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:100; background:var(--vino-claro); transition:width .1s linear}
.saltar{background:var(--vino); color:var(--pergamino); border-radius:var(--r)}
.pista{color:rgba(239,231,218,.6)}
.wa-float{position:fixed; right:24px; bottom:24px; z-index:90; display:inline-flex; align-items:center; gap:10px; background:var(--vino); color:var(--pergamino);
  text-decoration:none; font-weight:600; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; padding:17px 26px; border-radius:var(--r);
  box-shadow:0 18px 34px -14px rgba(74,10,24,.9); transition:transform .3s var(--ease), background .3s}
.wa-float:hover{transform:translateY(-3px); background:var(--negro)}
.wa-float svg{width:19px; height:19px; flex:none}
.anim .wa-float{animation:latirZ 3.6s ease-out infinite}
@keyframes latirZ{0%{box-shadow:0 18px 34px -14px rgba(74,10,24,.9), 0 0 0 0 rgba(184,50,79,.45)} 70%,100%{box-shadow:0 18px 34px -14px rgba(74,10,24,.9), 0 0 0 16px rgba(184,50,79,0)}}
.insignia, .insignia-linea{border-radius:var(--r); font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.insignia-linea{background:var(--vino); color:var(--pergamino)}
.hist > summary{color:var(--vino)}
.barra-compra{border-top:1px solid var(--linea)}
.barra-compra .bc-txt b{color:var(--vino)}

/* ---------- Página de producto ---------- */
.zp-cab{background:var(--pergamino); padding:26px 0 2px}
.crumbs{margin:0; display:flex; gap:12px; flex-wrap:wrap; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--tinta-suave)}
.crumbs a{text-decoration:none; color:var(--negro)}
.crumbs a:hover{color:var(--vino)}
.zp-cuerpo{background:var(--pergamino); padding:42px 0 96px}
.zp-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:58px; align-items:start}
.zp-foto{border-radius:var(--r); overflow:hidden; box-shadow:0 24px 50px -30px rgba(20,17,16,.6)}
.zp-foto > img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.kp-tira{display:flex; gap:12px; margin-top:14px}
.kp-tira button{padding:0; border:1px solid transparent; border-radius:var(--r); overflow:hidden; background:none; width:78px; cursor:pointer}
.kp-tira button[aria-current="true"]{border-color:var(--vino)}
.kp-tira img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.zp-info h1{font-size:clamp(1.9rem,4.2vw,3rem); color:var(--negro); margin-bottom:16px}
.zp-precio{display:flex; align-items:baseline; gap:14px; margin:24px 0 6px; flex-wrap:wrap}
.zp-precio b{font-family:var(--f-titulo, 'Cinzel', serif); font-size:clamp(1.6rem,3.4vw,2.4rem); color:var(--vino)}
.zp-precio small{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-suave); font-weight:600}
.p-agotado{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--tinta-suave)}
.zp-op{margin:26px 0 0}
.zp-op h3{font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--tinta-suave); margin-bottom:12px; font-family:var(--f-cuerpo, serif); font-weight:700}
.zp-chips{display:flex; flex-wrap:wrap; gap:9px}
.zp-chips button{background:transparent; color:var(--negro); border:1px solid var(--linea); border-radius:var(--r); padding:11px 22px; font:inherit; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:border-color .2s, background .2s, color .2s}
.zp-chips button:hover{border-color:var(--vino)}
.zp-chips button[aria-pressed="true"]{background:var(--vino); border-color:var(--vino); color:var(--pergamino)}
.zp-puntos{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px}
.zp-puntos li{position:relative; padding-left:28px; font-size:.96rem; color:var(--tinta-suave)}
.zp-puntos li::before{content:""; position:absolute; left:0; top:.62em; width:13px; height:1px; background:var(--vino)}
.zp-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.zp-detalle{background:var(--pergamino-2); padding:96px 0}
.zp-detalle .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start}
.zp-detalle h2{font-size:clamp(1.8rem,3.6vw,2.5rem); color:var(--negro); margin-bottom:18px}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .z-hero .wrap{grid-template-columns:1fr; gap:56px}
  .z-rejilla{grid-template-columns:1fr; max-width:400px; margin-inline:auto}
  .z-hace .wrap{grid-template-columns:1fr; gap:38px}
  .z-hace-foto{max-width:420px; margin:0 auto}
  .z-botella .wrap{grid-template-columns:1fr; gap:36px}
  .z-somos .wrap{grid-template-columns:1fr; gap:34px}
  .z-pasos{grid-template-columns:1fr; gap:34px}
  .z-contacto .wrap{grid-template-columns:1fr; gap:36px}
  .zp-grid, .zp-detalle .wrap{grid-template-columns:1fr; gap:42px}
}
@media (max-width:640px){
  body{font-size:16px}
  .sec{padding:76px 0}
  .nav{height:72px}
  .nav-links{display:none}
  .brand b{font-size:.94rem; letter-spacing:.16em}
  .z-hero{padding:46px 0 96px}
  .z-hero-cta .btn{flex:1 1 100%}
  .z-legal .wrap{flex-direction:column; gap:8px}
  .z-legal span + span::before{display:none}
  .wa-float span{display:none}
  .wa-float{padding:16px}
  .zp-detalle{padding:74px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn, .z-etiqueta{transition:none}
  .wa-float{animation:none !important}
}

/* ===== Ajustes de legibilidad (6 de septiembre de 2026) =====
   Medidos sobre la página servida: cada regla lleva el color al mínimo de
   contraste que exige la norma WCAG AA (4.5:1 en texto normal, 3:1 en texto
   grande). Solo se cambia la luminosidad; el tono y la saturación se mantienen,
   para que la identidad del negocio siga siendo la misma. ===== */
html body .z-precio.z-precio.z-precio small{color:#665853}

/* --- segunda ronda: bandas de color y rótulos sobre fondo de marca --- */
html body .z-botella.z-botella.z-botella p.eyebrow{color:#665853}
html body .z-botella.z-botella.z-botella p{color:#665853}

/* --- tercera ronda: lema de la marca y últimos rótulos --- */
html body .brand.brand.brand i{color:#141110}
html body .z-botella.z-botella.z-botella p{color:#665853; opacity:1}
html body .z-botella.z-botella.z-botella p.eyebrow{color:#665853; opacity:1}
html body footer .brand.brand.brand i{color:#EFE7DA}

/* ---------- Puerta de edad ----------
   Va por encima de todo, incluido el carrito (z-index 111). El atributo
   «hidden» se declara con !important porque cualquier regla propia con display
   lo pisaría y la puerta quedaría visible para siempre. */
.z-puerta[hidden], .z-puerta-caja[hidden]{display:none !important}
.z-puerta{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(20,17,16,.93); backdrop-filter:blur(6px);
}
body.puerta-abierta{overflow:hidden}
.z-puerta-caja{
  width:min(520px,100%); text-align:center; background:var(--pergamino); color:var(--tinta);
  border:1px solid var(--arena); border-radius:var(--r); padding:40px 34px 34px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.z-puerta-caja img{width:88px; height:88px; object-fit:contain; margin:0 auto 14px}
.z-puerta-marca{margin:0 0 18px; font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; font-weight:600; color:var(--vino)}
.z-puerta-caja h2{font-size:clamp(1.3rem,3vw,1.7rem); margin:0 0 14px}
.z-puerta-caja > p{margin:0 0 24px; color:var(--tinta); font-size:1rem; line-height:1.7}
.z-puerta-btn{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.z-puerta-btn .btn{padding:15px 26px}
.z-puerta-legal{
  margin:24px 0 0 !important; padding-top:18px; border-top:1px solid var(--linea);
  font-size:.78rem !important; line-height:1.6; letter-spacing:.02em; color:var(--tinta-suave) !important;
}
@media (max-width:520px){ .z-puerta-btn .btn{width:100%} }

/* ---------- Acabado premium ----------
   Dos toques de imprenta de etiqueta, sin tocar la paleta ni las formas:
   1) La etiqueta z-etiqueta gana el papel: un grano muy tenue de papel
      verjurado sobre el degradado de pergamino y un segundo filete fino de vino
      por dentro del borde, como el marco impreso de una etiqueta de botella.
      Al pasar, la sombra se abre en dos capas en vez de una sola mancha.
   2) El precio va enmarcado como un sello de la etiqueta: doble filete (el
      negro del tema y otro de vino separado por un respiro) y, en la ficha,
      entre dos filetes horizontales, como la franja de datos de la botella. */

/* 1 · El papel de la etiqueta. El grano es un SVG de ruido de menos de 400
   bytes; va encima del degradado vertical que ya tenía la tarjeta. El filete
   interior es una sombra «inset»: no ocupa sitio y la franja negra de datos lo
   tapa abajo, así que el marco termina justo donde empieza la franja. */
.z-etiqueta{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .04 0 0 0 0 .09 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--blanco) 0%, var(--pergamino-2) 100%);
  box-shadow:inset 0 0 0 7px transparent, inset 0 0 0 8px rgba(122,16,40,.22),
    0 1px 2px rgba(20,17,16,.08), 0 20px 44px -32px rgba(20,17,16,.6);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.z-etiqueta:hover{
  box-shadow:inset 0 0 0 7px transparent, inset 0 0 0 8px rgba(122,16,40,.4),
    0 2px 4px rgba(20,17,16,.1), 0 14px 24px -18px rgba(20,17,16,.35), 0 38px 64px -34px rgba(20,17,16,.7)}
/* El filete corto de arriba se alarga un poco al pasar, como un subrayado de imprenta. */
.z-etiqueta::before{transition:width .5s var(--ease)}
.z-etiqueta:hover::before{width:72px}
/* La franja de datos: cifras de igual ancho y un separador fino entre dato y dato. */
.z-franja{font-variant-numeric:lining-nums tabular-nums}
.z-franja span + span{border-left:1px solid rgba(239,231,218,.28); padding-left:10px}
.z-franja span:empty{display:none}

/* 2 · El precio como sello. En la portada, doble filete con respiro. */
.z-precio{outline:1px solid rgba(122,16,40,.45); outline-offset:4px; background:rgba(255,255,255,.35)}
.z-precio b{letter-spacing:.04em}
/* En la ficha, el precio queda entre dos filetes finos y con más aire. */
.zp-precio{padding-block:16px 14px; margin-top:28px; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.zp-precio b{letter-spacing:.04em}
/* Las opciones de la ficha: al pasar, un filete de vino por dentro, sin
   cambiar el tamaño del botón. */
.zp-chips button{transition:border-color .2s, background .2s, color .2s, box-shadow .25s var(--ease)}
.zp-chips button:hover{box-shadow:inset 0 0 0 1px var(--vino)}

@media (prefers-reduced-motion:reduce){
  .z-etiqueta, .z-etiqueta::before, .zp-chips button{transition:none}
}