/* ============================================================
   Chillin Online · la portada (/)
   ------------------------------------------------------------
   DÓNDE SE PEGA: Ajustes del sitio → Código y analítica →
   código del pie del sitio, dentro de la misma etiqueta <style>
   que el resto. Va DESPUÉS de `marco.css` (el papel, la barra y
   el pie) y DESPUÉS de `catalogo.css`, que es quien viste las
   tarjetas de curso: aquí solo se dice dónde van.

   QUÉ ES ESTO: el traje de la landing que se dibujó el 26-ago en
   `muestras/portada.html`, traído a la portada de la academia.
   MANDA LA LANDING: el orden, las piezas y el aire son los suyos,
   y lo que la plataforma trae (los seis cursos con su precio y
   las opiniones de los alumnos) se mete DENTRO de esa estructura,
   no al revés.

   EL ORDEN, decidido con Sebas el 27-ago:

     1 · la primera pantalla   · titular, promesa y el mosaico
     2 · la cinta              · los hechos, en marquesina
     3 · los cursos            · la rejilla REAL, subida aquí
     4 · las cifras
     5 · las licencias
     6 · la cortina            · el vídeo de presentación
     7 · los tres escalones    · hasta el examen
     8 · los motivos
     9 · las opiniones         · las REALES, en el traje de aquí
    10 · los precios
    11 · las preguntas
    12 · el cierre y el aviso de lo que falta por confirmar

   ACOTADO: todo cuelga de `body.home-landing-page`, que es la
   clase que Thinkific le pone al cuerpo de esta pantalla y solo de
   esta. Ni el catálogo ni las páginas de venta la llevan.

   OJO CON LOS NOMBRES: `paso.css` ya usa `.co-paso` para el velo
   que cubre el hueco entre dos páginas, que es una capa fija a
   pantalla completa. Por eso los pasos de aquí son `.co-escalon`:
   llamándolos igual, los tres se convertían en tres velos y la
   portada entera desaparecía debajo.
   ============================================================ */

/* ------------------------------------------------------------
   0 · LO QUE EL TEMA PINTABA AQUÍ

   La home del tema son cinco bloques: el banner (vacío), las
   tarjetas de curso, la llamada del cliente, tres opiniones
   escritas a mano y las que saca de los cursos. De esos cinco, la
   rejilla de cursos y las opiniones se APROVECHAN (el guion las
   mueve a su sitio) y el resto se apaga.
   ------------------------------------------------------------ */

body.home-landing-page{
  --co-verde-hondo:#08301f;
  --co-verde-claro:#edf4f0;
  --co-verde-borde:#cfe3d8;
  --co-radio-grande:16px;
  --co-medida:66ch;
}

/* EL `main` NO LLEVA `overflow:hidden`, y esto cuesta explicarlo
   pero es la trampa más cara de esta pantalla: el tema pinta el
   cuerpo en `display:flex`, así que `main` es un item flex. Un item
   flex con `overflow` distinto de `visible` pierde su `min-height`
   automático (pasa a valer cero), y entonces se ENCOGE hasta la
   altura de la ventana con sus 7.400 px de contenido dentro,
   recortados. La pantalla se quedaba en el hero y el pie pegado
   debajo: parecía que la landing no bajaba y que había que usar los
   enlaces de la barra para llegar a las secciones.
   Lo que había que recortar era el desbordamiento de las manchas de
   luz, y eso se hace en el hero, que es donde viven. */
body.home-landing-page main.home{
  background:transparent;
}

/* El banner del tema es el hueco donde se escribe la primera
   pantalla: se le quitan el fondo, el relleno y el centrado. */
body.home-landing-page .banner{
  background:none;
  padding:0;
}
body.home-landing-page .banner__container,
body.home-landing-page .banner__wrapper{
  max-width:none;
  margin:0;
  padding:0;
  display:block;
}
body.home-landing-page .banner .section__content{
  flex:none;
  max-width:none;
  padding:0;
  text-align:left;
}

/* Y las secciones que no se usan, fuera. La frase del cliente
   ("El saber no ocupa espacio") sale por decisión de Sebas el
   27-ago; sus dos bloques de opiniones se apagan AQUÍ porque el
   guion ya se ha llevado las opiniones a la sección de la landing:
   lo que se esconde es la caja vacía, no el contenido. */
body.home-landing-page main.home > section.call-to-action,
body.home-landing-page main.home > section.testimonials,
body.home-landing-page main.home > section.reviews{
  display:none;
}

/* ------------------------------------------------------------
   1 · LA CAJA Y LAS SECCIONES

   `co-env` es el ancho de lectura de la landing (1200), más ancho
   que el resto de la academia a propósito: es la pantalla que
   vende y respira distinto.
   ------------------------------------------------------------ */

