/* ============================================================
   Honest Paper — landing (diseño v3)
   Recreación del prototipo "Honest Paper v3.dc.html" de Claude Design.
   Prefijo hp- para poder convivir con los estilos del resto del sitio.
   ============================================================ */

/* Tipografías autoalojadas (norma del sitio: sin CDN de Google Fonts).
   Descargadas de Google Fonts (OFL), subset latin, fuentes variables. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-var-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/hanken-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/hanken-italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Shantell Sans';
  src: url('fonts/shantell-var-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Shantell Sans';
  src: url('fonts/shantell-italic-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}


:root {
  /* Verdes */
  --hp-green: #37b07a;          /* campo sólido: hero y configurador */
  --hp-green-deep: #0e2a1c;     /* bosque profundo: marquesina, pasos, footer */
  --hp-green-ink: #11633f;      /* texto manuscrito sobre claro */
  --hp-green-mid: #128a4f;      /* acentos pequeños */
  --hp-green-note: #0b3f2e;     /* notas sobre verde */
  --hp-green-soft: #abe6b6;     /* notas sobre oscuro */
  --hp-sage: #cde3a4;           /* salvia */
  --hp-sage-bg: #e6efdd;        /* fondo productos */
  --hp-sage-bg-2: #eef4e6;      /* fondo FAQ */

  /* Tinta y papel */
  --hp-ink: #10241a;
  --hp-ink-hover: #1c3b2b;
  --hp-paper: #f6f1e3;
  --hp-paper-warm: #fffdf7;
  --hp-paper-light: #fdf8ea;
  --hp-paper-dark: #efe7d0;
  --hp-cream: #f4efdf;

  /* Tipografías */
  --hp-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --hp-text: 'Hanken Grotesk', system-ui, sans-serif;
  --hp-hand: 'Shantell Sans', 'Segoe Script', cursive;
  --hp-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Vidrio esmerilado */
  --hp-blur-nav: blur(18px) saturate(1.4);
  --hp-blur-frame: blur(22px) saturate(1.3);
  --hp-blur-panel: blur(26px) saturate(1.4);
  --hp-blur-badge: blur(10px);
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--hp-green);
  font-family: var(--hp-text);
  color: var(--hp-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--hp-green-ink); text-decoration: none; }
a:hover { color: #0b4834; }

::selection { background: rgba(69, 196, 124, .4); }

img { max-width: 100%; }

.hp-img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: rgba(16, 36, 26, .06);
}

.hp-container { max-width: 1220px; margin: 0 auto; padding: 0 28px; }
.hp-container--narrow { max-width: 860px; }

/* Grano de textura sobre toda la página */
.hp-grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
}

/* Resplandores de esquina (blobs con blur) */
.hp-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- Tipografía compartida ---------- */

.hp-h1 {
  margin: 0;
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 57.5px);
  line-height: 1.01;
  letter-spacing: -.03em;
  color: var(--hp-ink);
  text-wrap: pretty;
}
.hp-h1__accent { color: var(--hp-paper-light); }

.hp-h2 {
  margin: 0;
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--hp-ink);
  max-width: 760px;
  text-wrap: pretty;
}
.hp-h2--light { color: var(--hp-sage); }
.hp-h2__accent { color: var(--hp-cream); }
.hp-h2--panel {
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1.02;
  max-width: none;
}
.hp-h2--story { margin: 0; }
.hp-h2--faq { font-size: clamp(34px, 4vw, 52px); max-width: none; }

/* Notas manuscritas */
.hp-hand {
  font-family: var(--hp-hand);
  font-weight: 500;
  color: var(--hp-green-ink);
}

/* Subrayado de rotulador (transparente 60% / trazo 40%) */
.hp-highlight {
  background: linear-gradient(transparent 60%, rgba(69, 196, 124, .35) 60%);
}

