/* ============================================================================
   sections.css — Estilos de cada sección del long-scroll
   Regla de oro: nunca usar primitives. Solo tokens semánticos.
   Orden de implementación: hero · collection · story · artist · gallery · wholesale · newsletter
   ============================================================================ */


/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   Grid 3 filas: meta (auto) / título (1fr, ancla al final) / bottom (auto)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes strike-reveal {
  from { transform: translateY(-50%) rotate(-2deg) skewX(-12deg) scaleX(0); }
  to   { transform: translateY(-50%) rotate(-2deg) skewX(-12deg) scaleX(1); }
}

.hero {
  min-height: 100vh;
  padding: var(--s-9) var(--gutter) var(--s-7);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-6);
  background: var(--surface);
  position: relative;
  overflow: hidden;
  overflow-x: clip;   /* clip no crea contexto de scroll, evita que el título desborde */
}

/* Row 1: meta superior */
.hero__meta {
  color: var(--text-tertiary);
  animation: hero-fade var(--dur-slow) var(--ease-out) both;
}

/* Row 2: título masivo — se ancla al pie del área 1fr */
.hero__title {
  align-self: end;
  font-family: var(--font-display);
  font-size: var(--t-fluid-display);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-variation-settings: 'opsz' 144;
  max-width: 100%;
  overflow-wrap: break-word;
}

.hero__title-row { display: block; }

.hero__title-row--1 {
  animation: hero-fade-up var(--dur-slow) var(--dur-hero-2) var(--ease-out) both;
}

.hero__title-row--2 {
  position: relative;
  display: inline-block;
}

.hero__title-row--2 em {
  display: inline-block;
  font-style: italic;
  animation: hero-fade-up var(--dur-slow) var(--dur-hero-3) var(--ease-out) both;
}

/* Tachón coral — trazo orgánico */
.strike {
  position: absolute;
  top: 50%;
  left: -3%;
  width: 106%;
  height: clamp(14px, 1.6vw, 26px);
  background: var(--accent-primary);
  border-radius: 50% 30% 40% 60% / 50% 60% 30% 40%;
  opacity: 0.92;
  pointer-events: none;
  transform-origin: left center;
  animation: strike-reveal var(--dur-hero-strike) var(--dur-hero-strike-delay) var(--ease-out) both;
}

/* Row 3: bottom — 3 columnas ancladas al pie */
.hero__bottom {
  padding-top: var(--s-5);
  border-top: var(--border-hairline);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gutter);
  align-items: end;
}

.hero__lede {
  font-size: var(--t-18);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: 32ch;
  animation: hero-fade var(--dur-slow) var(--dur-hero-bottom-1) var(--ease-out) both;
}

.hero__lede em {
  font-style: italic;
  color: var(--text-primary);
}

.hero__cta {
  display: flex;
  justify-content: center;
  animation: hero-fade var(--dur-slow) var(--dur-hero-bottom-2) var(--ease-out) both;
}

.hero__credits {
  text-align: right;
  line-height: var(--lh-loose);
  animation: hero-fade var(--dur-slow) var(--dur-hero-bottom-3) var(--ease-out) both;
}

/* Corazón decorativo de fondo */
.hero__deco {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(220px, 50vw, 800px);
  height: auto;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

@media (max-width: 600px) {
  .hero__deco {
    right: -10%;
    left: auto;
    top: 45%;
    transform: translateY(-50%);
    width: clamp(280px, 95vw, 420px);
  }
}

/* Logo RL decorativo de fondo — visible solo en móvil */
.hero__deco-rl {
  display: none;
  position: absolute;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Todo el contenido del hero por encima del decorativo */
.hero__meta,
.hero__title,
.hero__bottom {
  position: relative;
  z-index: 1;
}

/* Logo imagen en hero */
.hero__logo {
  display: block;
  width: 100%;
  max-width: clamp(300px, 60vw, 700px);
  height: auto;
  animation: hero-fade-up var(--dur-slow) var(--dur-hero-2) var(--ease-out) both;
}

/* Hero responsive → ver responsive.css */


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION-HEAD — encabezado reutilizable (numeral + título + meta)
   ═══════════════════════════════════════════════════════════════════════════ */

.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-7);
  align-items: end;
  padding-bottom: var(--s-5);
  border-bottom: var(--border-hairline);
  margin-bottom: var(--s-7);
}

.section-head__num {
  color: var(--text-tertiary);
}

.section-head__title {
  font-size: var(--t-fluid-h2);
}

.section-head__meta {
  color: var(--text-tertiary);
  text-align: right;
}

/* Section-head responsive → ver responsive.css */