body.home-landing-page .co-env{
  position:relative;
  z-index:2;
  width:min(1200px, 100% - 48px);
  margin-inline:auto;
}
@media (max-width:640px){
  body.home-landing-page .co-env{width:calc(100% - 32px)}
}

body.home-landing-page .co-seccion{
  position:relative;
  padding:84px 0;
}
body.home-landing-page .co-seccion.co-encadena{padding-top:52px}
body.home-landing-page .co-seccion.co-apretada{padding-bottom:34px}
body.home-landing-page .co-seccion.co-pegada{padding:0 0 30px}
body.home-landing-page .co-seccion.co-blanca{background:#fff}
@media (max-width:640px){
  body.home-landing-page .co-seccion{padding:54px 0}
  body.home-landing-page .co-seccion.co-encadena{padding-top:38px}
}

body.home-landing-page .co-cabecera{max-width:var(--co-medida)}
body.home-landing-page .co-cabecera h2{
  margin:0;
  font-family:var(--co-serif);
  font-size:clamp(28px, 3.3vw, 38px);
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.1;
  color:var(--co-tinta);
}
body.home-landing-page .co-cabecera > p:last-child{
  margin:13px 0 0;
  color:var(--co-tinta-3);
}

body.home-landing-page .co-rotulo{
  display:inline-block;
  margin:0 0 12px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--co-verde);
}

/* ------------------------------------------------------------
   2 · LA BARRA, SOLO EN ESTA PANTALLA

   Los enlaces llevan a las secciones de la propia portada, así que
   solo tienen sentido aquí: en el catálogo y en las páginas de
   venta la barra se queda como está (decisión del 27-ago).
   La barra la pinta `marco.css`; esto es únicamente la fila de
   enlaces que el guion le cuelga dentro.
   ------------------------------------------------------------ */

body.home-landing-page .co-nav{
  display:flex;
  align-items:center;
  flex:0 0 auto;            /* que no la comprima el nav del tema */
  gap:2px;
  margin-left:26px;
  margin-right:auto;
}
body.home-landing-page .co-nav a{
  display:flex;
  white-space:nowrap;       /* sin esto "Licencias" se parte en dos renglones */
  align-items:center;
  min-height:36px;
  padding:0 13px;
  border-radius:99px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  letter-spacing:.02em;
  text-decoration:none;
  transition:color .25s var(--co-curva), background .25s var(--co-curva);
}
body.home-landing-page .co-nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}
body.home-landing-page .co-nav a.co-aqui{
  color:#9fe3c4;
  background:rgba(159,227,196,.12);
}
/* El nav del tema (donde vive "Entrar") se va a la derecha, que es
   el sitio que le deja libre la fila de enlaces. */
body.home-landing-page .header__nav{margin-left:auto}

/* Por debajo de 900 no cabe con el logo y el botón de entrar: se
   va, y la portada se recorre bajando. */
@media (max-width:900px){
  body.home-landing-page .co-nav{display:none}
}

/* ------------------------------------------------------------
   3 · LA PRIMERA PANTALLA
   ------------------------------------------------------------ */

body.home-landing-page .co-hero{
  position:relative;
  overflow:hidden;                 /* aquí sí: las dos manchas de luz se salen por los lados */
  padding:84px 0 76px;
  background:linear-gradient(rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 92%);
}

/* Las dos manchas de luz que flotan detrás. Son adorno: van sin
   ratón y detrás de todo. */
body.home-landing-page .co-halo{
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
}
body.home-landing-page .co-halo-a{
  width:820px; height:820px; top:-240px; right:-200px;
  background:radial-gradient(circle at 50% 50%, rgba(15,122,82,.16) 0%, rgba(15,122,82,.07) 42%, rgba(15,122,82,0) 70%);
  animation:co-flota 18s ease-in-out infinite;
}
body.home-landing-page .co-halo-b{
  width:720px; height:720px; bottom:-280px; left:-220px;
  background:radial-gradient(circle at 50% 50%, rgba(8,48,31,.12) 0%, rgba(8,48,31,.05) 45%, rgba(8,48,31,0) 72%);
  animation:co-flota 23s ease-in-out infinite reverse;
}
@keyframes co-flota{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.08)}
}

body.home-landing-page .co-hero .co-env{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:64px;
  align-items:center;
}

body.home-landing-page .co-hero h1{
  margin:0;
  font-family:var(--co-serif);
  font-size:clamp(38px, 4.9vw, 56px);
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.1;
  color:var(--co-tinta);
}
body.home-landing-page .co-hero .co-entradilla{
  margin:18px 0 0;
  max-width:46ch;
  font-size:17.5px;
  line-height:1.6;
  color:var(--co-tinta-3);
}
body.home-landing-page .co-hero .co-acciones{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
  margin-top:26px;
}

