/* ============================================================
   CELLBOJ · Celulares y más — Sistema de diseño
   Alineado al Brand Book v2 (Azul Boj #195DA5 · Negro #1C1C1D ·
   Sora/Inter · sombras azuladas · 60/30/10). Estándar mundial.
   ============================================================ */

/* ---------- FUENTES SELF-HOSTED (subset latín, variables) ----------
   Sin llamada a Google Fonts en runtime: más rápido (LCP) y privado.
   Un archivo por familia cubre todos los pesos (fuente variable). */
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- TOKENS ---------- */
:root{
  /* Marca */
  --azul:        #195DA5;   /* Azul Boj — el azul del logo, plano */
  --azul-700:    #124a86;   /* hover / presionado */
  --azul-100:    #e9f1fb;   /* tinte claro de fondo */
  --azul-050:    #f3f8fe;
  --negro:       #1C1C1D;   /* Negro CELLBOJ */
  --wa:          #25D366;   /* Verde WhatsApp — solo botones WA */
  --wa-700:      #1da851;

  /* Neutros */
  --tinta:       #0D1530;   /* texto principal */
  --gris:        #4A5578;   /* texto secundario */
  --gris-2:      #6b7595;
  --niebla:      #F6F8FC;   /* fondo claro */
  --linea:       #e4e9f2;   /* bordes */
  --surface:     #ffffff;   /* tarjetas */
  --bg:          #ffffff;
  --bg-alt:      #f6f8fc;

  /* Funcionales */
  --exito:       #1CB457;
  --alerta:      #FFB020;
  --error:       #E5484D;

  /* Radios */
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --pill: 999px;

  /* Sombras azuladas */
  --sh-sm: 0 1px 2px rgba(16,32,80,.06), 0 2px 6px rgba(16,32,80,.06);
  --sh-md: 0 6px 18px rgba(16,32,80,.10), 0 2px 6px rgba(16,32,80,.06);
  --sh-lg: 0 24px 60px rgba(16,32,80,.16), 0 8px 24px rgba(16,32,80,.08);
  --sh-blue: 0 14px 36px rgba(25,93,165,.30);

  /* Tipografía */
  --f-display: 'Sora', 'Segoe UI', system-ui, Arial, sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, Arial, sans-serif;

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(64px, 9vw, 116px);
}

[data-theme="dark"]{
  --azul:      #3B86DB;   /* azul más luminoso para contraste en oscuro */
  --azul-700:  #2f74c4;
  --azul-100:  #16233c;
  --azul-050:  #131d31;
  --tinta:     #eaf0fb;
  --gris:      #a7b2cf;
  --gris-2:    #8b97b8;
  --niebla:    #0f1526;
  --linea:     #26304a;
  --surface:   #161d33;
  --bg:        #0b1020;
  --bg-alt:    #0f1526;
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 8px 24px rgba(0,0,0,.45);
  --sh-lg: 0 28px 70px rgba(0,0,0,.55);
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px }
body{
  font-family:var(--f-body);
  color:var(--tinta);
  background:var(--bg);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .35s ease, color .35s ease;
}
img{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer }
::selection{ background:var(--azul); color:#fff }

/* ---------- TIPOGRAFÍA ---------- */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--tinta) }
h1{ font-size:clamp(2.35rem, 1.4rem + 4vw, 3.8rem); font-weight:800 }
h2{ font-size:clamp(1.9rem, 1.3rem + 2.4vw, 2.85rem) }
h3{ font-size:clamp(1.15rem, 1rem + .6vw, 1.4rem) }
p{ color:var(--gris) }
strong{ color:var(--tinta); font-weight:700 }

.eyebrow{
  display:inline-block; font-family:var(--f-display); font-weight:700;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul); margin-bottom:14px;
}
.eyebrow--light{ color:#bcd6f2 }

/* ---------- LAYOUT ---------- */
.container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter) }
.container--narrow{ max-width:820px }
.section{ padding-block:var(--section-y) }
.section--alt{ background:var(--bg-alt) }
.section__head{ max-width:680px; margin:0 auto clamp(40px,6vw,64px); text-align:center }
.section__head p{ font-size:1.075rem; margin-top:14px }

/* ---------- BOTONES ---------- */
.btn{
  --pad-y:.85em; --pad-x:1.35em;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-display); font-weight:600; font-size:.98rem; line-height:1;
  padding:var(--pad-y) var(--pad-x); border-radius:var(--pill); border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap; cursor:pointer; user-select:none;
}
.btn:active{ transform:translateY(1px) scale(.99) }
.btn--lg{ --pad-y:1.02em; --pad-x:1.7em; font-size:1.05rem }
.btn--xl{ --pad-y:1.15em; --pad-x:2.1em; font-size:1.14rem }
.btn--block{ width:100%; margin-top:6px }

.btn--primary{ background:var(--azul); color:#fff; box-shadow:var(--sh-blue) }
.btn--primary:hover{ background:var(--azul-700); transform:translateY(-2px); box-shadow:0 20px 44px rgba(25,93,165,.38) }

.btn--wa{ background:var(--wa); color:#0a2e17; box-shadow:0 12px 30px rgba(37,211,102,.32) }
.btn--wa:hover{ background:var(--wa-700); transform:translateY(-2px); box-shadow:0 18px 40px rgba(37,211,102,.42) }

.btn--ghost{ background:transparent; color:var(--tinta); border-color:var(--linea) }
.btn--ghost:hover{ border-color:var(--azul); color:var(--azul); transform:translateY(-2px) }

.btn--dark{ background:var(--negro); color:#fff }
.btn--dark:hover{ transform:translateY(-2px); box-shadow:var(--sh-lg) }

.btn-icon{
  display:grid; place-items:center; width:42px; height:42px; border-radius:var(--pill);
  border:1.5px solid var(--linea); background:transparent; color:var(--tinta);
  transition:border-color .2s, color .2s, background .2s;
}
.btn-icon:hover{ border-color:var(--azul); color:var(--azul) }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--linea);
  box-shadow:var(--sh-sm);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0 }
.brand__mark{ width:40px; height:40px; object-fit:contain }
.brand__mark--neg{ display:none }
[data-theme="dark"] .brand__mark--pos{ display:none }
[data-theme="dark"] .brand__mark--neg{ display:block }
.brand__name{ font-family:var(--f-display); font-weight:800; font-size:1.16rem; letter-spacing:-.03em; color:var(--tinta) }
.brand__name i{ color:var(--azul); font-style:normal }

.nav__links{ display:flex; align-items:center; gap:clamp(16px,2vw,28px); margin-inline:auto }
.nav__links a{
  font-size:.94rem; font-weight:500; color:var(--gris); position:relative; padding:6px 0;
  transition:color .2s; white-space:nowrap;   /* 7 enlaces: que ninguno parta en dos renglones */
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--azul); border-radius:2px; transition:width .25s ease;
}
.nav__links a:hover{ color:var(--tinta) }
.nav__links a:hover::after{ width:100% }

