/* GENERADO POR `npm run css` — NO EDITAR A MANO.
   Editar los modulos de assets/css/ y volver a correr el script.
   Orden de la cascada: tokens.css → fonts.css → base.css → layout.css → components.css → sections/header.css → sections/hero.css → sections/marca.css → sections/adaptogenos.css → sections/porque.css → sections/productos.css → sections/respaldo.css → sections/quiz.css → sections/punto.css → sections/precios.css → sections/cta.css → sections/footer.css → sections/floats.css → responsive.css */

/* ==== tokens.css ==================================================== */
/* ============================================================================
   TOKENS — Sistema de diseño Micelic, recortado a lo que esta landing usa.
   ----------------------------------------------------------------------------
   El `colors_and_type.css` del design system completo está pensado para slides
   (escala tipográfica de 108px, fondo crema). Acá se reproducen solo los tokens
   de marca que aplican a web, más los locales de esta página.
   Fuente de verdad de los colores: PANTONE definidos por la marca. No alterar.
   ============================================================================ */

:root {
  /* --- Tinta ------------------------------------------------------------- */
  --ink: #2c2e35;        /* Micelic Dark — texto principal sobre claro */
  --ink-2: #595b61;      /* secundario — ledes, cuerpo largo */
  --ink-3: #707176;      /* terciario — microcopy, labels */

  /* --- Líneas ------------------------------------------------------------ */
  --line: #e4e4e6;       /* hairline sobre claro */
  --line-soft: #efeff0;
  --line-dark: rgba(255, 253, 246, 0.14); /* hairline sobre oscuro */

  /* --- Superficies ------------------------------------------------------- */
  --surface: #ffffff;
  --surface-2: #f6f6f5;  /* gris cálido — secciones alternadas */
  --surface-3: #fbfbfa;  /* fila PVP de la tabla de precios */
  --surface-shot: #f5f1e8; /* fondo de carga de las fotos de producto */
  --dark: #2c2e35;       /* secciones oscuras y footer */
  --dark-2: #1d1f24;     /* CTA final */

  /* --- Acento ------------------------------------------------------------ */
  --or: #ff6a20;         /* Micelic Orange — PANTONE 716 C */
  --or-deep: #d8480f;    /* presionado / hover */

  /* --- Sobre oscuro ------------------------------------------------------ */
  --soft-white: #fffdf6;
  --on-dark-1: rgba(255, 253, 246, 0.78);
  --on-dark-2: rgba(255, 253, 246, 0.72);
  --on-dark-3: rgba(255, 253, 246, 0.7);
  --on-dark-4: rgba(255, 253, 246, 0.62);
  --on-dark-5: rgba(255, 253, 246, 0.55);

  /* --- Subrayado de marca ------------------------------------------------ */
  --underline: linear-gradient(transparent 62%, rgba(255, 106, 32, 0.28) 62%);

  /* --- Tipografía -------------------------------------------------------- */
  --font-display: "Cal Sans", "Satoshi", system-ui, -apple-system, sans-serif;
  --font-body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Layout ------------------------------------------------------------ */
  --maxw: 1240px;
  --gutter: 40px;        /* se reduce en assets/css/responsive.css */
  --sec-y: 120px;        /* padding vertical de sección */
  --sec-y-tight: 96px;

  /* --- Radios ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;          /* cards, fotos, tabla, tarjeta del QR */
  --r-pill: 999px;

  /* --- Sombras ----------------------------------------------------------- */
  --shadow-photo: 0 30px 80px -40px rgba(44, 46, 53, 0.55);
  --shadow-float: 0 18px 44px -18px rgba(216, 72, 15, 0.65);
  --shadow-float-ghost: 0 18px 44px -20px rgba(29, 31, 36, 0.45),
    inset 0 0 0 1.5px var(--line);

  /* --- Transición -------------------------------------------------------- */
  --t: 0.18s ease;

  /* --- Colores de producto (PANTONE de etiqueta — no alterar) ------------- */
  --melena: #feeeac;        --melena-dot: #a8850b;
  --reishi: #38226b;        --reishi-dot: #38226b;
  --cordyceps: #be2519;     --cordyceps-dot: #be2519;
  --ashwagandha: #5fbf49;   --ashwagandha-dot: #3e8c2f;
  --chaga: #0a2c45;         --chaga-dot: #0a2c45;
  --cola-de-pavo: #00adbb;  --cola-de-pavo-dot: #00838c;
  --rhodiola: #0c7f49;      --rhodiola-dot: #0c7f49;
  --tremella: #ffca34;      --tremella-dot: #b8860b;
}

