/* ============================================================
   SONOMUD — Design tokens (manual de marca)
   ============================================================ */
:root{
  --red:#C80028;
  --red-dark:#94001E;
  --red-light:#FDE8EC;
  --black:#1A1A1A;
  --white:#FFFFFF;

  --ink:#1A1A1A;
  --ink-dim:#5B5B5F;
  --ink-mute:#8A8A8E;
  --bg:#FFFFFF;
  --bg-soft:#F7F5F5;
  --border:#EAE6E6;

  --success:#1B8A4A;
  --whatsapp:#25D366;
  --whatsapp-dark:#128C7E;

  --header-dark:#2B2B2E;

  --radius:10px;
  --radius-sm:8px;
  --radius-tag:3px;
  --shadow-sm:0 1px 2px rgba(26,26,26,.06), 0 1px 3px rgba(26,26,26,.08);
  --shadow-md:0 8px 24px rgba(26,26,26,.10);
  --shadow-lg:0 20px 48px rgba(26,26,26,.16);

  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 74px;
  --marquee-h: 36px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-weight:700; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--ink-dim); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

.container{ max-width:1240px; margin:0 auto; padding:0 24px; }
.section{ padding:72px 0; }
.section-sm{ padding:40px 0; }
@media (max-width:720px){
  .section{ padding:48px 0; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--red); margin-bottom:14px;
}
.eyebrow::before{ content:""; width:20px; height:2px; background:var(--red); border-radius:2px; }

.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); }
.section-head p{ font-size:16.5px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; border:2px solid transparent;
  font-weight:700; font-size:15px; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background:var(--red); color:var(--white); }
.btn-primary:hover{ background:var(--red-dark); }
.btn-dark{ background:var(--black); color:var(--white); }
.btn-dark:hover{ background:#000; }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--border); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-outline-white{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); }
.btn-outline-white:hover{ border-color:var(--white); background:rgba(255,255,255,.08); }
.btn-whatsapp{ background:var(--whatsapp); color:#fff; }
.btn-whatsapp:hover{ background:var(--whatsapp-dark); }
.btn-sm{ padding:10px 18px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ---------- Top promo marquee ---------- */
.marquee{
  height:var(--marquee-h); background:var(--red); color:#fff;
  overflow:hidden; position:relative; display:flex; align-items:center;
  font-size:12.5px; font-weight:600; letter-spacing:.03em;
}
.marquee-track{
  display:flex; gap:48px; white-space:nowrap; padding-left:48px;
  animation:marquee 26s linear infinite;
}
.marquee-track span{ display:inline-flex; align-items:center; gap:48px; }
.marquee-track span::after{ content:"•"; color:rgba(255,255,255,.6); margin-left:48px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  height:var(--header-h); display:flex; align-items:center;
  background:rgba(43,43,46,.94); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; }
.brand img{ height:34px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  position:relative; padding:10px 14px; border-radius:var(--radius-sm); font-weight:600; font-size:14.5px;
  color:rgba(255,255,255,.68); transition:background .15s, color .15s;
}
.main-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.main-nav a.active{ color:var(--red); }
.main-nav a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; border-radius:2px; background:var(--red);
}
.nav-item-dropdown{ position:relative; }
.nav-item-dropdown > a{ display:inline-flex; align-items:center; gap:5px; }
.nav-caret{ width:12px; height:12px; transition:transform .15s; }
.nav-item-dropdown:hover .nav-caret{ transform:translateY(1px) rotate(180deg); }
/* Puente invisible: cubre el espacio entre el link y el panel para que el
   mouse no "salga" del elemento hovereado al bajar hacia las opciones
   (si no, el panel se cerraba antes de poder hacer click). */
.nav-item-dropdown::before{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:210px; height:16px;
}
.nav-dropdown-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:190px; background:#fff; border-radius:var(--radius); box-shadow:0 18px 40px rgba(0,0,0,.22);
  padding:8px; display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease .15s, transform .15s ease .15s;
  z-index:60;
}
.nav-item-dropdown:hover .nav-dropdown-panel,
.nav-item-dropdown:focus-within .nav-dropdown-panel{
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.nav-dropdown-panel a{
  padding:10px 12px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;
  color:var(--ink); white-space:nowrap;
}
.nav-dropdown-panel a:hover{ background:var(--bg-soft); color:var(--red); }
.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:100px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); color:#fff; transition:background .15s;
}
.icon-btn:hover{ background:rgba(255,255,255,.18); }
.icon-btn svg{ width:19px; height:19px; }
.badge{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
  border-radius:100px; background:var(--red); color:#fff; font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--header-dark);
}
.header-phone{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.75); }
.header-phone svg{ width:16px; height:16px; color:var(--red); }
.nav-toggle{ display:none; }
.nav-toggle svg{ width:20px; height:20px; flex:none; }

@media (max-width:980px){
  .main-nav{ display:none; }
  .header-phone{ display:none; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
  }
  .brand img{ height:28px; }
}

