:root{
  --fondo:#F5F5F7;
  --blanco:#FFFFFF;
  --tinta:#1D1D1F;
  --gris:#6E6E73;
  --gris-claro:#86868B;
  --linea:rgba(0,0,0,.08);
  --azul:#0066E6;
  --radio:22px;
  /* espectro del colorista — usado con máxima restricción */
  --espectro:linear-gradient(100deg,#0090F7 0%,#5E5CE6 28%,#BF5AF2 52%,#FF375F 74%,#FF9F0A 100%);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--fondo);color:var(--tinta);font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:17px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
@media(min-width:768px){.wrap{padding:0 32px}}

/* ===================== NAV GLOBAL ===================== */
.gnav{position:sticky;top:0;z-index:90;background:rgba(245,245,247,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.gnav .inner{display:flex;justify-content:space-between;align-items:center;height:48px;font-size:13px}
.gnav .marca{font-weight:600;letter-spacing:-.02em;font-size:14.5px}
.gnav ul{display:none;gap:34px;list-style:none;color:var(--gris)}
.gnav ul li a:hover{color:var(--tinta)}
.gnav ul li.on a{color:var(--tinta)}
@media(min-width:768px){.gnav ul{display:flex}}

/* ===================== LOCAL NAV ===================== */
.lnav{position:sticky;top:48px;z-index:80;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s}
.lnav.raised{border-color:var(--linea)}
.lnav .inner{display:flex;align-items:center;height:52px;gap:20px}
.lnav .titulo{font-weight:600;font-size:17px;letter-spacing:-.02em;flex:none}
.lnav .links{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;font-size:12.5px;color:var(--gris);margin-left:auto;align-items:center}
.lnav .links::-webkit-scrollbar{display:none}
.lnav .links a{flex:none;padding:6px 0;transition:color .2s}
.lnav .links a.on,.lnav .links a:hover{color:var(--tinta)}
.lnav .cta{flex:none;background:var(--azul);color:#fff;font-size:12.5px;font-weight:500;padding:7px 15px;border-radius:999px;transition:background .2s}
.lnav .cta:hover{background:#0055C4}

/* ===================== HERO ===================== */
.hero{padding:96px 0 72px;text-align:center}
.hero .kicker{font-size:clamp(12px,3.4vw,15px);font-weight:600;color:var(--gris);margin-bottom:14px;white-space:nowrap;letter-spacing:normal}
.hero h1{font-size:clamp(36px,11.5vw,104px);font-weight:800;letter-spacing:-.045em;line-height:1.02;white-space:nowrap}
.hero h1 .grad{background:var(--espectro);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:clamp(19px,3.4vw,26px);font-weight:500;letter-spacing:-.02em;color:var(--gris);max-width:640px;margin:22px auto 0;line-height:1.35}
.hero .acciones{display:flex;gap:22px;justify-content:center;align-items:center;margin-top:30px;font-size:17px}
.hero .acciones .lleno{background:var(--azul);color:#fff;font-weight:500;padding:13px 26px;border-radius:999px;transition:background .2s}
.hero .acciones .lleno:hover{background:#0055C4}
.hero .acciones .linea-a{color:var(--azul);font-weight:400}
.hero .acciones .linea-a::after{content:" ›";font-weight:600}
.disclosure{font-size:12px;color:var(--gris-claro);max-width:520px;margin:40px auto 0;line-height:1.55}
.disclosure a{color:var(--gris);text-decoration:underline;text-underline-offset:2px}
@media(min-width:768px){.hero{padding:130px 0 90px}}

/* ===================== REVEAL ===================== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}.rv.d3{transition-delay:.18s}

/* ===================== BENTO DESTACADOS ===================== */
.bento{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:26px}
@media(min-width:768px){.bento{grid-template-columns:repeat(2,1fr);gap:18px}}
.tile{background:var(--blanco);border-radius:var(--radio);padding:40px 34px 0;overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:420px;transition:transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s}
@media(hover:hover){.tile:hover{transform:scale(1.012);box-shadow:0 24px 60px rgba(0,0,0,.09)}}
.tile.grande{min-height:520px}
@media(min-width:768px){.tile.grande{grid-column:span 2;text-align:center;align-items:center}}
.tile .eyebrow{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-claro);margin-bottom:8px}
.tile h3{font-size:clamp(26px,4.6vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.08}
.tile .tag{font-size:15.5px;color:var(--gris);margin-top:8px;max-width:460px;line-height:1.45}
.tile .enlaces{display:flex;gap:20px;margin-top:18px;font-size:15px}
.tile .foto{margin-top:auto;height:230px;color:#C7C7CC;font-size:12px;letter-spacing:.1em;font-weight:500;align-self:stretch}
.tile.grande .foto{height:300px}
.tile .foto .foto-link{display:grid;place-items:center;width:100%;height:100%}
.tile .foto .obj{width:72%;max-width:420px;height:82%;border-radius:16px;background:radial-gradient(90% 90% at 50% 30%,#FBFBFD 0%,#EDEDF0 100%);box-shadow:0 24px 48px -18px rgba(0,0,0,.16), 0 2px 0 rgba(255,255,255,.9) inset;display:grid;place-items:center;overflow:hidden;transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.tile .foto .obj img{width:100%;height:100%;object-fit:contain}
@media(hover:hover){.tile .foto .foto-link:hover .obj{transform:scale(1.03)}}

/* ===================== BOTÓN CTA AMAZON ===================== */
.btn-amz{display:block;text-align:center;background:var(--azul);color:#fff !important;font-weight:600;font-size:15px;padding:13px 22px;border-radius:999px;box-shadow:0 6px 18px -6px rgba(0,102,230,.55);transition:background .2s, transform .2s, box-shadow .2s}
.btn-amz::after{content:" ›";font-weight:700}
.btn-amz:hover{background:#0055C4;transform:scale(1.02);box-shadow:0 10px 24px -6px rgba(0,102,230,.6)}
.btn-amz:active{transform:scale(.99)}
.enlaces .btn-amz{display:inline-block;padding:13px 30px}

/* ===================== SECCIONES DE CATEGORÍA ===================== */
.cat{padding:78px 0 8px;scroll-margin-top:118px}
.cat-head{text-align:center;max-width:700px;margin:0 auto 40px;padding:0 22px}
.cat-head h2{font-size:clamp(38px,7.5vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.cat-head h2 span{color:var(--gris-claro)}
.cat-head p{font-size:clamp(17px,2.8vw,21px);font-weight:500;letter-spacing:-.017em;color:var(--gris);margin-top:12px}

.fila-cards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.fila-cards{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(min-width:1000px){.fila-cards{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--blanco);border-radius:var(--radio);padding:28px 26px 26px;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s}
@media(hover:hover){.card:hover{transform:scale(1.015);box-shadow:0 20px 50px rgba(0,0,0,.08)}}
.card .foto{height:190px;margin-bottom:20px}
.card .foto .foto-link{display:grid;place-items:center;width:100%;height:100%}
.card .foto .obj{width:84%;height:88%;border-radius:14px;background:radial-gradient(90% 90% at 50% 28%,#FBFBFD 0%,#EDEDF0 100%);box-shadow:0 18px 36px -14px rgba(0,0,0,.15);display:grid;place-items:center;color:#C7C7CC;font-size:11px;letter-spacing:.1em;font-weight:500;overflow:hidden;transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.card .foto .obj img{width:100%;height:100%;object-fit:contain}
@media(hover:hover){.card .foto .foto-link:hover .obj{transform:scale(1.04)}}
.card .badge{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-claro)}
.card h4{font-size:19.5px;font-weight:700;letter-spacing:-.022em;margin-top:5px}
.card .rol{font-size:14px;color:var(--gris);margin-top:2px}
.card .nota{font-size:14.5px;color:var(--gris);line-height:1.5;margin:12px 0 16px;flex:1}
.card .nota b{color:var(--tinta);font-weight:600}
.card .pie{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--linea);padding-top:16px}
.card .pie .btn-amz{width:100%}
.card .pie .af{font-size:10.5px;font-weight:500;letter-spacing:.08em;color:#C7C7CC;text-transform:uppercase;text-align:center}

/* ===================== SECCIÓN GVH (oscura) ===================== */
.gvh{margin:96px 0 0;background:#000;color:#F5F5F7;border-radius:28px;overflow:hidden;text-align:center;padding:76px 26px 84px;position:relative}
.gvh .eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#86868B;margin-bottom:16px}
.gvh h2{font-size:clamp(34px,7vw,62px);font-weight:800;letter-spacing:-.04em;line-height:1.06;max-width:760px;margin:0 auto}
.gvh h2 .grad{background:var(--espectro);-webkit-background-clip:text;background-clip:text;color:transparent}
.gvh p{font-size:clamp(16px,2.8vw,20px);font-weight:500;color:#A1A1A6;max-width:560px;margin:18px auto 0;line-height:1.45}
.gvh .acciones{display:flex;gap:22px;justify-content:center;align-items:center;margin-top:30px;flex-wrap:wrap}
.gvh .lleno{background:#fff;color:#000;font-weight:500;font-size:16px;padding:13px 26px;border-radius:999px;transition:transform .2s}
.gvh .lleno:hover{transform:scale(1.03)}
.gvh .linea-a{color:#2997FF;font-size:16px}
.gvh .linea-a::after{content:" ›";font-weight:600}
@media(min-width:768px){.gvh{margin-top:120px;padding:96px 40px 104px}}

/* ===================== CIERRE ===================== */
.cierre{text-align:center;padding:104px 22px 60px}
.cierre h2{font-size:clamp(30px,6vw,52px);font-weight:800;letter-spacing:-.038em;line-height:1.08}
.cierre h2 span{color:var(--gris-claro)}
.cierre p{font-size:17px;color:var(--gris);max-width:480px;margin:16px auto 0}
.cierre .linea-a{display:inline-block;margin-top:20px;color:var(--azul);font-size:17px;font-weight:500}
.cierre .linea-a::after{content:" ›";font-weight:600}

/* ===================== FOOTER ===================== */
footer{border-top:1px solid var(--linea);padding:34px 0 54px;color:var(--gris-claro);font-size:12px;line-height:1.6}
footer .notas{max-width:820px;margin-bottom:22px}
footer .notas p{margin-bottom:8px}
footer .fin{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--linea);padding-top:18px;color:var(--gris)}
footer .fin .spec{height:3px;width:110px;background:var(--espectro);border-radius:2px;align-self:center;opacity:.85}

.marcas span{font-size:17px;font-weight:700;letter-spacing:-.02em;color:#B9B9BE;transition:color .25s;white-space:nowrap;cursor:default}
.marcas span:hover{color:var(--tinta)}
.gvh{margin-top:16px !important}
@media(min-width:760px){.np-card-grid{grid-template-columns:.85fr 1.15fr !important;gap:36px !important}}

/* ===================== DEEP LINKS ===================== */
.tile[id],.card[id]{scroll-margin-top:118px}
@keyframes destello{
  0%{box-shadow:0 0 0 3px rgba(0,102,230,.65), 0 0 44px 8px rgba(0,102,230,.3)}
  100%{box-shadow:0 0 0 3px rgba(0,102,230,0), 0 0 44px 8px rgba(0,102,230,0)}
}
.destello{animation:destello 2s ease-out forwards}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .tile,.card{transition:none}
  .destello{animation:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:6px}