/* ==== fonts.css ===================================================== */
/* ============================================================================
   FUENTES — Satoshi + Cal Sans, self-hosted, subsetteadas a latino.
   Generadas por `npm run fonts` desde source-assets/fonts/.
   Rutas relativas a este archivo.
   ============================================================================ */

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cal Sans";
  src: url("../fonts/CalSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==== base.css ====================================================== */
/* ============================================================================
   BASE — reset mínimo, tipografía global, accesibilidad.
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Compensa el nav sticky de 72px al saltar a un ancla. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
  overflow-x: hidden; /* red de seguridad: ninguna sección debe desbordar */
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

/* Los atributos width/height del HTML reservan el espacio (evitan CLS), pero
   sin esto el atributo height gana sobre el width del CSS y deforma la imagen.
   Las reglas que piden height:100% (.photo img, .product__shot img) lo pisan. */
img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}

p {
  margin: 0;
  line-height: 1.6;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  color: var(--or);
  text-decoration: none;
}

a:hover {
  color: var(--or-deep);
}

/* --- Foco visible y consistente en todo lo interactivo -------------------- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.dark :where(a, button):focus-visible {
  outline-color: var(--soft-white);
}

/* --- Salto al contenido (solo visible con teclado) ------------------------ */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--ink);
  color: var(--soft-white);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform var(--t);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  color: var(--soft-white);
}

/* --- Solo para lectores de pantalla -------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Respeto por prefers-reduced-motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==== layout.css ==================================================== */
/* ============================================================================
   LAYOUT — contenedor, secciones y modificadores de fondo.
   ============================================================================ */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap--narrow {
  max-width: 56em;
}

.section {
  padding: var(--sec-y) 0;
}

.section--tight {
  padding: var(--sec-y-tight) 0;
}

/* Secciones oscuras: invierten tinta, líneas y ledes. */
.section--dark {
  background: var(--dark);
  color: var(--soft-white);
}

.section--dark .lede {
  color: var(--on-dark-2);
}

/* Secciones grises con hairline arriba y abajo. */
.section--muted {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* --- Split de dos columnas (reutilizado por varias secciones) ------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ==== components.css ================================================ */
/* ============================================================================
   COMPONENTES — piezas reutilizadas por más de una sección.
   Cada una es autónoma: se puede copiar a Tiendanube con su bloque de HTML.
   ============================================================================ */

/* --- Kicker (etiqueta naranja sobre el H2) ------------------------------- */
.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0;
}

/* --- Lede (párrafo de entrada) ------------------------------------------- */
.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 300;
}

/* --- Título de sección --------------------------------------------------- */
.h2 {
  font-size: clamp(34px, 3.4vw, 50px);
  letter-spacing: -0.03em;
  margin-top: 22px;
}

/* --- Subrayado de marca (sobre <em>) ------------------------------------- */
.u {
  font-style: normal;
  background: var(--underline);
}

/* --- Botones ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  text-align: center;
  transition: background var(--t), box-shadow var(--t), color var(--t);
}

.btn--primary {
  background: var(--or);
  color: var(--soft-white);
}

.btn--primary:hover {
  background: var(--or-deep);
  color: var(--soft-white);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.btn--ghost:hover {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.btn--inverse {
  background: var(--soft-white);
  color: var(--ink);
}

.btn--inverse:hover {
  background: #fff;
  color: var(--ink);
}

.btn--sm {
  font-size: 13px;
  padding: 10px 18px;
}

/* --- Grupo de botones ---------------------------------------------------- */
.actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.actions--center {
  justify-content: center;
}

/* --- Foto con radio ------------------------------------------------------ */
.photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo--tall {
  aspect-ratio: 4 / 5;
}

.photo--flat {
  box-shadow: none;
}

/* --- Chips de calidad ---------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 34px 0 0;
  list-style: none;
}

.chips li {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-pill);
  padding: 8px 15px;
}

/* --- Lista numerada -----------------------------------------------------
   Patrón compartido por "pilares" (La marca), "razones" (Por qué / Punto de
   venta) y "pasos" (QR Quiz). Cada uso ajusta las variables, no las reglas.
   ------------------------------------------------------------------------ */