.hp-mono {
  font-family: var(--hp-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(16, 36, 26, .45);
}

/* ---------- Wordmark "honest" con subrayado cóncavo ascendente ---------- */

.hp-mark { position: relative; display: inline-block; }
.hp-mark__underline { position: absolute; left: 0; width: 100%; overflow: visible; }
.hp-mark__underline--nav { bottom: -3px; height: 7px; }
/* La caja se estira sin conservar proporciones (preserveAspectRatio="none"),
   asi que su relacion de aspecto tiene que parecerse a la del viewBox (10:1) o
   el trazo se afina. A .13em el pie lo estiraba 2,7 veces mas que la cabecera. */
.hp-mark__underline--footer { left: .02em; bottom: -.06em; width: 96%; height: .3em; }

/* ---------- Botones ---------- */

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}

/* Flecha de los botones de acción: refuerza que ahí se hace clic */
.hp-btn__arrow {
  flex: none;
  transition: transform .2s;
}
.hp-btn:hover .hp-btn__arrow { transform: translateX(3px); }
.hp-btn__arrow--down { opacity: .75; }
.hp-btn:hover .hp-btn__arrow--down { transform: translateY(3px); opacity: 1; }

.hp-btn--dark {
  background: var(--hp-ink);
  color: var(--hp-paper);
  font: 600 16.5px var(--hp-text);
  padding: 16px 32px;
  box-shadow: 0 18px 40px -16px rgba(14, 42, 28, .5);
}
.hp-btn--dark:hover {
  background: var(--hp-ink-hover);
  color: var(--hp-paper);
  transform: translateY(-1px);
}

.hp-btn--sm {
  font: 600 14px var(--hp-text);
  padding: 10px 22px;
  box-shadow: none;
  gap: 8px;
}
.hp-btn--sm:hover { transform: none; }

.hp-btn--lg { font: 600 17px var(--hp-text); padding: 17px 36px; flex: none; }

.hp-btn--glass {
  background: rgba(253, 250, 240, .35);
  backdrop-filter: var(--hp-blur-badge);
  -webkit-backdrop-filter: var(--hp-blur-badge);
  border: 1px solid rgba(253, 250, 240, .55);
  color: var(--hp-ink);
  font: 600 15.5px var(--hp-text);
  padding: 15px 28px;
}
.hp-btn--glass:hover { background: rgba(253, 250, 240, .55); color: var(--hp-ink); }

/* Botón fantasma del nav (no usar --glass aquí: por orden de cascada pisaría
   la font y el padding de --sm) */
.hp-btn--ghost {
  background: transparent;
  border: 1px solid rgba(16, 36, 26, .28);
  color: var(--hp-ink);
}
.hp-btn--ghost:hover { background: rgba(16, 36, 26, .06); color: var(--hp-ink); }

/* ---------- Cápsula del nav ----------
   Los dos botones y el selector de idioma van dentro de una sola pieza: el
   borde y el fondo los pone este contenedor, no cada elemento. El CTA conserva
   su relleno oscuro para que juntarlo todo no aplane la jerarquía, y el
   selector queda a la derecha del todo, separado por una línea de pelo. */

.hp-nav__actions {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(16, 36, 26, .15);
  border-radius: 999px;
  background: rgba(255, 253, 247, .5);
  backdrop-filter: var(--hp-blur-badge);
  -webkit-backdrop-filter: var(--hp-blur-badge);
}

/* Dentro de la cápsula el botón fantasma pierde su propio borde. */
.hp-nav__actions .hp-btn--ghost {
  border: 0;
  background: transparent;
}
.hp-nav__actions .hp-btn--ghost:hover { background: rgba(16, 36, 26, .07); }

/* ---------- Selector de idioma ---------- */

.hp-lang {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-left: 14px;
  padding-left: 14px;
}
.hp-lang::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: rgba(16, 36, 26, .18);
}
.hp-lang__opt {
  display: flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 12px;
  font: 700 12px var(--hp-text);
  letter-spacing: .04em;
  line-height: 1;
  color: rgba(16, 36, 26, .42);
  transition: background .2s, color .2s;
}
.hp-lang__opt:hover { background: rgba(16, 36, 26, .07); color: var(--hp-ink); }
/* El activo se marca con un relleno suave, no oscuro: dos piezas negras
   seguidas competirían con el CTA. */
.hp-lang__opt.is-on {
  background: rgba(16, 36, 26, .09);
  color: var(--hp-ink);
}
.hp-lang__opt:focus-visible { outline: 2px solid var(--hp-ink); outline-offset: 2px; }