/* ═══════════════════════════════════════════════════════════════════════════
   COLLECTION
   ═══════════════════════════════════════════════════════════════════════════ */

/* Padding explícito — u-section lo aporta, pero lo declaramos para ser claros */
.collection {
  padding: var(--section-y) var(--gutter);
}

.collection > .u-container {
  padding-inline: 0;   /* el gutter ya viene del .collection, no duplicar */
}

/* Grid con hairlines de 1px — técnica: gap 1px + background alpha */
.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  /* primitive justified: el background actúa como "color de las hairlines" entre cards;
     no hay token semántico para border-color de grid, y --border-hairline no aplica a background */
  background: var(--a-ink-12);
  border: var(--border-hairline);
}

/* Card de producto */
.product {
  background: var(--surface);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  transition: background-color var(--dur-fast) var(--ease-out);
  cursor: pointer;
  position: relative;
}

.product:hover { background: var(--surface-raised); }

/* Tag — absolute top-right, borde completo + fondo paper para no mezclarse con el visual */
.product__tag {
  position: absolute;
  top: var(--s-6);
  right: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  padding: var(--s-1) var(--s-2);
  border: 1px solid currentColor;
  border-radius: var(--r-tag);
  background: var(--surface);
  line-height: 1;
  z-index: 2;
}

.product__tag--gold   { color: var(--accent-tertiary); }
.product__tag--launch { color: var(--accent-primary); }
.product__tag--new    { color: var(--text-primary); }

/* Visual — aspect 4/5, foto real centrada con fallback tipográfico */
.product__visual {
  aspect-ratio: 4 / 5;
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Foto real del producto — contain para ver el producto completo */
.product__img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90%;
  max-width: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
  z-index: 2;
  opacity: 0;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.product__img.is-loaded { opacity: 1; }

.product:hover .product__img {
  transform: translate(-50%, -53%);
}

/* Fallback tipográfico — casi invisible cuando la imagen carga */
.product__visual-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--text-primary);
  z-index: 1;
  text-align: center;
  line-height: 1;
  opacity: 0.12;
  pointer-events: none;
}

/* Tinte radial según categoría — usa tokens soft (no primitives) */
.product--gold .product__visual {
  background-image: radial-gradient(ellipse at 65% 25%, var(--accent-tertiary-soft) 0%, transparent 65%);
}

.product--launch .product__visual {
  background-image: radial-gradient(ellipse at 65% 25%, var(--accent-primary-soft) 0%, transparent 65%);
}

.product__visual-name {
  font-size: var(--t-fluid-h2);
  text-align: center;
  color: var(--text-primary);
  line-height: var(--lh-tight);
}

.product__visual-foot {
  position: absolute;
  bottom: var(--s-4);
  left: var(--s-4);
  right: var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.product__visual-caption,
.product__visual-vol {
  color: var(--text-tertiary);
}

/* Info: nombre + precio en fila */
.product__info {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.product__name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
}

.product__name {
  font-family: var(--font-display);
  font-size: var(--t-fluid-h4);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.product__price {
  font-family: var(--font-display);
  font-size: var(--t-fluid-h4);
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.product__sub {
  color: var(--text-tertiary);
}

.product__ean {
  color: var(--text-tertiary);
  font-size: var(--t-10);
  margin-top: calc(var(--s-2) * -1);
  margin-bottom: var(--s-2);
}

.product__ean span {
  color: var(--text-secondary);
}

.product__desc {
  font-size: var(--t-14);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: 38ch;
}

/* Foot — stack vertical: fila pack+add arriba, botón comprar abajo */
.product__foot {
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.product__foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}

.product__pack {
  color: var(--text-tertiary);
}

.product__add {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: var(--s-1);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.product__add:hover { color: var(--accent-primary); }

/* Botón "Comprar ahora" — ancho completo, fill accent */
.product__buy {
  width: 100%;
  justify-content: space-between;
  padding-block: var(--s-3);
}

/* Products responsive → ver responsive.css */


/* ═══════════════════════════════════════════════════════════════════════════
   STORY — primer cambio de mundo: paper → ink
   La clave es el blob atmosférico y el ritmo tipográfico del título.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes blob-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 2%) scale(1.05); }
}

.story {
  position: relative;
  overflow: hidden;
  /* u-section aporta el padding; theme-dark aporta surface-inverse + colores */
}

/* El blob — atmósfera difusa de Renate, no debe leerse como formas */
.story__bg {
  position: absolute;
  top: -10%;
  right: -15%;
  width: 70%;
  height: 90%;
  background: var(--gradient-renate-blob);
  filter: blur(var(--blur-blob));
  opacity: 0.65;
  pointer-events: none;
  z-index: var(--z-base);
  will-change: transform;
  transform: translateZ(0);
  animation: blob-drift var(--dur-blob) var(--ease-in-out) infinite alternate;
}

/* Layout 2 columnas — blob queda bajo el contenido con z-index 1 */
.story__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center;
}

/* Frame foto editorial vertical 4/5 */
.story__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: var(--border-hairline);
  background: var(--c-ink-800);
}

.story__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.92) contrast(1.05);
}