.numbered {
  --num-col: 52px;
  --num-gap: 16px;
  --num-pad: 30px;
  --num-title: 20px;
  --num-title-mb: 9px;
  --num-line: var(--line);

  display: grid;
  list-style: none;
}

.numbered > li {
  display: grid;
  grid-template-columns: var(--num-col) 1fr;
  gap: var(--num-gap);
  padding: var(--num-pad) 0;
  border-top: 1px solid var(--num-line);
}

.numbered > li:last-child {
  border-bottom: 1px solid var(--num-line);
}

.numbered .n {
  font-size: 13px;
  font-weight: 700;
  color: var(--or);
  letter-spacing: 0.08em;
}

.numbered h3,
.numbered h4 {
  font-size: var(--num-title);
  margin-bottom: var(--num-title-mb);
}

.numbered p {
  font-size: 15px;
  color: var(--ink-2);
  font-weight: 300;
}

/* Variante compacta: los pilares de "La marca". */
.numbered--compact {
  --num-col: 44px;
  --num-gap: 18px;
  --num-pad: 22px;
  --num-title: 17px;
  --num-title-mb: 6px;
}

.numbered--compact .n {
  padding-top: 3px;
}

/* Variante sobre fondo oscuro: los pasos del QR Quiz. */
.numbered--dark {
  --num-pad: 26px;
  --num-title: 19px;
  --num-title-mb: 8px;
  --num-line: var(--line-dark);
}

.numbered--dark p {
  color: var(--on-dark-3);
}

/* --- Franja de 3 columnas con separadores (usada en el QR Quiz) ---------- */
.stripe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  border-top: 1px solid var(--line-dark);
  list-style: none;
}

.stripe > li {
  padding: 26px 26px 0 0;
  border-right: 1px solid var(--line-dark);
}

.stripe > li:last-child {
  border-right: 0;
}

.stripe h3 {
  font-size: 15px;
  margin-bottom: 8px;
}

.stripe p {
  font-size: 14px;
  color: var(--on-dark-4);
  font-weight: 300;
}

/* ==== sections/header.css =========================================== */
/* ============================================================================
   SECCIÓN · Nav sticky
   ============================================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header__logo {
  display: block;
  flex: none;
}

.site-header__logo img {
  height: 26px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
}

.site-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current="true"] {
  color: var(--ink);
}

.site-header .btn {
  white-space: nowrap;
  flex: none;
}

/* --- Botón hamburguesa: solo existe en mobile (ver responsive.css) -------- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  place-items: center;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}

.nav-toggle__bars::before {
  transform: translateY(-7px);
}

.nav-toggle__bars::after {
  transform: translateY(5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(0) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-2px) rotate(-45deg);
}

/* ==== sections/hero.css ============================================= */
/* ============================================================================
   SECCIÓN · Hero + barra de facts
   ============================================================================ */

.hero {
  padding: 104px 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero__iso {
  width: 46px;
  margin: 0 auto 34px;
  opacity: 0.95;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16em;
  margin: 0 auto;
}

.hero__sub {
  max-width: 640px;
  margin: 26px auto 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 300;
}

.hero .actions {
  margin-top: 36px;
}

.hero__lineup {
  margin: 52px auto 0;
  max-width: 1100px;
}

.hero__lineup img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* --- Barra de facts ------------------------------------------------------ */
.facts {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.facts__list {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}

.facts__list > li {
  padding: 30px 0;
}

.facts__list > li + li {
  border-left: 1px solid var(--line);
  padding-left: 32px;
}

.facts b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.facts span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* ==== sections/marca.css ============================================ */
/* ============================================================================
   SECCIÓN · La marca y su propósito
   ============================================================================ */

.marca .lede {
  margin-top: 26px;
}

.marca .numbered {
  margin-top: 38px;
}

/* ==== sections/adaptogenos.css ====================================== */
/* ============================================================================
   SECCIÓN · Qué son los adaptógenos (oscura)
   ============================================================================ */

.adaptogenos__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}

.adaptogenos .h2 {
  max-width: 14em;
}

.adaptogenos__body {
  display: grid;
  gap: 22px;
  max-width: 40em;
  margin-top: 28px;
}

.adaptogenos__body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--on-dark-1);
  font-weight: 300;
}

.adaptogenos__body b {
  color: var(--soft-white);
  font-weight: 700;
}

/* ==== sections/porque.css =========================================== */
/* ============================================================================
   SECCIÓN · Por qué sumar Micelic
   ============================================================================ */