/* ---------- Píldoras de vidrio sobre imagen ---------- */

.hp-badge {
  position: absolute;
  z-index: 2;
  background: rgba(16, 36, 26, .5);
  backdrop-filter: var(--hp-blur-badge);
  -webkit-backdrop-filter: var(--hp-blur-badge);
  border: 1px solid rgba(253, 250, 240, .25);
  color: var(--hp-paper-light);
  border-radius: 999px;
  font: 600 12.5px var(--hp-text);
  letter-spacing: .04em;
  padding: 7px 14px;
}
.hp-badge--hero {
  top: 32px;
  right: 32px;
  background: rgba(16, 36, 26, .55);
  font: 600 14px var(--hp-text);
  letter-spacing: normal;
  padding: 9px 18px;
}
.hp-badge--card { top: 16px; left: 16px; }

/* ---------- Nav ---------- */

.hp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(246, 241, 227, .72);
  backdrop-filter: var(--hp-blur-nav);
  -webkit-backdrop-filter: var(--hp-blur-nav);
  border-bottom: 1px solid rgba(16, 36, 26, .08);
}
.hp-nav__inner {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hp-logo {
  font-family: var(--hp-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.03em;
  color: var(--hp-ink);
}
.hp-logo:hover { color: var(--hp-ink); }
.hp-logo__dot { color: var(--hp-green-mid); }

/* ---------- Hero ---------- */

.hp-hero {
  position: relative;
  overflow: hidden;
  background: var(--hp-green);
  padding: 104px 0 58px;
  /* Contiene el apilado para poder colar los resplandores entre la foto y el
     texto (ver .hp-hero__art / .hp-hero__copy). */
  isolation: isolate;
}
/* Los resplandores tiñen el campo verde; si la foto quedara por encima, su
   canto opaco recortaría un rectángulo visible sobre ese tinte. Pasándolos por
   encima de la foto, la lavan igual que al fondo y la costura desaparece. El
   texto se mantiene por encima de todo. */
.hp-hero__art { z-index: 0; }
.hp-glow--hero-a, .hp-glow--hero-b { z-index: 1; }
.hp-hero__copy { position: relative; z-index: 2; }
.hp-glow--hero-a {
  top: -260px; right: -140px; width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(253, 250, 240, .32), transparent 65%);
  filter: blur(80px);
}
.hp-glow--hero-b {
  bottom: -300px; left: -200px; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(14, 42, 28, .22), transparent 65%);
  filter: blur(90px);
}
.hp-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 56px;
  align-items: center;
}
.hp-hero__lead {
  margin: 28px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(16, 36, 26, .82);
  max-width: 520px;
}
.hp-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 36px;
}
.hp-hero__note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 28px;
  margin-left: 20px;
  color: var(--hp-green-note);
}
.hp-hero__note svg { flex: none; margin-top: -6px; }
.hp-hero__note-text {
  font-style: italic;
  font-size: 18.5px;
  line-height: 1.45;
  color: inherit;
  display: inline-block;
  max-width: 380px;
}

/* La pieza del hero es un SVG sin fondo: el verde de la sección es su fondo,
   así que no lleva marco ni recorte rectangular. */
.hp-hero__art {
  position: relative;
  display: flex;
  justify-content: center;
}
.hp-hero__art-img {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  /* Sin máscara a propósito: el fondo del JPEG ya está igualado a --hp-green,
     así que el canto de la foto es indistinguible del campo de la sección. Un
     fundido aquí sobraría y además se comería los faldones de la caja, que
     llegan al 2,4% del borde. */
}

/* ---------- Marquesina ---------- */

.hp-marquee {
  position: relative;
  background: var(--hp-green-deep);
  overflow: hidden;
  padding: 16px 0;
}
.hp-marquee__track {
  display: flex;
  width: max-content;
  animation: hp-marquee 30s linear infinite;
}
.hp-marquee__group {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
}
.hp-marquee__word {
  font-family: var(--hp-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hp-sage);
  white-space: nowrap;
}
.hp-marquee__star { color: var(--hp-green); font-size: 15px; }

