/* ============================================================
   Peladito y a la boca — Sistema de diseño (claro · cálido)
   Paleta amarillo/naranja, fondo blanco, estilo amigable.
   Mobile-first · alta conversión · animaciones sutiles 60fps
   ============================================================ */

:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FFF7E8;        /* crema cálida para secciones/pills */
  --card:#FFFFFF;             /* alias usado por navi.css */
  --line:#EEE3CF;             /* borde claro cálido */
  --lima:#FDB813;             /* AMARILLO de marca (relleno CTA, texto oscuro) */
  --lima-hover:#FFC83D;
  --naranja:#EE7C12;          /* naranja (relleno badges/submit, texto blanco) */
  --amarillo:#FDB813;
  --accent-ink:#C2530C;       /* naranja oscuro: TEXTO acento legible en blanco */
  --text:#1A1A1A;
  --muted:#6E6E76;
  --radius:16px;
  --maxw:1080px;

  /* derivados */
  --pad-x:20px;
  --shadow-soft:0 10px 30px rgba(60,40,0,.10);
  --shadow-card:0 1px 2px rgba(40,30,0,.05),0 14px 30px -18px rgba(40,30,0,.30);
  --shadow-lima:0 10px 30px rgba(253,184,19,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Poppins",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-decoration:none}
a:hover{color:#9A3E08}
h1,h2,h3{line-height:1.15;margin:0}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:6px}

/* ---------- Layout primitives ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.section{padding-block:clamp(40px,8vw,72px)}
main{display:block}

/* Grid responsive base reutilizable */
.grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}

/* ---------- Tipografía utilitaria ---------- */
.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin:0 0 10px;
}

/* ---------- Header / Nav ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
header .wrap{
  display:flex;align-items:center;gap:14px;
  min-height:60px;
}
header .brand,header .logo{display:flex;align-items:center;gap:10px;font-weight:800}
header img{height:40px;width:auto}
nav{margin-left:auto}
nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
nav a{
  display:inline-flex;align-items:center;min-height:40px;
  padding:6px 12px;border-radius:10px;
  color:var(--muted);font-weight:600;font-size:14px;
  transition:color .18s var(--ease),background .18s var(--ease);
}
nav a:hover{color:var(--text);background:var(--surface-2)}
nav a[aria-current="page"]{color:var(--accent-ink)}

/* ---------- Hero ---------- */
.hero{
  padding:clamp(40px,9vw,76px) var(--pad-x) clamp(20px,4vw,32px);
  text-align:center;
  max-width:820px;
  margin-inline:auto;
}
.hero h1{
  font-size:clamp(30px,7vw,52px);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 12px;
}
.hero h1 .hl{color:var(--accent-ink)}
.hero p{color:var(--muted);margin:0 auto;font-size:clamp(16px,2.4vw,19px);max-width:60ch}
.hero .btn{margin-top:24px}

/* ---------- Botones ---------- */
.btn{
  --shimmer:rgba(255,255,255,.45);
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;
  padding:12px 22px;
  border-radius:12px;
  border:1px solid transparent;
  font-family:inherit;font-size:16px;font-weight:700;
  text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),
             background .18s var(--ease),border-color .18s var(--ease),filter .18s var(--ease);
  will-change:transform;
}
.btn-primary{
  background:var(--lima);
  color:#1A1A1A;
  font-weight:800;
  box-shadow:0 6px 18px rgba(253,184,19,.32);
}
.btn-primary:hover{
  background:var(--lima-hover);color:#1A1A1A;
  transform:translateY(-2px);
  box-shadow:var(--shadow-lima);
}
.btn-primary:active{transform:translateY(0)}
/* shimmer discreto al hover */
.btn-primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,var(--shimmer) 50%,transparent 70%);
  transform:translateX(-130%);
  pointer-events:none;
}
.btn-ghost{
  background:#FFFFFF;
  color:var(--text);
  border:1px solid var(--line);
}
.btn-ghost:hover{
  color:var(--accent-ink);
  border-color:var(--lima);
  background:var(--surface-2);
  transform:translateY(-2px);
}
.btn-block{display:flex;width:100%}

