/* ==========================================================================
   BLACKPEANUT — Sistema de diseño
   Dirección 01 · Expedición
   Sin frameworks. Tokens + componentes. ~1 sola hoja.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  /* Color — base */
  --bp-abisal:#0E2233;   /* fondo oscuro principal */
  --bp-marino:#123A5C;   /* azul de marca, heredado de la Store de Amazon */
  --bp-marino-2:#1B4E6B; /* degradados */
  --bp-bosque:#2B4739;   /* vertical caza */
  --bp-pizarra:#5A666E;  /* texto secundario */
  --bp-junco:#C9C3B4;    /* neutro cálido */
  --bp-papel:#F4F2ED;    /* lienzo: NUNCA blanco puro */
  --bp-blanco:#FFFFFF;   /* reservado al recorte de producto */
  --bp-linea:#DCD8CE;
  --bp-linea-osc:#1E3A52;

  /* Color — acento (uso contenido: botones, badges, antetítulos) */
  --bp-ambar:#E2703A;
  --bp-ambar-osc:#C75F2E;
  --bp-ambar-luz:#FBEDE5;

  /* Color — semántico */
  --bp-ok:#2F6B4F;
  --bp-alerta:#B23A2E;
  --bp-estrella:#E0A32E;

  /* Tipografía */
  --bp-display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --bp-texto:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bp-dato:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Escala tipográfica (fluida) */
  --fs-d1:clamp(46px, 8vw, 86px);
  --fs-d2:clamp(34px, 5vw, 52px);
  --fs-d3:clamp(26px, 3.4vw, 38px);
  --fs-d4:22px;
  --fs-lg:19px;
  --fs-md:16px;
  --fs-sm:14.5px;
  --fs-xs:13px;
  --fs-eyebrow:11px;

  /* Espaciado */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-9:88px; --sp-10:120px;

  /* Retícula */
  --bp-ancho:1180px;
  --bp-ancho-texto:680px;
  --bp-gutter:24px;

  /* Otros */
  --bp-radio:3px;
  --bp-sombra:0 1px 2px rgba(14,34,51,.05), 0 8px 24px rgba(14,34,51,.06);
  --bp-sombra-alta:0 18px 48px rgba(14,34,51,.16);
  --bp-trans:180ms cubic-bezier(.4,0,.2,1);
  --bp-header-h:64px;
}

/* --------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bp-papel);color:var(--bp-abisal);
  font:400 var(--fs-md)/1.65 var(--bp-texto);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--bp-display);font-weight:700;
  text-transform:uppercase;line-height:1.0;letter-spacing:.005em}
p{margin:0 0 var(--sp-4)}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--bp-ambar);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* --------------------------------------------------------- 3. TIPOGRAFÍA */
.d1{font-size:var(--fs-d1);line-height:.92}
.d2{font-size:var(--fs-d2);line-height:.96}
.d3{font-size:var(--fs-d3);line-height:1.0}
.d4{font-size:var(--fs-d4);line-height:1.1}
.lede{font-size:var(--fs-lg);color:var(--bp-pizarra);max-width:var(--bp-ancho-texto)}
.eyebrow{
  font-family:var(--bp-dato);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--bp-ambar);
  display:block;margin-bottom:var(--sp-4);
}
.eyebrow--claro{color:var(--bp-junco)}
.dato{font-family:var(--bp-dato);font-size:var(--fs-xs);color:var(--bp-pizarra);letter-spacing:.01em}
.txt-sec{color:var(--bp-pizarra)}

/* ------------------------------------------------------------ 4. LAYOUT */
.contenedor{width:100%;max-width:var(--bp-ancho);margin-inline:auto;padding-inline:var(--bp-gutter)}
.contenedor--estrecho{max-width:840px}
.seccion{padding-block:var(--sp-9)}
.seccion--compacta{padding-block:var(--sp-7)}
.seccion--oscura{background:var(--bp-abisal);color:var(--bp-papel)}
.seccion--oscura .lede,.seccion--oscura .txt-sec{color:#9BAEBC}
.rejilla{display:grid;gap:var(--sp-5)}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}
.cabecera-seccion{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5);
  flex-wrap:wrap;margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--bp-linea);
}
.seccion--oscura .cabecera-seccion{border-color:var(--bp-linea-osc)}
.enlace-mas{
  font-family:var(--bp-dato);font-size:var(--fs-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bp-ambar);white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color var(--bp-trans);
}
.enlace-mas:hover{border-color:var(--bp-ambar)}