.mobile-nav{
  position:fixed; inset:0; z-index:70; background:rgba(26,26,26,.5);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.mobile-nav.open{ opacity:1; pointer-events:auto; }
.mobile-nav-panel{
  position:absolute; top:0; right:0; height:100%; height:100dvh; width:min(320px,84vw);
  background:#fff; padding:22px; padding-bottom:max(22px, env(safe-area-inset-bottom)); transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column; gap:6px; overflow-y:auto;
}
.mobile-nav.open .mobile-nav-panel{ transform:translateX(0); }
.mobile-nav-panel a{
  padding:14px 12px; border-radius:10px; font-weight:700; font-size:16px; color:var(--ink);
}
.mobile-nav-panel a:hover{ background:var(--bg-soft); }
.mobile-nav-close{ align-self:flex-end; width:38px; height:38px; border-radius:100px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.mobile-nav-close svg{ width:18px; height:18px; flex:none; }
.mnav-item{ display:flex; flex-direction:column; }
.mnav-row{ display:flex; align-items:center; }
.mnav-row a{ flex:1; }
.mnav-toggle{
  width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--ink-dim);
}
.mnav-caret{ width:17px; height:17px; transition:transform .2s; }
.mnav-item.open .mnav-caret{ transform:rotate(180deg); }
.mnav-sub{ max-height:0; overflow:hidden; transition:max-height .25s ease; display:flex; flex-direction:column; }
.mnav-item.open .mnav-sub{ max-height:280px; }
.mnav-sub a{ padding:10px 12px 10px 26px; font-size:14px; font-weight:600; color:var(--ink-dim); }
.mnav-sub a:hover{ color:var(--ink); background:var(--bg-soft); }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 85% 0%, #3a0410 0%, var(--black) 46%, var(--black) 100%);
  color:#fff;
}
.hero .container{ position:relative; z-index:2; padding-top:88px; padding-bottom:88px; }
/* Altura fija: el texto/CTAs cambian de largo según la diapositiva (algunas
   tienen 1 botón, otras 2), y sin esto el video de fondo (inset:0 sobre
   .hero) crecía o encogía con el contenido — se notaba como que el video
   "ocupaba más área" en unas diapositivas que en otras. */
.hero.has-reel{
  display:flex; flex-direction:column;
  min-height:980px;
}
.hero.has-reel .container{
  display:flex; flex-direction:column; justify-content:center; flex:1;
}
@media (max-width:820px){
  /* En mobile el video ya no cubre todo el hero (inset:0 hacía que se
     estirara para tapar también el texto largo + las 3 tarjetas, quedando
     recortado al extremo) — acá el video queda con una altura fija y
     razonable arriba, y el texto/tarjetas fluyen debajo sobre el fondo
     oscuro propio de .hero (mismo look, sin la franja de video estirada). */
  /* .hero.has-reel sigue siendo flex-column por la regla de base (no la
     tocamos para no afectar desktop) — pero un flex-item por default no se
     achica por debajo del ancho de su contenido (min-width:auto), y con la
     fila de tarjetas de .hero-areas ese contenido es más ancho que la
     pantalla. Sin min-width:0 el .container entero se estira más allá del
     viewport y todo el texto queda recortado al borde. */
  .hero.has-reel{ display:block; min-height:0; }
  .hero.has-reel .container{ display:block; min-width:0; width:100%; padding-top:32px; padding-bottom:32px; }
  /* Las diapositivas con menos texto (1 solo botón) terminaban antes de los
     420px del video, así que las tarjetas de abajo arrancaban ENCIMA del
     video todavía visible — se veía como un parche gris cortando el video.
     Este mínimo asegura que el bloque de texto siempre llegue hasta pasado
     el video, sea cual sea la diapositiva. */
  #heroTextSlot{ min-height:410px; }
  .hero-tag{ margin-bottom:10px; padding:6px 14px; font-size:11.5px; }
  .hero h1{ font-size:26px; line-height:1.28; }
  .hero p.lead{ font-size:14px; line-height:1.4; margin-top:8px; }
  .hero-actions .btn{ padding:11px 18px; font-size:13.5px; }
}
.hero-dots{ display:none; }
.hero-glow{ display:none; }