/* ---------- Pills & Badges ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--text);font-size:13px;font-weight:600;
}
.pill-lima{background:rgba(245,166,35,.14);border-color:rgba(245,166,35,.4);color:var(--accent-ink)}
.badge{
  display:inline-flex;align-items:center;
  background:var(--naranja);color:#fff;
  font-weight:800;font-size:13px;line-height:1;
  padding:5px 10px;border-radius:999px;
  box-shadow:0 4px 14px rgba(238,124,18,.32);
}

/* ---------- Card de oferta ---------- */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.card .badge{position:absolute;top:14px;right:14px}
.card h2{font-size:17px;margin:0;padding-right:60px;font-weight:700;letter-spacing:-.01em}
.card .price{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.was{color:var(--muted);text-decoration:line-through;font-size:14px}
.now{color:var(--accent-ink);font-size:25px;font-weight:800;letter-spacing:-.01em}
.card .cta{margin-top:auto}

/* ---------- Capture (suscripción) ---------- */
.capture{
  position:relative;
  background:linear-gradient(180deg,#FFFDF7 0%,var(--surface-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(22px,5vw,34px);
  max-width:580px;
  margin:40px auto 0;
  box-shadow:var(--shadow-soft);
}
.capture h2{margin:0 0 6px;font-size:clamp(20px,4vw,26px);font-weight:800;letter-spacing:-.01em}
.capture > p{color:var(--muted);margin:0 0 18px;font-size:15px}
.capture form{display:flex;flex-direction:column;gap:14px}
.capture label{font-size:14px;font-weight:600;color:var(--text)}
.capture input[type=email]{
  width:100%;
  background:#FFFFFF;
  border:1px solid var(--line);
  color:var(--text);
  border-radius:12px;
  padding:14px 16px;
  font-family:inherit;font-size:16px;
  min-height:48px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.capture input[type=email]::placeholder{color:var(--muted)}
.capture input[type=email]:focus{
  outline:none;
  border-color:var(--lima);
  box-shadow:0 0 0 3px rgba(253,184,19,.25);
}
fieldset{
  border:1px solid var(--line);border-radius:12px;
  padding:14px 14px 12px;margin:0;
  display:flex;flex-wrap:wrap;gap:10px 16px;
}
legend{color:var(--muted);padding:0 6px;font-size:13px;font-weight:600}
fieldset label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--text);
  min-height:32px;cursor:pointer;
}
fieldset input[type=checkbox],
.consent input[type=checkbox]{
  width:18px;height:18px;
  accent-color:var(--naranja);
  cursor:pointer;flex:0 0 auto;
}
.consent{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:var(--muted);line-height:1.45;
}
.consent a{text-decoration:underline}
.capture button[type=submit],
.capture button:not([class]){
  appearance:none;
  background:var(--naranja);
  color:#fff;border:0;border-radius:12px;
  padding:15px;font-family:inherit;font-size:16px;font-weight:800;
  min-height:50px;cursor:pointer;
  transition:transform .18s var(--ease),filter .18s var(--ease),box-shadow .22s var(--ease);
  box-shadow:0 6px 20px rgba(238,124,18,.28);
}
.capture button[type=submit]:hover,
.capture button:not([class]):hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(238,124,18,.38);
}
.capture button[type=submit]:active{transform:translateY(0)}
#msg{margin:4px 0 0;min-height:20px;font-size:14px;font-weight:600;color:var(--accent-ink)}
#msg.error{color:#C0341B}

/* ---------- Footer ---------- */
footer{
  text-align:center;color:var(--muted);
  padding:32px var(--pad-x);
  border-top:1px solid var(--line);
  font-size:14px;
}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent-ink)}

