/* ==========================================================================
   MIL ASADOS — Base y componentes del Design System
   --------------------------------------------------------------------------
   Reset, tipografía y los componentes reutilizables del DS (botones, badges,
   eyebrows, títulos, sellos de origen). Todo lo de acá debe poder usarse en
   cualquier página futura del sitio sin arrastrar estilos de la landing.
   El layout específico de cada sección vive en sections.css.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}

/* --- Layout --------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sec{padding:clamp(64px,9vw,116px) 0}
.sec-sm{padding:clamp(48px,6vw,80px) 0}

/* --- Tipografía ----------------------------------------------------------- */
.eyebrow{
  font-family:var(--f-ui);font-weight:700;font-size:13.5px;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ember);margin:0 0 16px;
}
h2.title{
  font-family:var(--f-disp);font-weight:800;line-height:.96;letter-spacing:.01em;
  font-size:clamp(34px,6vw,62px);margin:0 0 8px;text-transform:uppercase;
}
.title .thin{color:var(--steel-d);font-weight:600}
.lead{color:var(--muted);max-width:60ch;font-size:clamp(15px,2.2vw,18px)}

/* Regla corta de acento, bajo el eyebrow */
.ember-rule{
  width:54px;height:3px;border-radius:3px;margin:0 0 22px;
  background:linear-gradient(90deg,var(--ember),transparent);
}

/* --- Botones --------------------------------------------------------------
   Todos los botones fuerzan texto blanco con -webkit-text-fill-color para que
   no lo pisen los gradientes con background-clip:text de los títulos.       */
.btn{
  font-family:var(--f-ui);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;font-size:13px;
  border:0;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:3px;
  transition:transform .15s,box-shadow .2s,filter .2s;
  color:#fff;-webkit-text-fill-color:#fff;
}
.btn *{-webkit-text-fill-color:inherit}

.btn-primary{
  background:linear-gradient(180deg,#ff7a2a,#e34d10);
  color:#fff !important;-webkit-text-fill-color:#fff;
  text-shadow:0 1px 2px rgba(90,25,0,.35);
  box-shadow:0 8px 24px rgba(216,71,15,.40),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{
  transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 12px 32px rgba(216,71,15,.52),inset 0 1px 0 rgba(255,255,255,.25);
}

.btn-ghost{
  background:rgba(255,255,255,.02);
  color:var(--ink) !important;-webkit-text-fill-color:var(--ink);
  border:1px solid var(--line2);
}
.btn-ghost:hover{border-color:var(--steel-d);background:rgba(255,255,255,.05)}

.btn-wa{
  background:#1f7a44;color:#fff !important;-webkit-text-fill-color:#fff;
  text-shadow:0 1px 2px rgba(0,40,15,.4);
  box-shadow:0 8px 22px rgba(31,122,68,.34);
}
.btn-wa:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* OJO: misma especificidad que .btn — tiene que quedar DESPUÉS para ganar. */
.header-cta{padding:11px 20px}

/* --- Badges y sellos de origen -------------------------------------------- */
.badge{
  font-family:var(--f-ui);font-weight:700;font-size:11px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ember);
  border:1px solid var(--ember-d);border-radius:30px;
  padding:6px 20px 6px 22px;background:var(--ember-soft);
  white-space:nowrap;display:inline-block;
}

.origin-seal{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 16px 6px 11px;
  border:1px solid rgba(207,210,214,.30);border-radius:30px;
  background:rgba(12,11,10,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  color:#eef1f4;font-family:var(--f-ui);font-weight:600;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;
}
.origin-seal .ar-flag-img{
  width:23px;height:15px;border-radius:3px;object-fit:cover;
  flex:0 0 auto;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 1px 3px rgba(0,0,0,.5);
}

/* Variante en línea del sello, sin píldora (sección El producto) */
.detail-sub{
  margin:12px 0 0;
  font-family:var(--f-ui);font-weight:600;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
  display:inline-flex;align-items:center;gap:9px;
}
.detail-sub .ar-flag-img{
  width:22px;height:14px;border-radius:3px;object-fit:cover;
  flex:0 0 auto;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.20);
}

/* --- Foco visible ----------------------------------------------------------
   Sólo :focus-visible, así que aparece con teclado y no al hacer click.
   Nada de esto se ve en la navegación normal con mouse.                    */
:focus-visible{
  outline:2px solid var(--ember-2);
  outline-offset:3px;
  border-radius:2px;
}
/* Sobre la sección crema el naranja claro se pierde: usamos el oscuro. */
.receive :focus-visible{outline-color:var(--ember-d)}
/* El botón de WhatsApp es un círculo: que el anillo lo acompañe. */
.wa-float:focus-visible{outline-offset:4px;border-radius:50%}

/* --- Área táctil ------------------------------------------------------------
   Los links de texto miden ~21px de alto. En vez de agrandarlos (lo que
   movería el layout), un pseudo-elemento transparente extiende la zona
   clickeable. El texto se ve exactamente igual.                            */
.nav .nav-links a,
.foot-nav a,
.lockup,
.exp-badge,
.foot-data a{position:relative}

.nav .nav-links a::after,
.foot-nav a::after,
.lockup::after,
.exp-badge::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);
  height:44px;min-height:100%;
}
/* Teléfono y mail van uno debajo del otro con poco aire: 24px es lo máximo
   que se puede ampliar sin que las zonas se pisen entre sí. */