/* ---------- Hero video reel (portada) ---------- */
.hero-reel{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--black); }
.reel-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1s ease; pointer-events:none;
}
.reel-slide.active{ opacity:1; }
.reel-slide video{ width:100%; height:100%; object-fit:cover; }
.reel-placeholder{
  position:absolute; inset:0; display:none;
  background:
    radial-gradient(120% 140% at 85% 100%, rgba(200,0,40,.32), transparent 55%),
    linear-gradient(150deg,#22050b,#141416 65%);
}
.reel-slide.is-placeholder .reel-placeholder{ display:block; }
.reel-placeholder .tag{
  position:absolute; right:6%; bottom:9%; z-index:1;
  display:inline-flex; align-items:center; gap:10px; padding:10px 18px 10px 12px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18); border-radius:100px;
  backdrop-filter:blur(6px);
}
.reel-placeholder .ic{ width:30px; height:30px; border-radius:100px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex:none; }
.reel-placeholder .ic svg{ width:15px; height:15px; color:#fff; }
.reel-placeholder span{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.75); white-space:nowrap; }
@media (max-width:640px){ .reel-placeholder .tag{ right:50%; transform:translateX(50%); bottom:6%; } }
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.72) 38%, rgba(20,2,6,.55) 65%, rgba(20,2,6,.4) 100%);
}
.reel-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:24px; z-index:3; display:flex; gap:10px; }
.reel-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); border:none; padding:0; cursor:pointer; transition:background .2s, transform .2s; }
.reel-dot.active{ background:var(--red); transform:scale(1.2); }
.hero.has-reel .hero-glow, .hero.has-reel .hero-dots{ display:none; }
@media (max-width:820px){
  .reel-dots{ display:none; }
  .hero-reel, .hero-overlay{ inset:auto; top:0; left:0; right:0; bottom:auto; height:420px; }
}
.hero-tag{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:22px;
}
.hero h1{ font-size:clamp(36px,5.4vw,64px); max-width:820px; }
.hero h1 em{ font-style:normal; color:var(--red); }
.hero p.lead{ font-size:18px; max-width:560px; color:rgba(255,255,255,.78); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
/* Con texto corto en mobile, los botones arrancaban justo en el límite de
   los 420px del video (a veces 1-2px antes), quedando la mitad de arriba
   sobre el video y la mitad de abajo sobre fondo negro plano — se veía
   como una costura cortando el botón al medio. Este margen extra los
   empuja para que siempre caigan enteros después del video. */
@media (max-width:820px){ .hero-actions{ margin-top:34px; gap:8px; } }
.hero-areas{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px;
}
.hero-area-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  padding:22px; transition:background .2s, transform .2s;
}
.hero-area-card:hover{ background:rgba(255,255,255,.1); transform:translateY(-3px); }
.hero-area-card .num{ font-size:12px; font-weight:700; color:var(--red); letter-spacing:.08em; }
.hero-area-card h3{ font-size:18px; margin:10px 0 6px; color:#fff; }
.hero-area-card p{ font-size:13.5px; color:rgba(255,255,255,.65); margin:0 0 14px; }
.hero-area-card a{ font-size:13.5px; font-weight:700; color:#fff; display:inline-flex; align-items:center; gap:6px; }
@media (max-width:820px){
  .hero-areas{
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:12px; margin-top:30px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:2px;
  }
  .hero-areas::-webkit-scrollbar{ display:none; }
  .hero-area-card{ flex:0 0 78%; scroll-snap-align:start; padding:18px; }
}

/* small page hero (interior pages) — background-image inline optional (foto real) */
.page-hero{
  background-color:var(--black); background-size:cover; background-position:center;
  color:#fff; position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(10,2,4,.92) 0%, rgba(10,2,4,.8) 42%, rgba(20,4,8,.55) 75%, rgba(20,4,8,.4) 100%);
}
.page-hero .container{ position:relative; z-index:2; padding:56px 24px 64px; }
.page-hero h1{ font-size:clamp(30px,4.2vw,46px); max-width:680px; }
.page-hero p.lead{ color:rgba(255,255,255,.75); max-width:560px; font-size:16.5px; }
.breadcrumb{ font-size:13px; color:rgba(255,255,255,.55); margin-bottom:18px; }
.breadcrumb a:hover{ color:#fff; }

/* ---------- Value strip ---------- */
.value-strip{ background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.value-item{ display:flex; align-items:center; gap:14px; padding:22px 20px; border-right:1px solid var(--border); }
.value-item:last-child{ border-right:none; }
.value-item .ic{ flex:none; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.value-item .ic svg{ width:22px; height:22px; stroke-width:1.4; }
.value-item strong{ display:block; font-size:14px; }
.value-item span{ font-size:12.5px; color:var(--ink-mute); }
@media (max-width:900px){
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .value-item{ border-right:none; border-bottom:1px solid var(--border); }
}

/* ---------- Areas (3 pilares) ---------- */
.areas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.area-card{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff;
  display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s;
}
.area-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.area-card .cover{
  height:200px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; position:relative;
  padding:20px;
}
.area-card .cover{ background-size:cover; background-position:center; }
.area-card .cover svg{ width:26px; height:26px; stroke-width:1.3; opacity:.9; position:relative; z-index:1; }
.area-card .cover .num{ font-size:12px; font-weight:600; letter-spacing:.06em; color:rgba(255,255,255,.75); align-self:flex-end; position:relative; z-index:1; }
.area-card.c-red .cover{ background-color:var(--red); }
.area-card.c-black .cover{ background-color:#2b2b2b; }
.area-card.c-line .cover{ background-color:var(--black); }
/* Cuando el cover tiene foto real (background-image inline), oscurece para legibilidad
   y saca el ícono decorativo: la foto ya comunica el área, no hace falta el ícono. */
.area-card .cover[style*="background-image"]::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 100%);
}
.area-card .cover[style*="background-image"] svg{ display:none; }
.area-card .body{ padding:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.area-card h3{ font-size:21px; }
.area-card p{ font-size:14.5px; margin:0; }
.area-card ul{ display:flex; flex-direction:column; gap:7px; margin:4px 0 0; }
.area-card li{ font-size:13.5px; color:var(--ink-dim); display:flex; gap:8px; align-items:flex-start; }
.area-card li svg{ width:15px; height:15px; color:var(--success); flex:none; margin-top:2px; }
.area-card .foot{ margin-top:auto; padding-top:6px; display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:900px){ .areas-grid{ grid-template-columns:1fr; } }

/* ---------- Filter bar (catalog) ---------- */
.cat-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border);
}
.pill-group{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  padding:9px 16px; border-radius:100px; border:1px solid var(--border); background:#fff;
  font-size:13.5px; font-weight:600; color:var(--ink-dim); transition:all .15s;
}
.pill:hover{ border-color:var(--ink); color:var(--ink); }
.pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.subcat-row{ display:none; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 26px; }
.subcat-row::before{ content:"Tipo:"; font-size:12px; font-weight:700; color:var(--ink-mute); margin-right:2px; }
.subpill{
  padding:6px 13px; border-radius:100px; border:1px solid transparent; background:var(--bg-soft);
  font-size:12.5px; font-weight:600; color:var(--ink-mute); transition:all .15s;
}
.subpill:hover{ background:var(--border); color:var(--ink); }
.subpill.active{ background:var(--red-light); color:var(--red); }
.search-mini{ position:relative; }
.search-mini input{
  padding:10px 14px 10px 38px; border-radius:100px; border:1px solid var(--border); font-size:13.5px;
  width:220px; background:var(--bg-soft);
}
.search-mini svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-mute); }

/* ---------- Product grid ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1080px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (max-width:480px){ .product-grid{ grid-template-columns:1fr 1fr; } }

.product-card{
  border:1px solid var(--border); border-radius:var(--radius); background:#fff; overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s, border-color .2s;
}
.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:transparent; }
.product-media{
  aspect-ratio:1/1; background:var(--bg-soft); display:flex; align-items:center; justify-content:center;
  position:relative; color:var(--ink-mute);
}
.product-media svg{ width:38%; height:38%; opacity:.85; }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-media:hover img{ transform:scale(1.035); }
.product-media img{ transition:transform .3s ease; }
.product-photo-count{
  position:absolute; bottom:10px; right:10px; z-index:1;
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:5px 9px; border-radius:100px; background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(2px);
}
.product-photo-count svg{ width:12px; height:12px; opacity:1; }
.product-tag{
  position:absolute; top:10px; left:10px; font-size:10px; font-weight:700; letter-spacing:.05em;
  padding:5px 8px; border-radius:var(--radius-tag); background:#fff; color:var(--ink); text-transform:uppercase;
  border:1px solid var(--border);
}
.product-tag.alt{ background:var(--ink); color:#fff; border-color:var(--ink); }
.product-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-cat{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); }
.product-name{ display:block; font-size:14.5px; font-weight:700; line-height:1.3; min-height:2.6em; color:var(--ink); }
.product-name:hover{ color:var(--red); }
.product-price{ margin-top:auto; }
.product-price .now{ font-size:16px; font-weight:600; color:var(--ink); }
.product-price .per{ font-size:11.5px; color:var(--ink-mute); font-weight:600; }
.product-price .cash{ font-size:12px; color:var(--success); font-weight:700; margin-top:2px; }
.product-price .installments{ font-size:12px; color:var(--red); font-weight:700; margin-top:2px; }
.product-price .transfer-off{ font-size:12px; color:var(--ink); font-weight:700; margin-top:2px; }
.product-price .cta{ font-size:13px; font-weight:700; color:var(--red); }
.product-actions{ display:flex; gap:8px; margin-top:10px; }
.qty-stepper{
  display:flex; align-items:center; border:1px solid var(--border); overflow:hidden; flex:none;
}
.qty-stepper button{ width:28px; height:34px; background:none; border:none; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; padding:0; color:var(--ink-dim); }
.qty-stepper button:hover{ color:var(--ink); }
.qty-stepper button svg{ width:11px; height:11px; }
.qty-stepper span{ width:26px; text-align:center; font-weight:600; font-size:13px; }
.add-btn{
  flex:1; height:34px; background:none; color:var(--ink); font-weight:600; font-size:12.5px;
  display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border); transition:all .15s;
  letter-spacing:.02em; text-transform:uppercase;
}
.add-btn:hover{ border-color:var(--ink); }
.add-btn.added{ background:var(--ink); color:#fff; border-color:var(--ink); }
.add-btn svg{ width:13px; height:13px; }
@media (max-width:480px){
  /* En tarjetas de 2 columnas no entra el stepper + "Agregar" en la misma
     fila (el texto del botón quedaba cortado) — se apilan. */
  .product-actions{ flex-direction:column; align-items:stretch; }
  .qty-stepper{ justify-content:center; }
}

