/* =========================================================================
   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;
}

.eyebrow {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.6875rem;
  color: rgb(var(--primary) / 0.7);
}

/* 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, como en la referencia: si mide menos, el hero se
     despega antes de quedar tapado y el apilado se ve a medias. */
  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; }
@media (min-width: 1024px) {
  .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; }
}

/* Vuelve a 1024: ahora que la cabecera es de ancho completo, el nav se centra
   contra la pantalla y la holgura con el logo crece con ella. Medido: el nav a
   14px ocupa 558 px y el logo acaba en 176, así que a 1024 quedan 57 px y el
   mínimo con 40 px de holgura está en 990. */
@media (min-width: 1024px) {
  .cabecera__nav { display: flex; }
  .hamburguesa { display: none; }
  .menu-movil { display: none !important; }
}

/* Por debajo de 1024 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;
  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);
}
.hero__contenido { position: relative; z-index: 2; padding: 6rem var(--gutter); }

/* Mismo tratamiento que los titulares de sección: interlineado por debajo de 1
   para que las dos líneas casi se toquen, y guion largo abriendo la segunda.
   Los cuerpos sí se mantienen distintos: aquí la primera línea tiene 24
   caracteres y la segunda 12, así que igualarlos desbordaría la pantalla. */
/* Caja alta solo en la segunda línea: el contraste entre la frase en redonda y
   la palabra en versales es lo que sostiene el bloque. */
.hero__linea1 {
  display: block;
  font-family: var(--texto);   /* Lora */
  letter-spacing: clamp(.5px, 0.2vw, 2px);
  /* 45 px de suelo, igual que la segunda línea */
  font-size: clamp(45px, 3.6vw, 3.5rem);
  line-height: 1.15;
}
.hero__linea2 {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  text-transform: uppercase;
  /* 45 px es el suelo en móvil, tal cual se pidió. El tracking va en positivo
     y no en el -.02em del resto: en versales, el negativo junta las letras
     hasta tocarse. */
  font-size: clamp(45px, 11vw, 8.5rem);
  line-height: .92;
  letter-spacing: .02em;
  margin-top: .1em;
}
.hero__bajada {
  max-width: 46ch;
  margin: 2rem auto 0;
  font-weight: 300;
  color: rgb(var(--background) / .88);
}

/* ---------- 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) ---------- */

/* Una columna en móvil; en escritorio texto a la izquierda, foto a la derecha
   y las cifras cruzando las dos por debajo. */
.presentacion__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  text-align: center;
}
.presentacion__media {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1rem;
}
.presentacion__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* En una columna el orden es texto → imagen → cifras, que es el del HTML. */

@media (min-width: 900px) {
  .presentacion__grid {
    grid-template-columns: 1.05fr .95fr;
    gap: 2.5rem 3.5rem;
    align-items: start;
    text-align: left;
  }
  /* La foto ocupa las dos filas de la derecha; texto arriba y cifras abajo
     comparten la columna izquierda. */
  .presentacion__texto { grid-column: 1; grid-row: 1; }
  .presentacion__media { grid-column: 2; grid-row: 1 / span 2; max-width: 420px; margin-inline: auto 0; }
  .presentacion__grid .cifras { grid-column: 1; grid-row: 2; }

  /* En 2×2: a cuatro columnas cada cifra se quedaba en unos 130 px y los pies
     se partían en varias líneas. Alineadas a la izquierda como el texto. */
  .presentacion__grid .cifras {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
    margin-top: 0;
  }
  .presentacion__grid .cifra { text-align: left; }
}

/* ---------- Contadores ---------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
  margin-top: 3.5rem;
}
@media (min-width: 768px) { .cifras { grid-template-columns: repeat(4, 1fr); } }

.cifra { text-align: center; }
.cifra__num {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--pri);
  font-variant-numeric: tabular-nums;
}
.cifra__pie {
  margin-top: .75rem;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .625rem;
  color: rgb(var(--foreground) / .6);
}

/* Marca de dato sin confirmar. Se quita borrando la clase en el HTML
   y este bloque entero cuando lleguen las cifras reales de Paola. */
.dato-pendiente .cifra__num {
  border-bottom: 2px dashed rgb(var(--accent) / .6);
  cursor: help;
}
.dato-pendiente .cifra__pie::after {
  content: " · por confirmar";
  color: var(--acc);
  letter-spacing: 1px;
}

/* ---------- 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); }

/* Mi método: texto a la izquierda, foto a la derecha. Vuelve a 4:5, que es
   casi la proporción nativa del original (1040×1300), así que apenas recorta;
   la banda apaisada de antes se comía más de la mitad de la foto. */
.metodo__duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.metodo__media {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1rem;
}
.metodo__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.titular--columna { margin-bottom: 0; }
.titular--columna .titular__cols {
  grid-template-columns: 1fr;
  width: 100%;
  margin-left: 0;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .metodo__duo { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
  .metodo__media { max-width: 420px; margin-inline: auto 0; }
}

.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: 50px;      /* los tres titulares de sección, al mismo cuerpo */
}
.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%;
  }
}

/* ---------- Catálogo de formaciones ---------- */

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

