/* =========================================================================
   v2 — estructura editorial inspirada en la arquitectura de phi-academy.com
   (ritmo y jerarquía; ni un asset ni una línea de texto suyos)

   Independiente de app.css a propósito: v1 usa el Tailwind compilado del
   build original y v2 CSS semántico escrito a mano. Tocar una no rompe la otra.
   ========================================================================= */

:root {
  /* Paleta oficial, sacada de los SVG del manual de marca (carpeta
     HORIZONTAL PAOLA CARDONA\SVG). Antes eran los valores aproximados que
     traía el build de la preview.

     Van en canales RGB y no en HSL: al pasar estos hex a HSL y volver, el
     redondeo movía 1 o 2 puntos por canal y ningún color caía en su valor
     exacto. En RGB el ida y vuelta es limpio. La barra separadora permite
     seguir usándolos con alfa: rgb(var(--primary) / .5) */
  --background: 252 244 232;   /* #fcf4e8 crema      */
  --foreground: 26 26 26;      /* #1a1a1a            */
  --primary: 107 9 63;         /* #6b093f vino       */
  --secondary: 219 191 195;    /* #dbbfc3 rosa palo  */
  --accent: 170 65 103;        /* #aa4167 rosa       */

  --bg: rgb(var(--background));
  --fg: rgb(var(--foreground));
  --pri: rgb(var(--primary));
  --sec: rgb(var(--secondary));
  --acc: rgb(var(--accent));

  /* Dorado sin confirmar: la marca tiene versión dorada del logo, pero el
     valor exacto hay que sacarlo del manual. Ver README. */
  --oro: #c6a15b;
  --oro-claro: #d7b876;

  --ancho: 1280px;
  --gutter: clamp(1.5rem, 4vw, 3rem);
  /* Ojo: al tocarse dos secciones este valor se suma dos veces. A 8rem el
     hueco entre ellas era de 230 px; con esto queda en 154. */
  --seccion-y: clamp(3.25rem, 6vw, 6rem);

  --serif: "Cormorant Garamond", serif;
  --texto: Lora, serif;
  --label: Questrial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--texto);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: 1.05; }

/* Cuerpo de 20 px en los párrafos de texto corrido.
   El interlineado va en 1.5 (30 px) y no en los 20 px que tenía antes: con
   cuerpo y altura de línea iguales el ratio queda en 1.0 y las líneas se tocan.
   Sigue siendo más cerrado que el 1.6 heredado. */
p { font-size: 20px; line-height: 1.5; }

/* Fuera de esto quedan los que no son texto corrido: las etiquetas en versales
   y los dos párrafos con cuerpo de display (cita de testimonio y subtítulo),
   que llevan su propio tamaño más abajo. */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Etiqueta pequeña en versales espaciadas: el conector visual de toda la página */