body.home-landing-page .co-prueba{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--co-linea);
}
body.home-landing-page .co-prueba > div > span{
  display:block;
  font-family:var(--co-serif);
  font-size:25px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
body.home-landing-page .co-prueba small{
  display:block;
  font-size:13.5px;
  color:var(--co-tinta-3);
}
body.home-landing-page .co-estrellas{
  display:inline-flex;
  gap:3px;
  font-size:19px;
  color:var(--co-verde);
}
body.home-landing-page .co-estrellas i{font-style:normal}

/* EL MOSAICO: la foto manda y las dos fichas se le montan encima.
   Las fotos son de la muestra hasta que Wilson mande material
   suyo (decisión del 27-ago: las de los cursos son suyas, las de
   los demás sitios son de muestra). */
body.home-landing-page .co-mosaico{position:relative}
body.home-landing-page .co-pieza{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
  border:1px solid var(--co-linea);
  border-radius:var(--co-radio-grande);
  background:#fff;
  box-shadow:0 1px 2px rgba(20,17,15,.03);
}
body.home-landing-page .co-pieza-alta{
  overflow:hidden;
  width:100%;
  height:clamp(420px, 48vw, 620px);
  padding:0;
  border-color:#e3ded8;
  border-radius:24px;
  background:#e9e3db;
}
body.home-landing-page .co-pieza-alta img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  animation:co-ken 24s ease-in-out infinite alternate;
}
@keyframes co-ken{from{transform:scale(1.04)} to{transform:scale(1.16)}}

body.home-landing-page .co-pieza-verde{
  position:absolute;
  left:-58px;
  bottom:52px;
  width:286px;
  z-index:5;
  border-color:var(--co-verde);
  background:var(--co-verde);
  color:#fff;
  box-shadow:0 12px 34px rgba(15,122,82,.28), 0 40px 80px rgba(8,48,31,.18);
}
body.home-landing-page .co-pieza-verde p{
  margin:0;
  font-size:15.5px;
  line-height:1.55;
}
body.home-landing-page .co-pieza-verde footer{
  margin-top:14px;
  font-size:13px;
  opacity:.82;
}
body.home-landing-page .co-pieza-cifra{
  position:absolute;
  right:-30px;
  top:44px;
  width:214px;
  z-index:5;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 30px rgba(20,17,15,.12), 0 40px 80px rgba(20,17,15,.08);
}
body.home-landing-page .co-pieza-cifra span{
  font-family:var(--co-serif);
  font-size:34px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1;
}
body.home-landing-page .co-pieza-cifra small{
  display:block;
  margin-top:4px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--co-tinta-3);
}

@media (max-width:900px){
  body.home-landing-page .co-hero{padding:52px 0 44px}
  body.home-landing-page .co-hero .co-env{grid-template-columns:1fr; gap:44px}
  body.home-landing-page .co-pieza-alta{height:320px}
  /* Las dos fichas dejan de flotar y se ponen debajo: encima de la
     foto, en 390, taparían media imagen. */
  body.home-landing-page .co-pieza-verde{
    position:relative; left:0; bottom:0; width:auto;
    margin:-46px 56px 0 16px;
  }
  body.home-landing-page .co-pieza-cifra{
    position:relative; right:0; top:0; width:auto;
    margin:14px 16px 0 56px;
  }
}

/* ------------------------------------------------------------
   4 · LA CINTA DE HECHOS
   ------------------------------------------------------------ */

