/* ============================================================
   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; }
.header-quienes{ font-size:13.5px; font-weight:600; color:rgba(255,255,255,.75); white-space:nowrap; }
.header-quienes:hover{ color:#fff; }
.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);
}
.nav-toggle{ display:none; }
.nav-toggle svg{ width:20px; height:20px; flex:none; }

@media (max-width:980px){
  .main-nav{ display:none; }
  .header-quienes{ 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; }
}

/* ---------- Diapositivas con imagen (banners con el texto ya incluido) ---------- */
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-overlay{ transition:opacity .6s ease; }
.hero-areas{ transition:opacity .6s ease, visibility .6s; }
.reel-slide.is-image{
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(60% 55% at 100% 100%, rgba(92,10,26,.85), transparent 72%), #141316;
}
.reel-slide.is-image picture{ display:contents; }
/* Escritorio: el banner se muestra completo (sin recortar) y sus bordes se
   difuminan contra el fondo oscuro de la portada. */
.reel-slide.is-image img{
  display:block; max-width:100%; max-height:100%; width:auto; height:auto;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite:intersect;
}
.reel-link{ position:absolute; inset:0; z-index:1; display:block; }
.reel-slide.is-image.active .reel-link{ pointer-events:auto; }
.hero.is-image-slide .hero-overlay{ opacity:0; pointer-events:none; }
.hero.is-image-slide .container{ pointer-events:none; }
.hero.is-image-slide .hero-areas{ pointer-events:auto; }
@media (min-width:821px){
  /* Pegado arriba y con un alto máximo: así el banner queda entero ARRIBA de las 3
     tarjetas (Producción/Alquiler/Venta), que se quedan en su lugar de siempre. */
  .reel-slide.is-image{ align-items:flex-start; }
  .reel-slide.is-image img{ max-height:565px; }
  /* Mantiene el alto del bloque de texto de las otras diapositivas para que las
     tarjetas no salten de lugar al pasar del banner a las demás. */
  .hero.is-image-slide #heroTextSlot{ min-height:311px; }
}
@media (max-width:820px){
  /* Celular/tablet: usa la versión cuadrada armada para pantallas angostas. */
  .reel-slide.is-image img{ width:100%; height:100%; object-fit:contain; -webkit-mask-image:none; mask-image:none; }
}
@media (max-width:520px){ .reel-slide.is-image img{ object-fit:cover; } }
.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; color:#fff;
  background:linear-gradient(160deg, var(--red-dark) 0%, var(--black) 70%);
}
.area-card h3{ font-size:21px; color:#fff; }
.area-card p{ font-size:14.5px; margin:0; color:rgba(255,255,255,.75); }
.area-card ul{ display:flex; flex-direction:column; gap:7px; margin:4px 0 0; }
.area-card li{ font-size:13.5px; color:rgba(255,255,255,.85); 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); }
.search-mini input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-light); }
.catalog-search{ margin-bottom:16px; }
.catalog-search input{ width:100%; max-width:340px; }
.catalog-empty{ grid-column:1/-1; text-align:center; padding:48px 16px; color:var(--ink-mute); font-size:14.5px; }

/* ---------- 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); }
.out-of-stock-tag{ left:auto; right:10px; background:var(--red); color:#fff; border-color:var(--red); }
.product-card.out-of-stock .product-media img{ filter:grayscale(60%); opacity:.6; }
.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; }
}

/* ---------- Fila de destacados (Más alquilados / Más vendidos) ---------- */
.featured-row-wrap{ position:relative; }
.featured-row{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none;
}
.featured-row::-webkit-scrollbar{ display:none; }
.featured-row .product-card{ flex:0 0 200px; scroll-snap-align:start; }
.featured-row .product-media{ aspect-ratio:4/3; }
.featured-row .product-media img{ object-fit:contain; padding:8px; }
@media (max-width:560px){
  .featured-row{ gap:12px; }
  .featured-row .product-card{ flex:0 0 46%; }
}
.featured-row-nav{
  position:absolute; top:calc(50% - 20px); transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center;
  color:var(--ink); z-index:2; cursor:pointer;
}
.featured-row-nav svg{ width:16px; height:16px; }
.featured-row-nav.prev{ left:-16px; }
.featured-row-nav.next{ right:-16px; }
@media (max-width:900px){ .featured-row-nav{ display:none; } }