.label {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Deja sitio a la cabecera pegajosa cuando se llega por un enlace de ancla */
.seccion[id], .hero { scroll-margin-top: 80px; }

.seccion { padding-block: var(--seccion-y); }
.seccion--crema { background: var(--bg); }

/* La presentación viaja por encima del hero clavado. El fondo tiene que ser
   opaco o se vería la foto a través, y las esquinas redondeadas arriba son las
   que hacen que se lea como una lámina que sube. */
#presentacion {
  position: relative;
  z-index: 1;
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -18px 40px rgb(0 0 0 / .18);
  /* Una pantalla completa: así el hero se queda clavado (sticky) el scroll
     entero de esta sección en vez de soltarse enseguida. Deja aire de más
     alrededor del título+párrafo a propósito — ese espacio del hero se
     reserva para una animación futura. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
}
.seccion--rosa  { background: rgb(var(--secondary) / 0.35); }
.seccion--vino  { background: var(--pri); color: #fff; }

/* ---------- Pantalla de carga ----------
   El isotipo gira hasta que la página está lista y se desvanece. */

.carga {
  position: fixed;
  inset: 0;
  z-index: 100;                 /* por encima de todo, incluido el menú (80) */
  background: var(--bg);
  display: grid;
  place-items: center;
  /* Red de seguridad: si el script no llega a ocultarla, se va sola a los 4 s.
     En la práctica el JS la quita mucho antes. */
  animation: carga-rescate .6s ease 4s forwards;
}
.carga img {
  width: 72px;
  height: auto;
  animation: girar 1.2s linear infinite;
  /* El desenfoque de salida. Va en el logo y no en toda la capa: sobre un fondo
     plano el blur no se vería, y filtrar la capa entera obliga al navegador a
     recomponer la pantalla completa. */
  transition: filter .45s ease;
}
.carga.fuera img { filter: blur(14px); }

.carga.fuera {
  animation: none;              /* manda la transición, no el rescate */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease, visibility 0s .5s;
}

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes carga-rescate { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .carga img { animation: none; }
}

/* ---------- Cabecera ---------- */

/* Fija y fuera del flujo, no sticky: así se apoya encima del hero y la foto
   puede ocupar los 100vh enteros. Si ocupara sitio en el flujo, hero y cabecera
   sumarían 100vh + 80 px y la primera pantalla no cerraría. */
.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgb(var(--background) / .94);
  backdrop-filter: blur(10px);
  color: var(--pri);
  border-bottom: 1px solid rgb(var(--primary) / .1);
  transition: transform .3s ease;
}
/* Se esconde al bajar y reaparece al subir. La clase la pone el script del final. */
.cabecera--oculta { transform: translateY(-100%); }

/* Ancho completo, sin max-width: los 36 px del logo se miden contra el borde de
   la pantalla, no contra una caja centrada. El nav va posicionado para quedar
   en el centro exacto sin que lo desplace lo que ocupe el logo. */
.cabecera__fila {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 80px;
  padding-inline: 36px;
}
.cabecera__nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--label);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  /* Centrado sobre la fila, no entre logo y hamburguesa: así el bloque de
     enlaces cae en el centro real aunque el logo mida lo que mida. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.cabecera__nav a { text-decoration: none; white-space: nowrap; transition: color .2s; }
.cabecera__nav a:hover { color: var(--acc); }

.cabecera__logo { line-height: 0; }
/* 40 px dentro de una fila de 80 */
.cabecera__logo img { height: 40px; width: auto; object-fit: contain; }
/* En móvil manda el isotipo: el logotipo horizontal mide 238×40 y con la
   hamburguesa al lado deja el nombre en un hilo. */
.cabecera__logo--ancho { display: none; }
.cabecera__logo--iso { display: block; height: 44px; }
/* Mismo punto que el nav de abajo (1120px): los dos dependen de que quepan el
   logotipo horizontal y el nav a la vez, así que van sincronizados. */
@media (min-width: 1120px) {
  .cabecera__logo--ancho { display: block; }
  .cabecera__logo--iso { display: none; }
}
.cabecera__derecha { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; }

.hamburguesa {
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: .5rem; margin-right: -.5rem; line-height: 0;
}

/* Pantalla completa y sólido, no un desplegable bajo la cabecera */
.menu-movil {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;                 /* por encima de cabecera (60) y barra CTA (70) */
  background: var(--bg);       /* sólido, sin transparencia */
  overflow-y: auto;
}
.menu-movil.abierto { display: flex; flex-direction: column; }

.menu-movil__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;                /* misma altura que la cabecera */
  padding-inline: 36px;
  flex-shrink: 0;
}
.menu-movil__logo { line-height: 0; }
.menu-movil__logo img { height: 44px; width: auto; }
.menu-movil__cerrar {
  background: none; border: 0; padding: .5rem; margin-right: -.5rem;
  color: var(--pri); cursor: pointer; line-height: 0;
}

.menu-movil nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding-block: 2rem;
}

/* 30 px en Lora; al pulsar o pasar por encima crece a 50 en Cormorant.
   El alto mínimo está calculado para el estado grande: si no, al crecer el
   enlace empujaría a los de abajo y saltaría toda la lista. */
