/* =====================================================================
   home.css · Estilos exclusivos de la HOME (portada) de Healthy Mezclum
   ---------------------------------------------------------------------
   Qué es: las piezas que solo usa la portada (boceto "Home · boceto V2"):
   portada con retrato, las cuatro patas, el bloque "Elige tu curso,
   criatura" (filtros por pilar y elección petit/completo en cada
   tarjeta), cifras y mensajes del buzón, bloque de venta de "San Viernes
   Rock and Roll", "Soy Fati" y la newsletter.
   Necesita: comun.css y landings.css cargados antes (colores, letras,
   botones, cabecera, pie, secciones, testimonios, retrato con manchas,
   formulario de la guía y reseñas).
   Todas las clases propias empiezan por "home-" o "curso" para que no
   choquen con las de otras páginas.
   Los filtros y la elección petit/completo funcionan SOLO CON CSS, sin
   programación (decisión de Fati, 31/10/2026). Si un navegador muy
   antiguo no lo entiende, se ven todos los cursos y los dos botones de
   cada curso: nunca se queda nada escondido sin poder llegar a él.
   Creado: 31/10/2026.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. PORTADA ("¡Hola, criatura!")
   Usa la rejilla de la portada de landings.css y el retrato en círculo
   sobre dos manchas (también de landings.css).
   --------------------------------------------------------------------- */
.home-hero .hero__titulo {
  font-size: 64px;
  line-height: 1.05;
}
.home-hero .hero__accion { margin-bottom: 22px; }
/* Las tres ventajas, en una sola fila (como en el boceto) */
.home-hero .hero__ventajas {
  grid-template-columns: repeat(3, max-content);
  gap: 4px 26px;
}
.home-hero__figura { margin: 0; }
.home-hero__figura .pie-mano { text-align: left; margin-left: 12%; }

@media (max-width: 900px) {
  .home-hero .hero__titulo { font-size: 42px; }
  .home-hero .hero__ventajas { grid-template-columns: 1fr; }
  .home-hero .hero__accion .boton { width: 100%; }
}


/* ---------------------------------------------------------------------
   2. LAS CUATRO PATAS (tarjetas de pilar con su pastel)
   Cada tarjeta lleva el fondo pastel de su pilar (Brandbook) y un enlace
   que baja a "Elige tu curso" con ese pilar ya filtrado.
   --------------------------------------------------------------------- */