/* ---------- 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-currency{ font-size:15px; font-weight:700; color:var(--ink-mute); letter-spacing:.02em; }
.pd-price-unit{ display:block; font-size:13px; font-weight:600; color:var(--ink-mute); margin-top:4px; }
.pd-price-installments{ display:block; font-size:14px; font-weight:700; color:var(--red); 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; }

/* ---------- Descripción y opiniones del producto ---------- */
.pd-section-title{ font-size:19px; margin:0 0 14px; }
.pd-description{ max-width:760px; margin-top:56px; padding-top:36px; border-top:1px solid var(--border); }
.pd-description-text{ font-size:15px; line-height:1.65; color:var(--ink-dim); white-space:pre-line; margin:0; }

.pd-reviews{ max-width:760px; margin-top:44px; padding-top:36px; border-top:1px solid var(--border); }
.pd-related{ margin-top:44px; padding-top:36px; border-top:1px solid var(--border); }
.reviews-summary{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-mute); margin-bottom:18px; }
.reviews-summary:empty{ display:none; }
.review-stars{ color:#E8A400; font-size:15px; letter-spacing:1px; }
.reviews-list{ display:flex; flex-direction:column; gap:18px; margin-bottom:28px; }
.reviews-empty{ color:var(--ink-mute); font-size:13.5px; margin-bottom:28px; }
.review-item{ padding-bottom:18px; border-bottom:1px solid var(--border); }
.review-item:last-child{ border-bottom:none; padding-bottom:0; }
.review-item-head{ display:flex; align-items:center; gap:10px; }
.review-name{ font-weight:700; font-size:14px; }
.review-meta{ font-size:12px; color:var(--ink-mute); margin-top:2px; }
.review-comment{ font-size:14px; line-height:1.55; margin:8px 0 0; color:var(--ink-dim); }

.review-form-wrap{ background:var(--bg-soft); border-radius:var(--radius); padding:24px; }
.review-form-wrap h3{ font-size:15.5px; margin:0 0 16px; }
.review-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.review-field{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-mute); margin-bottom:14px; }
.review-field input[type="text"], .review-field textarea{
  display:block; width:100%; margin-top:6px; padding:10px 12px; border:1px solid var(--border);
  border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--ink); resize:vertical;
}
.star-picker{ display:flex; gap:4px; margin-top:6px; }
.star-picker button{
  background:none; border:none; font-size:24px; line-height:1; color:var(--border); padding:0; cursor:pointer;
}
.star-picker button.filled{ color:#E8A400; }
.review-form-msg{ font-size:13px; margin:12px 0 0; min-height:1em; }
.review-form-msg.success{ color:var(--success); font-weight:600; }
.review-form-msg.error{ color:var(--red); font-weight:600; }

/* ---------- 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); overflow:hidden; }
.cart-item .thumb svg{ width:26px; height:26px; }
.cart-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.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-subtotal-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-mute); 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.locked{ cursor:default; 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; }
/* Toggle Envío/Retiro tipo segmented control (iOS), con el segmento activo
   marcado en blanco sobre el riel gris — igual mecánica visual que la
   referencia que pidió el dueño del negocio. */
.ship-toggle{ display:flex; gap:4px; background:var(--bg-soft); border-radius:14px; padding:4px; margin-bottom:12px; }
.ship-toggle-btn{ position:relative; flex:1; cursor:pointer; }
.ship-toggle-btn input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ship-toggle-btn span{ display:flex; align-items:center; justify-content:center; gap:7px; padding:12px; border-radius:10px; font-size:14px; font-weight:700; color:var(--ink-mute); }
.ship-toggle-btn span svg{ width:16px; height:16px; }
.ship-toggle-btn input:checked + span{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.ship-pickup-card{ padding:14px 16px; border:1px solid var(--border); border-radius:12px; margin-bottom:12px; }
.ship-pickup-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; }
.ship-pickup-free{ font-size:11px; font-weight:800; color:var(--success); text-transform:uppercase; letter-spacing:.03em; flex:none; }
.ship-pickup-addr-line{ font-size:12.5px; color:var(--ink-mute); margin-top:4px; }
.checkout-fields{ display:flex; flex-direction:column; gap:10px; }
.checkout-field-row{ display:flex; gap:10px; }
.checkout-field-row .checkout-field{ flex:1; min-width:0; }

/* Campo con etiqueta flotante: el título vive adentro del casillero como
   un placeholder, y sube arriba (chico) en cuanto el campo tiene foco o
   valor — más compacto que una etiqueta separada arriba de cada input. */
.checkout-field{ position:relative; }
.checkout-field input, .checkout-field select{
  width:100%; padding:18px 14px 7px; border:1px solid var(--border); border-radius:var(--radius-sm,8px);
  font-size:14px; font-family:var(--font); color:var(--ink); background:#fff;
}
.checkout-field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23767676" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
}
.checkout-field input:focus, .checkout-field select:focus{ outline:none; border-color:var(--red); }
.checkout-field label{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  font-size:14px; color:var(--ink-mute); pointer-events:none;
  transition:top .12s ease, font-size .12s ease, font-weight .12s ease;
}
.checkout-field input:focus + label,
.checkout-field input:not(:placeholder-shown) + label,
.checkout-field select:focus + label,
.checkout-field select:valid + label{
  top:9px; transform:none; font-size:10.5px; font-weight:700; letter-spacing:.02em;
}
.checkout-field select:invalid{ color:transparent; }
.checkout-field select:focus, .checkout-field select:valid{ color:var(--ink); }
.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); }
.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; grid-row: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 ---------- */
/* Las tarjetas son oscuras (degradé rojo/negro) — cualquier desvanecido
   (mask-image o un degradé sólido superpuesto) deja una mezcla de color
   visible contra el fondo blanco de la sección. Corte limpio, sin fundido. */