body.home-landing-page .co-cinta{
  overflow:hidden;
  padding:17px 0;
  background:var(--co-verde-hondo);
  color:rgba(255,255,255,.86);
}
body.home-landing-page .co-marquesina{
  display:flex;
  width:max-content;
  animation:co-desliza 38s linear infinite;
}
body.home-landing-page .co-marquesina:hover{animation-play-state:paused}
body.home-landing-page .co-tira{
  display:flex;
  align-items:center;
  gap:56px;
  padding-right:56px;
  font-size:14.5px;
  white-space:nowrap;
}
body.home-landing-page .co-tira b{color:#fff; font-weight:500}
body.home-landing-page .co-tira i{font-style:normal; color:rgba(255,255,255,.32)}
@keyframes co-desliza{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Con el movimiento reducido la cinta se queda quieta y se parte
   en varias líneas, que es la única forma de leerla entera. */
@media (prefers-reduced-motion:reduce){
  body.home-landing-page .co-marquesina{animation:none; width:auto}
  body.home-landing-page .co-tira{flex-wrap:wrap; white-space:normal; gap:10px 28px}
  body.home-landing-page .co-tira[aria-hidden="true"]{display:none}
}

/* ------------------------------------------------------------
   5 · LOS CURSOS (la rejilla real, subida aquí)

   Las tarjetas las viste `catalogo.css`, que desde el 27-ago
   cuelga también de esta pantalla. Aquí solo se coloca la sección
   y se le pone la cabecera de la landing.
   ------------------------------------------------------------ */

body.home-landing-page .co-cursos{
  padding:52px 0 84px;
}
body.home-landing-page .co-cursos .course-cards__container{
  width:min(1200px, 100% - 48px);
  max-width:none;
  margin-inline:auto;
  padding:0;
}
body.home-landing-page .co-cursos .section__headings{
  margin:0;
  text-align:left;
}
body.home-landing-page .co-cursos .section__heading{
  margin:0;
  font-family:var(--co-serif);
  font-size:clamp(28px, 3.3vw, 38px);
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.1;
  color:var(--co-tinta);
  text-transform:none;
}
body.home-landing-page .co-cursos .co-bajada{
  margin:13px 0 0;
  max-width:var(--co-medida);
  font-size:16.5px;
  line-height:1.62;
  color:var(--co-tinta-3);
}
body.home-landing-page .co-cursos .products__list{margin-top:34px}
body.home-landing-page .co-al-catalogo{
  margin:26px 0 0;
  text-align:center;
}
@media (max-width:640px){
  body.home-landing-page .co-cursos{padding-bottom:54px}
  body.home-landing-page .co-cursos .course-cards__container{width:calc(100% - 32px)}
}

/* ------------------------------------------------------------
   6 · LAS CIFRAS
   ------------------------------------------------------------ */

/* LAS CUATRO EN UNA SOLA PLANCHA BLANCA (Sebas, 27-ago). Sueltas
   sobre el papel eran cuatro textos con una raya al lado y no se
   leían como una pieza. La plancha es el mismo gesto que ya usan la
   clase, el portal y el temario, así que no añade lenguaje nuevo a
   una pantalla que ya lleva tres rejillas de tarjetas. */
body.home-landing-page .co-cifras .co-env{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  padding:38px 10px;
  border-radius:var(--co-plancha-radio);
  background:#fff;
  box-shadow:var(--co-plancha);
}
body.home-landing-page .co-cifra{
  position:relative;
  padding:0 30px;
  border-left:1px solid var(--co-linea);
}
body.home-landing-page .co-cifra:first-child{border-left:0}
body.home-landing-page .co-cifra span{
  display:block;
  font-family:var(--co-serif);
  font-size:clamp(34px, 4.2vw, 50px);
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
body.home-landing-page .co-cifra small{
  display:block;
  margin-top:8px;
  font-size:14px;
  color:var(--co-tinta-3);
}
/* En el teléfono son dos y dos. Los separadores cambian de lado:
   la línea vertical se queda solo entre las dos columnas y las de
   abajo se separan con una horizontal, o la plancha se lee como una
   tabla partida. */
@media (max-width:720px){
  body.home-landing-page .co-cifras .co-env{
    grid-template-columns:1fr 1fr;
    padding:30px 6px;
  }
  body.home-landing-page .co-cifra{padding:0 20px}
  body.home-landing-page .co-cifra:nth-child(odd){border-left:0}
  body.home-landing-page .co-cifra:nth-child(n+3){
    margin-top:26px;
    padding-top:26px;
    border-top:1px solid var(--co-linea);
  }
}

/* ------------------------------------------------------------
   7 · REJILLAS Y TARJETAS (licencias, motivos, opiniones, planes)
   ------------------------------------------------------------ */

body.home-landing-page .co-rejilla{
  display:grid;
  gap:18px;
  margin-top:34px;
}
body.home-landing-page .co-rejilla.co-tres{grid-template-columns:repeat(3, 1fr)}
body.home-landing-page .co-rejilla.co-cuatro{grid-template-columns:repeat(4, 1fr)}
@media (max-width:980px){
  body.home-landing-page .co-rejilla.co-cuatro{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body.home-landing-page .co-rejilla.co-tres{grid-template-columns:1fr}
}
@media (max-width:560px){
  body.home-landing-page .co-rejilla.co-cuatro{grid-template-columns:1fr}
}

body.home-landing-page .co-tarjeta{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:26px;
  border:1px solid var(--co-linea);
  border-radius:var(--co-radio-grande);
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:transform .3s var(--co-curva), border-color .3s var(--co-curva), box-shadow .3s var(--co-curva);
}
/* El filo verde que se dibuja al pasar por encima: es el gesto de
   la landing y se repite en las cuatro rejillas. */
body.home-landing-page .co-tarjeta:after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  background:var(--co-verde);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--co-curva);
}
body.home-landing-page .co-tarjeta:hover{
  transform:translateY(-6px);
  border-color:var(--co-verde-borde);
  box-shadow:0 18px 40px rgba(20,17,15,.07);
}
body.home-landing-page .co-tarjeta:hover:after{transform:scaleX(1)}

body.home-landing-page .co-tarjeta h3{
  margin:0;
  font-family:var(--co-serif);
  font-size:23px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.15;
  color:var(--co-tinta);
}
body.home-landing-page .co-tarjeta p{
  margin:0;
  font-size:15.5px;
  line-height:1.6;
  color:var(--co-tinta-3);
}

body.home-landing-page .co-icono{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-bottom:6px;
  border:1px solid var(--co-verde-borde);
  border-radius:14px;
  background:var(--co-verde-claro);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
body.home-landing-page .co-icono svg{
  width:22px;
  height:22px;
  stroke:var(--co-verde);
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.home-landing-page .co-tarjeta:hover .co-icono{transform:scale(1.08) rotate(-4deg)}

body.home-landing-page .co-codigo{
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--co-verde);
}
body.home-landing-page .co-ficha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--co-linea);
  font-size:14px;
  color:var(--co-tinta-3);
}

/* LA TARJETA CON FOTO: la foto ocupa la tapa y el texto vive
   debajo, en su propia caja con relleno. */
body.home-landing-page .co-tarjeta.co-con-foto{padding:0}
body.home-landing-page .co-cuerpo-tarjeta{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:11px;
  padding:22px 24px 24px;
}
body.home-landing-page .co-foto-tapa{
  position:relative;
  overflow:hidden;
  background:#e9e3db;
}
body.home-landing-page .co-foto-tapa img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform .8s var(--co-curva);
}
body.home-landing-page .co-tarjeta:hover .co-foto-tapa img{transform:scale(1.09)}
body.home-landing-page .co-foto-h{aspect-ratio:16/9}
body.home-landing-page .co-foto-c{aspect-ratio:1/1}
body.home-landing-page .co-tarjeta.co-con-foto .co-codigo{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  padding:4px 12px;
  border-radius:99px;
  background:rgba(255,255,255,.92);
  font-size:12px;
  box-shadow:0 2px 8px rgba(20,17,15,.12);
}