/* ---------- Página de detalle de producto ---------- */
.pd-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:20px; }
@media (max-width:860px){ .pd-wrap{ grid-template-columns:1fr; gap:28px; } }
.pd-gallery{ position:sticky; top:96px; }
@media (max-width:860px){ .pd-gallery{ position:static; } }
.pd-main-img{
  aspect-ratio:1/1; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; cursor:zoom-in;
}
.pd-main-img img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.pd-main-img:hover img{ transform:scale(1.035); }
.pd-main-img.pd-noimg{ color:var(--ink-mute); }
.pd-main-img.pd-noimg svg{ width:30%; height:30%; opacity:.85; }
.pd-zoom-hint{
  position:absolute; bottom:12px; right:12px; display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:100px;
  background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(2px);
}
.pd-zoom-hint svg{ width:13px; height:13px; }
.pd-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pd-thumb{
  width:64px; height:64px; border-radius:10px; overflow:hidden; border:2px solid transparent;
  background:var(--bg-soft); padding:0; flex:none; transition:border-color .15s;
}
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb:hover{ border-color:var(--border); }
.pd-thumb.active{ border-color:var(--red); }
.pd-tag{ position:static; display:inline-flex; }
.pd-cat{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); margin-top:14px; }
.pd-name{ font-size:clamp(24px,3.2vw,34px); margin:6px 0 0; }
.pd-note{ color:var(--red); font-weight:700; font-size:13.5px; margin-top:8px; }
.pd-price{ font-size:32px; font-weight:800; margin-top:20px; }
.pd-price-unit{ display:block; font-size:13px; font-weight:600; color:var(--ink-mute); margin-top:4px; }
.pd-price-cta{ font-size:20px; color:var(--red); }
.pd-actions{ display:flex; gap:12px; margin-top:20px; }
.pd-actions .qty-stepper{ height:48px; }
.pd-actions .qty-stepper button{ width:40px; height:100%; font-size:16px; }
.pd-actions .qty-stepper span{ width:34px; font-size:15px; }
.pd-actions .btn{ flex:1; }
.pd-pay-grid{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.pd-pay-card{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius);
}
.pd-pay-card svg{ width:22px; height:22px; color:var(--red); flex:none; }
.pd-pay-card strong{ display:block; font-size:14px; }
.pd-pay-card span{ display:block; font-size:13px; color:var(--ink-mute); margin-top:2px; }
.pd-delivery{ display:flex; gap:10px; margin-top:22px; padding-top:22px; border-top:1px solid var(--border); }
.pd-delivery svg{ width:18px; height:18px; color:var(--red); flex:none; margin-top:1px; }
.pd-delivery p{ font-size:13.5px; color:var(--ink-mute); margin:0; }
.pd-info .btn-block{ margin-top:14px; }
.pd-notfound{ text-align:center; padding:80px 0; }
.pd-notfound h1{ font-size:26px; margin-bottom:10px; }
.pd-notfound .hero-actions{ justify-content:center; margin-top:22px; }