.home-pilares {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.home-pilar {
  height: 100%;
  border-radius: var(--hm-r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.home-pilar img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.home-pilar__cuerpo {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.home-pilar h3 { font-size: 26px; margin-bottom: 8px; }
.home-pilar p { font-size: 15px; color: var(--hm-tinta-2); margin: 0 0 16px; flex: 1; }
.home-pilar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;                 /* área táctil mínima */
  font-size: 14px;
  font-weight: 700;
  color: var(--hm-tinta);
  text-decoration: none;
}
.home-pilar a::after { content: "→"; }
.home-pilar a:hover { text-decoration: underline; }
/* El pastel de cada pilar (Brandbook, "Pilares") */
.home-pilar--alimentacion { background: var(--hm-ali-bg); }
.home-pilar--descanso { background: var(--hm-des-bg); }
.home-pilar--emociones { background: var(--hm-emo-bg); }
.home-pilar--movimiento { background: var(--hm-mov-bg); }

@media (max-width: 900px) {
  .home-pilares { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .home-pilares { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------
   3. TESTIMONIOS: el titular grande va en cursiva (landings.css pone el
   resto). Aquí solo se centra el bloque.
   --------------------------------------------------------------------- */
.home-testimonios .encabezado h2 { font-size: 54px; }
@media (max-width: 767px) {
  .home-testimonios .encabezado h2 { font-size: 38px; }
}


/* ---------------------------------------------------------------------
   4. "ELIGE TU CURSO, CRIATURA"
   4.1 Cabecera: titular a la izquierda y nota a mano a la derecha.
   --------------------------------------------------------------------- */
.home-cursos__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-bottom: 26px;
}
.home-cursos__cabecera .encabezado { margin-bottom: 0; }
.home-cursos__cabecera .nota-mano { margin: 0; }

/* Las "anclas" de los filtros: son marcas invisibles al principio del
   bloque. Al pulsar un filtro (o una de las cuatro patas) la dirección
   termina en, por ejemplo, #filtro-descanso, y el CSS de abajo muestra
   solo los cursos de ese pilar. Dejan 24 px de aire por arriba al bajar. */
.home-filtro-ancla {
  display: block;
  scroll-margin-top: 24px;
}

/* 4.2 Filtros: píldoras. La activa, en mostaza pastel (como en el boceto) */
.home-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
}
.home-filtro {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--hm-input);
  border-radius: var(--hm-r-pill);
  background: var(--hm-blanco);
  color: var(--hm-tinta);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.home-filtro:hover { border-color: var(--hm-tinta); }

/* Sin ningún filtro elegido, "Todos" está activo */
.home-filtro--todos,
.home-cursos:has(#filtro-alimentacion:target) .home-filtro[href="#filtro-alimentacion"],
.home-cursos:has(#filtro-descanso:target) .home-filtro[href="#filtro-descanso"],
.home-cursos:has(#filtro-emociones:target) .home-filtro[href="#filtro-emociones"],
.home-cursos:has(#filtro-movimiento:target) .home-filtro[href="#filtro-movimiento"] {
  background: var(--hm-mostaza-pastel);
  border-color: var(--hm-sel-bd);
  font-weight: 700;
}
/* Si hay un filtro elegido, "Todos" deja de estar activo */
.home-cursos:has(.home-filtro-ancla:target) .home-filtro--todos {
  background: var(--hm-blanco);
  border-color: var(--hm-input);
  font-weight: 600;
}

/* Filtrado: se esconden los cursos que no son del pilar elegido */
.home-cursos:has(#filtro-alimentacion:target) .curso:not([data-pilar~="alimentacion"]),
.home-cursos:has(#filtro-descanso:target) .curso:not([data-pilar~="descanso"]),
.home-cursos:has(#filtro-emociones:target) .curso:not([data-pilar~="emociones"]),
.home-cursos:has(#filtro-movimiento:target) .curso:not([data-pilar~="movimiento"]) {
  display: none;
}

/* Texto solo para lectores de pantalla que dice qué se está viendo.
   El contenido cambia con el filtro elegido (los lectores de pantalla
   leen este texto generado con CSS). */
.home-filtro-estado::after { content: "Se muestran todos los cursos."; }
.home-cursos:has(#filtro-alimentacion:target) .home-filtro-estado::after { content: "Se muestran los cursos de alimentación."; }
.home-cursos:has(#filtro-descanso:target) .home-filtro-estado::after { content: "Se muestran los cursos de descanso."; }
.home-cursos:has(#filtro-emociones:target) .home-filtro-estado::after { content: "Se muestran los cursos de emociones."; }
.home-cursos:has(#filtro-movimiento:target) .home-filtro-estado::after { content: "Se muestran los cursos de movimiento."; }

/* 4.3 Rejilla de cursos: 3 columnas; en móvil, carrusel que se desliza */
.home-cursos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.curso {
  /* 10/11/2026: "relative" para que los textos solo para lectores de pantalla (.solo-lector,
     que van con position: absolute) se queden dentro de su tarjeta. Sin esto, en el móvil se
     salían del carrusel y la página se podía deslizar a la derecha hasta el infinito. */
  position: relative;
  height: 100%;
  background: var(--hm-blanco);
  border: 1px solid var(--hm-linea-2);
  border-radius: var(--hm-r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.curso__imagen {
  position: relative;
  margin: 0;
}
.curso__imagen img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--hm-linea-2);
}
/* Cuándo abre cada curso: etiqueta sólida sobre la imagen (Fati, 09/11/2026) */
.curso__apertura {
  position: absolute;
  left: 12px; bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 5px 12px;
  border-radius: var(--hm-r-pill);
  background: rgba(229, 178, 52, .85);  /* --hm-boton, algo transparente (Fati) */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hm-tinta);
}
/* El curso que ya está abierto va en crema, algo transparente (Fati) */
.curso__apertura--abierto {
  right: 12px;
  width: fit-content;
  margin: 0 auto;                        /* centrada sobre la imagen */
  text-align: center;
  background: rgba(255, 252, 246, .88);  /* --hm-crema */
}
/* Etiqueta del pilar sobre la imagen */
.curso__pilar {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 12px;
  border-radius: var(--hm-r-pill);
  background: var(--hm-blanco);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hm-tinta-2);
}
.curso__cuerpo {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Tarjetas CRO (04/11/2026, documento "Tarjetas de curso de la home"):
   título "Curso + nombre" en una línea y, debajo, "para + resultado".
   La frase del problema ocupa siempre el alto de 2 líneas, para que todas
   las tarjetas tengan las mismas líneas a la misma altura. */
.curso h3 { font-size: 23px; margin-bottom: 10px; line-height: 1.2; }
.curso__nombre { display: block; }
.curso__para {
  display: block;
  margin-top: 4px;
  font-family: var(--hm-texto);
  font-size: 19px; /* Antes 15 px: Fati quiere que el descriptivo se vea (09/11/2026) */
  font-weight: 600;
  color: var(--hm-ocre);
  /* Siempre el alto de 2 líneas, para que las tarjetas sigan alineadas */
  min-height: 2.4em;
}
/* En pantallas grandes todos caben en una línea: sin hueco reservado */
@media (min-width: 1240px) {
  .curso__para { min-height: 0; }
}
.curso__texto {
  font-size: 15px;
  line-height: 1.5;
  color: var(--hm-tinta-2);
  margin: 0 0 10px;
  min-height: 3em;          /* 2 líneas */
}
.curso__datos {
  font-size: 13px;
  color: var(--hm-gris);
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hm-linea-2);
}
/* Autora: foto pequeña redonda + nombre.
   04/11/2026: ya no se usa en las tarjetas (marketing pide quitarla); se deja por si acaso. */
.curso__autora {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 14px;
}
.curso__autora img {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* 4.4 Elección de versión dentro de cada tarjeta (petit / completo) */
.curso__versiones {
  border: 0;
  margin: auto 0 0;              /* empuja la elección y el botón al final de la tarjeta */
  padding: 0;
  display: grid;
  gap: 10px;
}
.curso__opcion {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  border: 1.5px solid var(--hm-linea-2);
  border-radius: 14px;
  cursor: pointer;
}
.curso__opcion:has(input:checked) {
  background: var(--hm-sel-bg);
  border-color: var(--hm-sel-bd);
}
.curso__opcion:has(input:focus-visible) { outline: var(--hm-foco); outline-offset: 2px; }
/* Círculo de selección dibujado a mano (como en el selector de las landings) */
.curso__opcion input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin: 0;
  border: 2px solid var(--hm-tinta);
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.curso__opcion input::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--hm-tinta);
  transform: scale(0);
  transition: transform .15s ease;
}
.curso__opcion input:checked::before { transform: scale(1); }
.curso__opcion-nombre { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
.curso__opcion-detalle { display: block; font-size: 12px; color: var(--hm-gris); }
.curso__opcion-precio {
  font-family: var(--hm-display);
  font-weight: 500;
  font-size: 20px;
  white-space: nowrap;
}

/* Botón: se ve el de la versión elegida. Por defecto, el petit. */
.curso__boton { width: 100%; margin-top: 14px; min-height: 50px; font-size: 16px; }
.curso:has(input[value="completo"]:checked) .curso__boton--petit { display: none; }
.curso:has(input[value="petit"]:checked) .curso__boton--completo { display: none; }

@media (max-width: 900px) {
  .home-cursos__lista { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  /* Carrusel deslizable con la siguiente tarjeta asomando (Brandbook) */
  .home-cursos__lista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 12px;
    margin-right: calc(-1 * var(--hm-gutter));
    padding-right: var(--hm-gutter);
  }
  /* Filtros con el problema (04/11/2026): en el móvil, en una fila que se
     desliza con el dedo, para que no ocupen media pantalla */
  .home-filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: calc(-1 * var(--hm-gutter));
    padding-right: var(--hm-gutter);
    padding-bottom: 6px;
  }
  .home-filtro { flex: 0 0 auto; white-space: nowrap; }
  .curso h3 { font-size: 21px; }
  /* "height: auto" para que todas las tarjetas del carrusel se estiren a la misma altura (04/11/2026) */
  .home-cursos__lista > li { flex: 0 0 86%; scroll-snap-align: start; height: auto; }
  .home-cursos__cabecera .nota-mano { font-size: 24px; }
}


/* ---------------------------------------------------------------------
   5. TESTIMONIOS BAJO LOS CURSOS
   Sustituyen al bloque de cifras (petición de Fati, 31/10/2026). Usan el
   mismo formato que los de arriba (landings.css); aquí solo el espacio.
   --------------------------------------------------------------------- */
.home-testimonios-abajo { margin-top: 72px; }
/* Línea de garantía bajo los cursos, centrada (el escudo lo pone comun.css) */
.home-garantia {
  justify-content: center;
  margin: 32px auto 0;
  font-size: 15px;
  text-align: center;
}
@media (max-width: 767px) {
  .home-testimonios-abajo { margin-top: 48px; }
}


/* ---------------------------------------------------------------------
   6. SAN VIERNES ROCK AND ROLL (bloque de venta de la newsletter de pago)
   Ocupa el lugar que en el boceto tenía Binomio (decisión de Fati,
   31/10/2026) y copia su diseño: fondo lavanda del pilar Descanso,
   imagen girada a la izquierda y texto con dos precios a la derecha.
   --------------------------------------------------------------------- */
.home-sanviernes {
  background: var(--hm-des-bg);
}
.home-sanviernes__rejilla {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.home-sanviernes__figura { margin: 0; }
.home-sanviernes__figura img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;                       /* imagen entera: así no se cortan las letras del cartel */
  object-fit: cover;
  border-radius: 28px;
  transform: rotate(-3deg);                  /* tarjeta ligeramente girada, como en el boceto */
  box-shadow: var(--hm-sombra);
}
.home-sanviernes h2 { font-size: 44px; margin-bottom: 16px; }
.home-sanviernes__texto { color: var(--hm-tinta-2); max-width: 600px; }
.home-sanviernes .lista-ticks { margin: 18px 0 24px; }
.home-sanviernes .lista-ticks li { margin-bottom: 10px; }
.home-sanviernes__planes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
/* Botón oscuro, como "Solicitar plaza" en el boceto */
.boton--oscuro {
  background: var(--hm-tinta);
  color: var(--hm-crema);
  border: 0;
}
.boton--oscuro:hover { background: var(--hm-tinta-2); }
.home-sanviernes__nota { font-size: 14px; color: var(--hm-gris); margin: 14px 0 0; }
@media (max-width: 900px) {
  .home-sanviernes__rejilla { grid-template-columns: 1fr; gap: 32px; }
  .home-sanviernes h2 { font-size: 32px; }
  .home-sanviernes__planes .boton { width: 100%; }
  .home-sanviernes__figura img { max-width: 320px; }
}


/* ---------------------------------------------------------------------
   7. "SOY FATI Y NO VENDO HUMO" (usa el bloque "sobre-mi" de landings.css)
   --------------------------------------------------------------------- */
.home-fati__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 15px;
  color: var(--hm-tinta);
}
.home-fati__enlace:hover { color: var(--hm-ocre); }

/* Reseñas nada objetivas: en la Home son 3 tarjetas (en "Sobre mí", 4) */
.home-resenas-bloque { margin-top: 72px; }
.home-resenas { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .home-resenas { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------
   8. NEWSLETTER GRATIS (fondo salvia, texto a la izquierda y formulario
   de la guía a la derecha; el formulario está en comun.css)
   --------------------------------------------------------------------- */
.home-newsletter { background: var(--hm-salvia-pastel); }
.home-newsletter__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;          /* dos columnas iguales: texto e ilustración / formulario */
  gap: 56px;
  align-items: center;                     /* las dos columnas centradas en altura: todo en un bloque */
}
/* Texto e ilustración, uno al lado del otro en la columna izquierda */
.home-newsletter__texto-bloque {
  display: grid;
  grid-template-columns: 1fr;              /* 05/11/2026: una columna (antes "1fr auto", con un solo libro al lado) */
  gap: 8px 24px;
  align-items: end;
}
.home-newsletter__texto-bloque > :not(.home-newsletter__libros) { grid-column: 1; }
/* Con dos libros no caben al lado del texto: en escritorio van DEBAJO del texto */
.home-newsletter__texto-bloque .home-newsletter__libros { grid-column: 1; justify-self: center; margin-top: 16px; }
/* 05/11/2026: dos guías gratis. Los dos libros van juntos, un poco solapados y
   girados hacia lados distintos, como apoyados uno junto al otro. */
.home-newsletter__libros { display: flex; align-items: flex-start; }
.home-newsletter__libros .home-newsletter__figura + .home-newsletter__figura {
  margin-left: -36px;                      /* el segundo libro pisa un poco al primero */
  margin-top: 18px;
  transform: rotate(4deg);
}
.home-newsletter h2 { font-size: 36px; margin-bottom: 16px; }
.home-newsletter__texto { color: var(--hm-tinta-2); max-width: 460px; }
/* Portada de la guía con aspecto de LIBRO (maqueta tipo "mockup", petición de
   Fati, 01/11/2026; antes iba la superheroína en un recorte redondeado).
   Tamaño medio junto al titular y el texto, para que el bloque quede compacto.
   El efecto libro se hace solo con CSS sobre la portada entera:
   - esquinas casi rectas (más redondeadas en el borde derecho, como las hojas),
   - sombra suave debajo, como si el libro estuviera apoyado,
   - un poco girado para que parezca un objeto y no una foto plana,
   - el lomo: una franja más oscura a la izquierda (el ::after de la figura). */
.home-newsletter__figura {
  margin: 0;
  position: relative;                      /* para colocar encima el lomo */
  width: 190px;
  transform: rotate(-3deg);
}
.home-newsletter__figura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 6px 6px 2px;
  box-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.08),         /* canto de las hojas */
    10px 14px 24px rgba(0, 0, 0, 0.22);    /* sombra del libro sobre el fondo */
}
.home-newsletter__figura::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 12px;
  border-radius: 2px 0 0 2px;
  /* Lomo: oscuro en el borde y aclarándose hacia la portada, con una línea de pliegue */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.04) 70%, rgba(255, 255, 255, 0.25));
  pointer-events: none;
}
.home-newsletter .sm-formulario { margin-top: 0; }
@media (max-width: 900px) {
  .home-newsletter__rejilla { grid-template-columns: 1fr; gap: 28px; }
  .home-newsletter h2 { font-size: 32px; }
  /* En móvil: la ilustración, mediana y centrada, encima del texto */
  .home-newsletter__texto-bloque { grid-template-columns: 1fr; }
  .home-newsletter__texto-bloque .home-newsletter__libros { grid-column: 1; grid-row: 1; justify-self: center; }
  .home-newsletter__figura { width: 150px; }
}

/* ---------------------------------------------------------------------
   OPCIÓN "MUY PRONTO" en las tarjetas de curso (05/11/2026, Hazte Sitio)
   Para una versión que aún no está a la venta: más apagada, no se puede
   elegir (la casilla va desactivada en el HTML) y en el precio pone
   "Muy pronto" con la letra a mano.
   --------------------------------------------------------------------- */
.curso__opcion--pronto { opacity: .65; cursor: default; }
.curso__opcion--pronto input { cursor: not-allowed; }
.curso__opcion-precio--pronto { font-family: var(--hm-mano); font-size: 20px; color: var(--hm-ocre); }