/* La cinta de esquina de "la más pedida". */
body.home-landing-page .co-cinta-tarjeta{
  position:absolute;
  top:16px;
  right:-34px;
  z-index:3;
  padding:5px 40px;
  transform:rotate(38deg);
  background:var(--co-verde);
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* La pieza en verde, para romper el ritmo de la rejilla. */
body.home-landing-page .co-tarjeta.co-verde{
  border-color:var(--co-verde);
  background:var(--co-verde);
  color:#fff;
  box-shadow:0 2px 6px rgba(8,48,31,.18), 0 20px 44px rgba(15,122,82,.22);
}
body.home-landing-page .co-tarjeta.co-verde h3{color:#fff}
body.home-landing-page .co-tarjeta.co-verde p{color:rgba(255,255,255,.78)}
body.home-landing-page .co-tarjeta.co-verde .co-codigo{background:var(--co-verde); color:rgba(255,255,255,.9)}
body.home-landing-page .co-tarjeta.co-verde .co-ficha{
  border-top-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.78);
}
body.home-landing-page .co-tarjeta.co-verde:after{background:#fff}

body.home-landing-page .co-enlace-verde{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  color:var(--co-verde);
  text-decoration:none;
}
body.home-landing-page .co-tarjeta.co-verde .co-enlace-verde{color:#fff}
body.home-landing-page .co-enlace-verde .co-flecha{
  display:inline-block;
  transition:transform .3s var(--co-curva);
}
body.home-landing-page .co-tarjeta:hover .co-enlace-verde .co-flecha{transform:translateX(4px)}

/* ------------------------------------------------------------
   8 · LA CORTINA (el vídeo de presentación)

   El vídeo es de muestra: el definitivo lo manda Wilson, y por eso
   lleva su renglón escrito abajo.
   ------------------------------------------------------------ */

body.home-landing-page .co-cortina{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  background:#08301f;
  background-size:cover;
  background-position:center;
  box-shadow:0 30px 70px rgba(20,17,15,.14);
}
body.home-landing-page .co-cortina video,
body.home-landing-page .co-cortina > img{
  display:block;
  width:100%;
  height:clamp(340px, 44vw, 580px);
  object-fit:cover;
}
body.home-landing-page .co-cortina .co-velo{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(8,48,31,.86) 0%, rgba(8,48,31,.55) 45%, rgba(8,48,31,.08) 100%);
}
body.home-landing-page .co-dicho{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  max-width:760px;
  padding:0 clamp(24px, 6vw, 72px);
  color:#fff;
}
body.home-landing-page .co-dicho h2{
  margin:0;
  font-family:var(--co-serif);
  font-size:clamp(28px, 3.6vw, 44px);
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.1;
  color:#fff;
}
body.home-landing-page .co-dicho p{
  margin:0;
  max-width:44ch;
  color:rgba(255,255,255,.8);
}
body.home-landing-page .co-dicho .co-rotulo{color:#9fe3c4}
body.home-landing-page .co-pie-video{
  position:absolute;
  left:0; right:0; bottom:18px;
  z-index:4;
  text-align:center;
  font-size:13px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.82);
}

/* ------------------------------------------------------------
   9 · LOS TRES ESCALONES HASTA EL EXAMEN

   Se llaman `co-escalon` y no `co-paso` a propósito: ver el aviso
   de la cabecera de este archivo.
   ------------------------------------------------------------ */

body.home-landing-page .co-escalones{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin:34px 0 0;
  padding:0;
  list-style:none;
}
/* La línea que une los tres números. En el teléfono no existe: los
   tres escalones van uno debajo de otro. */
body.home-landing-page .co-escalones:before{
  content:"";
  position:absolute;
  left:20px; right:20px; top:19px;
  height:1px;
  background:rgba(255,255,255,.24);
}
body.home-landing-page .co-escalon{
  position:relative;
  padding-top:54px;
}
body.home-landing-page .co-escalon-num{
  position:absolute;
  left:0; top:0;
  display:grid;
  place-items:center;
  width:40px; height:40px;
  border-radius:50%;
  background:#fff;
  color:var(--co-verde-hondo);
  font-family:var(--co-serif);
  font-size:19px;
  font-weight:var(--co-titulo-peso);
  box-shadow:0 0 0 6px rgba(255,255,255,.10);
}
body.home-landing-page .co-escalon b{
  display:block;
  margin-bottom:8px;
  font-family:var(--co-serif);
  font-size:21px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  color:#fff;
}
body.home-landing-page .co-escalon p{
  margin:0;
  font-size:15.5px;
  line-height:1.6;
  color:rgba(255,255,255,.72);
}
@media (max-width:820px){
  body.home-landing-page .co-escalones{grid-template-columns:1fr; gap:26px}
  body.home-landing-page .co-escalones:before{display:none}
}

/* LA SECCIÓN EN VERDE HONDO, que es donde viven los escalones: una
   plancha que parte en dos la pantalla, para que no se lea como
   una lista de bloques blancos seguidos. */
body.home-landing-page .co-seccion.co-verde > .co-env{
  position:relative;
  overflow:hidden;
  width:min(1288px, 100% - 40px);
  padding:60px 52px;
  border-radius:32px;
  background:var(--co-verde-hondo);
  box-shadow:0 30px 70px rgba(8,48,31,.22);
}
body.home-landing-page .co-seccion.co-verde .co-rotulo{color:#9fe3c4}
body.home-landing-page .co-seccion.co-verde .co-cabecera h2{color:#fff}
@media (max-width:820px){
  body.home-landing-page .co-seccion.co-verde > .co-env{
    width:calc(100% - 24px);
    padding:42px 22px;
    border-radius:24px;
  }
}

/* ------------------------------------------------------------
   10 · LAS OPINIONES

   Son las REALES de la academia (las tres del panel y las que los
   alumnos dejan en los cursos), pintadas en el traje de la
   landing. El guion las lee de los dos bloques del tema, quita las
   repetidas y las vacías, y las trae aquí.
   ------------------------------------------------------------ */

body.home-landing-page .co-testimonio{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px;
  border:1px solid var(--co-linea);
  border-radius:var(--co-radio-grande);
  /* BLANCAS, no `--co-papel`: esa variable es el hueso del fondo, y
     con ella las tarjetas casi no se despegaban de la sección. */
  background:#fff;
  transition:transform .3s var(--co-curva), box-shadow .3s var(--co-curva);
}
body.home-landing-page .co-testimonio:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(20,17,15,.07);
}
body.home-landing-page .co-testimonio blockquote{
  margin:0;
  font-family:var(--co-serif);
  font-size:20px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.45;
  color:var(--co-tinta);
}
body.home-landing-page .co-testimonio .co-dice{
  margin:0;
  font-size:15px;
  line-height:1.62;
  color:var(--co-tinta-2);
}
body.home-landing-page .co-testimonio footer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  font-size:14px;
  color:var(--co-tinta-3);
}
body.home-landing-page .co-avatar{
  overflow:hidden;
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border:1px solid var(--co-verde-borde);
  border-radius:50%;
  background:var(--co-verde-claro);
  font-size:13px;
  color:var(--co-verde);
}
body.home-landing-page .co-avatar img{width:100%; height:100%; display:block; object-fit:cover}

/* TODAS DEL MISMO ALTO. En una rejilla, cada FILA se ajusta a su
   tarjeta más larga, así que sin esto la primera fila y la segunda
   salían con alturas distintas y la sección se leía escalonada.
   `grid-auto-rows:1fr` reparte el alto de la fila más alta a todas.
   El pie de cada tarjeta ya iba con `margin-top:auto`, así que el
   nombre se queda abajo del todo y las cajas cuadran. */
body.home-landing-page .co-opiniones .co-rejilla{
  grid-auto-rows:1fr;
}

body.home-landing-page .co-mas-opiniones{display:flex; margin:26px auto 0}
/* Las que esperan a que alguien pulse. `display:none` y no altura
   cero: una tarjeta a cero sigue recibiendo el tabulador. */
body.home-landing-page .co-testimonio.co-escondida{display:none}

/* ------------------------------------------------------------
   11 · LOS PRECIOS
   ------------------------------------------------------------ */

body.home-landing-page .co-plan{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:15px;
  padding:28px;
  border:1px solid var(--co-linea);
  border-radius:var(--co-radio-grande);
  background:#fff;
  transition:transform .3s var(--co-curva), box-shadow .3s var(--co-curva);
}
body.home-landing-page .co-plan:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(20,17,15,.07);
}
body.home-landing-page .co-plan.co-destacado{
  border-color:var(--co-verde-borde);
  background:var(--co-verde-claro);
  transform:scale(1.02);
}
body.home-landing-page .co-plan.co-destacado:hover{transform:scale(1.02) translateY(-6px)}
body.home-landing-page .co-plan .co-etiqueta{
  margin:0;
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--co-verde);
}
body.home-landing-page .co-plan .co-importe{
  margin:0;
  font-family:var(--co-serif);
  font-size:46px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1;
  color:var(--co-tinta);
}
body.home-landing-page .co-plan .co-importe small{
  font-family:var(--co-sans);
  font-size:15px;
  font-weight:400;
  letter-spacing:0;
  color:var(--co-tinta-3);
}
body.home-landing-page .co-plan ul{
  display:grid;
  gap:11px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:15.5px;
  color:var(--co-tinta-2);
}
body.home-landing-page .co-plan li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
body.home-landing-page .co-plan li svg{
  flex:none;
  width:18px; height:18px;
  margin-top:5px;
  stroke:var(--co-verde);
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.home-landing-page .co-plan .co-boton{margin-top:auto}

/* ------------------------------------------------------------
   12 · LAS PREGUNTAS
   ------------------------------------------------------------ */

body.home-landing-page .co-preguntas{
  max-width:840px;
  margin-top:32px;
}
body.home-landing-page .co-pregunta{border-bottom:1px solid var(--co-linea)}
body.home-landing-page .co-pregunta > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 0;
  font-family:var(--co-serif);
  font-size:20px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  color:var(--co-tinta);
  list-style:none;
  cursor:pointer;
  transition:color .25s var(--co-curva);
}
body.home-landing-page .co-pregunta > summary:hover{color:var(--co-verde)}
body.home-landing-page .co-pregunta > summary::-webkit-details-marker{display:none}
body.home-landing-page .co-signo{
  flex:none;
  display:grid;
  place-items:center;
  width:30px; height:30px;
  border:1px solid var(--co-linea);
  border-radius:50%;
  font-family:var(--co-sans);
  font-size:17px;
  font-style:normal;
  color:var(--co-verde);
  transition:transform .4s var(--co-curva), background .3s var(--co-curva), border-color .3s var(--co-curva);
}
body.home-landing-page .co-signo:before{content:"+"}
body.home-landing-page .co-pregunta[open] .co-signo{
  transform:rotate(135deg);
  border-color:var(--co-verde-borde);
  background:var(--co-verde-claro);
}
/* La caja de la respuesta es la que se estira: el guion la anima
   con `element.animate`, porque el cierre no hay CSS que lo
   alcance (al soltarse el `open`, el contenido desaparece). */