.foot-data a::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:24px;
}

/* --- Aparición al hacer scroll --------------------------------------------
   main.js agrega .in cuando el bloque entra en viewport.
   El fallback para prefers-reduced-motion está en responsive.css.          */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.in{opacity:1;transform:none}

/* ==========================================================================
   MENÚ MOBILE
   --------------------------------------------------------------------------
   Vive acá, y no en responsive.css, porque lo usan la landing Y el blog:
   son los dos únicos archivos de estilo que las dos comparten. Duplicarlo
   en responsive.css + blog.css sería garantizar que un día se desincronicen.
   Por eso este bloque incluye su propio media query, que es la excepción a
   la regla "todos los media queries de la landing van en responsive.css".

   Aparece a ≤980px, exactamente donde responsive.css y blog.css ocultan
   .nav-links. Entre 761 y 980px hoy no hay navegación de ningún tipo; esto
   cierra ese hueco.
   ========================================================================== */

/* --- El botón del header -------------------------------------------------- */
.nav-toggle{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  padding:0;background:none;cursor:pointer;color:var(--ink);
  border:1px solid var(--line2);border-radius:4px;
  transition:border-color .2s,color .2s;
}
.nav-toggle:hover{border-color:var(--steel-d);color:var(--ember-2)}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle .ic-close{display:none}
.nav-toggle[aria-expanded="true"] .ic-open{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}
/* El de adentro del panel siempre muestra la cruz */
#navClose .ic-close{display:block}

/* --- El velo --------------------------------------------------------------
   z-index 74/75: por encima del botón flotante de WhatsApp (70), que si no
   queda flotando arriba del panel. Header 60, sticky CTA 55.              */
.nav-scrim{
  position:fixed;inset:0;z-index:74;background:rgba(6,5,5,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s ease;
}
.nav-scrim.open{opacity:1}

/* --- El panel ------------------------------------------------------------- */
.nav-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:75;width:min(320px,86vw);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:calc(14px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#151210,#0e0d0c);
  border-left:1px solid var(--line2);
  box-shadow:-24px 0 60px rgba(0,0,0,.6);
  transform:translateX(100%);transition:transform .28s ease;
}
.nav-panel.open{transform:none}
.nav-panel-head{display:flex;justify-content:flex-end;padding:0 14px 10px}

/* Los íconos van SÓLO acá, no en el nav de desktop: en una lista vertical
   anclan el ojo a la izquierda y aceleran el escaneo; en la fila horizontal
   del header convertirían cinco palabras sobrias en una botonera. */
.nav-panel-list{list-style:none;margin:0;padding:6px 0;display:flex;flex-direction:column}
.nav-panel-list li a{
  display:flex;align-items:center;gap:15px;padding:15px 24px;min-height:52px;
  font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.02em;
  color:var(--ink);border-bottom:1px solid var(--line);
  transition:background .2s,color .2s;
}
.nav-panel-list li:first-child a{border-top:1px solid var(--line)}
.nav-panel-list li a:hover{background:rgba(255,255,255,.03);color:var(--ember-2)}
.nav-panel-list li a svg{width:21px;height:21px;flex:0 0 auto;color:var(--steel-d);transition:color .2s}
.nav-panel-list li a:hover svg{color:var(--ember)}
.nav-panel-list li a[aria-current="page"]{color:var(--ember)}
.nav-panel-list li a[aria-current="page"] svg{color:var(--ember)}

.nav-panel-cta{margin-top:auto;padding:20px 24px 0}
.nav-panel-cta .btn{width:100%;justify-content:center;padding:15px}
.nav-panel-foot{
  margin:0;padding:16px 24px 0;text-align:center;
  font-family:var(--f-ui);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-d);
}

/* OJO: [hidden] del navegador es display:none, pero lo pisan .nav-panel
   (display:flex) y .nav-scrim, que tienen más especificidad. Sin esta regla
   el panel cerrado sigue existiendo para el tabulador: se ve la barra vacía
   del navegador recorriendo links invisibles fuera de pantalla. */