.menu-movil a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  width: 100%;
  font-family: var(--texto);          /* Lora */
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pri);
  transition: font-size .35s cubic-bezier(.2, .8, .3, 1), letter-spacing .35s cubic-bezier(.2, .8, .3, 1);
}
/* .activo la pone el script al presionar. Hace falta además de :active porque
   en táctil ese estado dura lo que dura el toque, y el menú se cierra en ese
   mismo instante: sin la clase, el cambio no llega a verse nunca. */
.menu-movil a:hover,
.menu-movil a:focus-visible,
.menu-movil a:active,
.menu-movil a.activo {
  font-family: var(--serif);          /* Cormorant Garamond */
  font-size: 50px;
  letter-spacing: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .menu-movil a { transition: none; }
}

/* El nav se centra contra la pantalla entera y la holgura con el logo crece
   con ella. Con el quinto enlace (Precio) el nav mide 486 px: a 1024 el hueco
   con el logo (que acaba en 274) ya es negativo, se pisan. Medido con el nav
   real: a 1120 quedan 33 px de holgura, que es el mínimo que se dejó pasar. */
@media (min-width: 1120px) {
  .cabecera__nav { display: flex; }
  .hamburguesa { display: none; }
  .menu-movil { display: none !important; }
}

/* Por debajo de 1120 el nav se oculta y la fila queda:
   logo a la izquierda · hamburguesa a la derecha */

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

/* --- Apilado hero → primera sección ---
   El hero queda clavado arriba y la presentación sube por encima. El sticky
   está acotado por .apilado: al terminar ese envoltorio el hero se suelta y la
   página sigue normal. Solo afecta a este paso; el resto no se apila. */

.apilado { position: relative; }

.hero {
  color: var(--bg);   /* crema de marca sobre el velo negro */
  position: sticky;
  top: 0;
  z-index: 0;
  /* svh y no vh: en móvil, vh cuenta la pantalla con la barra del navegador
     retraída, así que el hero se pasa de alto y recorta por abajo. */
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  /* La cabecera fija (80px) tapa la franja de arriba: sin este padding, el
     grid centra contra los 100vh enteros y el contenido queda visualmente
     corrido hacia arriba respecto al alto que se ve de verdad. */
  padding-top: 80px;
  overflow: hidden;
  text-align: center;
}
/* El vídeo ocupa todo el hero. El original es vertical 1080×1920: en móvil
   encaja casi exacto, y en escritorio se recorta arriba y abajo, que es lo
   normal al llevar vertical a una caja apaisada. */
/* Fondo oscuro por debajo: si el vídeo aún no pintó o queda algún píxel sin
   cubrir, se ve negro y no un hueco claro. */
.hero__fondo { position: absolute; inset: 0; background: #14090f; }
.hero__fondo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Negro y suave. El 38 % plano deja la bajada en 3.3 de contraste, por debajo
   del 4.5 que pide el texto normal, y subirlo a 0.49 para cumplir ya no sería
   suave. En vez de eso, un óvalo oscuro concentrado detrás del texto: el centro
   llega al 59 % efectivo y los bordes de la foto se quedan en el 38 %. */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgb(0 0 0 / .34), transparent 70%),
    rgb(0 0 0 / .38);
}
/* Mide solo el h1 (hero__resto está fuera del flujo), así el place-items:center
   de .hero centra el título, no el título+bajada+botón como un solo bloque. */
.hero__contenido { position: relative; z-index: 2; width: 100%; padding-inline: var(--gutter); }

/* Pegada al pie del h1 sea cual sea su alto (top:100% es relativo a
   hero__contenido, que mide justo lo que mide el h1). */
.hero__resto { position: absolute; left: 0; right: 0; top: 100%; padding-inline: var(--gutter); }

/* El h1 solo cuenta en el flujo por hero__linea2: "Tu primer paso" cuelga por
   fuera de su borde superior. Así hero__contenido mide únicamente lo que mide
   la línea grande, y el centrado vertical de .hero cae sobre ella. */
.hero h1 { position: relative; }

.hero__linea1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 5px);   /* 5px de aire con la línea de abajo */
  font-family: var(--texto);   /* Lora */
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(46px, 7.92vw, 5.76rem);
  line-height: .9;
}
/* En Lora, no en la Cormorant Garamond que usa el resto de los titulares del
   sitio. */