/* ---------- Cotizador ---------- */
.quote-box{
  background:var(--black); color:#fff; border-radius:20px; padding:0; overflow:hidden;
  display:grid; grid-template-columns:1.1fr 1fr;
}
@media (max-width:900px){ .quote-box{ grid-template-columns:1fr; } }
/* min-width:0 en cada nivel: por default una grilla no achica sus columnas
   más allá del ancho "natural" del contenido (los botones con texto largo
   como "Cumpleaños"), así que sin esto la grilla entera se desborda del
   costado en pantallas angostas — mismo problema ya visto antes en el
   hero con flexbox, acá es la versión con CSS grid. */
.quote-form{ padding:40px; min-width:0; }
.quote-form .step-label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.quote-field{ margin-bottom:22px; min-width:0; }
.quote-field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:10px; color:rgba(255,255,255,.9); }
.choice-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; min-width:0; }
.choice-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:520px){ .choice-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
.choice{
  min-width:0; padding:13px 14px; border-radius:11px; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  font-size:13.5px; font-weight:600; text-align:center; transition:all .15s; color:rgba(255,255,255,.85);
}
@media (max-width:480px){
  .quote-form{ padding:26px 20px; }
  .choice{ padding:12px 8px; font-size:12.5px; }
}
.choice:hover{ border-color:rgba(255,255,255,.4); }
.choice.selected{ border-color:var(--red); background:rgba(200,0,40,.18); color:#fff; }
.quote-otro-wrap input{
  width:100%; padding:12px 14px; border-radius:11px; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  font-size:13.5px; color:#fff; font-family:inherit;
}
.quote-otro-wrap input::placeholder{ color:rgba(255,255,255,.4); }
.quote-otro-wrap input:focus{ outline:none; border-color:var(--red); }
.quote-result{ background:#fff; color:var(--ink); padding:40px; display:flex; flex-direction:column; }
.quote-result h3{ font-size:20px; }
.quote-result .muted{ color:var(--ink-mute); font-size:13.5px; }
.quote-line{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px dashed var(--border); font-size:13.5px; }
.quote-line strong{ font-size:13.5px; }
.quote-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; margin-top:6px; }
.quote-total .amount{ font-size:26px; font-weight:800; }
.quote-total .label{ font-size:12.5px; color:var(--ink-mute); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.quote-cash{ font-size:13px; color:var(--success); font-weight:700; margin-top:4px; }
.quote-empty{ margin:auto; text-align:center; color:var(--ink-mute); padding:20px 0; }
.quote-empty svg{ width:44px; height:44px; margin:0 auto 12px; opacity:.4; }
.quote-actions{ display:flex; gap:10px; margin-top:20px; }

/* ---------- Cart drawer ---------- */
.cart-overlay{ position:fixed; inset:0; background:rgba(26,26,26,.5); z-index:80; opacity:0; pointer-events:none; transition:opacity .2s; }
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:absolute; top:0; right:0; height:100%; height:100dvh; width:min(420px,92vw); background:#fff;
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s ease;
}
.cart-overlay.open .cart-drawer{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border); }
.cart-head h3{ font-size:18px; margin:0; }
/* .icon-btn por defecto es para el header oscuro (ícono blanco sobre fondo
   traslúcido claro) — acá el drawer es blanco, así que se invierte a oscuro. */
.cart-head .icon-btn{ background:var(--bg-soft); border-color:var(--border); color:var(--ink); }
.cart-head .icon-btn:hover{ background:var(--border); }
.cart-items{ flex:1; overflow-y:auto; padding:14px 22px; display:flex; flex-direction:column; gap:14px; }
.cart-item{ display:flex; gap:12px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--border); }
.cart-item .thumb{ width:56px; height:56px; border-radius:10px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; flex:none; color:var(--ink-mute); }
.cart-item .thumb svg{ width:26px; height:26px; }
.cart-item .info{ flex:1; min-width:0; }
.cart-item .info .name{ font-size:13.5px; font-weight:700; line-height:1.3; }
.cart-item .info .meta{ font-size:11.5px; color:var(--ink-mute); margin-top:2px; }
.cart-item .row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.cart-item .price{ font-size:13px; font-weight:800; }
.remove-btn{
  background:none; border:none; padding:6px; margin:0; color:var(--ink-mute);
  display:flex; align-items:center; justify-content:center; border-radius:8px; flex:none;
}
.remove-btn svg{ width:16px; height:16px; }
.remove-btn:hover{ color:var(--red); background:var(--red-light); }
.cart-empty{ margin:auto; text-align:center; color:var(--ink-mute); padding:40px 20px; }
.cart-empty svg{ width:48px; height:48px; margin:0 auto 14px; opacity:.35; }
.cart-foot{ padding:20px 22px; padding-bottom:max(20px, env(safe-area-inset-bottom)); border-top:1px solid var(--border); }
.cart-total-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cart-total-row .amount{ font-size:22px; font-weight:800; }