body.home-landing-page .co-pregunta-cuerpo{overflow:hidden}
body.home-landing-page .co-pregunta-cuerpo p{
  margin:0;
  padding-bottom:20px;
  max-width:var(--co-medida);
  font-size:16px;
  line-height:1.62;
  color:var(--co-tinta-3);
}

/* ------------------------------------------------------------
   13 · EL CIERRE Y EL AVISO
   ------------------------------------------------------------ */

body.home-landing-page .co-cierre{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:60px 44px;
  border-radius:24px;
  background:var(--co-verde-hondo);
  color:#fff;
  text-align:center;
}
body.home-landing-page .co-cierre h2{
  margin:0;
  font-family:var(--co-serif);
  font-size:clamp(28px, 3.3vw, 38px);
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.1;
  color:#fff;
}
body.home-landing-page .co-cierre p{
  margin:14px auto 28px;
  max-width:52ch;
  color:rgba(255,255,255,.7);
}
body.home-landing-page .co-cierre .co-foto{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.22;
}
body.home-landing-page .co-cierre .co-foto img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.4);
}
@media (max-width:640px){
  body.home-landing-page .co-cierre{padding:42px 22px}
}

/* EL AVISO DE LO QUE FALTA POR CONFIRMAR. Va con borde de trazos a
   propósito: es material para que Wilson corrija sobre la
   pantalla, y se retira antes de publicar. */