/* ---------- Legal (privacidad) ---------- */
.legal{max-width:760px;margin-inline:auto;padding:clamp(32px,7vw,56px) var(--pad-x)}
.legal h1{font-size:clamp(26px,5vw,34px);font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.legal h2{font-size:19px;font-weight:700;margin-top:30px;margin-bottom:8px;color:var(--text)}
.legal p,.legal li{color:#3C3C42;font-size:15px;line-height:1.7}
.legal ul{padding-left:20px}
.legal a{text-decoration:underline}

/* ---------- Banner Hot Sale (cuenta regresiva en rojo) ---------- */
.hotsale{background:#E0241C;color:#fff}
.hotsale[hidden]{display:none}
.hotsale__row{
  display:flex;align-items:center;justify-content:center;
  gap:8px 14px;flex-wrap:wrap;text-align:center;
  min-height:46px;padding:9px 0;
}
.hotsale__tag{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.2);
  padding:4px 11px;border-radius:999px;
  font-weight:800;font-size:13px;letter-spacing:.05em;
}
.hotsale__txt{font-size:14px;font-weight:600}
.hotsale__count{
  background:#fff;color:#E0241C;
  font-weight:800;font-size:15px;
  padding:4px 12px;border-radius:999px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  min-width:118px;
}
@media (max-width:520px){
  .hotsale__txt{flex-basis:100%;order:3;font-size:13px}
}

/* ============================================================
   Navi accessories page (base reutilizable)
   ============================================================ */
.ngrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.ncard{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:16px;
  box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.nicon{font-size:32px;line-height:1;flex:0 0 auto}
.nbody{flex:1 1 auto;min-width:0}
.nbody h2{margin:0 0 2px;font-size:16px;font-weight:700}
.nbody p{margin:0;color:var(--muted);font-size:13px}
.ncta{
  flex:0 0 auto;background:var(--lima);color:#1A1A1A;font-weight:800;
  text-decoration:none;padding:11px 14px;border-radius:10px;font-size:13px;
  white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;
  transition:transform .18s var(--ease),background .18s var(--ease);
}
.ncta:hover{background:var(--lima-hover);color:#1A1A1A;transform:translateY(-2px)}

/* ============================================================
   ANIMACIONES (transform/opacity · 60fps)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);
    will-change:opacity,transform;
  }
  .reveal.is-visible{opacity:1;transform:translateY(0)}

  .lift{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
  .lift:hover{
    transform:translateY(-4px);
    border-color:rgba(245,166,35,.55);
    box-shadow:var(--shadow-lima);
  }

  /* Card y ncard reciben el hover-lift por defecto */
  .card:hover,.ncard:hover{
    transform:translateY(-4px);
    border-color:rgba(245,166,35,.5);
    box-shadow:var(--shadow-lima);
  }

  /* shimmer del botón primario solo en movimiento permitido */
  .btn-primary:hover::after{
    animation:btn-shimmer .9s var(--ease) forwards;
  }
}

@keyframes btn-shimmer{
  to{transform:translateX(130%)}
}

/* ---------- Reduce: anula TODO movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
}

/* ============================================================
   Responsive · breakpoints 375 / 768 / 1024
   ============================================================ */

/* Móvil chico */
@media (max-width:375px){
  :root{--pad-x:16px}
  .hero h1{font-size:28px}
  .grid{grid-template-columns:1fr;gap:14px}
}

/* Phablet / móvil estándar */
@media (max-width:430px){
  .ncard{flex-wrap:wrap}
  .ncta{width:100%;text-align:center;justify-content:center}
}

@media (max-width:480px){
  .grid{grid-template-columns:1fr}
  nav ul{gap:2px}
  nav a{padding:6px 9px;font-size:13px}
}

/* Tablet */
@media (min-width:768px){
  .grid{gap:20px}
}

/* Desktop */
@media (min-width:1024px){
  .section{padding-block:clamp(56px,6vw,88px)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}