@keyframes hp-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Secciones ---------- */

.hp-section { position: relative; overflow: hidden; padding: 120px 0; }
.hp-section--label { background: var(--hp-paper); }
.hp-section--products { background: var(--hp-sage-bg); padding: 120px 0 0; }
.hp-section--how { background: var(--hp-green-deep); }
.hp-section--config { background: var(--hp-green); }
.hp-section--story { background: linear-gradient(180deg, var(--hp-paper), var(--hp-paper-dark)); }
.hp-section--faq { background: var(--hp-sage-bg-2); overflow: visible; }

.hp-section .hp-container { position: relative; }

/* ---------- La etiqueta ---------- */

.hp-glow--label {
  top: -180px; right: -140px; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(69, 196, 124, .16), transparent 65%);
  filter: blur(70px);
}
.hp-label__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 56px;
  align-items: center;
  margin-top: 60px;
}
.hp-label-card {
  background: var(--hp-paper-warm);
  border: 1px solid rgba(16, 36, 26, .07);
  border-radius: 24px;
  padding: 36px 38px;
  box-shadow: 0 34px 80px -40px rgba(16, 36, 26, .4);
  max-width: 520px;
}
.hp-label-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.hp-label-card__title {
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hp-ink);
}

.hp-rule--thick { height: 3px; background: var(--hp-ink); }
.hp-rule--head { margin: 12px 0 20px; }
.hp-rule--foot { margin: 24px 0 16px; }
.hp-rule--hair { height: 1px; background: rgba(16, 36, 26, .13); margin: 22px 0; }
.hp-rule--panel { height: 1px; background: rgba(16, 36, 26, .15); margin: 36px 0 26px; }