.hero__linea2 {
  display: block;
  max-width: 26ch;
  margin-inline: auto;
  font-family: var(--texto);
  font-style: italic;
  letter-spacing: clamp(.5px, 0.2vw, 2px);
  font-size: clamp(35px, 4.61vw, 2.88rem);
  line-height: 1.08;
}
.hero__bajada {
  max-width: 46ch;
  margin: 2rem auto 0;
  font-weight: 300;
  color: rgb(var(--background) / .88);
  /* 20% menos que el cuerpo de 20px de .p general del sitio. */
  font-size: 16px;
}
/* El botón del hero, 20% más chico que el .boton normal (.6875rem / 1.05rem
   2.25rem). Escapado a este bloque para no tocar el resto de los botones. */
.hero__resto .boton { font-size: .55rem; padding: .84rem 1.8rem; }

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .6875rem;
  padding: 1.05rem 2.25rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.boton--claro { background: var(--bg); color: var(--pri); }
.boton--claro:hover { background: var(--acc); color: #fff; }
/* Para fondos claros: sobre el hero crema, el botón claro desaparecía */
.boton--vino { background: var(--pri); color: var(--bg); }
.boton--vino:hover { background: var(--acc); color: #fff; }
/* Dorado: la marca lo usa (carpeta LOGO DORADO del manual). El valor exacto
   está sin confirmar contra el manual — ver README. */
.boton--oro { background: var(--oro); color: #2b1420; }
.boton--oro:hover { background: var(--oro-claro); }
.boton--linea { border-color: currentColor; color: inherit; background: none; }
.boton--linea:hover { background: #fff; color: var(--pri); }
.boton--wa { background: #25d366; color: #fff; }
.boton--wa:hover { background: #20bd5a; transform: translateY(-2px); }

/* ---------- Presentación (la lámina que sube sobre el hero) ---------- */

/* Solo texto, centrado: la foto y las cifras que llevaba antes se sacaron.
   Una sola columna angosta para que el párrafo no corra de punta a punta. */
.presentacion__grid {
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
}
.presentacion__texto { max-width: 46rem; margin-inline: auto; }

/* El título también en negrita, a pedido — el resto de los titulo-seccion
   del sitio se quedan en el peso 300 por defecto. */
.titulo-seccion--negrita { font-weight: 700; }

/* ---------- Tabs en scroll ----------
   El panel se queda fijo mientras se recorre el contenedor alto, y el paso
   activo lo marca el script comparando la posición de la sección, no el
   scroll absoluto de la página. */

.tabs { background: var(--bg); }

.tabs__alto { height: 300vh; }        /* tres pasos, un viewport cada uno */

.tabs__sticky {
  position: sticky;
  top: 80px;                          /* el alto de la cabecera */
  height: calc(100vh - 80px);
  height: calc(100svh - 80px);
  display: flex;
  align-items: center;
  padding: 1.5rem var(--gutter);
}

.tabs__grid {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  height: min(78vh, 660px);
  display: grid;
  grid-template-columns: .55fr 1fr;
  gap: 1.25rem;
}

/* --- panel izquierdo --- */

.tabs__izq {
  background: var(--pri);
  color: #fff;
  border-radius: 1.25rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.tabs__eyebrow { color: rgb(var(--secondary) / .85); }

.tabs__paneles { position: relative; flex: 1; margin-top: 1.5rem; }

/* visibility además de opacity: si no, los tres textos ocultos siguen
   leyéndose en un lector de pantalla */
.tabs__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s .5s;
}
.tabs__panel.activo {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility 0s 0s;
}

.tabs__cat {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .625rem;
  color: var(--oro);
}
.tabs__titulo {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  margin-top: .75rem;
  color: #fff;
}
.tabs__linea { width: 100%; height: 1px; background: rgb(255 255 255 / .25); margin-block: 1.5rem; }
.tabs__texto { margin: 0; font-weight: 300; font-size: .9375rem; color: rgb(255 255 255 / .75); }

.tabs__pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tabs__pasos { display: flex; gap: .5rem; }
.tabs__pasos span {
  height: .375rem; width: .375rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .3);
  transition: width .35s ease, background-color .35s ease;
}
.tabs__pasos span.activo { width: 1.5rem; background: var(--oro); }

/* --- panel derecho --- */

.tabs__der { position: relative; border-radius: 1.25rem; overflow: hidden; }
.tabs__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s ease, transform .6s ease;
}
.tabs__img.activo { opacity: 1; transform: scale(1); }

@media (max-width: 767px) {
  .tabs__alto { height: 260vh; }
  .tabs__grid {
    grid-template-columns: 1fr;
    grid-template-rows: 40% 1fr;
    height: min(82vh, 620px);
  }
  .tabs__der { order: -1; }
  .tabs__izq { padding: 1.5rem; }
  .tabs__linea { margin-block: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tabs__img { transform: none; transition: opacity .2s; }
  .tabs__img.activo { transform: none; }
}

/* ---------- Titular editorial ---------- */

.titular { margin-bottom: clamp(3rem, 6vw, 5rem); }
/* Cuando no lo sigue una rejilla de tarjetas, respira algo menos abajo */
.titular--suelto { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.titular__display {
  margin-top: 1.5rem;
  font-family: var(--serif);
  color: var(--pri);
  /* Lo que se copia de la referencia: interlineado por debajo de 1 y tracking
     negativo, para que las dos líneas casi se toquen. Con un display tan grande
     el interlineado normal las separa demasiado y se pierde el bloque. */
  line-height: .82;
  letter-spacing: -.02em;
  font-size: 65px;      /* los titulares de sección, al mismo cuerpo que "Dream Browns" */
}
.titular__linea1 { display: block; }
.titular__linea2 { display: block; font-style: italic; }

.titular__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}
.titular__cols p {
  margin: 0;
  font-weight: 300;
  color: rgb(var(--foreground) / .75);
  /* cuerpo e interlineado los pone la regla general de p */
}

@media (min-width: 900px) {
  /* Los párrafos ocupan la mitad derecha, como en la referencia: el titular
     respira a la izquierda y el texto baja en dos columnas. */
  .titular__cols {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-left: auto;
    width: 62%;
  }
  /* Programa y Precio son la excepción: los dos párrafos usan el ancho
     completo de la sección en vez de la columna angosta de la derecha. */
  #programa .titular__cols,
  #precio .titular__cols { width: 100%; margin-left: 0; }
}

/* ---------- Programa (módulos del curso) ---------- */

.programa {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}
.programa__modulo {
  background: rgb(var(--background) / .6);
  border: 1px solid rgb(var(--primary) / .12);
  border-radius: 1rem;
  overflow: hidden;
}
.programa__texto { padding: clamp(1.5rem, 3vw, 2.5rem); }
/* La foto ocupa el lado derecho de la card, a pantalla completa (sin el
   padding de la card): arriba, abajo y a la derecha toca el borde. Debajo
   del texto en móvil, al lado en desktop. */
.programa__media { aspect-ratio: 16 / 10; }
.programa__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 640px) {
  .programa__modulo { display: grid; grid-template-columns: 1fr 320px; align-items: stretch; }
  .programa__media { aspect-ratio: auto; }
}
.programa__num {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .6875rem;
  color: var(--acc);
}
.programa__titulo {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--pri);
  margin-top: .5rem;
}
.programa__modulo .metodo { margin-top: 2rem; }

/* ---------- Kit y precio ---------- */

.precios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
  max-width: 900px;
}
@media (min-width: 700px) { .precios { grid-template-columns: repeat(2, 1fr); } }

.precio {
  background: var(--bg);
  border: 1px solid rgb(var(--primary) / .15);
  border-radius: 1.25rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
}
/* El nivel Premium se destaca con el dorado en vez del vino de línea, para que
   se lea como la opción realzada sin necesitar una etiqueta aparte. */
.precio--premium {
  border-color: var(--oro);
  box-shadow: 0 12px 30px rgb(198 161 91 / .18);
}
.precio__nivel {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .6875rem;
  color: var(--acc);
}
.precio--premium .precio__nivel { color: var(--oro); }
.precio__monto {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3rem);
  color: var(--pri);
  margin-top: .5rem;
}
.precio__monto span {
  font-size: 1rem;
  font-family: var(--label);
  color: rgb(var(--foreground) / .6);
}
.precio__lista {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .65rem;
  flex: 1;
}
.precio__lista li {
  position: relative;
  padding-left: 1.25rem;
  font-size: .875rem;
  font-weight: 300;
  color: rgb(var(--foreground) / .8);
}
.precio__lista li::before { content: "✓"; position: absolute; left: 0; color: var(--acc); }
.precio--premium .precio__lista li::before { color: var(--oro); }
.precio .boton { margin-top: 2rem; width: 100%; }

/* ---------- Cómo inscribirte ---------- */

.pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 700px) { .pasos { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } }

.pasos__paso { text-align: center; }
.pasos__num {
  width: 2.75rem;
  height: 2.75rem;
  margin-inline: auto;
  border-radius: 999px;
  background: var(--pri);
  color: var(--bg);
  font-family: var(--serif);
  font-size: 1.25rem;
  display: grid;
  place-items: center;
}
.pasos__texto {
  margin-top: 1rem;
  font-size: .875rem;
  font-weight: 300;
  color: rgb(var(--foreground) / .75);
}

/* ---------- Marquee ---------- */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--pri);
  color: #fff;
  padding-block: 1.25rem;
  border-block: 1px solid rgb(var(--secondary) / .25);
}
.marquee--rosa { background: rgb(var(--secondary) / .35); color: var(--pri); }

.marquee__pista {
  display: inline-flex;
  gap: 3rem;
  padding-right: 3rem;
  animation: desplazar 32s linear infinite;
}
.marquee__pista span {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: clamp(.875rem, 1.8vw, 1.25rem);
}
.marquee:hover .marquee__pista { animation-play-state: paused; }

@keyframes desplazar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__pista { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Bloques de texto e imagen ---------- */

.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .duo { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
  /* Más ancho que el 5fr genérico: con "— hacia la excelencia" el texto
     partía en tres líneas ("— hacia la" / "excelencia"). Con más columna
     entra mejor. */
  #formacion .duo { grid-template-columns: 6fr 6fr; }
  .duo--invertido { grid-template-columns: 7fr 5fr; }
  .duo--invertido .duo__media { order: 2; }
}

.duo__media { overflow: hidden; aspect-ratio: 4 / 5; }
.duo__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Banda con foto de fondo ---------- */

.banda-foto {
  position: relative;
  overflow: hidden;
  color: var(--pri);
}
/* Dos fotos verticales, una al lado de la otra, cada una cubriendo su mitad. */
.banda-foto__fondo { position: absolute; inset: 0; display: flex; }
.banda-foto__fondo img { flex: 1 1 50%; width: 50%; height: 100%; object-fit: cover; object-position: center; }
/* Rosa palo translúcido + blur sobre la foto, no negro plano: más suave,
   pensado para texto oscuro encima en vez de claro. */
.banda-foto__velo {
  position: absolute;
  inset: 0;
  background: rgb(var(--secondary) / .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.banda-foto__contenido {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(4rem, 10vw, 7rem);
}
.banda-foto__titulo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  color: var(--pri);
}
.banda-foto__texto {
  margin-top: 1.5rem;
  font-weight: 300;
  color: rgb(var(--foreground) / .75);
}

/* La foto de Dream Brows termina justo donde termina el texto real (no la
   caja, el texto). Estirar la caja con align-items:stretch no alcanza: el
   texto se queda arriba igual y deja el mismo hueco por dentro. La altura la
   pone JS midiendo la columna de texto — ver el script al final del body.
   Solo aplica a partir de 1024px, que es donde van lado a lado. */
@media (min-width: 1024px) {
  #formacion .duo__media { aspect-ratio: auto; }
}

.titulo-seccion {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  color: var(--pri);
}
.seccion--vino .titulo-seccion { color: #fff; }

.subtitulo {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.375rem, 3vw, 2rem);
  color: rgb(var(--foreground) / .6);
  margin-top: .35rem;
}

.parrafo { font-weight: 300; color: rgb(var(--foreground) / .75); }
/* Sin esto, <strong> dentro de un párrafo a 300 queda en negrita "bolder"
   relativa, que el navegador resuelve en apenas 400 — casi no se nota. */
.parrafo strong { font-weight: 700; }
.seccion--vino .parrafo { color: rgb(255 255 255 / .75); }

.metodo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) { .metodo { grid-template-columns: repeat(2, 1fr); } }
.metodo h3 {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .6875rem;
  color: var(--pri);
  margin-bottom: .5rem;
}
.metodo p { margin: 0; font-size: .875rem; font-weight: 300; color: rgb(var(--foreground) / .7); }

/* ---------- Testimonios ---------- */

.testimonios { text-align: center; }
.carrusel { position: relative; overflow: hidden; margin-top: 2.5rem; }
.carrusel__pista { display: flex; transition: transform .5s ease; }
.carrusel__slide { flex: 0 0 100%; min-width: 0; padding-inline: 1rem; }
.carrusel__slide blockquote { margin: 0; max-width: 48rem; margin-inline: auto; }
.carrusel__slide p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.5;
  color: rgb(255 255 255 / .9);
}
.carrusel__slide footer {
  margin-top: 1.5rem;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .6875rem;
  color: rgb(255 255 255 / .6);
}
/* Hueco a la espera de testimonio: se ve como tal, no como una cita vacía.
   Quitando la clase en el HTML recupera el aspecto normal. */