.porque__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}

.porque .numbered {
  margin-top: 8px;
}

/* ==== sections/productos.css ======================================== */
/* ============================================================================
   SECCIÓN · Slider de productos
   El carrusel es scroll nativo con snap: funciona sin JS (se arrastra), y el
   JS solo agrega flechas y dots. Ver assets/js/slider.js
   ============================================================================ */

.productos__head {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 44px;
}

.productos__head-text {
  flex: 1;
}

.productos__head .h2 {
  margin-top: 20px;
}

.productos__head .lede {
  margin-top: 20px;
  max-width: 34em;
}

/* --- Flechas ------------------------------------------------------------- */
.slider__nav {
  display: flex;
  gap: 10px;
  flex: none;
}

.slider__arrow {
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--t), opacity var(--t);
}

.slider__arrow:hover:not(:disabled) {
  border-color: var(--ink);
}

/* El prototipo no deshabilitaba las flechas en los extremos; acá sí, para que
   el estado del control diga la verdad (y lo anuncie el lector de pantalla). */
.slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.slider__arrow svg {
  width: 17px;
  height: 17px;
  stroke: var(--ink);
  stroke-width: 1.6;
  fill: none;
}

/* --- Carril -------------------------------------------------------------- */
.slider__viewport {
  /* Sangra el carril hasta el borde de la ventana, manteniendo el gutter. */
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}

.slider__track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
  list-style: none;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

/* --- Card de producto ---------------------------------------------------- */
.product {
  /* 3 cards visibles dentro del contenedor de 1240px con gutter y gaps. */
  flex: 0 0 calc((var(--maxw) - (var(--gutter) * 2) - 52px) / 3);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product__shot {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-shot);
}

.product__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Barra con el color de etiqueta del producto. */
.product__band {
  height: 5px;
  background: var(--band);
}

.product__info {
  /* Ancla el <h3 class="sr-only"> con el nombre del producto: sin esto su
     bloque contenedor cae fuera del carril y ensancha la pagina entera. */
  position: relative;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}

.product__props {
  list-style: none;
  margin: 16px 0 0;
  display: grid;
  gap: 11px;
}

.product__props li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 300;
}

.product__props li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
}

/* --- Pie: dots + nota ---------------------------------------------------- */
.slider__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}

.slider__dots {
  display: flex;
  gap: 7px;
}

.slider__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: #cfcfd2;
  cursor: pointer;
  transition: background var(--t);
}

.slider__dot[aria-current="true"] {
  background: var(--or);
}

.slider__note {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 300;
  margin-left: auto;
}

/* ==== sections/respaldo.css ========================================= */
/* ============================================================================
   SECCIÓN · Mucho más que productos
   ============================================================================ */

.respaldo .h2 {
  max-width: 18em;
}

.respaldo .lede {
  margin-top: 24px;
  max-width: 36em;
}

.respaldo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 52px;
  list-style: none;
}

.resource {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.resource__image {
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

.resource__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource__body {
  padding: 26px 26px 28px;
}

.resource__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 12px;
}

.resource h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.resource p {
  font-size: 15px;
  color: var(--ink-2);
  font-weight: 300;
  margin-top: 12px;
}

/* ==== sections/quiz.css ============================================= */
/* ============================================================================
   SECCIÓN · QR Quiz (oscura)
   ============================================================================ */

.quiz .h2 {
  max-width: 18em;
}

.quiz__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: center;
  margin-top: 52px;
}

.quiz__lede b {
  color: var(--soft-white);
  font-weight: 700;
}

.quiz .numbered {
  margin-top: 40px;
}

.quiz__cta {
  margin-top: 34px;
}

/* --- Tarjeta clara con el QR --------------------------------------------- */
.quiz__card {
  background: var(--soft-white);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 34px;
  text-align: center;
  box-shadow: var(--shadow-photo);
}

.quiz__card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 22px;
}