.testi-viewport{
  overflow:hidden;
}
.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-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; color:#fff;
  background:linear-gradient(160deg, var(--red-dark) 0%, var(--black) 70%);
}
.testi-stars{ color:#F5A623; font-size:14px; margin-bottom:10px; letter-spacing:2px; }
.testi-card p{ font-size:13.5px; color:rgba(255,255,255,.85); 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:rgba(255,255,255,.15); 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; color:#fff; }
.testi-google-link{
  display:block; text-align:center; margin-top:22px; font-size:12.5px; font-weight:600;
  color:var(--ink-mute); text-decoration:underline; text-underline-offset:2px;
}
.testi-google-link:hover{ color:var(--ink); }
@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; }
a.contact-card{ text-decoration:none; color:inherit; transition:opacity .15s; }
a.contact-card:hover{ opacity:.7; }
.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); flex-shrink:0; }
.toast.toast-error{ background:var(--red-dark); }
.toast.toast-error svg{ color:#fff; }
.toast.toast-error span{ max-width:280px; }

.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; }
}

/* ---------- Video de producto ---------- */
.pd-main-img.pd-video-on{ cursor:default; background:#000; }
.pd-main-img video{ width:100%; height:100%; object-fit:contain; background:#000; }
.pd-thumb-video{ position:relative; }
.pd-thumb-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); color:#fff; }
.pd-thumb-play svg{ width:22px; height:22px; fill:currentColor; stroke:none; }
.pd-video-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:9px 16px 9px 12px; border-radius:100px; border:1.5px solid var(--red); background:#fff; color:var(--red); font-family:var(--font); font-size:13.5px; font-weight:700; cursor:pointer; transition:background .15s,color .15s; }
.pd-video-btn svg{ width:18px; height:18px; fill:currentColor; stroke:none; }
.pd-video-btn:hover{ background:var(--red); color:#fff; }
.product-video-badge{ position:absolute; left:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 7px; border-radius:100px; background:rgba(20,20,22,.82); color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.product-video-badge svg{ width:12px; height:12px; fill:currentColor; stroke:none; }
.pd-main-img.pd-vertical{ aspect-ratio:9/16; max-height:80vh; margin:0 auto; width:auto; max-width:100%; }
@media (min-width:861px){ .pd-main-img.pd-vertical{ aspect-ratio:9/16; height:78vh; width:auto; max-width:100%; } }
.product-video-badge{ width:26px; height:26px; padding:0; justify-content:center; gap:0; }
.product-video-badge svg{ margin-left:1px; }

/* ---------- Banner superior de Venta (novedades) ---------- */
.vb{ position:relative; background:#141416; overflow:hidden; }
.vb-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.vb-track::-webkit-scrollbar{ display:none; }
.vb-slide{ flex:0 0 100%; scroll-snap-align:start; min-height:460px; display:flex; align-items:center; position:relative; color:#fff; }
.vb-dark{ background:linear-gradient(120deg,#141416 0%,#141416 45%,#1a0a0e 70%,#5a0a1c 130%); }
.vb-orig.page-hero{ display:flex; align-items:center; }
.vb-orig .container{ width:100%; }
.vb-grid{ position:relative; width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; padding-top:56px; padding-bottom:64px; }
.vb-pill{ display:inline-flex; align-items:center; gap:10px; padding:4px 16px 4px 4px; border-radius:100px; background:#fff; color:var(--ink); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.vb-pill b{ background:var(--red); color:#fff; padding:6px 14px; border-radius:100px; font-weight:800; }
.vb-txt h2{ font-size:clamp(30px,4.4vw,54px); line-height:1.04; text-transform:uppercase; font-weight:800; letter-spacing:-.01em; margin:20px 0 14px; color:#fff; }
.vb-txt h2 em{ font-style:normal; color:var(--red); }
.vb-txt p{ color:rgba(255,255,255,.72); font-size:16.5px; max-width:480px; margin:0; }
.vb-actions{ display:flex; align-items:center; gap:16px; margin-top:26px; flex-wrap:wrap; }
.vb-cuotas{ display:inline-flex; align-items:center; gap:14px; padding:10px 22px 10px 18px; border-radius:12px; background:var(--red); color:#fff; box-shadow:0 12px 30px rgba(200,0,40,.35); }
.vb-cuotas strong{ font-size:34px; font-weight:800; line-height:1; padding-right:14px; border-right:1px solid rgba(255,255,255,.35); }
.vb-cuotas span{ display:flex; flex-direction:column; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; line-height:1.25; }
.vb-cuotas b{ font-size:17px; letter-spacing:.06em; }
.vb-art{ position:relative; height:360px; }
.vb-card{ position:absolute; background:#fff; border-radius:20px; box-shadow:0 24px 50px -18px rgba(0,0,0,.6); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:14px 14px 18px; text-align:center; }
.vb-card img{ position:absolute; left:8%; top:6%; width:84%; height:64%; object-fit:contain; }
.vb-card b{ position:relative; font-size:clamp(13px,1.6vw,20px); font-weight:800; text-transform:uppercase; color:var(--ink); line-height:1.1; }
.vb-card small{ position:relative; font-size:clamp(9px,1vw,11.5px); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-top:4px; }
.vb-c-main{ right:2%; top:0; width:56%; height:100%; transform:rotate(2deg); }
.vb-c-a{ left:0; top:6%; width:34%; height:44%; transform:rotate(-5deg); z-index:2; }
.vb-c-b{ left:6%; top:54%; width:34%; height:44%; transform:rotate(3deg); z-index:2; }
.vb-art-neb .vb-c-main{ width:52%; }
.vb-art-neb .vb-c-a{ left:2%; top:26%; width:38%; height:52%; }
.vb-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(20,20,22,.55); backdrop-filter:blur(6px); color:#fff; font-size:18px; cursor:pointer; transition:background .2s; }
.vb-arrow:hover{ background:var(--red); border-color:var(--red); }
.vb-arrow.prev{ left:14px; } .vb-arrow.next{ right:14px; }
.vb-dots{ position:absolute; left:0; right:0; bottom:18px; z-index:5; display:flex; gap:8px; justify-content:center; }
.vb-dots button{ width:8px; height:8px; padding:0; border:0; border-radius:100px; background:rgba(255,255,255,.35); cursor:pointer; transition:width .3s, background .3s; }
.vb-dots button.on{ width:28px; background:var(--red); }
@media (max-width:860px){
  .vb-slide{ min-height:0; }
  .vb-grid{ grid-template-columns:1fr; gap:22px; padding-top:32px; padding-bottom:64px; }
  .vb-art{ height:250px; order:2; }
  .vb-txt p{ font-size:14.5px; }
  .vb-actions{ margin-top:18px; gap:12px; }
  .vb-arrow{ display:none; }
  .vb-orig .container{ padding-bottom:64px; }
}
.vb-c-a img, .vb-c-b img{ top:4%; height:52%; }
.vb-c-a b, .vb-c-b b{ font-size:12px; }

/* banner de venta más bajo */
.vb-slide{ min-height:360px; }
.vb-grid{ padding-top:36px; padding-bottom:52px; gap:28px; }
.vb-art{ height:270px; }
.vb-txt h2{ margin:16px 0 10px; }
.vb-actions{ margin-top:20px; }
@media (max-width:860px){
  .vb-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:10px; padding-top:22px; padding-bottom:44px; align-items:center; }
  .vb-txt p{ display:none; }
  .vb-txt h2{ font-size:22px; margin:12px 0 12px; }
  .vb-pill{ font-size:9.5px; padding:3px 10px 3px 3px; gap:6px; }
  .vb-pill b{ padding:5px 9px; }
  .vb-actions{ flex-direction:column; align-items:flex-start; gap:8px; margin-top:0; }
  .vb-cuotas{ padding:6px 12px 6px 10px; gap:8px; border-radius:10px; }
  .vb-cuotas strong{ font-size:22px; padding-right:8px; }
  .vb-cuotas b{ font-size:12px; }
  .vb-cuotas span{ font-size:8.5px; }
  .vb-actions .btn{ padding:9px 16px; font-size:13px; }
  .vb-art{ order:0; height:190px; }
  .vb-card{ padding:8px 8px 10px; border-radius:14px; }
  .vb-card b{ font-size:11px; }
  .vb-card small{ font-size:8px; }
  .vb-c-a b, .vb-c-b b{ font-size:9px; }
  .vb-orig .container{ padding-top:22px; padding-bottom:44px; }
  .vb-orig .breadcrumb{ display:none; }
  .vb-orig h1{ font-size:24px; }
  .vb-orig p.lead{ font-size:14px; margin:8px 0 14px; }
  .vb-dots{ bottom:12px; }
}
@media (max-width:860px){
  .vb-slide{ min-height:0; }
  .vb-art{ height:200px; }
  .vb-c-a small, .vb-c-b small{ display:none; }
  .vb-c-a b, .vb-c-b b{ font-size:8.5px; white-space:nowrap; }
  .vb-c-a img, .vb-c-b img{ top:6%; height:62%; }
}

/* ---------- Banner de bienvenida (cupón con cuenta regresiva real) ---------- */
.welcome-pop{
  position:fixed; z-index:180; left:16px; bottom:16px; width:360px; max-width:calc(100vw - 32px);
  color:#fff; border-radius:20px; padding:22px 22px 16px; overflow:hidden;
  background:linear-gradient(135deg,#C80028 0%,#8f001c 70%,#5a0a1c 130%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 26px 60px rgba(120,0,24,.55);
  transform:translateY(30px) scale(.96); opacity:0; transition:transform .4s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;
}
.welcome-pop::before{ content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%); pointer-events:none; }
.welcome-pop.on{ transform:none; opacity:1; }
.welcome-x{ position:absolute; top:8px; right:12px; z-index:2; background:none; border:0; color:rgba(255,255,255,.75); font-size:26px; line-height:1; cursor:pointer; padding:4px; }
.welcome-x:hover{ color:#fff; }
.welcome-tag{ position:relative; display:inline-block; padding:5px 12px; border-radius:100px; background:#fff; color:var(--red); font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.welcome-big{ position:relative; display:flex; align-items:baseline; gap:10px; margin:12px 0 2px; }
.welcome-big strong{ font-size:64px; line-height:.9; font-weight:800; letter-spacing:-.03em; }
.welcome-big span{ font-size:20px; font-weight:800; text-transform:uppercase; line-height:1.05; }
.welcome-sub{ position:relative; margin:0; font-size:14px; color:rgba(255,255,255,.9); }
.welcome-sub b{ color:#fff; }
.welcome-timer{ position:relative; display:flex; align-items:center; gap:10px; margin-top:14px; padding:10px 14px; border-radius:12px; background:rgba(0,0,0,.28); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.welcome-timer b{ font-size:26px; letter-spacing:.02em; font-variant-numeric:tabular-nums; margin-left:auto; }
.welcome-actions{ position:relative; display:flex; align-items:center; gap:14px; margin-top:14px; }
.welcome-actions .btn{ flex:1; justify-content:center; padding:13px 20px; font-size:14px; background:#fff; color:var(--red); border-color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.welcome-actions .btn:hover{ background:#141416; color:#fff; border-color:#141416; }
.welcome-later{ background:none; border:0; color:rgba(255,255,255,.8); font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; text-decoration:underline; }
.welcome-pop small{ position:relative; display:block; margin-top:12px; font-size:11px; color:rgba(255,255,255,.75); }
.welcome-pill{
  position:fixed; z-index:70; left:16px; bottom:16px; display:none; align-items:center; gap:8px;
  padding:10px 16px; border-radius:100px; border:0; cursor:pointer; color:#fff; font-family:var(--font);
  font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:linear-gradient(135deg,#C80028,#8f001c); box-shadow:0 12px 30px rgba(200,0,40,.5);
  animation:welcomePulse 1.8s ease-in-out infinite;
}
.welcome-pill.on{ display:inline-flex; }
.welcome-pill b{ font-variant-numeric:tabular-nums; }
@keyframes welcomePulse{ 0%,100%{ box-shadow:0 12px 30px rgba(200,0,40,.5), 0 0 0 0 rgba(200,0,40,.55); } 50%{ box-shadow:0 12px 30px rgba(200,0,40,.5), 0 0 0 10px rgba(200,0,40,0); } }
@media (prefers-reduced-motion:reduce){ .welcome-pill{ animation:none; } }
@media (max-width:640px){
  .welcome-pop{ left:10px; right:10px; bottom:10px; width:auto; max-width:none; padding:18px 18px 14px; border-radius:18px; }
  .welcome-big strong{ font-size:54px; }
  .welcome-big span{ font-size:17px; }
  .welcome-sub{ font-size:13px; }
  .welcome-timer{ margin-top:12px; padding:8px 12px; }
  .welcome-timer b{ font-size:22px; }
  .welcome-actions{ margin-top:12px; }
  .welcome-pill{ left:12px; bottom:12px; }
}
.welcome-big{ align-items:center; }
.welcome-big strong{ line-height:1; }
.welcome-big span{ line-height:1.15; }

/* Botón de pago seguro */
.btn-lock{ display:inline-flex; margin-right:2px; }
.btn-lock svg{ width:17px; height:17px; }
.checkout-secure{ text-align:center; margin-top:8px; font-size:12px; color:var(--ink-mute); }

/* WhatsApp del carrito: link discreto para no competir con el botón de compra */
.cart-wa-link{ display:block; text-align:center; margin-top:12px; font-size:13px; font-weight:600; color:var(--ink-mute); text-decoration:underline; text-underline-offset:3px; }
.cart-wa-link:hover{ color:var(--ink); }

/* Total destacado en carrito y checkout: el total es lo grande (lo que la
   persona quiere ver primero), las cuotas son el dato chico de abajo. */
.cart-cuota{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; padding:14px 16px; border-radius:12px; background:var(--bg-soft); border:1px solid var(--border); }
.cuota-total-lead{ font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }
.cuota-total-amt{ font-size:28px; line-height:1.2; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.cuota-total-currency{ font-size:13px; font-weight:700; color:var(--ink-mute); letter-spacing:.02em; }
.cuota-sub{ font-size:12.5px; font-weight:500; color:var(--ink-mute); }
.cuota-cash{ font-size:12.5px; font-weight:700; color:var(--success); margin-top:4px; }
.cart-checkout-hint{ margin-top:2px; }

/* Venta cruzada en el pie del carrito — tarjetitas chicas que se deslizan
   con el dedo, igual mecánica que el carrusel de reseñas de más abajo. */
.cart-upsell{ margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.cart-upsell-head{ font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.cart-upsell-track{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; margin:0 -2px; padding:2px; }
.cart-upsell-track::-webkit-scrollbar{ display:none; }
.cart-upsell-card{ position:relative; flex:0 0 104px; scroll-snap-align:start; border:1px solid var(--border); border-radius:12px; padding:8px; }
.cart-upsell-thumb{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1; border-radius:8px; background:var(--bg-soft); color:var(--ink-mute); overflow:hidden; margin-bottom:6px; }
.cart-upsell-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-upsell-thumb svg{ width:24px; height:24px; }
.cart-upsell-name{ font-size:11.5px; font-weight:600; line-height:1.3; margin-bottom:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-upsell-price{ font-size:12px; font-weight:800; }
.cart-upsell-add{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; border:none;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; padding:0;
}
.cart-upsell-add svg{ width:13px; height:13px; }
.cart-upsell-add:hover{ background:var(--red); }

/* Reseñas reales en el pie del carrito — tarjetitas que se deslizan con el
   dedo (scroll-snap, sin flechas: se nota que hay más porque la siguiente
   tarjeta asoma al costado), para poder sumar más opiniones sin alargar
   el carrito. */
.cart-reviews{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.cart-reviews-head{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.cart-reviews-head svg{ width:15px; height:15px; padding:2px; border-radius:50%; background:var(--success); color:#fff; flex:none; }
.cart-reviews-count{ display:block; font-size:12px; font-weight:600; color:var(--ink-mute); margin-bottom:12px; text-decoration:none; }
.cart-reviews-count:hover{ text-decoration:underline; }
.cart-reviews-track{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; margin:0 -2px; padding:2px; }
.cart-reviews-track::-webkit-scrollbar{ display:none; }
.cart-review{ flex:0 0 82%; scroll-snap-align:start; border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.cart-review-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.cart-review-stars{ color:#f5a623; font-size:12px; letter-spacing:1px; flex:none; }
.cart-review p{ font-size:12.5px; color:var(--ink-dim); line-height:1.4; margin:0; }
.cart-review-name{ font-size:11.5px; font-weight:700; color:var(--ink); }

/* ---------- Sello de garantía oficial + cambios ---------- */
.warranty-badge{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  margin-top:10px; padding:12px 16px; border:1px solid var(--border); border-radius:100px;
  text-align:center;
}
.warranty-badge-head{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink-mute); }
.warranty-badge-head svg{ width:15px; height:15px; color:var(--success); flex:none; }
.warranty-badge-sub{ font-size:11.5px; font-weight:600; color:var(--ink-mute); opacity:.8; }

/* ---------- Sello de pago seguro (Visa/Mastercard/Maestro/Mercado Pago) ---------- */
.trust-badge{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-top:14px; padding:12px 16px; border:1px solid var(--border); border-radius:100px;
}
.trust-badge-head{
  display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--ink-mute); text-transform:uppercase; letter-spacing:.03em;
}
.trust-badge-head svg{ width:13px; height:13px; }
.trust-marks{ display:flex; align-items:center; gap:16px; }
.trust-marks .mark{ height:20px; width:auto; display:block; }
@media (max-width:480px){
  .trust-marks{ gap:12px; }
  .trust-marks .mark{ height:16px; }
}