/* Caption horizontal debajo del frame */
.story__caption {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-3);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  letter-spacing: var(--ls-mono);
}

/* Copy: título */
.story__title {
  font-size: var(--t-fluid-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  margin-bottom: var(--s-7);
}

.story__title em {
  font-style: italic;
  color: var(--accent-primary);
  font-weight: 300;
}

/* Quote con borders hairline (en dark context → border-hairline = paper-18) */
.story__quote {
  padding: var(--s-6) 0;
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
  margin-bottom: var(--s-6);
  color: var(--text-primary);
}

/* Body */
.story__body {
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: var(--w-measure-narrow);
}

.story__body p + p { margin-top: var(--s-4); }

.story__body strong {
  color: var(--text-primary);
  font-weight: 400;
}

/* Credit footer */
.story__credit {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--border-hairline);
  display: flex;
  justify-content: space-between;
  color: var(--text-tertiary);
  font-size: var(--t-10);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ARTIST — vuelta al paper, retrato sticky en desktop
   ═══════════════════════════════════════════════════════════════════════════ */

.artist__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-9);
  align-items: start;
}

/* Sticky en desktop: se fija cuando el scroll llegaría a sacarla */
.artist__visual {
  position: sticky;
  top: calc(var(--s-9) + var(--s-3));
  align-self: start;
}

.artist__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface-raised);
  overflow: hidden;
}

/* Atmósfera difusa — queda como fallback detrás de la foto real */
.artist__portrait-bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-artist-portrait);
  filter: blur(40px);
  z-index: 1;
}

/* Foto real del retrato — cubre el frame 4/5 con object-fit: cover
   Foto es 4032x3024 (landscape 4:3). En un frame 4:5 (portrait):
   object-fit: cover escala por altura y recorta los lados (~20% cada lado).
   object-position: center 15% muestra la parte superior (cara) */
.artist__portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.artist__portrait-img.is-loaded { opacity: 1; }

.artist__visual-caption {
  margin-top: var(--s-3);
  display: flex;
  justify-content: space-between;
  color: var(--text-tertiary);
  font-size: var(--t-10);
}

/* Copy */
.artist__copy { padding-top: var(--s-7); }

.artist__name {
  font-size: var(--t-fluid-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}

.artist__name em {
  display: block;
  font-style: italic;
  color: var(--accent-primary);
  font-weight: 300;
}

.artist__role {
  color: var(--text-tertiary);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: var(--border-hairline);
}

.artist__quote {
  color: var(--text-primary);
  margin-bottom: var(--s-6);
}

.artist__body {
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: var(--w-measure-narrow);
}

.artist__body p + p { margin-top: var(--s-4); }

.artist__body strong {
  color: var(--text-primary);
  font-weight: 400;
  font-style: italic;
}

/* Stats */
.artist__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--border-hairline);
}

.artist__stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-h2);
  color: var(--accent-primary);
  font-variation-settings: 'opsz' 144;
}

.artist__stat-label {
  color: var(--text-tertiary);
  font-size: var(--t-10);
  margin-top: var(--s-3);
}

/* Handle — botón IG con flecha animada */
.artist__handle {
  margin-top: var(--s-7);
}

.artist__handle span:last-child {
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}