.nav-panel[hidden],.nav-scrim[hidden]{display:none}

/* Con el panel abierto el fondo no scrollea */
body.nav-open{overflow:hidden}

@media(max-width:980px){
  .nav-toggle{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  .nav-panel,.nav-scrim{transition:none}
}

/* ==========================================================================
   BLOQUE DE PRECIO
   --------------------------------------------------------------------------
   Componente único: donde haya un precio del Iniciador, va este bloque
   entero. No existe una versión corta con un solo número.

   El motivo es concreto: mostrar sólo $99.000 hace que quien paga con
   tarjeta vea $109.000 en el checkout y sienta que le cambiaron el precio.
   Las tres líneas dicen, en orden, cuánto, con qué forma de pago, y cuánto
   con la otra. Nunca separar la primera de las otras dos.
   ========================================================================== */
.price-block{display:flex;flex-direction:column;align-items:center;gap:0}
.price-block .price{
  font-family:var(--f-disp);font-weight:800;font-size:clamp(54px,11vw,84px);
  line-height:1;margin:6px 0 6px;
  background:linear-gradient(180deg,#fff,var(--steel-d));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.price-block .price-note,
.price-block .price-card{
  margin:0;font-family:var(--f-ui);font-size:14px;line-height:1.5;color:var(--muted);
}
.price-block .price-card{margin-top:3px}
/* Va separada del bloque: es una condición extra, no una tercera forma de pago. */
.price-block .price-bulk{
  margin:12px 0 0;font-family:var(--f-ui);font-size:12.5px;line-height:1.5;
  color:var(--muted-d);
}

/* ==========================================================================
   BLOQUE DE ADVERTENCIA
   --------------------------------------------------------------------------
   Vive acá, y no en sections.css, porque lo usan la home y /seguridad/.
   Mismo criterio que el menú mobile: si un componente lo comparten dos sets
   de estilos distintos, va al único archivo que las dos páginas cargan.

   Ámbar (--warn), no el naranja de marca: en la home el bloque está pegado
   al CTA de compra, y con el mismo color se leerían como lo mismo.
   ========================================================================== */
.warnbox{background:var(--bg)}
.warnbox-card{
  max-width:820px;margin:0 auto;
  border:1px solid var(--warn-line);border-left:4px solid var(--warn);
  border-radius:6px;background:var(--warn-soft);
  padding:clamp(22px,3.4vw,30px) clamp(20px,3.4vw,34px);
}
.warnbox-head{
  display:flex;align-items:flex-start;gap:13px;margin:0 0 16px;
  font-family:var(--f-ui);font-weight:600;font-size:clamp(15px,2.2vw,18px);
  line-height:1.4;color:var(--warn);
}
.warnbox-head b{font-weight:800;letter-spacing:.1em}
.warnbox-ic{width:26px;height:26px;flex:0 0 auto;margin-top:-1px}
/* La regla que más importa, sola y grande: es la que evita la llamarada. */
.warnbox-key{
  margin:0 0 8px;
  font-family:var(--f-ui);font-weight:800;line-height:1.25;
  font-size:clamp(19px,3.2vw,26px);letter-spacing:.005em;color:var(--warn);
}
/* El porqué, en una línea. Una advertencia que se entiende se cumple. */
.warnbox-why{
  margin:0 0 16px;max-width:62ch;
  font-size:15px;line-height:1.55;color:var(--ink);
}
/* Cómo saber cuándo sí se puede: va separada y con marco propio. */
.warnbox-rule{
  margin:0 0 18px;padding:12px 15px;
  border:1px solid var(--warn-line);border-radius:5px;
  background:rgba(232,178,58,.05);
  font-family:var(--f-ui);font-weight:600;font-size:15px;line-height:1.5;
  color:var(--ink);
}
.warnbox-list{
  list-style:none;margin:0 0 18px;padding:0;
  display:flex;flex-direction:column;gap:9px;
}
.warnbox-list li{
  position:relative;padding-left:20px;
  font-size:15.5px;line-height:1.55;color:var(--ink);
}
.warnbox-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:2px;background:var(--warn);
}
.warnbox-list strong{font-weight:700;color:var(--warn)}
.warnbox-foot{
  margin:0;padding-top:16px;border-top:1px solid var(--warn-line);
  font-family:var(--f-ui);font-size:14px;line-height:1.6;color:var(--muted);
}
.warnbox-link{
  position:relative;display:inline-block;white-space:nowrap;
  font-weight:700;color:var(--warn);
  border-bottom:1px solid var(--warn-line);padding-bottom:1px;
  transition:border-color .2s;
}
.warnbox-link:hover{border-bottom-color:var(--warn)}
.warnbox-link::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}