body.home-landing-page .co-aviso{
  margin-top:44px;
  padding:22px 26px;
  border:1px dashed var(--co-verde-borde);
  border-radius:var(--co-radio-grande);
  background:var(--co-verde-claro);
}
body.home-landing-page .co-aviso h3{
  margin:0 0 12px;
  font-family:var(--co-sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--co-verde);
}
body.home-landing-page .co-aviso ul{
  margin:0;
  padding-left:20px;
  font-size:15px;
  color:var(--co-tinta-3);
}

/* ------------------------------------------------------------
   14 · EL BOTÓN DE LA CASA

   El de la landing: el fondo se levanta desde abajo al pasar el
   ratón, en vez de cambiar de color de golpe.
   ------------------------------------------------------------ */

body.home-landing-page .co-boton{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-sizing:border-box;
  min-height:46px;
  padding:0 24px;
  border:0;
  border-radius:99px;
  background:var(--co-verde);
  color:#fff;
  font-family:var(--co-sans);
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s var(--co-curva), box-shadow .25s var(--co-curva);
}
body.home-landing-page .co-boton:before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--co-verde-hondo);
  transform:translateY(101%);
  transition:transform .38s var(--co-curva);
}
body.home-landing-page .co-boton:hover:before{transform:translateY(0)}
body.home-landing-page .co-boton > *{position:relative; z-index:1}
body.home-landing-page .co-boton:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,122,82,.22);
}
body.home-landing-page .co-boton .co-flecha{transition:transform .3s var(--co-curva)}
body.home-landing-page .co-boton:hover .co-flecha{transform:translate(3px,-3px)}