.artist__handle:hover span:last-child {
  transform: translate(2px, -2px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY — strip horizontal con scroll-snap
   ═══════════════════════════════════════════════════════════════════════════ */

.gallery {
  background: var(--surface-raised);
  padding-block: var(--section-y);
  overflow: hidden;
}

.gallery__head {
  padding-inline: var(--gutter);
  margin-bottom: var(--s-8);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: var(--border-hairline);
}

.gallery__title {
  font-size: var(--t-fluid-h2);
  margin-top: var(--s-3);
}

.gallery__title em {
  font-style: italic;
  color: var(--accent-primary);
}

.gallery__nav {
  display: flex;
  gap: var(--s-2);
  flex-shrink: 0;
}

/* Botones circulares con borde emphasis (más oscuro que hairline) */
.gallery__btn {
  width: var(--s-7);
  height: var(--s-7);
  border: var(--border-emphasis);
  border-radius: var(--r-circle);
  font-size: var(--t-14);
  transition: var(--tr-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gallery__btn:hover {
  background: var(--interactive-bg-hover);
  color: var(--interactive-fg-hover);
  border-color: var(--interactive-bg-hover);
}

.gallery__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Strip horizontal con scroll-snap */
.gallery__strip {
  display: flex;
  gap: var(--s-4);
  padding-inline: var(--gutter);
  padding-bottom: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.gallery__item {
  flex: 0 0 var(--w-gallery-item);
  scroll-snap-align: start;
}

.gallery__frame {
  aspect-ratio: 1;
  margin-bottom: var(--s-3);
  position: relative;
  overflow: hidden;
  transition: var(--tr-transform);
}

.gallery__item:hover .gallery__frame {
  transform: scale(0.98);
}

/* Frames con fotos reales — fondo surface-raised como fallback */
.gallery__frame--photo {
  background: var(--surface-raised);
}

.gallery__frame--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-pos, center);
  opacity: 0;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.gallery__frame--photo img.is-loaded { opacity: 1; }

.gallery__item:hover .gallery__frame--photo img {
  transform: scale(1.04);
}

.gallery__caption {
  display: flex;
  justify-content: space-between;
  color: var(--text-tertiary);
  font-size: var(--t-10);
}


/* ═══════════════════════════════════════════════════════════════════════════
   WHOLESALE — invitación de gallery opening, sección dark
   ═══════════════════════════════════════════════════════════════════════════ */

.wholesale__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-9);
  align-items: start;
}

.wholesale__title {
  font-size: var(--t-fluid-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  margin-top: var(--s-5);
  margin-bottom: var(--s-6);
}

.wholesale__title em {
  font-style: italic;
  color: var(--accent-primary);
  font-weight: 300;
}

.wholesale__lede {
  font-size: var(--t-18);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: var(--w-measure-narrow);
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: var(--border-hairline);
}

/* Features — lista editorial numerada */
.wholesale__features {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.wholesale__feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: start;
  padding-bottom: var(--s-5);
  border-bottom: var(--border-hairline);
}

.wholesale__feature:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.wholesale__feature-num {
  color: var(--accent-primary);
  font-size: var(--t-12);
  padding-top: var(--s-1);
}

.wholesale__feature-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-fluid-h4);
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

.wholesale__feature-desc {
  font-size: var(--t-14);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* Card de contacto — sticky, translúcida sobre ink */
.wholesale__card {
  background: var(--surface-card);
  border: var(--border-hairline);
  padding: var(--s-7);
  position: sticky;
  top: calc(var(--s-9) + var(--s-3));
}

.wholesale__card-quote {
  color: var(--text-primary);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: var(--border-hairline);
}

.wholesale__card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}

.wholesale__card-row {
  display: grid;
  grid-template-columns: var(--w-card-label) 1fr;
  gap: var(--s-4);
  align-items: baseline;
}

.wholesale__card-row dt {
  color: var(--text-tertiary);
  font-size: var(--t-10);
}

.wholesale__card-row dd {
  font-family: var(--font-body);
  color: var(--text-primary);
  font-size: var(--t-16);
}

/* Botón filled — variante del .btn base */
.btn--filled {
  background: var(--text-primary);
  color: var(--surface);
  border-color: var(--text-primary);
}

.btn--filled::before {
  background: var(--accent-primary);
}

.btn--filled:hover {
  color: var(--text-on-inverse);
  border-color: var(--accent-primary);
}

.wholesale__cta {
  width: 100%;
  justify-content: space-between;
  padding-block: var(--s-3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   NEWSLETTER — centrado, sobrio, interludio antes del footer
   ═══════════════════════════════════════════════════════════════════════════ */

.newsletter {
  text-align: center;
}

.newsletter__inner {
  max-width: var(--w-newsletter-content);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.newsletter__title {
  font-size: var(--t-fluid-h2);
  line-height: var(--lh-tight);
}

.newsletter__title em {
  font-style: italic;
  color: var(--accent-primary);
}

.newsletter__lede {
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: 50ch;
}

/* Form: input border-bottom + botón pill al lado */
.newsletter__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  width: 100%;
  max-width: var(--w-newsletter-form);
  margin-top: var(--s-3);
}

.newsletter__field {
  display: block;
  border-bottom: var(--border-emphasis);
  padding-bottom: var(--s-2);
}

.newsletter__field input {
  width: 100%;
  background: transparent;
  border: 0;
  padding: var(--s-3) 0;
  font-size: var(--t-16);
  color: var(--text-primary);
  outline: none;
}

.newsletter__field input::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}

.newsletter__fineprint {
  color: var(--text-tertiary);
  font-size: var(--t-10);
  margin-top: var(--s-4);
}