/* ==========================================================================
   Formación Nueva Línea Espiral Libra — Boticario Solar + Biocéntrica
   ========================================================================== */

/* --- Tipografías (servidas localmente, sin llamadas externas) ------------ */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/cormorant-garamond-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/cormorant-garamond-500-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/cormorant-garamond-600-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url(fonts/jost-300-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/jost-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/jost-500-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/jost-600-latin.woff2) format('woff2');
}

/* --- Sistema de diseño --------------------------------------------------- */
:root {
  /* Tres fondos que se alternan: beige de base, verde salvia en bloques
     puntuales, verde profundo para los dos momentos de más peso.
     El salvia sale de la web de referencia (yerbateria.com). */
  --crudo:        #FAF7F0;
  --salvia:       #97AF8F;
  --salvia-claro: #A8BFA1;
  --verde:        #2B3A2E;

  --tinta:        #1A1A18;
  --tinta-suave:  #4A4A44;   /* 8.34:1 sobre beige */
  --verde-claro:  #26332A;

  /* Acento cálido: 5.34:1 sobre beige como texto, 5.13:1 como fondo de botón. */
  --antetitulo:   #A55A2B;
  --terracota:    #A55A2B;
  --terracota-h:  #8A4820;
  --terracota-deco: #C97B4A;

  --amarillo:     #F2F211;
  --linea:        #DED5C4;
  /* Blanco verdoso para textos sobre el verde profundo. */
  --hueso:        #E8EDE5;
  --hueso-suave:  #CFDACB;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;

  --ancho:      1180px;
  --ancho-texto: 660px;
  --aire:       clamp(4.5rem, 9vw, 8.5rem);
  --radio:      2px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crudo);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
  /* Cormorant trae cifras de estilo antiguo por defecto: quedan desalineadas
     junto a mayúsculas ("USD 333", "6 fórmulas"). Forzamos cifras de caja alta. */
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}
h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); }
h2 { font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* --- Piezas reutilizables ------------------------------------------------ */
.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.seccion { padding-block: var(--aire); }
/* Bloque en verde salvia. Redefine los tokens que dependen del fondo:
   sobre salvia el terracota como texto cae a 2.16:1, así que los antetítulos
   pasan a verde profundo y el gris de párrafo se oscurece. */
.seccion--salvia {
  background: var(--salvia);
  --tinta-suave: #2E2E2A;   /* 5.74:1 sobre salvia */
  --linea: #7E9676;
  --terracota-deco: #6B2F0C;
}
.seccion--salvia .antetitulo { color: var(--verde-claro); }
.seccion--salvia .producto { background: var(--crudo); }

/* Bloque en verde profundo. */
.seccion--verde {
  background: var(--verde);
  color: var(--hueso);
  --tinta-suave: var(--hueso-suave);
  --linea: rgba(232, 237, 229, 0.2);
}

.antetitulo {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--antetitulo);
  margin: 0 0 1.1rem;
}
.seccion--verde .antetitulo { color: var(--amarillo); }

.texto-guia {
  max-width: var(--ancho-texto);
  color: var(--tinta-suave);
  font-size: 1.08em;
}
.seccion--verde .texto-guia { color: var(--hueso-suave); }

.centrado { text-align: center; }
.centrado .texto-guia { margin-inline: auto; }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1.05em 2.3em;
  background: var(--terracota);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radio);
  transition: background 0.25s ease, transform 0.25s ease;
}
.boton:hover, .boton:focus-visible { background: var(--terracota-h); transform: translateY(-2px); }
.boton--claro { background: var(--crudo); color: var(--verde); }
.boton--claro:hover, .boton--claro:focus-visible { background: #fff; }
.boton svg { width: 1.15em; height: 1.15em; fill: currentColor; flex-shrink: 0; }

:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }

/* --- Encabezado ---------------------------------------------------------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 240, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.encabezado.esta-fijo { border-bottom-color: var(--linea); }
.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}
.encabezado__marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--tinta);
  min-width: 0;
}
.encabezado__simbolo { width: 54px; height: auto; flex-shrink: 0; }
/* En pantallas chicas queda sólo el símbolo: el nombre no entra junto al botón. */
.encabezado__nombre { display: none; flex-direction: column; line-height: 1.1; }
.encabezado__nombre span:first-child {
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.encabezado__nombre span:last-child {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
/* gap chico: el botón parte el texto en dos spans ("Quiero" + "inscribirme")
   y el gap por defecto de .boton dejaba un espacio doble. */
.encabezado .boton { padding: 0.7em 1.2em; font-size: 0.8rem; white-space: nowrap; gap: 0.28em; }
.solo-ancho { display: none; }

/* --- Portada ------------------------------------------------------------- */
.portada { padding-block: clamp(2.5rem, 5vw, 4.5rem) 0; }
.portada__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.portada__marca {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--antetitulo);
  margin: 0 0 1.4rem;
}
.portada h1 { margin-bottom: 0.5em; }
.portada__bajada {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.45;
  color: var(--tinta-suave);
  margin-bottom: 1.6rem;
  max-width: 30ch;
}
.portada__gancho {
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.6;
  border-left: 2px solid var(--amarillo);
  padding-left: 1.1rem;
  margin-bottom: 2rem;
  max-width: 42ch;
}
/* En móvil van en columna: la fecha larga no entra en una fila compartida. */
.portada__datos {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  list-style: none;
  margin: 0 0 2.3rem;
  padding: 0;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.portada__datos li { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.portada__datos li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--terracota-deco);
  flex-shrink: 0;
  transform: translateY(-0.2em);
}
.portada__foto { position: relative; }
.portada__foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radio);
}

/* --- Recorrido observar → crear ------------------------------------------ */
.recorrido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 2.4rem 0;
  padding: 0;
  list-style: none;
}
.recorrido li {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
}
.recorrido li:not(:last-child)::after {
  content: '→';
  margin-left: 0.9rem;
  color: var(--terracota-deco);
  font-weight: 400;
}

/* --- Bloque con foto al costado ------------------------------------------ */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}
.duo__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
}
.duo__foto--alta img { aspect-ratio: 3 / 4; }

/* --- Productos ----------------------------------------------------------- */
.productos {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.4rem);
  margin-top: 3rem;
}
.producto {
  background: var(--salvia-claro);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.producto:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(26, 26, 24, 0.09); }
.producto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.producto__pie { padding: 1.3rem 1.4rem 1.5rem; }
.producto__num {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--terracota);
  display: block;
  margin-bottom: 0.35rem;
}
.producto__nombre {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

/* --- Temario ------------------------------------------------------------- */
.temario {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.temario li {
  display: flex;
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--linea);
  font-size: 1rem;
}
.temario li:last-child { border-bottom: 1px solid var(--linea); }
.temario li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 0.72em;
  border-radius: 50%;
  background: var(--verde-claro);
  flex-shrink: 0;
}

/* Franja horizontal de una sola foto */
.franja { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.franja img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio);
}

/* Banda de tres fotos */
.banda {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1.1rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.banda img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radio);
}