body.home-landing-page .co-boton-linea{
  border:1px solid var(--co-linea);
  background:transparent;
  color:var(--co-tinta);
}
body.home-landing-page .co-boton-linea:before{background:var(--co-tinta)}
body.home-landing-page .co-boton-linea:hover{
  border-color:var(--co-tinta);
  color:#fff;
  box-shadow:0 10px 24px rgba(20,17,15,.14);
}
/* Dentro de una plancha verde el de línea va sobre fondo oscuro. */
body.home-landing-page .co-verde .co-boton-linea,
body.home-landing-page .co-cierre .co-boton-linea{
  border-color:rgba(255,255,255,.28);
  color:#fff;
}

/* ------------------------------------------------------------
   15 · EL TELÉFONO Y EL MOVIMIENTO REDUCIDO

   Se mide a 390 de ancho, con 844 y 667 de alto, que es donde
   salen los cortes. Todo lo pulsable, a 44.
   ------------------------------------------------------------ */

@media (max-width:640px){
  /* El botón que manda ocupa el ancho entero y el que acompaña se
     le pone debajo: dos botones a medias no caben en 350 px. */
  body.home-landing-page .co-hero .co-acciones{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  body.home-landing-page .co-hero .co-acciones .co-boton{width:100%; min-height:48px}
  body.home-landing-page .co-hero .co-acciones .co-enlace-verde{justify-content:center}
  body.home-landing-page .co-cierre .co-boton{width:100%}
  body.home-landing-page .co-prueba{gap:18px 24px}
}

@media (prefers-reduced-motion:reduce){
  body.home-landing-page .co-halo,
  body.home-landing-page .co-pieza-alta img{animation:none}
  body.home-landing-page .co-tarjeta,
  body.home-landing-page .co-testimonio,
  body.home-landing-page .co-plan,
  body.home-landing-page .co-boton,
  body.home-landing-page .co-boton:before,
  body.home-landing-page .co-signo,
  body.home-landing-page .co-foto-tapa img{transition:none}
  body.home-landing-page .co-tarjeta:hover,
  body.home-landing-page .co-testimonio:hover,
  body.home-landing-page .co-plan:hover,
  body.home-landing-page .co-boton:hover{transform:none}
}