.carrusel__slide--reservado blockquote {
  border: 1px dashed rgb(255 255 255 / .3);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
}
.carrusel__slide--reservado p {
  font-style: normal;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .75rem;
  color: rgb(255 255 255 / .5);
}
.carrusel__slide--reservado footer { color: rgb(255 255 255 / .35); }

.carrusel__mandos { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.5rem; }
.carrusel__flecha {
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .3);
  background: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s, color .2s;
}
.carrusel__flecha:hover { background: #fff; color: var(--pri); }
.carrusel__puntos { display: flex; gap: .5rem; }
.carrusel__puntos button {
  height: .5rem; width: .5rem; border: 0; border-radius: 999px;
  background: rgb(255 255 255 / .3); cursor: pointer;
  transition: width .3s, background-color .3s;
}
.carrusel__puntos button[aria-current="true"] { width: 1.5rem; background: #fff; }

/* ---------- Contacto ---------- */

.datos { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .datos { grid-template-columns: repeat(2, 1fr); } }
.dato { display: flex; gap: 1rem; align-items: flex-start; text-decoration: none; }
.dato svg { flex-shrink: 0; margin-top: .25rem; color: var(--pri); }
.dato h3 {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 2px;
  font-size: .75rem; color: var(--pri); margin-bottom: .25rem;
}
.dato p { margin: 0; font-weight: 300; color: rgb(var(--foreground) / .8); }
.dato ul { margin: 0; font-weight: 300; color: rgb(var(--foreground) / .8); font-size: .9375rem; }
.dato ul { list-style: none; padding: 0; }
.dato a:hover p { color: var(--acc); }

.mapa { width: 100%; height: 400px; border: 1px solid rgb(var(--secondary) / .4); overflow: hidden; }
.mapa iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Pie ---------- */

.pie { background: var(--pri); color: #fff; padding-block: 4.5rem 7.5rem; }
.pie__centro { display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  border-bottom: 1px solid rgb(255 255 255 / .2); padding-bottom: 3rem; }
.pie__centro img { height: 4rem; width: auto; object-fit: contain; }
.pie__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
.pie__nav a {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 2px;
  font-size: .6875rem; color: rgb(255 255 255 / .8); text-decoration: none;
}
.pie__nav a:hover { color: var(--sec); }
.pie__social { display: flex; gap: 1rem; }
.pie__social a {
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .3);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s, color .2s;
}
.pie__social a:hover { background: #fff; color: var(--pri); }
.pie__copy {
  padding-top: 3rem; text-align: center;
  font-family: var(--label); text-transform: uppercase; letter-spacing: 2px;
  font-size: .625rem; color: rgb(255 255 255 / .5);
}

/* ---------- Volver arriba ----------
   Se apoya justo encima de la barra CTA, en la esquina opuesta al botón, para
   no competir con la llamada a la acción. */

.arriba {
  position: fixed;
  left: var(--gutter);
  bottom: calc(78px + 1rem);      /* alto de la barra CTA + aire */
  z-index: 75;                    /* sobre la barra (70) */
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--primary) / .25);
  border-radius: 999px;
  background: rgb(var(--background) / .9);
  backdrop-filter: blur(6px);
  color: var(--pri);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s .25s, background-color .2s;
}
.arriba.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s 0s, background-color .2s;
}
.arriba:hover { background: var(--pri); color: var(--bg); }