.nav__actions{ display:flex; align-items:center; gap:12px; flex-shrink:0 }
.nav__wa{ padding:.62em 1.1em; font-size:.9rem }
.nav__burger{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; border:0; background:transparent; align-items:center; justify-content:center }
.nav__burger span{ width:22px; height:2px; background:var(--tinta); border-radius:2px; transition:transform .3s, opacity .2s }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ---------- HERO ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(48px,7vw,92px) clamp(40px,6vw,72px) }
.hero__bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 8%, color-mix(in srgb, var(--azul) 14%, transparent), transparent 70%),
    radial-gradient(50% 50% at 8% 92%, color-mix(in srgb, var(--azul) 8%, transparent), transparent 70%);
}
.hero__bg::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--azul) 22%, transparent) 1px, transparent 0);
  background-size:26px 26px; opacity:.28; -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 65%); mask-image:linear-gradient(to bottom, #000 0%, transparent 65%);
}
.hero__inner{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,72px); align-items:center }
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:.5em 1em; border-radius:var(--pill);
  background:var(--azul-100); color:var(--azul); font-weight:600; font-size:.86rem;
  border:1px solid color-mix(in srgb, var(--azul) 22%, transparent); margin-bottom:22px;
}
.pill b{ color:var(--azul); font-weight:800 }
.hero__title{ margin-bottom:20px }
.hero__title .accent{ color:var(--azul) }
.hero__sub{ font-size:clamp(1.05rem,1rem + .4vw,1.22rem); max-width:33ch; margin-bottom:30px; color:var(--gris) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px }
.hero__trust{ display:grid; grid-template-columns:repeat(4,auto); gap:clamp(18px,3vw,34px); justify-content:start }
.hero__trust > div{ display:flex; flex-direction:column; line-height:1.25 }
.hero__trust strong{ font-family:var(--f-display); font-size:1.02rem; color:var(--tinta) }
.hero__trust span{ font-size:.82rem; color:var(--gris-2) }

/* Tarjeta de dispositivo "Certificado" */
.hero__visual{ display:flex; justify-content:center; perspective:1400px }
.device{
  width:min(340px,80vw); background:var(--surface); border:1px solid var(--linea);
  border-radius:32px; padding:20px; box-shadow:var(--sh-lg);
  transform:rotateY(-9deg) rotateX(4deg); transition:transform .5s cubic-bezier(.2,.7,.2,1);
  position:relative;
}
.hero__visual:hover .device{ transform:rotateY(-3deg) rotateX(1deg) }
.device__notch{ width:52px; height:6px; background:var(--linea); border-radius:6px; margin:2px auto 16px }
.device__brand{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.device__logo{ height:30px; width:auto }
.device__logo--neg{ display:none }
[data-theme="dark"] .device__logo--pos{ display:none }
[data-theme="dark"] .device__logo--neg{ display:inline }
.grade-badge{
  font-family:var(--f-display); font-weight:700; font-size:.78rem; letter-spacing:.02em;
  color:var(--azul); background:var(--azul-100); padding:.34em .8em; border-radius:var(--pill);
  border:1px solid color-mix(in srgb, var(--azul) 25%, transparent);
}
.device__row{ display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px dashed var(--linea); font-size:.94rem }
.device__row:last-of-type{ border-bottom:0 }
.device__row span{ color:var(--gris) }
.device__row b{ font-family:var(--f-body); font-weight:700; color:var(--tinta); display:flex; align-items:center; gap:6px }
.device__row b svg{ color:var(--exito) }
.device__seal{
  margin-top:16px; text-align:center; font-family:var(--f-display); font-weight:700; font-size:.9rem;
  color:#fff; background:var(--negro); padding:.85em; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.device__seal svg{ color:var(--azul) }
.device__float{
  position:absolute; display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--linea); box-shadow:var(--sh-md); border-radius:var(--pill);
  padding:.5em .9em; font-size:.82rem; font-weight:600; color:var(--tinta);
}
.device__float svg{ color:var(--exito) }
.device__float--1{ top:-18px; left:-22px; animation:floaty 5s ease-in-out infinite }
.device__float--2{ bottom:12%; right:-38px; animation:floaty 5s ease-in-out infinite .8s }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* ---------- BARRA DE CONFIANZA (estadísticas) ---------- */
.stats{ border-block:1px solid var(--linea); background:var(--bg) }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; text-align:center }
.stats__item{ padding:clamp(26px,4vw,40px) 14px }
.stats__num{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem); color:var(--azul); line-height:1 }
.stats__lbl{ font-size:.9rem; color:var(--gris); margin-top:8px }

/* ---------- CANALES ---------- */
.channels{ padding-block:clamp(40px,6vw,64px) }
.channels__label{ text-align:center; color:var(--gris); font-size:.98rem; margin-bottom:22px }
.channels__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.chan{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:18px 20px; border:1px solid var(--linea); border-radius:var(--r-md);
  background:var(--surface); font-family:var(--f-display); font-weight:600; color:var(--tinta);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.chan svg{ color:var(--azul); margin-bottom:6px }
.chan span{ font-family:var(--f-body); font-weight:500; font-size:.82rem; color:var(--gris-2) }
.chan:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:color-mix(in srgb, var(--azul) 40%, var(--linea)) }