/* --- Qué incluye --------------------------------------------------------- */
.incluye {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.incluye li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--linea);
}
.incluye li:last-child { border-bottom: 1px solid var(--linea); }
.incluye__icono {
  width: 26px; height: 26px;
  margin-top: 0.15rem;
  stroke: var(--verde-claro);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.incluye__titulo {
  display: block;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.incluye__detalle { color: var(--tinta-suave); font-size: 0.97rem; line-height: 1.65; }

/* --- Listas con tilde ----------------------------------------------------- */
.tildes { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.tildes li {
  position: relative;
  padding: 0.55rem 0 0.55rem 2.1rem;
  font-size: 1.03rem;
}
.tildes li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.05em;
  width: 12px; height: 6px;
  border-left: 1.5px solid var(--terracota-deco);
  border-bottom: 1.5px solid var(--terracota-deco);
  transform: rotate(-45deg);
}

/* --- Inversión ----------------------------------------------------------- */
.precio {
  font-family: var(--serif);
  font-size: clamp(3.6rem, 2rem + 7vw, 6.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 0.3rem;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}
.precio small {
  display: block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hueso-suave);
  margin-top: 0.9rem;
}
.inversion__detalle {
  margin: 2rem 0;
  padding: 1.6rem 0;
  border-block: 1px solid rgba(232, 237, 229, 0.2);
  color: var(--hueso-suave);
}
.inversion__fechas {
  font-weight: 500;
  color: var(--hueso);
  letter-spacing: 0.02em;
}

/* Garantía */
.garantia {
  margin-top: clamp(2.5rem, 5vw, 3.8rem);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: rgba(232, 237, 229, 0.08);
  border: 1px solid rgba(232, 237, 229, 0.18);
  border-radius: var(--radio);
}
.garantia h3 { color: var(--hueso); margin-bottom: 0.7em; }
.garantia p { color: var(--hueso-suave); }
.garantia strong { color: var(--amarillo); font-weight: 500; }

/* --- Preguntas frecuentes ------------------------------------------------ */
.faq { margin-top: 2.5rem; }
.faq details {
  border-top: 1px solid var(--linea);
}
.faq details:last-of-type { border-bottom: 1px solid var(--linea); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.38rem);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--terracota-deco); }
.faq summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--terracota-deco);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__respuesta {
  padding-bottom: 1.5rem;
  max-width: var(--ancho-texto);
  color: var(--tinta-suave);
}

/* --- Cierre -------------------------------------------------------------- */
.cierre {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(78vh, 620px);
  padding-block: var(--aire);
  text-align: center;
  color: var(--hueso);
  overflow: hidden;
}
.cierre__fondo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cierre::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 26, 21, 0.62), rgba(20, 26, 21, 0.78));
  z-index: -1;
}
.cierre h2 { color: var(--hueso); }
.cierre .texto-guia { color: var(--hueso-suave); margin-inline: auto; }
.cierre__fecha {
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--amarillo);
  margin-block: 1.8rem;
}

/* --- Pie ----------------------------------------------------------------- */
.pie {
  background: var(--verde);
  color: var(--hueso-suave);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  font-size: 0.93rem;
}
.pie__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  align-items: start;
}
.pie strong {
  display: block;
  color: var(--hueso);
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.pie__enlaces a {
  color: var(--hueso-suave);
  text-decoration: none;
  border-bottom: 1px solid rgba(207, 218, 203, 0.4);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pie__enlaces a:hover { color: var(--amarillo); border-color: var(--amarillo); }

/* --- Botón flotante de WhatsApp ------------------------------------------ */
.flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.flotante:hover, .flotante:focus-visible {
  transform: scale(1.07);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
}
.flotante svg { width: 30px; height: 30px; fill: #fff; }

/* Accesibilidad: texto sólo para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Aparición suave al hacer scroll ------------------------------------- */
.aparece {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Pantallas medianas y grandes
   ========================================================================== */
@media (min-width: 520px) {
  .solo-ancho { display: inline; }
  .encabezado__nombre { display: flex; }
  .encabezado__simbolo { width: 66px; }
  .encabezado .boton { padding: 0.75em 1.5em; font-size: 0.85rem; }
}

@media (min-width: 640px) {
  .productos { grid-template-columns: repeat(2, 1fr); }
  .temario { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
  .temario li:nth-child(2) { border-top: 1px solid var(--linea); }
  .pie__rejilla { grid-template-columns: 1fr auto; }
  .portada__datos { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
}

@media (min-width: 900px) {
  .portada { padding-block: clamp(3rem, 5vw, 5rem) 0; }
  .portada__rejilla { grid-template-columns: 1.05fr 0.95fr; }
  .productos { grid-template-columns: repeat(3, 1fr); }
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--invertido .duo__foto { order: -1; }
  .incluye li { grid-template-columns: 3rem 1fr; }
}

@media (min-width: 1100px) {
  .duo--ancho { grid-template-columns: 1.15fr 0.85fr; }
}