/* ------------------------------------------------------------ 5. BOTONES */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--bp-texto);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:14px 24px;border-radius:var(--bp-radio);
  transition:background var(--bp-trans),color var(--bp-trans),transform var(--bp-trans);
  text-align:center;line-height:1.2;
}
.btn:active{transform:translateY(1px)}
.btn--amazon{background:var(--bp-ambar);color:#fff}
.btn--amazon:hover{background:var(--bp-ambar-osc)}
.btn--solido{background:var(--bp-abisal);color:#fff}
.btn--solido:hover{background:var(--bp-marino)}
.btn--linea{border:1px solid var(--bp-linea);color:var(--bp-abisal);background:transparent}
.btn--linea:hover{border-color:var(--bp-abisal);background:var(--bp-abisal);color:#fff}
.btn--linea-clara{border:1px solid #47637A;color:#D6E2EA;background:transparent}
.btn--linea-clara:hover{background:rgba(255,255,255,.08);border-color:#7A96AC}
.btn--bloque{display:flex;width:100%}
.btn--grande{padding:17px 32px;font-size:13px}
.btn .icono{width:15px;height:15px;flex:none}

/* -------------------------------------------------------------- 6. HEADER */
.header{
  position:sticky;top:0;z-index:60;background:var(--bp-abisal);color:#fff;
  border-bottom:1px solid var(--bp-linea-osc);
}
.header__in{display:flex;align-items:center;gap:var(--sp-5);height:var(--bp-header-h)}
.logo{font-family:var(--bp-display);font-weight:700;font-size:24px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;white-space:nowrap}
.logo em{font-style:normal;color:var(--bp-ambar)}
.nav{display:flex;gap:var(--sp-6);margin-left:auto}
.nav a{
  font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:#B4C0C8;padding-block:6px;border-bottom:2px solid transparent;
  transition:color var(--bp-trans),border-color var(--bp-trans);
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-color:var(--bp-ambar)}
.header .btn{margin-left:var(--sp-5)}
.nav-toggle{display:none;margin-left:auto;padding:10px;color:#fff}
.nav-toggle svg{width:22px;height:22px}

/* ---------------------------------------------------------------- 7. HERO */
.hero{
  background:linear-gradient(158deg,var(--bp-abisal) 0%,var(--bp-marino) 58%,var(--bp-marino-2) 100%);
  color:#fff;position:relative;overflow:hidden;
}
/* Panel claro a sangre por la derecha: el packshot vive sobre él y su fondo
   blanco desaparece con mix-blend-mode. Recurso deliberado, no un parche. */
.hero::before{
  content:"";position:absolute;top:0;bottom:0;right:0;width:42%;
  background:linear-gradient(200deg,#FAF9F6 0%,#EAE7DE 100%);
}
/* Sin z-index en .hero__in: así el packshot comparte contexto de apilado con
   el panel y mix-blend-mode:multiply puede fundir su fondo blanco. */
.hero__in{
  position:relative;display:grid;grid-template-columns:1.08fr .92fr;
  gap:var(--sp-7);align-items:center;padding-block:var(--sp-9);
}
.hero h1{font-size:var(--fs-d1);margin-bottom:var(--sp-5)}
.hero p{color:#A9BDCC;font-size:17px;max-width:44ch;margin-bottom:var(--sp-6)}
.hero__acciones{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.hero__media{display:flex;justify-content:center;align-items:center}
.hero__media img{max-height:460px;width:auto;mix-blend-mode:multiply}
.hero__pie{
  margin-top:var(--sp-5);font-family:var(--bp-dato);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#9DB4C5; /* ≥4.5:1 sobre el marino */
}

/* --------------------------------------------------------- 8. BARRA CONFIANZA */
.confianza{background:var(--bp-abisal);color:#fff;border-top:1px solid var(--bp-linea-osc)}
.confianza__in{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.confianza__it{padding:var(--sp-5) var(--sp-5);border-right:1px solid var(--bp-linea-osc)}
.confianza__it:last-child{border-right:0}
.confianza__it b{display:block;font-family:var(--bp-display);font-size:18px;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--sp-1)}
.confianza__it span{font-size:var(--fs-xs);color:#8FA3B2;line-height:1.5;display:block}

/* -------------------------------------------------------- 9. TARJETA PRODUCTO */
.producto{
  background:var(--bp-blanco);border:1px solid var(--bp-linea);border-radius:var(--bp-radio);
  display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow var(--bp-trans),transform var(--bp-trans),border-color var(--bp-trans);
}
.producto:hover{box-shadow:var(--bp-sombra-alta);transform:translateY(-2px);border-color:#C7CDCF}
.producto__foto{
  position:relative;aspect-ratio:1;background:var(--bp-blanco);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-5);
  border-bottom:1px solid var(--bp-linea);
}
.producto__foto img{max-width:100%;max-height:100%;object-fit:contain;
  transition:opacity var(--bp-trans)}
/* Rollover packshot → uso (patrón Simms) */
.producto__foto img.uso{position:absolute;inset:var(--sp-5);width:auto;height:auto;
  max-width:calc(100% - var(--sp-5)*2);max-height:calc(100% - var(--sp-5)*2);
  margin:auto;opacity:0}
.producto:hover .producto__foto img.uso{opacity:1}
.producto:hover .producto__foto img.pack{opacity:0}
.producto__etiqueta{
  position:absolute;top:12px;left:12px;background:var(--bp-abisal);color:#fff;
  font-family:var(--bp-dato);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 8px;border-radius:2px;
}
.producto__etiqueta--nuevo{background:var(--bp-ambar)}
.producto__cuerpo{padding:var(--sp-4) var(--sp-4) var(--sp-5);display:flex;flex-direction:column;flex:1}
.producto__cat{
  font-family:var(--bp-dato);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bp-ambar);margin-bottom:var(--sp-2);
}
.producto__nombre{font-family:var(--bp-texto);font-size:15.5px;font-weight:600;
  text-transform:none;letter-spacing:0;line-height:1.3;margin-bottom:var(--sp-2)}
/* Línea de specs en pipes — patrón Roofnest */
.producto__specs{
  font-family:var(--bp-dato);font-size:11px;color:var(--bp-pizarra);
  line-height:1.6;margin-bottom:var(--sp-4);
}
.producto__pie{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-3);
  margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--bp-linea);
}
.producto__precio{font-family:var(--bp-display);font-size:25px;font-weight:700;line-height:1}
.producto__precio small{display:block;font-family:var(--bp-texto);font-size:10.5px;
  font-weight:400;color:var(--bp-pizarra);letter-spacing:.02em;margin-top:3px;text-transform:none}
.producto .btn{margin-top:var(--sp-3)}

/* Valoración */
.valoracion{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--bp-pizarra);white-space:nowrap}
.valoracion b{color:var(--bp-abisal);font-weight:600}
.valoracion .estrella{color:var(--bp-estrella);font-size:13px;line-height:1}

/* ----------------------------------------------------- 10. TARJETA GENÉRICA */
.tarjeta{background:var(--bp-blanco);border:1px solid var(--bp-linea);
  border-radius:var(--bp-radio);padding:var(--sp-5)}
.tarjeta h3{font-family:var(--bp-texto);font-weight:600;font-size:18px;
  text-transform:none;letter-spacing:0;line-height:1.25;margin-bottom:var(--sp-2)}
.tarjeta p{font-size:var(--fs-sm);color:var(--bp-pizarra);margin:0}
.tarjeta__num{font-family:var(--bp-display);font-size:32px;font-weight:700;
  color:var(--bp-ambar);line-height:1;margin-bottom:var(--sp-3)}

/* Tarjeta de actividad (imagen + overlay) */
.actividad{
  position:relative;border-radius:var(--bp-radio);overflow:hidden;
  min-height:280px;display:flex;align-items:flex-end;color:#fff;
  background:var(--bp-marino);isolation:isolate;
}
.actividad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;transition:transform 400ms cubic-bezier(.4,0,.2,1)}
.actividad::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(14,34,51,.92) 6%,rgba(14,34,51,.18) 62%,rgba(14,34,51,.35) 100%)}
.actividad:hover img{transform:scale(1.04)}
.actividad__txt{padding:var(--sp-5)}
.actividad__txt h3{font-size:26px;margin-bottom:6px;text-transform:uppercase;
  font-family:var(--bp-display);letter-spacing:.02em}
.actividad__txt p{font-size:var(--fs-sm);color:#BACAD6;margin:0 0 var(--sp-3);max-width:36ch}
.actividad__txt .enlace-mas{color:#fff}

/* Fallback si no hay foto: campo de color por vertical */
.actividad--pesca{background:linear-gradient(150deg,#123A5C,#1B4E6B)}
.actividad--caza{background:linear-gradient(150deg,#2B4739,#3E5C46)}
.actividad--overland{background:linear-gradient(150deg,#4A3B2E,#6B5340)}

/* ------------------------------------------------------ 11. TECNOLOGÍA (™) */
.tecno{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bp-linea-osc);
  border:1px solid var(--bp-linea-osc)}
.tecno__it{background:var(--bp-abisal);padding:var(--sp-6) var(--sp-5)}
.tecno__it h3{font-family:var(--bp-display);font-size:26px;color:#fff;margin-bottom:var(--sp-3);
  text-transform:uppercase}
.tecno__it h3 sup{font-size:11px;color:var(--bp-ambar);vertical-align:super}
.tecno__it p{font-size:var(--fs-sm);color:#93A8B8;margin:0}
.tecno__it .dato{color:var(--bp-ambar);display:block;margin-bottom:var(--sp-3)}

/* --------------------------------------------------------- 12. TABLA SPECS */
.specs{background:var(--bp-blanco);border:1px solid var(--bp-linea);font-size:var(--fs-sm)}
.specs caption{
  text-align:left;font-family:var(--bp-dato);font-size:var(--fs-eyebrow);
  letter-spacing:.16em;text-transform:uppercase;color:var(--bp-pizarra);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--bp-linea);background:#F9F8F5;
}
.specs th,.specs td{padding:12px var(--sp-5);text-align:left;border-bottom:1px solid var(--bp-linea);vertical-align:top}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs th{font-family:var(--bp-texto);font-weight:500;color:var(--bp-pizarra);
  text-transform:none;letter-spacing:0;width:44%}
.specs td{font-family:var(--bp-dato);font-size:13.5px;color:var(--bp-abisal)}

/* ------------------------------------------------------ 13. DOCUMENTOS GPSR */
.docs{display:grid;gap:var(--sp-2)}
.doc{
  display:flex;align-items:center;gap:var(--sp-4);background:var(--bp-blanco);
  border:1px solid var(--bp-linea);border-radius:var(--bp-radio);padding:var(--sp-4) var(--sp-5);
  transition:border-color var(--bp-trans),background var(--bp-trans);
}
.doc:hover{border-color:var(--bp-ambar);background:var(--bp-ambar-luz)}
.doc__ico{width:32px;height:32px;flex:none;border-radius:2px;background:var(--bp-ambar-luz);
  color:var(--bp-ambar-osc);display:grid;place-items:center;font-family:var(--bp-dato);
  font-size:9px;font-weight:500;letter-spacing:.04em}
.doc__t{flex:1;font-size:var(--fs-sm);font-weight:500}
.doc__t small{display:block;font-family:var(--bp-dato);font-size:11px;
  color:var(--bp-pizarra);font-weight:400;margin-top:2px}
.doc__f{font-family:var(--bp-dato);font-size:11px;color:var(--bp-pizarra);letter-spacing:.08em;text-transform:uppercase}

/* ----------------------------------------------------- 14. BLOQUE AMAZON */
/* Patrón Shimano: presente en TODAS las páginas, antes del footer */
.amazon-bloque{background:var(--bp-abisal);color:#fff;text-align:center;
  padding-block:var(--sp-8);border-top:4px solid var(--bp-ambar)}
.amazon-bloque h2{font-size:var(--fs-d2);margin-bottom:var(--sp-3)}
.amazon-bloque p{color:#93A8B8;max-width:52ch;margin:0 auto var(--sp-6)}

/* --------------------------------------------------------------- 15. B2B */
.b2b{background:var(--bp-bosque);color:#fff}
.b2b__in{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-7);align-items:center;
  padding-block:var(--sp-8)}
.b2b h2{font-size:var(--fs-d3);margin-bottom:var(--sp-4)}
.b2b p{color:#BCCBBC}
.b2b__lista li{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0;
  border-bottom:1px solid rgba(255,255,255,.13);font-size:var(--fs-sm)}
.b2b__lista li:last-child{border:0}
.b2b__lista .k{font-family:var(--bp-dato);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bp-junco);min-width:112px;flex:none;padding-top:2px}

/* ------------------------------------------------------------- 16. FOOTER */
.footer{background:#091722;color:#8FA3B2;padding-block:var(--sp-8) var(--sp-6);font-size:var(--fs-sm)}
.footer__cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--sp-6);
  padding-bottom:var(--sp-7);border-bottom:1px solid #17293A}
.footer h4{font-family:var(--bp-dato);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:#61798C;margin-bottom:var(--sp-4)}
.footer li{margin-bottom:9px}
.footer a:hover{color:#fff}
.footer__legal{display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;
  padding-top:var(--sp-5);font-family:var(--bp-dato);font-size:11px;letter-spacing:.06em;color:#546C7E}
.footer__legal a{margin-left:var(--sp-4)}
.footer .logo{color:#fff;margin-bottom:var(--sp-3)}

/* ------------------------------------------------------------ 17. MIGAS */
.migas{font-family:var(--bp-dato);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bp-pizarra);padding-block:var(--sp-5);display:flex;gap:8px;flex-wrap:wrap}
.migas a:hover{color:var(--bp-ambar)}
.migas span[aria-hidden]{color:var(--bp-junco)}

/* --------------------------------------------------- 18. FICHA DE PRODUCTO */
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start;
  padding-bottom:var(--sp-8)}
.galeria__principal{background:var(--bp-blanco);border:1px solid var(--bp-linea);
  border-radius:var(--bp-radio);aspect-ratio:1;display:grid;place-items:center;padding:var(--sp-6)}
.galeria__principal img{max-width:100%;max-height:100%;object-fit:contain}
.galeria__tiras{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-top:var(--sp-2)}
.galeria__tiras button{background:var(--bp-blanco);border:1px solid var(--bp-linea);
  border-radius:2px;aspect-ratio:1;padding:8px;display:grid;place-items:center;
  transition:border-color var(--bp-trans)}
.galeria__tiras button[aria-selected="true"]{border-color:var(--bp-abisal);border-width:2px}
.galeria__tiras img{max-width:100%;max-height:100%;object-fit:contain}

.ficha__cat{font-family:var(--bp-dato);font-size:var(--fs-eyebrow);letter-spacing:.2em;
  text-transform:uppercase;color:var(--bp-ambar);margin-bottom:var(--sp-3);display:block}
.ficha h1{font-family:var(--bp-texto);font-weight:700;font-size:32px;text-transform:none;
  letter-spacing:-.01em;line-height:1.18;margin-bottom:var(--sp-4)}
.ficha__meta{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
  padding-block:var(--sp-4);border-block:1px solid var(--bp-linea);margin-bottom:var(--sp-5)}
.ficha__precio{font-family:var(--bp-display);font-size:44px;font-weight:700;line-height:1}
.ficha__precio small{display:block;font-family:var(--bp-texto);font-size:11px;font-weight:400;
  color:var(--bp-pizarra);text-transform:none;letter-spacing:.02em;margin-top:4px}
.ficha__bullets li{position:relative;padding-left:26px;margin-bottom:var(--sp-3);font-size:var(--fs-sm)}
.ficha__bullets li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:2px;
  background:var(--bp-ambar)}
.ficha__bullets b{font-weight:600}
.ficha__aviso{font-family:var(--bp-dato);font-size:11px;color:var(--bp-pizarra);
  line-height:1.6;margin-top:var(--sp-3)}

/* ------------------------------------------------------------ 19. AVISOS */
.aviso{background:var(--bp-ambar-luz);border:1px solid #F0D5C4;border-radius:var(--bp-radio);
  padding:var(--sp-5);font-size:var(--fs-sm);color:#7A4520}
.aviso b{color:#5F3315}
.aviso p:last-child{margin:0}

/* -------------------------------------------------------- 20. RESPONSIVE */
@media (max-width:1024px){
  .rejilla--4{grid-template-columns:repeat(2,1fr)}
  .confianza__in{grid-template-columns:repeat(2,1fr)}
  .confianza__it:nth-child(2){border-right:0}
  .confianza__it:nth-child(-n+2){border-bottom:1px solid var(--bp-linea-osc)}
  .tecno{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--bp-gutter:20px}
  .nav{display:none}
  .nav-toggle{display:block}
  .nav.abierta{
    display:flex;flex-direction:column;gap:0;position:absolute;top:var(--bp-header-h);
    left:0;right:0;background:var(--bp-abisal);border-bottom:1px solid var(--bp-linea-osc);
    padding:var(--sp-3) var(--bp-gutter) var(--sp-5);margin:0;
  }
  .nav.abierta a{padding:13px 0;border-bottom:1px solid var(--bp-linea-osc);border-left:0;font-size:14px}
  .header .btn{margin-left:auto;padding:11px 15px;font-size:11px;white-space:nowrap}
  .hero__in,.b2b__in,.ficha{grid-template-columns:1fr}
  .hero::before{top:0;left:0;right:0;width:auto;height:340px;
    background:linear-gradient(180deg,#FAF9F6 0%,#EAE7DE 100%)}
  .hero__in{padding-top:var(--sp-5)}
  .hero__media{order:-1;min-height:300px}
  .hero__media img{max-height:280px}
  .rejilla--3{grid-template-columns:repeat(2,1fr)}
  .seccion{padding-block:var(--sp-7)}
}
@media (max-width:620px){
  .rejilla--2,.rejilla--3,.rejilla--4,.footer__cols{grid-template-columns:1fr}
  .confianza__in{grid-template-columns:1fr}
  .confianza__it{border-right:0;border-bottom:1px solid var(--bp-linea-osc)}
  .ficha h1{font-size:26px}
  .cabecera-seccion{align-items:flex-start;flex-direction:column;gap:var(--sp-3)}
  /* El CTA del header se acorta a "Amazon" para que quepa en una línea */
  .btn__largo{display:none}
  .header .btn{padding:11px 13px}
}

/* ------------------------------------------- 21. PÁGINAS INTERIORES */
.seccion--crema{background:#EDEBE4}

/* Cabecera de página (categoría, actividad, artículo…) */
.cabecera-pagina{background:var(--bp-abisal);color:#fff;padding-block:var(--sp-8) var(--sp-7)}
.cabecera-pagina h1{margin-bottom:var(--sp-3)}
.cabecera-pagina .lede{color:#A9BDCC;max-width:62ch;margin:0}
.cabecera-pagina__claim{
  font-family:var(--bp-display);font-size:26px;text-transform:uppercase;
  color:var(--bp-ambar);margin:0 0 var(--sp-4);line-height:1.05;
}
.cabecera-pagina--pesca{background:linear-gradient(150deg,var(--bp-abisal),var(--bp-marino))}
.cabecera-pagina--caza{background:linear-gradient(150deg,#1B2A20,var(--bp-bosque))}
.cabecera-pagina--overlanding{background:linear-gradient(150deg,#2A2118,#4A3B2E)}
.cabecera-pagina--b2b{background:linear-gradient(150deg,#1B2A20,var(--bp-bosque))}
.cabecera-pagina--articulo{background:var(--bp-abisal)}
.cabecera-pagina--articulo h1{font-family:var(--bp-texto);font-weight:700;text-transform:none;
  letter-spacing:-.015em;line-height:1.15;font-size:clamp(28px,4vw,42px)}
/* Migas sobre fondo claro cuando van encima de una cabecera oscura */
.migas{color:var(--bp-pizarra)}

/* Píldoras */
.pildoras{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--sp-5)}
.pildora{
  display:inline-block;font-family:var(--bp-dato);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 13px;border:1px solid rgba(255,255,255,.22);
  border-radius:100px;color:#CBD8E1;transition:border-color var(--bp-trans),color var(--bp-trans);
}
a.pildora:hover{border-color:var(--bp-ambar);color:#fff}

/* Prosa editorial (marca, guías, legal) */
.prosa{max-width:68ch;font-size:17.5px;line-height:1.72}
.prosa h2{font-size:26px;margin:var(--sp-7) 0 var(--sp-3);letter-spacing:.01em}
.prosa h2:first-child{margin-top:0}
.prosa p{margin-bottom:var(--sp-4)}
.prosa ul,.prosa ol{margin:0 0 var(--sp-5);padding-left:0}
.prosa ul li{position:relative;padding-left:24px;margin-bottom:var(--sp-3)}
.prosa ul li::before{content:"";position:absolute;left:0;top:12px;width:11px;height:2px;background:var(--bp-ambar)}
.prosa ol.lista-numerada{counter-reset:ln}
.prosa ol.lista-numerada li{counter-increment:ln;position:relative;padding-left:34px;margin-bottom:var(--sp-3)}
.prosa ol.lista-numerada li::before{
  content:counter(ln);position:absolute;left:0;top:1px;width:22px;height:22px;
  background:var(--bp-abisal);color:#fff;border-radius:50%;display:grid;place-items:center;
  font-family:var(--bp-dato);font-size:11px;
}
.prosa .specs{font-size:15px;margin:var(--sp-5) 0}
.prosa a{color:var(--bp-ambar-osc);border-bottom:1px solid currentColor}

/* Lista marcada (B2B) */
.lista-marcada li{position:relative;padding-left:26px;margin-bottom:var(--sp-4);font-size:var(--fs-sm)}
.lista-marcada li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--bp-ambar)}

/* Portada del artículo */
.guia__portada{
  width:100%;height:auto;border-radius:var(--bp-radio);border:1px solid var(--bp-linea);
  margin-top:var(--sp-6);display:block;
}

/* Preguntas frecuentes (acordeón nativo, sin JS) */
.faq{border-top:1px solid var(--bp-linea);margin:var(--sp-4) 0 var(--sp-6)}
.faq__it{border-bottom:1px solid var(--bp-linea)}
.faq__it summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-weight:600;font-size:16.5px;line-height:1.35;
}
.faq__it summary::-webkit-details-marker{display:none}
.faq__it summary::after{
  content:"";position:absolute;right:6px;top:24px;width:11px;height:11px;
  border-right:2px solid var(--bp-ambar);border-bottom:2px solid var(--bp-ambar);
  transform:rotate(45deg);transition:transform var(--bp-trans);
}
.faq__it[open] summary::after{transform:rotate(225deg);top:27px}
.faq__it summary:hover{color:var(--bp-ambar-osc)}
.faq__it > div{padding:0 34px 18px 0;font-size:16px;color:var(--bp-pizarra);line-height:1.65}

/* Tarjeta de guía */
.tarjeta--guia{display:flex;flex-direction:column;gap:6px;transition:border-color var(--bp-trans),box-shadow var(--bp-trans)}
.tarjeta--guia:hover{border-color:var(--bp-ambar);box-shadow:var(--bp-sombra)}
.tarjeta--guia h3{font-size:19px;line-height:1.25;margin:4px 0 6px}
.tarjeta--guia .enlace-mas{margin-top:auto;padding-top:var(--sp-3)}

/* Tecnología, versión página completa */
.tecno-bloque{
  display:grid;grid-template-columns:280px 1fr;gap:var(--sp-6);
  padding-block:var(--sp-6);border-top:1px solid var(--bp-linea);
}
.tecno-bloque:last-child{border-bottom:1px solid var(--bp-linea)}
.tecno-bloque .dato{display:block;margin-bottom:var(--sp-2);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bp-ambar)}
.tecno-bloque h2 sup{font-size:12px;color:var(--bp-ambar);vertical-align:super}

/* Claim de ficha */
.ficha__claim{font-family:var(--bp-display);font-size:22px;text-transform:uppercase;
  color:var(--bp-ambar);margin:-6px 0 var(--sp-4);line-height:1.05}

/* Formulario */
.formulario label{display:block;margin-bottom:var(--sp-4);font-size:var(--fs-sm);font-weight:500}
.formulario input,.formulario select,.formulario textarea{
  display:block;width:100%;margin-top:6px;padding:11px 13px;font:400 15px/1.4 var(--bp-texto);
  color:var(--bp-abisal);background:var(--bp-papel);border:1px solid var(--bp-linea);
  border-radius:var(--bp-radio);
}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{
  border-color:var(--bp-abisal);background:#fff}
.formulario textarea{resize:vertical}

@media (max-width:900px){
  .tecno-bloque{grid-template-columns:1fr;gap:var(--sp-3)}
  .prosa{font-size:16.5px}
}

/* ------------------------------------------------------------ 22. PRINT */
@media print{
  .header,.amazon-bloque,.nav-toggle,.footer{display:none}
  body{background:#fff}
  .producto,.tarjeta{break-inside:avoid}
}