.curso {
  position: relative;
  display: block;
  /* 5/8: a los 374 px de ancho que tienen en escritorio da 598 de alto, unos
     100 más que la 3/4 anterior. Va como proporción y no como alto fijo para
     que acompañe al ancho en pantallas intermedias. */
  aspect-ratio: 5 / 8;
  overflow: hidden;
  border-radius: 1rem;
  text-decoration: none;
  color: #fff;
}
/* Corto y con salida rápida: arranca de golpe y frena suave, para que se sienta
   instantáneo sin dar un tirón. Antes eran 700 ms lineales. */
.curso__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.curso:hover .curso__img { transform: scale(1.06); }

/* Velo plano, no degradado, y en negro neutro en vez de vino. Sin él el texto
   blanco se queda en 1.7 de contraste sobre estas fotos; al 40 % sube a 4.5.
   Al abrirse la lista sube al 58 %, porque ese texto queda más arriba, donde la
   foto es más clara. */
.curso__velo {
  position: absolute; inset: 0;
  background: rgb(0 0 0 / .4);
  transition: background-color .28s ease;
}

.curso__texto {
  position: absolute; left: 2rem; right: 2rem; bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.curso__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

/* La lista arranca plegada. Se anima max-height y no height:auto, que no es
   animable; 16rem sobra para cuatro puntos y no deja salto al cerrar. */
.curso__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.2, .8, .3, 1), opacity .22s ease;
}
.curso__lista li {
  position: relative;
  padding-left: 1.25rem;
  font-size: .8125rem;
  font-weight: 300;
  line-height: 1.45;
  color: rgb(255 255 255 / .92);
}
.curso__lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sec);
}

/* Marca de copy sin confirmar. Se quita junto con la clase en el HTML. */
.curso__lista.lista-pendiente::after {
  content: "· contenido por confirmar";
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .5625rem;
  color: var(--sec);
  opacity: .75;
  margin-top: .35rem;
}

/* Con puntero: se abre al pasar por encima o al enfocar con teclado */
@media (hover: hover) {
  .curso:hover .curso__lista,
  .curso:focus-visible .curso__lista { max-height: 16rem; opacity: 1; }
  .curso:hover .curso__velo,
  .curso:focus-visible .curso__velo { background: rgb(0 0 0 / .58); }
}

/* Sin puntero (táctil) no hay hover que valga: la lista va siempre visible */
@media (hover: none) {
  .curso__lista { max-height: 16rem; opacity: 1; }
  .curso__velo { background: rgb(0 0 0 / .58); }
}
.curso__flecha {
  flex-shrink: 0;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid rgb(255 255 255 / .55);
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), background-color .22s ease, color .22s ease;
}
.curso:hover .curso__flecha {
  background: #fff;
  color: rgb(var(--primary));
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .curso__img, .curso__flecha { transition: none; }
  .curso:hover .curso__img { transform: none; }
  .curso:hover .curso__flecha { transform: none; }
}
.curso__cat {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .625rem;
  color: var(--sec);
  display: block;
  margin-bottom: .5rem;
}
.curso__nombre {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
}

/* ---------- 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; }
  .duo--invertido { grid-template-columns: 7fr 5fr; }
  .duo--invertido .duo__media { order: 2; }
}

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

.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); }
.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); }

/* ---------- Casos de éxito ---------- */

/* Acotado: al salir del bloque a dos columnas y ocupar el contenedor entero,
   cada foto se iba a ~575 px de ancho y 720 de alto. */
.casos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin-inline: auto;
}
.casos figure { margin: 0; }
.casos img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: .75rem; width: 100%; }
@media (min-width: 1024px) { .casos figure:nth-child(2) { margin-top: 2.5rem; } }

/* ---------- Galería horizontal de alumnas ----------
   La tira se mueve en horizontal mientras se recorre el contenedor alto, con
   sticky y un translateX que calcula el script. Sin GSAP ni ScrollSmoother:
   el primero son 70 KB y el segundo es un plugin de pago de GreenSock. */

.galeria { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* El alto real lo calcula el script; esto es el respaldo si el JS no corre */
.galeria__alto { min-height: 100vh; }

.galeria__sticky {
  position: sticky;
  top: 80px;                       /* el alto de la cabecera */
  height: calc(100vh - 80px);
  height: calc(100svh - 80px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Las piezas van seguidas con un hueco fijo. Antes cada diapositiva ocupaba una
   pantalla entera con la pieza centrada dentro, y eso dejaba 718 px de vacío
   entre una y otra. */
.galeria__pista {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 40px;
  padding-inline: 36px;
  will-change: transform;
  height: 100%;
}

/* Marca de contenido de muestra */
.galeria--muestra .galeria__sticky::after {
  content: "· nombres y biografías de muestra";
  position: absolute;
  bottom: 1.5rem;
  left: 36px;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .5625rem;
  color: rgb(var(--primary) / .55);
}

/* --- pieza de la galería ---
   Una por pantalla y en 9:16 vertical. El ancho lo calcula el script desde el
   alto disponible del panel, así la pieza llena de arriba abajo sin deformarse;
   en pantallas estrechas manda el ancho. */

.alumna {
  flex: 0 0 auto;
  margin: 0;
  width: var(--ancho-alumna, 60vw);
  aspect-ratio: 2 / 3;
  border-radius: 1rem;
  overflow: hidden;
}
.alumna img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- 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; }
}

/* ---------- 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; }
}