/* =========================================================================
   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);
  /* Hueco único entre el bloque de título y el contenido de cada sección: el
     mismo en todas, para que el ritmo vertical no cambie al bajar. */
  --ritmo: clamp(2.5rem, 5vw, 4rem);

  --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);
  /* Sin alto forzado: con 100 svh la sección medía una pantalla entera para un
     contenido de 525 px y dejaba 162 px de aire muerto arriba y abajo. Ahora
     mide lo que mide el contenido más el padding normal de sección. El hero
     sigue quedando tapado igual al bajar. */
}
.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: con cinco enlaces el bloque mide más y a
   1024 se pisaba con el logotipo horizontal. */
@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 (Visión) el bloque crece y a 1024 se pisaba
   con el logotipo; 1120 es donde vuelve a haber aire suficiente. */
@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;
  /* 70 % de la pantalla, no completa. svh y no vh: en móvil, vh cuenta la
     pantalla con la barra del navegador retraída, así que se pasaba de alto y
     recortaba por abajo. */
  height: 70vh;
  height: 70svh;
  display: grid;
  place-items: center;
  /* La cabecera es fija y tapa la franja de arriba: sin esto el título se
     centra contra los 70 vh enteros y se le mete por debajo. */
  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);
}
/* Los 6rem de antes eran para un hero de pantalla completa; a 70 vh el
   contenido se desbordaba 54 px por abajo. El hueco de la cabecera lo pone
   ahora el padding-top del propio .hero. */
.hero__contenido { position: relative; z-index: 2; padding: 2rem 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;
    /* Fila apretada a propósito: las cifras van pegadas al texto, no a media
       distancia de la foto. La separación entre columnas sí es amplia. */
    gap: .5rem 3.5rem;
    align-items: start;
    text-align: left;
  }
  /* Dos celdas y una sola fila: texto (con las cifras dentro) a la izquierda,
     foto a la derecha. */
  .presentacion__media { max-width: 420px; margin-inline: auto 0; }
  .presentacion__grid .cifras {
    gap: 1.5rem 1rem;
    margin-top: 2.5rem;
  }
}

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

/* Una fila de cuatro. En móvil van de a dos, que a cuatro no entran. */
.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);
}

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

/* Mismo hueco que el resto de los bloques título → contenido (--ritmo). */
.titular { margin-bottom: var(--ritmo); }

/* 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: 65px;      /* los titulares de sección, todos 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: var(--ritmo);
}
.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) {
  /* Dos columnas a todo el ancho de la sección, debajo del titular. */
  .titular__cols {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

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

/* Sin margen propio: el hueco con lo de arriba lo pone .titular, y donde no
   hay titular (la repetición antes de contacto) las tarjetas arrancan en el
   padding de la sección, igual que el contenido de las demás. */
.catalogo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@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;
}

@media (prefers-reduced-motion: reduce) {
  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); } }
/* Fuera de la columna de texto, a lo ancho de la sección: tres columnas. */
@media (min-width: 900px) { .metodo--ancho { grid-template-columns: repeat(3, 1fr); } }

/* La introducción es más corta que la foto: centrada, el sobrante se reparte
   arriba y abajo en vez de acumularse todo al pie. */
@media (min-width: 1024px) { #metodo .duo { align-items: center; } }

/* El rótulo que encabeza la rejilla ancha */
.metodo__intro { margin-top: var(--ritmo); color: var(--pri); }

.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 en vídeo ---------- */

.testimonios { text-align: center; }

/* Tres piezas verticales, en fila. En móvil van apiladas: a dos columnas la
   tercera quedaba sola en la segunda fila, y a 9:16 se estrechan enseguida. */
.testimonios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: var(--ritmo);
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 700px) { .testimonios__grid { grid-template-columns: repeat(3, 1fr); } }

.testimonio { margin: 0; }
.testimonio video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: .75rem;
  background: #14090f;   /* mientras no haya póster cargado */
}

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

/* ---------- Mini banner ----------
   Corte a foto entre dos secciones. Llevaba la palabra partida en dos líneas
   sobre la imagen; se quitó y quedó solo la foto con el velo de marca. */

.banda-titulo {
  position: relative;
  min-height: 46vh;
  min-height: 46svh;
  overflow: hidden;
}
.banda-titulo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Vino al 60 %. Estaba puesto para que el título blanco cumpliera contraste;
   ahora sin texto es solo el tinte de marca sobre la foto. */
.banda-titulo__velo { position: absolute; inset: 0; background: rgb(var(--primary) / .6); }