.quiz__qr {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.quiz__card h3 {
  font-size: 22px;
  margin-top: 26px;
  letter-spacing: -0.02em;
}

.quiz__card p {
  font-size: 14.5px;
  color: var(--ink-2);
  font-weight: 300;
  margin-top: 10px;
}

.quiz__url {
  display: block;
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}

/* ==== sections/punto.css ============================================ */
/* ============================================================================
   SECCIÓN · Micelic en tu punto de venta + FAQs
   ----------------------------------------------------------------------------
   Las FAQs son <details>/<summary> nativos. En desktop van abiertas y en dos
   columnas, como el diseño; en mobile se comportan como acordeón. El HTML
   viene con `open` puesto, así que sin JS el contenido igual se ve (y se
   indexa). Ver assets/js/accordion.js
   ============================================================================ */

.punto .lede {
  margin-top: 24px;
}

.punto .numbered {
  margin-top: 34px;
}

.punto__cta {
  margin-top: 34px;
}

/* --- FAQs ---------------------------------------------------------------- */
.faqs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 56px;
  margin-top: 44px;
}

.faq {
  border-top: 1px solid var(--line);
}

.faq:last-child {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  cursor: default;
  list-style: none;
}

/* Oculta el triangulito nativo en Safari/Chrome. */
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__icon {
  display: none; /* solo aparece en modo acordeón — ver responsive.css */
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  margin-top: 2px;
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--ink-3);
  border-radius: 2px;
  transition: transform var(--t);
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq[open] .faq__icon::after {
  transform: rotate(0deg);
}

.faq__a {
  padding: 0 0 24px;
  font-size: 15px;
  color: var(--ink-2);
  font-weight: 300;
}

.faq__a b {
  color: var(--ink);
  font-weight: 700;
}

/* ==== sections/precios.css ========================================== */
/* ============================================================================
   SECCIÓN · Precios mayoristas
   ----------------------------------------------------------------------------
   Es una <table> real: los precios son datos tabulares, y así los leen tanto
   un lector de pantalla como un buscador. Los valores están en un solo bloque
   del HTML, marcado con un comentario, para poder actualizarlos sin tocar nada
   más (ver README → "Actualizar precios").
   ============================================================================ */

.precios__table-wrap {
  margin-top: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.price-table th,
.price-table td {
  padding: 20px 26px;
  vertical-align: middle;
}

/* Columna de etiqueta más ancha que las dos de valores (1.5fr 1fr 1fr). */
.price-table th:first-child,
.price-table td:first-child {
  width: 43%;
}

.price-table thead {
  background: var(--surface-2);
}

.price-table thead th {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}

.price-table tbody tr {
  border-top: 1px solid var(--line);
}

.price-table th[scope="row"] {
  font-size: 17px;
  font-weight: 700;
}

.price-table th[scope="row"] small {
  display: block;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-3);
  margin-top: 4px;
}

.price-table td {
  font-size: 21px;
  font-weight: 700;
  text-align: right;
  letter-spacing: -0.02em;
}

.price-table thead th:not(:first-child) {
  text-align: right;
}

/* Fila de PVP sugerido: fondo propio y valores en gris. */
.price-table .is-pvp {
  background: var(--surface-3);
}

.price-table .is-pvp td {
  color: var(--ink-3);
}

/* --- Bloque de margen ---------------------------------------------------- */
.margin-box {
  border: 1.5px solid var(--or);
  border-radius: var(--r-lg);
  padding: 26px 30px;
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.margin-box__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  line-height: 1.4;
}

.margin-box__value {
  font-size: 38px;
  font-weight: 700;
  color: var(--or);
  letter-spacing: -0.03em;
}

/* --- Términos ------------------------------------------------------------ */
.terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 28px;
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 300;
  list-style: none;
}

.terms b {
  color: var(--ink);
  font-weight: 700;
}

/* ==== sections/cta.css ============================================== */
/* ============================================================================
   SECCIÓN · CTA final
   ============================================================================ */

.cta {
  position: relative;
  background: var(--dark-2);
  color: var(--soft-white);
  overflow: hidden;
}

.cta__bg {
  position: absolute;
  inset: 0;
  opacity: 0.34;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    #1d1f24 8%,
    rgba(29, 31, 36, 0.86) 48%,
    rgba(29, 31, 36, 0.42) 100%
  );
}

.cta__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 130px var(--gutter);
}

.cta__iso {
  width: 42px;
  margin-bottom: 34px;
}

.cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.04;
  max-width: 15em;
}

.cta p {
  margin-top: 24px;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.6;
  color: var(--on-dark-1);
  font-weight: 300;
}

.cta .actions {
  margin-top: 40px;
  align-items: center;
}

.cta__phone {
  font-size: 14px;
  color: rgba(255, 253, 246, 0.6);
  font-weight: 300;
}

.cta__phone b {
  color: var(--soft-white);
  font-weight: 700;
}