.hp-eyebrow {
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hp-eyebrow--yes { color: var(--hp-green-mid); }
.hp-eyebrow--no { color: rgba(16, 36, 26, .5); }
.hp-eyebrow--group { color: rgba(16, 36, 26, .55); margin-top: 36px; }
.hp-eyebrow--group-2 { margin-top: 30px; }

.hp-list { display: flex; flex-direction: column; margin-top: 14px; }
.hp-list--yes { gap: 12px; }
.hp-list--no { gap: 11px; }
.hp-list--compact { gap: 10px; margin-top: 20px; }
.hp-list__item { display: flex; gap: 12px; align-items: flex-start; }
.hp-list__item--center { align-items: center; }
.hp-list--compact .hp-list__item { gap: 11px; }

.hp-tick, .hp-cross {
  flex: none;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-tick { background: var(--hp-green); color: #0b2519; font: 800 12px var(--hp-text); }
.hp-tick--sm { width: 21px; height: 21px; font: 800 11px var(--hp-text); }
.hp-cross { background: rgba(16, 36, 26, .07); color: rgba(16, 36, 26, .5); font: 700 11px var(--hp-text); }

.hp-list__text { font: 600 17px/1.4 var(--hp-text); color: var(--hp-ink); }
.hp-list__text--struck {
  font: 500 16.5px var(--hp-text);
  color: rgba(16, 36, 26, .55);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.hp-list__text--sm { font: 500 15.5px/1.45 var(--hp-text); color: rgba(16, 36, 26, .8); }

.hp-label-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.hp-barcode {
  width: 86px;
  height: 30px;
  background: repeating-linear-gradient(90deg, var(--hp-ink) 0 2px, transparent 2px 5px);
}

.hp-label__notes {
  display: flex;
  flex-direction: column;
  gap: 38px;
  max-width: 540px;
}
.hp-tree__figure {
  align-self: center;
  display: flex;
  justify-content: center;
}
.hp-tree__img {
  display: block;
  width: min(310px, 74vw);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 0 26px 52px -20px rgba(16, 36, 26, .38);
}
.hp-tree__note {
  margin: 0;
  font-size: 21px;
  line-height: 1.55;
}
/* Los márgenes negativos comen parte del gap de 38px del contenedor, para que
   la flecha quede pegada a la pregunta y su punta entre en el dibujo. */
.hp-tree__arrow {
  align-self: flex-start;
  margin: -14px 0 -24px clamp(24px, 24%, 150px);
  color: var(--hp-green-ink);
}
.hp-label__note-big {
  margin: 0;
  font-size: 24px;
  line-height: 1.5;
}

/* Banda verde de prueba */
.hp-band {
  position: relative;
  overflow: hidden;
  background: var(--hp-green);
  border-radius: 28px;
  padding: 44px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  margin-top: 90px;
  box-shadow: 0 40px 90px -46px rgba(14, 42, 28, .6);
}
.hp-glow--band {
  top: -160px; right: -100px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(253, 250, 240, .35), transparent 65%);
  filter: blur(60px);
}
.hp-band__copy { position: relative; max-width: 600px; }
.hp-band__title {
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--hp-ink);
  text-wrap: pretty;
}
.hp-band__note {
  margin-top: 10px;
  font-style: italic;
  font-size: 17.5px;
  color: var(--hp-green-note);
  display: inline-block;
}
.hp-band__cta { position: relative; flex: none; }

/* ---------- Productos ---------- */

.hp-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 56px;
}
.hp-product {
  position: relative;
  background: var(--hp-paper-warm);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 34px 80px -44px rgba(16, 36, 26, .45);
}
.hp-img--product { height: 270px; }
.hp-product__body { padding: 28px 32px 34px; }
.hp-product__title {
  margin: 0;
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.015em;
  color: var(--hp-ink);
}
.hp-product__cta { margin-top: 24px; font: 600 15px var(--hp-text); padding: 13px 26px; }
.hp-product__note {
  margin: 8px 0 0;
  font-size: 17px;
}

.hp-macro { position: relative; margin-top: 90px; }
.hp-img--macro { height: 340px; }

/* ---------- Cómo funciona ---------- */

.hp-glow--how-a {
  top: -220px; right: -160px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(69, 196, 124, .18), transparent 65%);
  filter: blur(80px);
}
.hp-glow--how-b {
  bottom: -260px; left: -180px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(205, 227, 164, .1), transparent 65%);
  filter: blur(80px);
}
.hp-how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 56px;
  align-items: center;
  margin-top: 60px;
}
.hp-steps { display: flex; flex-direction: column; gap: 18px; }
.hp-step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: rgba(244, 239, 223, .06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(244, 239, 223, .13);
  border-radius: 22px;
  padding: 26px 28px;
}
.hp-step__num {
  flex: none;
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--hp-green);
  letter-spacing: -.02em;
}
.hp-step__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.hp-step__title {
  margin: 0;
  font-family: var(--hp-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--hp-cream);
}
.hp-step__text {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(244, 239, 223, .66);
}
/* Misma lógica que el hero: el verde bosque de la sección atraviesa el SVG. */
.hp-how__media {
  position: relative;
  display: flex;
  justify-content: center;
}
.hp-how__art {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  /* Escena fotográfica: aquí no hay color plano que igualar, así que el canto
     se apaga con un fundido que sí llega a alfa 0 en los cuatro lados. Las
     rampas están dimensionadas para no tocar la caja, que deja libre el 14% a
     los lados y el 13% por abajo. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

/* ---------- Configurador ---------- */

.hp-glow--config-a {
  top: -200px; left: -140px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(253, 250, 240, .3), transparent 65%);
  filter: blur(80px);
}
.hp-glow--config-b {
  bottom: -240px; right: -160px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(14, 42, 28, .24), transparent 65%);
  filter: blur(90px);
}
.hp-panel {
  background: rgba(250, 247, 238, .62);
  backdrop-filter: var(--hp-blur-panel);
  -webkit-backdrop-filter: var(--hp-blur-panel);
  border: 1px solid rgba(253, 250, 240, .65);
  border-radius: 32px;
  padding: clamp(32px, 5vw, 56px);
  max-width: 980px;
  margin: 0 auto;
  box-shadow: 0 50px 110px -50px rgba(14, 42, 28, .55);
}
.hp-options {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.hp-options--product { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.hp-options--freq { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.hp-option {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font-family: inherit;
  border: 0;
  background: rgba(255, 255, 255, .72);
  border-radius: 18px;
  padding: 18px 20px;
  cursor: pointer;
  transition: background .2s;
}
.hp-option:hover { background: rgba(255, 255, 255, .95); }
.hp-option:focus-visible { outline: 2px solid var(--hp-ink); outline-offset: 3px; }
.hp-option__title { display: block; font: 700 17px var(--hp-text); color: var(--hp-ink); }
.hp-option__sub { display: block; margin-top: 4px; font: 500 14px var(--hp-text); color: rgba(16, 36, 26, .55); }

.hp-option[aria-checked="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--hp-ink);
  border-radius: 18px;
  pointer-events: none;
}
.hp-option[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hp-ink);
  color: var(--hp-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 11px var(--hp-text);
}

.hp-price {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
}
.hp-price__figure {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.hp-price__amount {
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -.025em;
  color: var(--hp-ink);
}
.hp-price__unit { font: 500 16px var(--hp-text); color: rgba(16, 36, 26, .6); }
.hp-price__note {
  margin-top: 16px;
  font-size: 16.5px;
  display: inline-block;
}

/* ---------- Historia ---------- */

.hp-glow--story {
  top: -160px; right: -120px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(69, 196, 124, .14), transparent 65%);
  filter: blur(70px);
}
.hp-story__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 64px;
  align-items: center;
}
.hp-story__text {
  margin: 26px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(16, 36, 26, .75);
  max-width: 560px;
}
.hp-story__claim {
  margin: 22px 0 0;
  font-family: var(--hp-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--hp-ink);
  max-width: 560px;
}
.hp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hp-chip {
  border: 1px solid rgba(16, 36, 26, .22);
  background: rgba(255, 253, 247, .6);
  padding: 8px 16px;
  border-radius: 999px;
  font: 600 13.5px var(--hp-text);
  color: var(--hp-ink);
}
.hp-story__media { position: relative; }
.hp-img--story {
  height: 420px;
  border-radius: 26px;
  box-shadow: 0 44px 100px -46px rgba(16, 36, 26, .55);
}

/* ---------- FAQ ---------- */

.hp-faq { margin-top: 44px; border-top: 1px solid rgba(16, 36, 26, .2); }
.hp-faq__item { border-bottom: 1px solid rgba(16, 36, 26, .14); }
.hp-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--hp-display);
  font-weight: 600;
  font-size: 19.5px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--hp-ink);
  list-style: none;
}
.hp-faq__q::-webkit-details-marker { display: none; }
.hp-faq__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(16, 36, 26, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 16px var(--hp-text);
  color: var(--hp-ink);
}
.hp-faq__a {
  margin: 0;
  padding: 0 54px 24px 0;
  font: 400 16.5px/1.65 var(--hp-text);
  color: rgba(16, 36, 26, .75);
}