/* ---------- CARDS (catálogo) ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,24px) }
.cards--3{ grid-template-columns:repeat(3,1fr) }
.card{
  background:var(--surface); border:1px solid var(--linea); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,32px); transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
  position:relative; overflow:hidden;
}
.card::after{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--azul); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:color-mix(in srgb, var(--azul) 30%, var(--linea)) }
.card:hover::after{ transform:scaleX(1) }
.card__icon{
  width:54px; height:54px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--azul-100); color:var(--azul); margin-bottom:18px;
}
.card__icon svg{ width:26px; height:26px }
.card h3{ margin-bottom:8px }
.card p{ font-size:.96rem; margin-bottom:16px }
.card__cta{ font-family:var(--f-display); font-weight:600; color:var(--azul); font-size:.94rem; display:inline-flex; align-items:center; gap:5px; transition:gap .2s }
.card__cta:hover{ gap:10px }
.card__tag{ position:absolute; top:20px; right:20px; font-size:.72rem; font-weight:700; color:var(--azul); background:var(--azul-100); padding:.28em .7em; border-radius:var(--pill) }

/* ---------- CÓMO CERTIFICAMOS (proceso) ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,22px); counter-reset:step }
.step{ position:relative; padding-top:12px }
.step__n{
  counter-increment:step; font-family:var(--f-display); font-weight:800; font-size:.85rem;
  width:36px; height:36px; border-radius:var(--pill); display:grid; place-items:center;
  color:#fff; background:var(--azul); margin-bottom:16px; box-shadow:var(--sh-blue);
}
.step__n::before{ content:counter(step,decimal-leading-zero) }
.step h3{ font-size:1.08rem; margin-bottom:6px }
.step p{ font-size:.92rem }
.step:not(:last-child)::after{
  content:''; position:absolute; top:30px; left:48px; right:-8px; height:2px;
  background:repeating-linear-gradient(90deg, var(--linea) 0 6px, transparent 6px 12px);
}

/* ---------- HIDROGEL / SPLIT ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center }
.split--rev .split__text{ order:2 }
.feature__list{ list-style:none; display:grid; gap:12px; margin:22px 0 28px }
.feature__list li{ display:flex; align-items:flex-start; gap:11px; color:var(--gris); font-size:1rem }
.feature__list li svg{ color:var(--exito); flex-shrink:0; margin-top:3px }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 }
.chip{
  font-family:var(--f-display); font-weight:600; font-size:.85rem; color:var(--azul);
  background:var(--azul-100); border:1px solid color-mix(in srgb, var(--azul) 20%, transparent);
  padding:.45em .95em; border-radius:var(--pill);
}
.hidro-visual{
  aspect-ratio:1/1; border-radius:var(--r-lg); position:relative; overflow:hidden;
  background:var(--negro); display:grid; place-items:center; box-shadow:var(--sh-lg);
}
.hidro-visual::before{
  content:''; position:absolute; width:150%; height:150%;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--azul) 55%, transparent), transparent 55%);
  animation:spin 18s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.hidro-card{
  position:relative; z-index:1; background:color-mix(in srgb,#fff 12%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r-md);
  padding:26px 34px; text-align:center; color:#fff;
}
.hidro-card svg{ color:#fff; margin:0 auto 10px }
.hidro-card b{ display:block; font-family:var(--f-display); font-size:1.3rem; color:#fff }
.hidro-card small{ color:rgba(255,255,255,.7) }

/* ---------- ESTIMADOR TRADE-IN ---------- */
.estimator{
  display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--linea);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); background:var(--surface); max-width:940px; margin-inline:auto;
}
.estimator__form{ padding:clamp(26px,3.5vw,40px); display:grid; gap:16px; align-content:start }
.estimator__form label{ display:grid; gap:7px; font-family:var(--f-display); font-weight:600; font-size:.9rem; color:var(--tinta) }
.field{
  font-family:var(--f-body); font-size:1rem; color:var(--tinta); background:var(--bg);
  border:1.5px solid var(--linea); border-radius:var(--r-sm); padding:.85em 1em; width:100%;
  transition:border-color .2s, box-shadow .2s; appearance:none;
}
select.field{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234A5578' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:42px }
.field:focus{ outline:none; border-color:var(--azul); box-shadow:0 0 0 4px color-mix(in srgb, var(--azul) 16%, transparent) }
.field:disabled{ opacity:.55; cursor:not-allowed }
.estimator__result{ background:var(--negro); color:#fff; padding:clamp(26px,3.5vw,40px); display:grid; place-content:center; text-align:center }
.estimator__placeholder{ color:rgba(255,255,255,.72); max-width:30ch; margin-inline:auto }
.estimator__placeholder svg{ margin:0 auto 14px; color:var(--azul) }
.estimator__grade{ display:inline-block; font-family:var(--f-display); font-weight:700; font-size:.82rem; color:#bcd6f2; background:rgba(255,255,255,.08); padding:.35em .85em; border-radius:var(--pill); margin-bottom:14px }
.estimator__cap{ color:rgba(255,255,255,.62); font-size:.86rem; margin-bottom:4px }
.estimator__value{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem); color:#fff; line-height:1.1; margin:2px 0 6px }
.estimator__meta{ color:rgba(255,255,255,.62); font-size:.82rem; margin-bottom:18px }
.fineprint{ max-width:820px; margin:22px auto 0; text-align:center; font-size:.82rem; color:var(--gris-2) }

/* ---------- RESEÑAS ---------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,24px) }
.review{ background:var(--surface); border:1px solid var(--linea); border-radius:var(--r-lg); padding:clamp(24px,3vw,30px) }
.review__stars{ color:var(--alerta); letter-spacing:2px; margin-bottom:12px; font-size:1.05rem }
.review p{ color:var(--tinta); font-size:1rem; margin-bottom:18px }
.review__who{ display:flex; align-items:center; gap:12px }
.review__ava{ width:42px; height:42px; border-radius:var(--pill); background:var(--azul); color:#fff; display:grid; place-items:center; font-family:var(--f-display); font-weight:700 }
.review__who b{ display:block; font-size:.94rem; color:var(--tinta) }
.review__who span{ font-size:.8rem; color:var(--gris-2) }

/* ---------- MINI GRID (garantía) ---------- */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,22px) }
.mini{ background:var(--surface); border:1px solid var(--linea); border-radius:var(--r-md); padding:24px }
.mini__ic{ width:44px; height:44px; border-radius:12px; background:var(--azul-100); color:var(--azul); display:grid; place-items:center; margin-bottom:14px }
.mini b{ display:block; font-family:var(--f-display); font-size:1.02rem; margin-bottom:5px; color:var(--tinta) }
.mini span{ font-size:.9rem; color:var(--gris) }

/* ---------- HISTORIA DE MARCA ---------- */
.story__card{
  background:var(--negro); color:#fff; border-radius:var(--r-lg); padding:clamp(34px,5vw,64px);
  display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(28px,4vw,56px); align-items:center; box-shadow:var(--sh-lg);
}
.story__card .eyebrow{ color:#7fb0e6 }
.story__card h2{ color:#fff }
.story__card p{ color:rgba(255,255,255,.78); font-size:1.06rem; margin-top:14px }
.story__quote{ border-left:3px solid var(--azul); padding-left:20px; font-family:var(--f-display); font-weight:600; font-size:1.15rem; color:#fff; line-height:1.4 }
.story__quote span{ display:block; margin-top:12px; font-family:var(--f-body); font-weight:500; font-size:.9rem; color:#9db9dc }

/* ---------- MAYOREO ---------- */
.mayoreo{ background:var(--negro); color:#fff }
[data-theme="dark"] .mayoreo{ background:#070b16; border-block:1px solid var(--linea) }
.mayoreo__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,72px); align-items:center }
.mayoreo h2{ color:#fff }
.mayoreo__text p{ color:rgba(255,255,255,.76); font-size:1.06rem; margin-top:8px }
.feature__list--light li{ color:rgba(255,255,255,.86) }
.mayoreo__form{ background:var(--surface); border-radius:var(--r-lg); padding:clamp(26px,3.5vw,38px); box-shadow:var(--sh-lg); display:grid; gap:15px }
.mayoreo__form h3{ margin-bottom:4px }
.mayoreo__form label{ display:grid; gap:7px; font-family:var(--f-display); font-weight:600; font-size:.88rem; color:var(--tinta) }
.mayoreo__form small{ color:var(--gris-2); font-size:.82rem; text-align:center }

/* ---------- SUCURSALES ---------- */
.store{ background:var(--surface); border:1px solid var(--linea); border-radius:var(--r-lg); padding:clamp(24px,3vw,30px); transition:transform .2s, box-shadow .2s }
.store:hover{ transform:translateY(-3px); box-shadow:var(--sh-md) }
.store__ic{ width:44px;height:44px;border-radius:12px;background:var(--azul-100);color:var(--azul);display:grid;place-items:center;margin-bottom:14px }
.store h3{ margin-bottom:8px }
.store p{ font-size:.95rem; margin-bottom:6px }
.store__hours{ font-size:.85rem; color:var(--gris-2); margin-bottom:14px }
.store__cta{ font-family:var(--f-display); font-weight:600; color:var(--azul); font-size:.92rem; display:inline-flex; align-items:center; gap:5px; transition:gap .2s }
.store__cta:hover{ gap:9px }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:12px }
.faq details{ background:var(--surface); border:1px solid var(--linea); border-radius:var(--r-md); overflow:hidden; transition:border-color .2s }
.faq details[open]{ border-color:color-mix(in srgb, var(--azul) 35%, var(--linea)); box-shadow:var(--sh-sm) }
.faq summary{
  list-style:none; cursor:pointer; padding:18px 22px; font-family:var(--f-display); font-weight:600; font-size:1.03rem;
  color:var(--tinta); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; font-size:1.5rem; color:var(--azul); font-weight:400; transition:transform .25s; flex-shrink:0 }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ padding:0 22px 20px; font-size:.98rem; color:var(--gris) }

/* ---------- CTA FINAL ---------- */
.cta-final{ padding-block:var(--section-y) }
.cta-final__inner{
  background:var(--azul); color:#fff; border-radius:var(--r-lg); padding:clamp(40px,6vw,76px);
  text-align:center; box-shadow:var(--sh-blue); position:relative; overflow:hidden;
}
.cta-final__inner::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
  background-size:24px 24px; opacity:.5; -webkit-mask-image:radial-gradient(60% 60% at 50% 40%, #000, transparent); mask-image:radial-gradient(60% 60% at 50% 40%, #000, transparent);
}
.cta-final h2{ color:#fff; position:relative }
.cta-final p{ color:rgba(255,255,255,.9); max-width:52ch; margin:14px auto 30px; font-size:1.1rem; position:relative }
.cta-final .btn{ position:relative }
.cta-final .btn--wa{ box-shadow:0 16px 40px rgba(0,0,0,.25) }

/* ---------- FOOTER ---------- */
.footer{ background:var(--negro); color:#fff; padding-top:clamp(48px,7vw,80px) }
[data-theme="dark"] .footer{ border-top:1px solid var(--linea) }
.footer__inner{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); padding-bottom:44px }
.footer__logo{ height:64px; width:auto; margin-bottom:18px }
.footer__brand p{ color:rgba(255,255,255,.62); font-size:.95rem; max-width:34ch }
.footer__social{ display:flex; gap:12px; margin-top:18px }
.footer__social a{ width:40px; height:40px; border-radius:var(--pill); border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:#fff; transition:background .2s, border-color .2s, transform .2s }
.footer__social a:hover{ background:var(--azul); border-color:var(--azul); transform:translateY(-2px) }
.footer__col h4{ font-family:var(--f-display); font-size:.98rem; color:#fff; margin-bottom:16px }
.footer__col a, .footer__col span{ display:block; color:rgba(255,255,255,.64); font-size:.93rem; margin-bottom:10px; transition:color .2s }
.footer__col a:hover{ color:#fff }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:22px }
.footer__bottom .container{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.footer__bottom span{ color:rgba(255,255,255,.5); font-size:.85rem }

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:90; width:60px; height:60px; border-radius:var(--pill);
  background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:0 14px 34px rgba(37,211,102,.5);
  transition:transform .2s, box-shadow .2s;
}
.wa-float::after{ content:''; position:absolute; inset:0; border-radius:var(--pill); background:var(--wa); z-index:-1; animation:ping 2.4s ease-out infinite }
@keyframes ping{ 0%{ transform:scale(1); opacity:.55 } 100%{ transform:scale(1.7); opacity:0 } }
.wa-float:hover{ transform:scale(1.08) }

/* ---------- REVEAL (solo con JS; sin JS el contenido es visible) ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:none }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; text-align:center }
  .hero__sub{ margin-inline:auto } .hero__cta,.hero__trust{ justify-content:center }
  .hero__visual{ order:-1; margin-bottom:8px }
  .split, .mayoreo__inner, .story__card{ grid-template-columns:1fr }
  .split--rev .split__text{ order:0 }
  .story__card{ text-align:center } .story__quote{ text-align:left }
  .cards, .cards--3, .reviews, .process{ grid-template-columns:repeat(2,1fr) }
  .step:not(:last-child)::after{ display:none }
  .footer__inner{ grid-template-columns:1fr 1fr }
}
/* Con 7 enlaces la barra ya no cabe abajo de ~1080px → menú de hamburguesa
   (nada se pierde: el menú los lleva todos). */
@media (max-width:1080px){
  .nav__links{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0; background:var(--bg);
    padding:8px var(--gutter) 20px; border-bottom:1px solid var(--linea); box-shadow:var(--sh-md); transform:translateY(-120%); transition:transform .32s cubic-bezier(.2,.7,.2,1); margin:0; align-items:stretch;
  }
  .nav__links.open{ transform:none }
  .nav__links a{ padding:14px 4px; border-bottom:1px solid var(--linea); font-size:1rem }
  .nav__links a::after{ display:none }
  .nav__burger{ display:flex }
}

@media (max-width:720px){
  .nav__wa span{ display:none } .nav__wa{ padding:.6em .8em }
  .stats__grid{ grid-template-columns:repeat(2,1fr) }
  .channels__grid{ grid-template-columns:repeat(2,1fr) }
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .estimator{ grid-template-columns:1fr }
  .footer__inner{ grid-template-columns:1fr 1fr }
}
@media (max-width:480px){
  .cards, .cards--3, .reviews, .process{ grid-template-columns:1fr }
  .hero__trust{ grid-template-columns:repeat(2,1fr); gap:16px 24px }
  .footer__inner{ grid-template-columns:1fr } .footer__bottom .container{ justify-content:center; text-align:center }
}

/* ---------- ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
  .reveal{ opacity:1; transform:none }
}
:focus-visible{ outline:3px solid var(--azul); outline-offset:2px; border-radius:6px }
.skip{ position:absolute; left:-999px; top:0; background:var(--azul); color:#fff; padding:10px 18px; border-radius:0 0 10px 0; z-index:200 }
.skip:focus{ left:0 }

/* ============================================================
   ELEVACIÓN v3 — conversión + medición + confianza
   ============================================================ */

/* ---------- BARRA DE PROGRESO DE SCROLL ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--azul); z-index:110; transition:width .1s linear }

/* ---------- NAV: enlace activo ---------- */
.nav__links a.active{ color:var(--tinta) }
.nav__links a.active::after{ width:100% }

/* ---------- TABLA COMPARATIVA ---------- */
.compare{ max-width:960px; margin-inline:auto; border:1px solid var(--linea); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); background:var(--surface) }
.compare__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.compare table{ width:100%; border-collapse:collapse; min-width:560px }
.compare th, .compare td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--linea); font-size:.96rem }
.compare thead th{ font-family:var(--f-display); font-weight:700; color:var(--tinta); background:var(--bg-alt); position:sticky; top:0 }
.compare thead th.col-cellboj{ color:#fff; background:var(--azul) }
.compare tbody th{ font-weight:600; color:var(--tinta) }
.compare td{ text-align:center; color:var(--gris) }
.compare td:first-child, .compare th:first-child{ text-align:left }
.compare .col-cellboj{ background:color-mix(in srgb, var(--azul) 7%, transparent) }
.compare tr:last-child td, .compare tr:last-child th{ border-bottom:0 }
.ck{ color:var(--exito); font-weight:700 } .cx{ color:var(--error); font-weight:700 } .cq{ color:var(--gris-2) }
.compare .col-cellboj .ck{ color:var(--exito) }

/* ---------- CÓMO COMPRAR / ENVÍOS ---------- */
.buy{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,22px); counter-reset:bstep }
.buy__step{ text-align:center; padding:8px }
.buy__ic{ width:60px; height:60px; margin:0 auto 16px; border-radius:var(--pill); background:var(--azul-100); color:var(--azul); display:grid; place-items:center; position:relative }
.buy__ic b{ position:absolute; top:-6px; right:-6px; width:24px; height:24px; border-radius:var(--pill); background:var(--azul); color:#fff; font-family:var(--f-display); font-size:.72rem; font-weight:800; display:grid; place-items:center; box-shadow:var(--sh-sm) }
.buy__step h3{ font-size:1.05rem; margin-bottom:6px } .buy__step p{ font-size:.9rem }
.pay-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:clamp(30px,4vw,44px) }
.pay-chip{ display:inline-flex; align-items:center; gap:8px; padding:.6em 1.1em; border:1px solid var(--linea); border-radius:var(--pill); background:var(--surface); font-family:var(--f-display); font-weight:600; font-size:.9rem; color:var(--tinta) }
.pay-chip svg{ color:var(--azul) }

/* ---------- BARRA FIJA MÓVIL (CTA) ---------- */
.mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:95; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--linea); box-shadow:0 -8px 24px rgba(16,32,80,.10) }
.mobile-bar .btn{ flex:1 }
.mobile-bar__call{ flex:0 0 auto !important; width:52px; padding:0 !important }

/* ---------- CONSENTIMIENTO / COOKIES ---------- */
.consent{ position:fixed; left:16px; right:16px; bottom:16px; z-index:130; max-width:520px; margin-inline:auto; background:var(--surface); border:1px solid var(--linea); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:20px 22px; display:none }
.consent.show{ display:block; animation:consent-in .4s cubic-bezier(.2,.7,.2,1) }
@keyframes consent-in{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.consent p{ font-size:.9rem; color:var(--gris); margin-bottom:14px } .consent a{ color:var(--azul); font-weight:600 }
.consent__row{ display:flex; gap:10px; flex-wrap:wrap }
.consent .btn{ --pad-y:.7em; font-size:.9rem; flex:1 }

/* ---------- PÁGINAS LEGALES ---------- */
.legal{ max-width:820px; margin-inline:auto; padding-block:clamp(90px,10vw,130px) }
.legal h1{ font-size:clamp(1.9rem,1.4rem+2vw,2.6rem); margin-bottom:8px }
.legal .updated{ color:var(--gris-2); font-size:.9rem; margin-bottom:34px }
.legal h2{ font-size:1.3rem; margin:32px 0 10px } .legal h3{ font-size:1.05rem; margin:20px 0 6px }
.legal p, .legal li{ color:var(--gris); font-size:1rem; margin-bottom:10px } .legal ul{ padding-left:22px }
.legal a{ color:var(--azul); font-weight:600 }
.legal__back{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-display); font-weight:600; color:var(--azul); margin-bottom:24px }

.footer__bottom a{ color:rgba(255,255,255,.72) } .footer__bottom a:hover{ color:#fff }

/* ---------- CAPTURA DE CARTERA (pop-up de suscripción) ---------- */
.lead-ov{ position:fixed; inset:0; z-index:140; background:rgba(9,14,28,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px }
.lead-ov.show{ display:flex; animation:lead-fade .3s ease }
@keyframes lead-fade{ from{opacity:0} to{opacity:1} }
.lead{ position:relative; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-lg); max-width:440px; width:100%; padding:clamp(28px,4vw,40px); text-align:center; animation:lead-up .35s cubic-bezier(.2,.7,.2,1) }
@keyframes lead-up{ from{opacity:0; transform:translateY(20px) scale(.97)} to{opacity:1; transform:none} }
.lead__x{ position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; background:transparent; color:var(--gris-2); border-radius:var(--pill); font-size:1.3rem; line-height:1 }
.lead__x:hover{ background:var(--bg-alt); color:var(--tinta) }
.lead img{ width:64px; height:64px; object-fit:contain; margin:0 auto 14px }
.lead h3{ font-size:1.45rem; margin-bottom:8px }
.lead p{ font-size:1rem; margin-bottom:20px }
.lead .btn{ width:100% }
.lead__mini{ font-size:.78rem; color:var(--gris-2); margin:12px 0 0 }
.lead__no{ display:block; margin-top:10px; background:none; border:0; color:var(--gris-2); font-size:.86rem; text-decoration:underline }

@media (max-width:720px){
  .mobile-bar{ display:flex }
  .wa-float{ display:none }           /* la barra sustituye al botón flotante en móvil */
  body{ padding-bottom:76px }
  .buy{ grid-template-columns:repeat(2,1fr); gap:26px 16px }
  .consent{ bottom:84px }             /* despeja la barra fija móvil */
}
@media (max-width:480px){
  .buy{ grid-template-columns:1fr }
}

/* ============================================================
   ELEVACIÓN v4 — prueba social, catálogo rápido y financiamiento
   (patrones de los que más venden: rating arriba, opciones con
   un solo CTA, financiamiento visible). Todo por tokens.
   ============================================================ */

/* Prueba social en el hero: rating de Google + comunidad */
.hero__badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px }
.hero__badges .pill{ margin-bottom:0 }
.pill--rating{ background:var(--surface); border-color:var(--linea); color:var(--tinta); transition:box-shadow .2s ease, transform .2s ease }
.pill--rating:hover{ box-shadow:var(--sh-sm); transform:translateY(-1px) }
.pill--rating b{ color:var(--tinta) }
.stars{ color:var(--alerta); letter-spacing:1px; line-height:1 }
.stars__half{ background:linear-gradient(90deg, var(--alerta) 42%, color-mix(in srgb, var(--alerta) 26%, transparent) 42%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }

/* Catálogo rápido — los más buscados */
.quickpick{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0 auto clamp(34px,5vw,48px); max-width:760px }
.quickpick__lbl{ font-family:var(--f-display); font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gris-2); margin-right:2px }
.qp{ display:inline-flex; align-items:center; gap:6px; padding:.62em 1.1em; border-radius:var(--pill); border:1.5px solid var(--linea); background:var(--surface); font-family:var(--f-display); font-weight:600; font-size:.92rem; color:var(--tinta); transition:border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease }
.qp:hover{ border-color:var(--azul); color:var(--azul); box-shadow:var(--sh-sm); transform:translateY(-1px) }
.qp--all{ background:var(--azul-100); border-color:transparent; color:var(--azul) }
.qp--all:hover{ background:var(--azul); color:#fff }

/* Financiamiento visible (apartado + meses) */
.finance{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:760px; margin:clamp(30px,4vw,44px) auto 0 }
.finance__item{ display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border:1px solid var(--linea); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--sh-sm) }
.finance__ic{ flex:0 0 auto; width:44px; height:44px; border-radius:var(--r-sm); background:var(--azul-100); color:var(--azul); display:grid; place-items:center }
.finance__item b{ display:block; font-family:var(--f-display); font-size:1.02rem; margin-bottom:3px }
.finance__item span{ font-size:.9rem; color:var(--gris); line-height:1.45 }

/* Rating dentro de la tarjeta de reputación */
.rating-line{ display:flex; align-items:center; gap:8px; margin:2px 0 10px; font-size:.95rem }
.rating-line b{ font-family:var(--f-display); font-weight:800; color:var(--tinta) }
.rating-line span{ color:var(--gris-2); font-size:.86rem }
.rating-line .stars{ font-size:1.05rem }

@media (max-width:560px){
  .finance{ grid-template-columns:1fr }
  .quickpick{ gap:8px }
  .quickpick__lbl{ width:100%; text-align:center; margin-bottom:2px }
}

/* ============================================================
   COMPRA AHORA — catálogo vivo de Mercado Libre
   (encabezado de tienda · buscador · chips · rejilla de productos)
   ============================================================ */
.shop-head{ padding-block:clamp(40px,6vw,72px) clamp(20px,3vw,28px); background:var(--bg-alt); text-align:center }
.shop-head h1{ font-size:clamp(2rem,1.3rem + 3vw,3.1rem); max-width:16ch; margin-inline:auto }
.shop-head__lead{ max-width:64ch; margin:16px auto 0; font-size:1.06rem }
.shop-head__trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:26px;
  font-size:.9rem; color:var(--gris-2);
}
.shop-head__trust span{ display:inline-flex; align-items:center; gap:7px }
.shop-head__trust svg{ color:var(--azul); flex:none }

/* ---- Buscador pegajoso ---- */
.finder{
  position:sticky; top:64px; z-index:40; background:var(--bg);
  border-block:1px solid var(--linea); padding-block:14px;
  backdrop-filter:saturate(180%) blur(10px);
}
.finder__bar{
  display:flex; align-items:center; gap:10px; max-width:640px; margin-inline:auto;
  background:var(--surface); border:1.5px solid var(--linea); border-radius:var(--pill);
  padding:.55em 1.1em; transition:border-color .2s ease, box-shadow .2s ease;
}
.finder__bar:focus-within{ border-color:var(--azul); box-shadow:0 0 0 4px color-mix(in srgb, var(--azul) 16%, transparent) }
.finder__bar > svg{ color:var(--gris-2); flex:none }
.finder__input{
  flex:1; border:0; outline:0; background:transparent; color:var(--tinta);
  font-family:var(--f-body); font-size:1rem; min-width:0;
}
.finder__input::-webkit-search-cancel-button{ display:none }
.finder__x{
  border:0; background:var(--niebla); color:var(--gris); border-radius:var(--pill);
  width:26px; height:26px; line-height:1; font-size:.8rem; flex:none;
}
.finder__x:hover{ background:var(--linea); color:var(--tinta) }
.finder__count{ text-align:center; font-size:.86rem; color:var(--gris-2); margin-top:10px }

.finder__foot{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:10px }
.finder__foot .finder__count{ margin-top:0 }
.finder__orden{ font-size:.86rem; color:var(--gris-2); display:inline-flex; align-items:center; gap:6px }
.finder__orden select{
  font-family:var(--f-body); font-size:.86rem; color:var(--tinta);
  background:var(--surface); border:1.5px solid var(--linea); border-radius:var(--pill);
  padding:.35em .8em; cursor:pointer;
}
.finder__orden select:focus-visible{ border-color:var(--azul) }

.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px }
.chip{
  font-family:var(--f-display); font-weight:600; font-size:.88rem;
  padding:.5em 1.05em; border-radius:var(--pill);
  border:1.5px solid var(--linea); background:var(--surface); color:var(--gris);
  transition:all .18s ease;
}
.chip span{ font-weight:500; opacity:.6; margin-left:.35em; font-size:.82em }
.chip:hover{ border-color:color-mix(in srgb, var(--azul) 45%, var(--linea)); color:var(--tinta) }
.chip--on{ background:var(--azul); border-color:var(--azul); color:#fff }
.chip--on span{ opacity:.8 }

/* ---- Rejilla de productos ---- */
.shop{ padding-block:clamp(28px,4vw,48px) var(--section-y) }
.prods{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,22px) }
.prod[hidden]{ display:none }   /* gana sobre display:flex — si no, la tarjeta oculta sigue ocupando lugar */
.prod{
  display:flex; flex-direction:column; position:relative;
  background:var(--surface); border:1px solid var(--linea); border-radius:var(--r-md);
  overflow:hidden; transition:transform .2s ease, box-shadow .22s ease, border-color .2s ease;
}
.prod:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:color-mix(in srgb, var(--azul) 30%, var(--linea)) }
.prod__img{ display:block; background:#fff; aspect-ratio:1/1; overflow:hidden }
.prod__img img{ width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .3s ease }
.prod:hover .prod__img img{ transform:scale(1.04) }
.prod__body{ display:flex; flex-direction:column; gap:8px; padding:14px 15px 16px; flex:1 }
.prod__badges{ display:flex; flex-wrap:wrap; gap:6px; min-height:0 }
.prod__badge{
  font-family:var(--f-display); font-weight:600; font-size:.7rem; letter-spacing:.02em;
  padding:.28em .7em; border-radius:var(--pill);
  background:var(--azul-100); color:var(--azul);
}
.prod__badge--envio{ background:color-mix(in srgb, var(--exito) 16%, transparent); color:var(--exito) }
.prod__title{
  font-family:var(--f-body); font-weight:500; font-size:.9rem; line-height:1.4;
  color:var(--tinta); letter-spacing:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.prod__price{ font-family:var(--f-display); font-weight:800; font-size:1.42rem; color:var(--tinta); margin-top:auto }
.prod__cta{ --pad-y:.72em; --pad-x:1em; font-size:.88rem; width:100%; box-shadow:none }
.prod__cta:hover{ box-shadow:var(--sh-blue) }
.prod__wa{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:.8rem; color:var(--gris-2); padding-top:2px;
}
.prod__wa svg{ color:var(--wa) }
.prod__wa:hover{ color:var(--wa-700) }

/* El producto que traía la liga del video */
.prod--destacado{ border-color:var(--azul); box-shadow:var(--sh-blue) }
.prod__pin{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--f-display); font-weight:700; font-size:.7rem;
  background:var(--azul); color:#fff; padding:.32em .75em; border-radius:var(--pill);
}

.prods__more{ text-align:center; margin-top:clamp(24px,3vw,34px) }
.prods__empty{
  text-align:center; max-width:560px; margin:clamp(24px,4vw,40px) auto 0;
  padding:clamp(24px,3vw,34px); border:1px dashed var(--linea); border-radius:var(--r-lg);
  background:var(--bg-alt);
}
.prods__empty p{ margin-bottom:18px }
.prods__nota{ text-align:center; font-size:.83rem; color:var(--gris-2); margin-top:clamp(24px,3vw,34px) }

/* Bloque "Compra ahora" dentro de la portada */
.shop-strip .prods{ grid-template-columns:repeat(4,1fr) }
.shop-strip__cta{ text-align:center; margin-top:clamp(24px,3vw,34px) }

@media (max-width:980px){
  .prods, .shop-strip .prods{ grid-template-columns:repeat(3,1fr) }
  .finder{ top:60px }
}
@media (max-width:720px){
  .prods, .shop-strip .prods{ grid-template-columns:repeat(2,1fr) }
  .prod__price{ font-size:1.25rem }
  /* 3 renglones, NO 2: el modelo (A16, 15 Pro Max) va al FINAL del título
     y truncarlo deja al cliente sin saber si es el suyo. */
  .prod__title{ font-size:.8rem; -webkit-line-clamp:3 }
  /* El botón no cabe en una línea a 360px → que parta, sin cortarse. */
  .prod__cta{ white-space:normal; line-height:1.25; font-size:.82rem; --pad-y:.6em; --pad-x:.8em }
  .prod__cta svg{ display:none }   /* la flecha robaba el ancho y partía el botón en 3 */
  .prod__wa{ font-size:.75rem; line-height:1.3 }
  .finder{ position:static }
}
/* En teléfono el que llega de un video quiere ver PRODUCTOS, no leer:
   el encabezado se compacta para que la rejilla suba. */
@media (max-width:560px){
  .shop-head{ padding-block:26px 16px }
  .shop-head h1{ font-size:clamp(1.65rem,1.1rem + 3.4vw,2.2rem); max-width:none }
  .shop-head__lead{ font-size:.95rem; margin-top:12px }
  .shop-head__trust{
    display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:18px;
    text-align:left; font-size:.78rem;
  }
  .shop-head__trust span{ align-items:flex-start }
  .shop{ padding-block:18px 44px }
  /* Los filtros en UNA tira que se desliza con el dedo (no 3 renglones). */
  .chips{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    scroll-snap-type:x proximity; padding-bottom:4px; margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter); scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{ display:none }
  .chip{ flex:none; scroll-snap-align:start }
  .finder{ padding-block:10px }
  .finder__count{ margin-top:8px }
}
@media (max-width:380px){
  .prods, .shop-strip .prods{ gap:10px }
  .prod__body{ padding:12px 12px 14px }
  .prod__cta{ font-size:.8rem; --pad-x:.7em }
}

/* ---- Rutas de inicio + captura de WhatsApp (23-jul, web→ERP) ---- */
.rutas{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.ruta{display:flex;flex-direction:column;gap:.3rem;padding:1.15rem 1.2rem;border-radius:1rem;border:1.5px solid color-mix(in srgb,currentColor 14%,transparent);text-decoration:none;color:inherit;transition:transform .15s ease,border-color .15s ease;cursor:pointer}
.ruta:hover{transform:translateY(-2px);border-color:#25D366}
.ruta b{font-size:1.04rem}
.ruta span{font-size:.85rem;opacity:.8}
.ruta svg{width:26px;height:26px;margin-bottom:.15rem;color:#25D366}
.canales-cta{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.6rem}
.canales-cta a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:999px;background:color-mix(in srgb,currentColor 7%,transparent);text-decoration:none;color:inherit;font-size:.85rem;font-weight:600}
.canales-cta a:hover{background:color-mix(in srgb,currentColor 13%,transparent)}
.lead-form{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.lead-form input{flex:1;min-width:170px;border-radius:.6rem;border:1px solid color-mix(in srgb,currentColor 24%,transparent);background:transparent;padding:.68rem .85rem;font:inherit;color:inherit}
.lead-form input::placeholder{opacity:.55}
.lead-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}
.lead-ok{color:#25D366;font-weight:700;font-size:1rem}
.lead-mini{font-size:.75rem;opacity:.7;width:100%;margin:0}

/* ---- Lista de precios de mayoreo (23-jul: el B2B compra con calculadora, no con fotos) ---- */
.lp__nota{margin:.75rem 0 0 !important;font-size:.8rem;opacity:.62}
.btn--lg{padding:.95rem 1.7rem;font-size:1.02rem}

/* ---- Razones para creer (prueba verificable, no adjetivos) ---- */
.creer{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:1.3rem}
.creer__item{padding:1.25rem 1.3rem;border-radius:1rem;border:1px solid color-mix(in srgb,currentColor 13%,transparent)}
.creer__num{font-size:1.85rem;font-weight:800;line-height:1.1;color:#25D366}
.creer__ttl{font-weight:700;margin:.35rem 0 .25rem}
.creer__txt{font-size:.86rem;opacity:.75;margin:0}
.creer__txt a{color:#25D366;text-decoration:underline;text-underline-offset:2px;font-weight:600}

.shop-head__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.btn--ghost{border:1.5px solid color-mix(in srgb,currentColor 28%,transparent);padding:.95rem 1.6rem;border-radius:999px;font-weight:600;text-decoration:none;color:inherit}
.btn--ghost:hover{border-color:#25D366}