/* ---------- Checkout (segundo paso dentro del cajón del carrito) ---------- */
.cart-drawer.checkout-mode{ width:min(460px,94vw); }
.checkout-back{
  display:inline-flex; align-items:center; gap:8px; background:none; border:none; padding:4px 0 16px;
  font-size:13.5px; font-weight:700; color:var(--ink-mute);
}
.checkout-back svg{ width:16px; height:16px; }
.checkout-back:hover{ color:var(--ink); }
.checkout-h4{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-mute); margin:22px 0 10px; }
.checkout-h4:first-of-type{ margin-top:0; }
.checkout-coupon{ display:flex; gap:8px; }
.checkout-coupon input{
  flex:1; min-width:0; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm,8px); font-size:14px;
}
.checkout-coupon-msg{ font-size:12.5px; margin-top:8px; color:var(--success); font-weight:700; min-height:16px; }
.checkout-coupon-msg.error{ color:var(--red); }
.checkout-pay-option{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm,8px);
  margin-bottom:8px; cursor:pointer;
}
.checkout-pay-option:has(input:checked){ border-color:var(--red); background:var(--red-light); }
.checkout-pay-option input{ flex:none; accent-color:var(--red); width:16px; height:16px; }
.checkout-pay-option strong{ display:block; font-size:13.5px; }
.checkout-pay-option span{ display:block; font-size:12px; color:var(--ink-mute); margin-top:2px; }
.checkout-fields{ display:flex; flex-direction:column; gap:12px; }
.checkout-field-row{ display:flex; gap:10px; }
.checkout-field-row .checkout-field{ flex:1; min-width:0; }
.checkout-field{ display:flex; flex-direction:column; gap:6px; }
.checkout-field span{ font-size:12.5px; font-weight:700; color:var(--ink-mute); }
.checkout-field input{ padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm,8px); font-size:14px; }
.checkout-field input:focus{ outline:none; border-color:var(--red); }
.checkout-hint{ font-size:12.5px; color:var(--ink-mute); margin-top:14px; padding:12px 14px; background:var(--bg-soft); border-radius:var(--radius-sm,8px); }
.cart-note{ font-size:11.5px; color:var(--ink-mute); margin-bottom:14px; }

/* ---------- Info / process sections ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.process-grid::before{
  content:""; position:absolute; top:17px; left:12.5%; right:12.5%; height:2px; background:var(--border); z-index:0;
}
@media (max-width:900px){ .process-grid{ grid-template-columns:repeat(2,1fr); row-gap:32px; } .process-grid::before{ display:none; } }
@media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }
.process-card{ padding:0 6px; position:relative; z-index:1; text-align:center; }
.step-dot{
  width:34px; height:34px; margin:0 auto 18px; border-radius:100px; background:var(--bg-soft);
  border:2px solid var(--red); color:var(--red); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.process-card .ic{ width:24px; color:var(--red); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.process-card .ic svg{ width:24px; height:24px; stroke-width:1.5; }
.process-card h4{ font-size:16px; margin-bottom:8px; }
.process-card p{ font-size:13.5px; margin:0; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; gap:32px; } }
.feature-list{ display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.feature-item{ display:flex; gap:16px; }
.feature-item .ic{ width:20px; flex:none; padding-top:2px; color:var(--red); display:flex; align-items:flex-start; justify-content:center; }
.feature-item .ic svg{ width:20px; height:20px; stroke-width:1.5; }
.feature-item h4{ font-size:15px; margin-bottom:3px; }
.feature-item p{ font-size:13.5px; margin:0; }
.visual-panel{
  border-radius:var(--radius); background:var(--black);
  min-height:380px; display:flex; align-items:center; justify-content:center; color:#fff; position:relative; overflow:hidden;
}
.visual-panel svg{ width:22%; opacity:.9; stroke-width:1.2; }

/* ---------- Galería de fotos (Producción técnica) ---------- */
.prod-gallery{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; grid-auto-flow:dense; gap:14px;
}
.prod-gallery-item{ border-radius:var(--radius); overflow:hidden; position:relative; background:var(--bg-soft); }
.prod-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.prod-gallery-item:hover img{ transform:scale(1.05); }
.prod-gallery-item.span-tall{ grid-row:span 2; }
.prod-gallery-item.span-wide{ grid-column:span 2; }
@media (max-width:900px){
  .prod-gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
}
@media (max-width:560px){
  .prod-gallery{ grid-template-columns:1fr; grid-auto-rows:240px; }
  .prod-gallery-item.span-tall, .prod-gallery-item.span-wide{ grid-column:span 1; grid-row:span 1; }
}