@media (max-width: 767px) {
  .arriba { bottom: calc(93px + 1rem); }   /* la barra es más alta en móvil */
}

@media (prefers-reduced-motion: reduce) {
  .arriba { transition: opacity .2s ease, visibility 0s; transform: none; }
  .arriba.visible { transform: none; }
}

/* ---------- Modal "Ver más" ---------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 85;               /* sobre cabecera (60), cta-fija (70) y arriba (75); por debajo del menú móvil (80) */
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.modal.abierto { display: flex; }
.modal__fondo {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .55);
  backdrop-filter: blur(4px);
}
.modal__caja {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 1.25rem;
  padding: clamp(2rem, 4vw, 3rem);
}
.modal__cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--primary) / .2);
  background: var(--bg);
  color: var(--pri);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.modal__cerrar:hover { background: rgb(var(--secondary) / .35); }

/* ---------- Barra CTA fija ---------- */

/* Siempre visible, no depende del scroll. El hueco se reserva con el
   padding inferior del body para que no tape el final del pie. */
/* Crema al 55 %. La barra es fija y por debajo le pasan las secciones vino y el
   pie, que son oscuros: ahí el crema translúcido se ensucia y el texto deja de
   leerse. El brightness del backdrop aclara lo que haya detrás y sube el
   contraste de 4.14 a 4.67 (el mínimo AA es 4.5). Sobre secciones claras el
   filtro apenas se nota, porque ya están cerca del blanco. */