/* ==== sections/footer.css =========================================== */
/* ============================================================================
   SECCIÓN · Footer
   ============================================================================ */

.site-footer {
  background: var(--dark);
  color: var(--on-dark-4);
  padding: 52px 0;
}

.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 13px;
  font-weight: 300;
}

.site-footer__logo img {
  height: 22px;
  width: auto;
}

.site-footer__meta {
  margin-left: auto;
  display: flex;
  gap: 26px;
}

.site-footer a {
  color: inherit;
}

.site-footer a:hover {
  color: var(--soft-white);
}

/* ==== sections/floats.css =========================================== */
/* ============================================================================
   SECCIÓN · Botones flotantes
   ----------------------------------------------------------------------------
   Aparecen recién cuando el hero salió de pantalla, para no competir con los
   CTA del hero. Ver assets/js/floats.js — sin JS quedan siempre visibles.
   ============================================================================ */

.floats {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 60;
  display: flex;
  gap: 10px;
  align-items: center;
}

.floats .btn {
  font-size: 16px;
  padding: 16px 28px;
}

.floats .btn--primary {
  box-shadow: var(--shadow-float);
}

.floats .btn--ghost {
  background: var(--soft-white);
  color: var(--ink);
  box-shadow: var(--shadow-float-ghost);
}

.floats .btn--ghost:hover {
  box-shadow: 0 18px 44px -20px rgba(29, 31, 36, 0.5),
    inset 0 0 0 1.5px var(--ink);
}

/* Estado oculto: lo activa el JS mientras el hero está en pantalla. */
.floats.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.floats {
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}

/* ==== responsive.css ================================================ */
/* ============================================================================
   RESPONSIVE
   ----------------------------------------------------------------------------
   El prototipo del handoff está diseñado solo a 1240px; el comportamiento
   adaptativo se define acá, siguiendo las pautas de la sección "Responsive"
   del README de diseño.

     ≤1024px (tablet) · splits a una columna, 2 cards de producto, facts 2×2
     ≤760px  (mobile) · nav colapsado, todo apilado, 1 card, FAQs en acordeón

   Se mantiene el mínimo de 44px de área táctil en todo control interactivo.
   ============================================================================ */