/* ---------- Marcas que comercializamos (venta) ---------- */
.brand-strip-section{ background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:28px 0; }
.brand-strip{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.brand-strip-track{ display:flex; align-items:center; gap:18px; width:max-content; animation:brandScroll 40s linear infinite; }
.brand-strip:hover .brand-strip-track{ animation-play-state:paused; }
.brand-chip{
  flex:none; background:#fff; border:1px solid var(--border); border-radius:10px;
  height:60px; padding:0 22px; display:flex; align-items:center;
}
.brand-chip img{ height:26px; width:auto; max-width:104px; object-fit:contain; }
.brand-chip img.invert{ filter:invert(1); }
@keyframes brandScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .brand-strip-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .brand-strip-track .brand-chip:nth-child(n+16){ display:none; }
}

/* ---------- Contenido (Instagram) ---------- */
.content-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
@media (max-width:1080px){ .content-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .content-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.content-card{
  aspect-ratio:9/16; border-radius:var(--radius); overflow:hidden; position:relative;
  background:var(--bg-soft); border:1px solid var(--border);
}
.content-thumb{ display:block; }
.content-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.content-thumb:hover img{ transform:scale(1.04); }
.content-thumb-badge{
  position:absolute; right:10px; top:10px; width:30px; height:30px; border-radius:100px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.content-thumb-badge svg{ width:15px; height:15px; }
.content-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(200,0,40,.25), transparent 60%),
    linear-gradient(160deg,#221216,var(--black) 70%);
  color:#fff; text-align:center; padding:14px;
}
.content-placeholder .ic{ width:38px; height:38px; border-radius:100px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
.content-placeholder .ic svg{ width:18px; height:18px; }
.content-placeholder span{ font-size:11.5px; font-weight:700; color:rgba(255,255,255,.7); line-height:1.3; }
.content-foot{ display:flex; align-items:center; justify-content:center; margin-top:32px; }

/* ---------- Testimonials ---------- */
.testi-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.testi-scroll{ display:flex; gap:18px; width:max-content; animation:marquee 50s linear infinite; }
.testi-viewport:hover .testi-scroll{ animation-play-state:paused; }
.testi-card{
  flex:none; width:300px; border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; background:#fff; display:flex; flex-direction:column;
}
.testi-stars{ color:#F5A623; font-size:14px; margin-bottom:10px; letter-spacing:2px; }
.testi-card p{ font-size:13.5px; color:var(--ink); margin-bottom:16px; }
.testi-who{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:6px; }
.testi-avatar{
  width:34px; height:34px; border-radius:100px; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex:none;
  text-transform:uppercase;
}
.testi-name{ font-size:13px; font-weight:700; }
@media (prefers-reduced-motion: reduce){
  .testi-scroll{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .testi-scroll .testi-card:nth-child(n+7){ display:none; }
}

/* ---------- FAQ ---------- */
.faq-list{ max-width:800px; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 4px; background:none; border:none; text-align:left; font-size:15.5px; font-weight:700; color:var(--ink);
}
.faq-q svg{ width:18px; height:18px; flex:none; transition:transform .2s; color:var(--red); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ padding:0 4px 20px; font-size:14px; }

/* ---------- CTA banner ---------- */
.cta-banner{
  border-radius:var(--radius); background:var(--red);
  color:#fff; padding:52px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-banner::after{
  content:""; position:absolute; top:50%; right:-70px; transform:translateY(-50%); width:320px; height:320px;
  background:url('../assets/icon-white.png') no-repeat center/contain;
  opacity:.1; pointer-events:none;
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2{ font-size:clamp(24px,3vw,32px); margin-bottom:8px; }
.cta-banner p{ color:rgba(255,255,255,.85); margin:0; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Sección para productores (partner) ---------- */
.partner-panel{
  border-radius:var(--radius); background:var(--black); color:#fff;
  padding:56px; position:relative; overflow:hidden;
}
.partner-panel::after{
  content:""; position:absolute; top:50%; right:-90px; transform:translateY(-50%); width:360px; height:360px;
  background:url('../assets/icon-white.png') no-repeat center/contain;
  opacity:.05; pointer-events:none;
}
.partner-panel > *{ position:relative; z-index:1; }
.partner-head{ max-width:640px; margin:0 auto 40px; text-align:center; }
.partner-head h2{ font-size:clamp(26px,3.4vw,36px); margin:10px 0 12px; }
.partner-head p{ color:rgba(255,255,255,.72); font-size:15.5px; }
.partner-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:40px; }
@media (max-width:820px){ .partner-grid{ grid-template-columns:1fr; gap:24px; } }
.partner-card{ text-align:center; }
.partner-card .ic{
  width:46px; height:46px; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--red);
}
.partner-card .ic svg{ width:21px; height:21px; }
.partner-card h4{ color:#fff; font-size:16px; margin-bottom:6px; }
.partner-card p{ color:rgba(255,255,255,.65); font-size:13.5px; margin:0; }
.partner-cta{ display:flex; justify-content:center; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--black); color:rgba(255,255,255,.7); position:relative; overflow:hidden; }
.site-footer::before{
  content:""; position:absolute; top:-100px; right:-100px; width:440px; height:440px;
  background:url('../assets/icon-white.png') no-repeat center/contain;
  opacity:.04; pointer-events:none;
}
.site-footer .container{ position:relative; z-index:1; }
.footer-top{ padding:64px 0 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-top img{ height:30px; margin-bottom:16px; }
.footer-top p{ color:rgba(255,255,255,.55); font-size:13.5px; }
.footer-col h5{ color:#fff; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a, .footer-col span{ font-size:13.5px; color:rgba(255,255,255,.62); }
.footer-col a:hover{ color:#fff; }
.footer-col .addr{ display:flex; gap:10px; align-items:flex-start; }
.footer-col .addr svg{ width:16px; height:16px; color:var(--red); flex:none; margin-top:2px; }
.footer-social{ display:flex; gap:10px; margin-top:6px; }
.footer-social a{
  width:36px; height:36px; border-radius:100px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
}
.footer-social a:hover{ background:var(--red); border-color:var(--red); }
.footer-social svg{ width:16px; height:16px; color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:rgba(255,255,255,.45); }

/* ---------- WhatsApp floating button ---------- */
.wa-widget{ position:fixed; right:22px; bottom:22px; z-index:90; display:flex; align-items:center; gap:12px; transition:opacity .15s, transform .15s; }
/* Se esconde mientras el menú mobile o el carrito están abiertos — si no,
   quedaba flotando encima de esos paneles, tapando contenido. */
/* Antes esto usaba body:has(...) — :has() es relativamente nuevo y si el
   navegador no lo soporta bien, el botón flotante de WhatsApp se queda
   visible E INTERACTIVO tapando esa esquina de la pantalla, justo donde
   cae el botón "Finalizar compra" del carrito: el toque le llega al
   flotante, no a la página, y no pasa nada visible. Ahora depende de una
   clase que pone JS directamente (ver openCart/closeCart en cart.js y el
   menú mobile en app.js), sin depender de soporte de :has(). */
body.nav-open .wa-widget,
body.cart-open .wa-widget{ opacity:0; transform:scale(.85); pointer-events:none; }
.wa-float{
  position:relative; flex:none;
  width:60px; height:60px; border-radius:100px; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(200,0,40,.45);
  transition:transform .2s;
}
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:30px; height:30px; }
.wa-float .ping{
  position:absolute; inset:0; border-radius:100px; background:var(--red); opacity:.55;
  animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{ 0%{ transform:scale(1); opacity:.5; } 75%,100%{ transform:scale(1.9); opacity:0; } }
/* Globo "¡Consultanos!" — aparece solo a los pocos segundos de navegación
   (ver initWaTooltip en app.js), no al cargar la página. */
.wa-tooltip{
  position:relative;
  background:#fff; color:var(--ink); font-weight:700; font-size:14.5px;
  padding:12px 18px; border-radius:16px; white-space:nowrap;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  opacity:0; transform:translateY(8px) scale(.96); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.wa-tooltip.show{ opacity:1; transform:translateY(0) scale(1); }
.wa-tooltip::after{
  content:""; position:absolute; right:-6px; bottom:14px;
  width:14px; height:14px; background:#fff; transform:rotate(45deg); border-radius:2px;
}
@media (max-width:600px){
  .wa-widget{ right:16px; bottom:16px; gap:8px; }
  .wa-float{ width:54px; height:54px; } .wa-float svg{ width:27px; height:27px; }
  .wa-tooltip{ font-size:13px; padding:9px 14px; }
}

/* ---------- Misc pages (contacto) ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ padding:20px 0; border-bottom:1px solid var(--border); display:flex; gap:16px; align-items:flex-start; }
.contact-card .ic{ width:22px; flex:none; padding-top:2px; color:var(--red); display:flex; align-items:flex-start; justify-content:center; }
.contact-card .ic svg{ width:22px; height:22px; stroke-width:1.5; }
.contact-card h4{ font-size:15px; margin-bottom:4px; }
.contact-card p{ font-size:14px; margin:0; }
.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); height:100%; min-height:340px; }
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:95;
  background:var(--ink); color:#fff; padding:13px 22px; border-radius:100px; font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:all .25s ease; box-shadow:var(--shadow-lg);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast svg{ width:16px; height:16px; color:var(--success); }

.tag-note{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--success); background:#EAF7EF; padding:5px 10px; border-radius:100px; }

/* ---------- Product photo gallery (lightbox) ---------- */
.gallery-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(10,10,10,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease; padding:24px;
}
.gallery-overlay.open{ opacity:1; pointer-events:auto; }
.gallery-box{ position:relative; width:100%; max-width:920px; display:flex; flex-direction:column; align-items:center; }
.gallery-img{
  max-width:100%; max-height:70vh; border-radius:var(--radius); object-fit:contain;
  background:#111; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.gallery-close{
  position:absolute; top:-52px; right:0; width:40px; height:40px; border-radius:100px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.gallery-close:hover{ background:rgba(255,255,255,.18); }
.gallery-close svg{ width:18px; height:18px; }
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:100px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff;
  align-items:center; justify-content:center; display:flex;
}
.gallery-nav:hover{ background:rgba(255,255,255,.22); }
.gallery-nav svg{ width:20px; height:20px; }
.gallery-nav.prev{ left:-8px; }
.gallery-nav.next{ right:-8px; }
@media (min-width:760px){ .gallery-nav.prev{ left:-64px; } .gallery-nav.next{ right:-64px; } }
.gallery-foot{ margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.gallery-name{ color:#fff; font-size:14px; font-weight:600; text-align:center; }
.gallery-dots{ display:flex; gap:8px; }
.gallery-dot{ width:8px; height:8px; border-radius:100px; background:rgba(255,255,255,.3); border:none; padding:0; }
.gallery-dot.active{ background:#fff; }
@media (max-width:600px){
  .gallery-nav{ width:38px; height:38px; }
  .gallery-nav.prev{ left:0; } .gallery-nav.next{ right:0; }
  .gallery-img{ max-height:56vh; }
}