/* ---------- Footer ---------- */

.hp-footer {
  position: relative;
  overflow: hidden;
  background: var(--hp-green-deep);
  padding: 80px 0 44px;
}
.hp-footer .hp-container { position: relative; }
.hp-glow--footer {
  bottom: -260px; right: -140px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(69, 196, 124, .2), transparent 65%);
  filter: blur(80px);
}
.hp-footer__wordmark {
  font-family: var(--hp-display);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 52px);
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--hp-cream);
}
.hp-footer__dot { color: var(--hp-green); }
.hp-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  margin-top: 44px;
  border-top: 1px solid rgba(244, 239, 223, .16);
  padding-top: 28px;
}
.hp-footer__legal { font-size: 13.5px; color: rgba(244, 239, 223, .55); }
.hp-footer__links { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.hp-footer__links a {
  font: 600 14px var(--hp-text);
  color: rgba(244, 239, 223, .75);
  transition: color .2s;
}
.hp-footer__links a:hover { color: var(--hp-green-soft); }

/* ---------- Móvil ---------- */

@media (max-width: 640px) {
  .hp-container { padding: 0 20px; }
  .hp-nav__actions { gap: 3px; padding: 3px; }
  .hp-nav__actions .hp-btn--sm { font: 600 12.5px var(--hp-text); padding: 9px 14px; }
  .hp-lang { margin-left: 10px; padding-left: 10px; }
  .hp-lang__opt { padding: 6px 9px; font-size: 11.5px; }
  .hp-nav__manage { display: none; }
  .hp-logo { font-size: 18px; }
  /* El tope no baja de la altura de la barra fija (68px): en móvil el titular
     es el primer elemento de la columna y se le metería debajo. Por encima de
     esos 68 va el aire de verdad entre la barra y el titular. */
  .hp-hero { padding: 136px 0 36px; }
  /* La foto tiene que asomar sin hacer scroll, así que lo que se le da de aire
     al titular se le quita al resto de la columna. El hueco entre el texto y la
     foto es de donde más se saca: 56px en una pantalla de 740 son un lujo. */
  .hp-hero__grid { gap: 24px; }
  .hp-hero__lead { margin-top: 18px; font-size: 17px; line-height: 1.5; }
  .hp-hero__actions { margin-top: 22px; gap: 10px; }
  /* Con las medidas de escritorio los dos botones no caben en una fila y se
     parten, y ahí se van 55px de alto. Repartiéndose el ancho a medias caben
     en cualquier móvil, y de paso quedan alineados en vez de escalonados. */
  .hp-hero__actions .hp-btn { flex: 1 1 0; min-width: 0; }
  .hp-hero__actions .hp-btn--dark { font-size: 15px; padding: 13px 16px; }
  .hp-hero__actions .hp-btn--glass { font-size: 14.5px; padding: 12px 14px; }
  .hp-hero__note { margin-top: 18px; margin-left: 6px; gap: 7px; }
  .hp-hero__note svg { width: 26px; height: 30px; margin-top: -2px; }
  .hp-hero__note-text { font-size: 15px; line-height: 1.35; max-width: 290px; }
  .hp-section { padding: 84px 0; }
  .hp-section--products { padding: 84px 0 0; }
  .hp-label-card { padding: 30px 24px; }
  .hp-band { padding: 32px 26px; margin-top: 64px; }
  .hp-macro { margin-top: 64px; }
  .hp-product__body { padding: 24px 24px 30px; }
  .hp-step { padding: 22px 22px; gap: 18px; }
  .hp-price__amount { font-size: 46px; }
  .hp-faq__a { padding-right: 0; }
  /* El JPEG lleva un 24% de verde vacío por arriba, que en escritorio hace de
     aire pero en móvil son 100px que retrasan la caja. Se recorta casi todo
     por arriba: el verde del recorte es el mismo de la sección, así que no se
     nota, y la caja entra en pantalla sin hacer scroll. */
  .hp-hero__art-img {
    max-width: 330px;
    aspect-ratio: 1122 / 1102;
    object-fit: cover;
    object-position: center bottom;
  }
  .hp-how__art { max-width: 320px; }
  .hp-tree__arrow { margin-left: clamp(16px, 16%, 90px); }
  .hp-img--macro { height: 240px; }
  .hp-img--story { height: 320px; }
}

/* Pantallas muy estrechas (iPhone SE y similares): el logo, el selector y el
   CTA no caben en una línea con las medidas de arriba. Este bloque aprieta
   SOLO la cabecera; la maqueta la sigue marcando el bloque de 640px. */
@media (max-width: 360px) {
  .hp-container { padding: 0 14px; }
  .hp-nav__actions { gap: 2px; padding: 3px; }
  .hp-logo { font-size: 15px; }
  .hp-lang { margin-left: 7px; padding-left: 7px; }
  .hp-lang__opt { padding: 0 6px; font-size: 10px; letter-spacing: 0; }
  .hp-nav__actions .hp-btn--sm { font: 600 11px var(--hp-text); padding: 8px 10px; gap: 5px; }
}

/* ---------- Aviso de checkout en configuración (añadido de integración) ---------- */

.hp-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 110;
  background: var(--hp-ink);
  color: var(--hp-paper);
  padding: 12px 24px;
  border-radius: 999px;
  font: 500 15px var(--hp-text);
  box-shadow: 0 18px 40px -16px rgba(14, 42, 28, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.hp-toast.is-on { opacity: 1; }

/* ---------- Movimiento reducido (añadido de integración) ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hp-marquee__track { animation: none; }
  .hp-btn, .hp-option, .hp-btn__arrow { transition: none; }
}