/* ========================== TABLET · ≤1024px ============================= */
@media (max-width: 1024px) {
  :root {
    --gutter: 32px;
    --sec-y: 88px;
    --sec-y-tight: 72px;
  }

  /* --- Area tactil minima ----------------------------------------------
     El diseno define los botones con padding 13px/24px, que da 41px de alto
     (y 33px el chico del nav). En puntero grueso eso queda corto: el min-height
     los lleva a 44px sin tocar el padding ni, por lo tanto, el ancho. -------- */
  .btn {
    min-height: 44px;
  }

  /* --- Nav: se esconden los links, aparece la hamburguesa --------------- */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
    display: none;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    font-size: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .site-nav a:last-child {
    border-bottom: 0;
  }

  .nav-toggle {
    display: grid;
  }

  .site-header__inner .btn {
    margin-left: 0;
  }

  /* --- Splits a una columna, con la foto primero ------------------------ */
  .split,
  .adaptogenos__grid,
  .porque__grid,
  .quiz__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .adaptogenos .h2,
  .respaldo .h2,
  .quiz .h2 {
    max-width: none;
  }

  /* Las fotos verticales a pantalla completa quedan enormes: se limitan. */
  .photo--tall {
    aspect-ratio: 16 / 10;
  }

  /* --- Slider: 2 cards visibles ---------------------------------------- */
  .product {
    flex: 0 0 calc((100vw - (var(--gutter) * 2) - 26px) / 2);
  }

  .productos__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  /* --- Trio de recursos a 1 columna ------------------------------------ */
  .respaldo__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* --- Franja del quiz y facts: sin separadores verticales -------------- */
  .stripe {
    grid-template-columns: 1fr;
  }

  .stripe > li {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .stripe > li:last-child {
    border-bottom: 0;
  }

  .facts__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .facts__list > li {
    padding: 24px 0;
  }

  .facts__list > li + li {
    border-left: 0;
    padding-left: 0;
  }

  /* Línea divisoria horizontal entre las dos filas de facts. */
  .facts__list > li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .facts__list > li:nth-child(even) {
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }

  /* --- FAQs a una columna ---------------------------------------------- */
  .faqs {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }

  /* --- Footer apilado -------------------------------------------------- */
  .site-footer__inner {
    flex-wrap: wrap;
    gap: 18px 32px;
  }

  .site-footer__meta {
    margin-left: 0;
    flex-direction: column;
    gap: 8px;
  }

  /* --- CTA final ------------------------------------------------------- */
  .cta__inner {
    padding: 96px var(--gutter);
  }
}

/* ========================== MOBILE · ≤760px ============================== */
@media (max-width: 760px) {
  :root {
    --gutter: 22px;
    --sec-y: 68px;
    --sec-y-tight: 56px;
  }

  /* --- Hero ------------------------------------------------------------- */
  .hero {
    padding: 64px 0 0;
  }

  .hero__iso {
    width: 38px;
    margin-bottom: 26px;
  }

  .hero__sub {
    font-size: 17px;
    margin-top: 20px;
  }

  .hero .actions {
    margin-top: 28px;
  }

  /* A ancho completo: dos pills apretadas se leen mal y se tocan peor. */
  .hero .actions .btn,
  .cta .actions .btn {
    flex: 1 1 100%;
  }

  .hero__lineup {
    margin-top: 36px;
  }

  /* --- Tipografía ------------------------------------------------------- */
  .lede {
    font-size: 17px;
  }

  .h2 {
    margin-top: 16px;
  }

  /* --- Listas numeradas: el número arriba, no en columna ---------------- */
  .numbered {
    --num-col: 34px;
    --num-gap: 12px;
    --num-pad: 22px;
    --num-title: 17px;
  }

  .numbered p {
    font-size: 14.5px;
  }

  /* --- Facts: una sola columna ----------------------------------------- */
  .facts__list {
    grid-template-columns: 1fr;
  }

  .facts__list > li,
  .facts__list > li:nth-child(even) {
    padding: 20px 0;
    padding-left: 0;
    border-left: 0;
  }

  .facts__list > li + li {
    border-top: 1px solid var(--line);
  }

  .facts b {
    font-size: 22px;
  }

  /* --- Slider: 1 card visible, asomando la siguiente -------------------- */
  .product {
    flex: 0 0 82%;
  }

  .slider__track {
    gap: 16px;
  }

  .product__info {
    padding: 22px 22px 20px;
  }

  .slider__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .slider__note {
    margin-left: 0;
    font-size: 13.5px;
  }

  /* --- Chips: que no desborden la pill ---------------------------------- */
  .chips {
    margin-top: 26px;
    gap: 8px;
  }

  .chips li {
    font-size: 12.5px;
    padding: 7px 13px;
  }

  /* --- FAQs en modo acordeón ------------------------------------------- */
  .faq__q {
    cursor: pointer;
    padding: 18px 0;
  }

  .faq[open] .faq__q {
    padding-bottom: 6px;
  }

  .faq__icon {
    display: block;
  }

  .faq__a {
    padding-bottom: 20px;
  }

  /* --- Precios: la tabla necesita respirar ------------------------------ */
  .price-table th,
  .price-table td {
    padding: 14px 16px;
  }

  .price-table th:first-child,
  .price-table td:first-child {
    width: 40%;
  }

  .price-table th[scope="row"] {
    font-size: 15px;
  }

  .price-table th[scope="row"] small {
    font-size: 12px;
  }

  .price-table td {
    font-size: 16px;
  }

  .price-table thead th {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .margin-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 24px;
  }

  .margin-box__value {
    font-size: 32px;
  }

  .terms {
    gap: 10px 0;
    flex-direction: column;
  }

  /* --- QR Quiz ---------------------------------------------------------- */
  .quiz__card {
    padding: 26px;
  }

  /* --- CTA final -------------------------------------------------------- */
  .cta__inner {
    padding: 72px var(--gutter);
  }

  .cta p {
    font-size: 16px;
  }

  .cta__phone {
    flex: 1 1 100%;
  }

  /* --- Flotantes: solo el de pedido, centrado y sin tapar contenido ----- */
  .floats {
    right: 16px;
    left: 16px;
    bottom: 16px;
    justify-content: center;
  }

  .floats .btn--ghost {
    display: none;
  }

  .floats .btn {
    font-size: 15px;
    padding: 15px 26px;
    width: 100%;
  }
}

/* ===================== PANTALLAS ANCHAS · ≥1400px ======================== */
@media (min-width: 1400px) {
  .hero {
    padding-top: 120px;
  }
}