.cta-fija {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: rgb(var(--background) / .55);
  backdrop-filter: blur(14px) saturate(115%) brightness(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(115%) brightness(1.5);
  border-top: 1px solid rgb(var(--primary) / .12);
  /* Escondida hasta haber dejado atrás la sección de presentación. La clase la
     pone el script del final. */
  transform: translateY(100%);
  transition: transform .35s ease;
}
.cta-fija.visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .cta-fija { transition: none; }
}
.cta-fija__fila {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: .75rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
  color: #fff;
}
/* Sobre crema el texto se invierte a vino; el rosa y el crema de antes eran
   para el fondo oscuro y aquí desaparecerían. */
.cta-fija__texto {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .75rem;
  color: var(--pri);   /* opaco: al 80 % el contraste sobre las secciones vino no llegaba */
}
.cta-fija__texto em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pri);
}

/* Sin padding en el body: dejaba una franja del color de fondo por debajo del
   pie, que es vino. El hueco para la barra lo da el propio padding inferior
   del pie (120 px), que ya supera su alto (78 en escritorio, 93 en móvil). */

/* En móvil la barra se compacta: sin el subtítulo en cursiva y con el botón a
   todo el ancho. Suelta, ocupaba 141 px, un 17 % de una pantalla de 812. */
@media (max-width: 767px) {
  .cta-fija__fila {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: center;
    gap: .5rem;
    padding: .625rem var(--gutter);
  }
  .cta-fija__texto { font-size: .625rem; letter-spacing: 1.5px; }
  .cta-fija__texto em { display: none; }
  .cta-fija .boton { width: 100%; padding-block: .875rem; }
}