/*
 * home-redesign.css — Rediseño de la home (tras HOME_REDESIGN_ENABLED).
 * MISMA página home-v2 para todos; solo cambia el HERO según login. Se carga solo
 * con el flag ON. Móvil primero. Marca: azul #1666D6, turquesa #02A9CA, amarillo
 * #FFD400, azul claro #CDEAF7. El hero tiene fondo azul y texto blanco.
 */

/* ===== Puerta (anónimo): un solo botón "Empezar" ===== */
.hero-home-buttons-simple {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hero-home-buttons-simple .btn-yellow {
  font-size: 1.15rem;
  padding: 16px 44px;
}
.hero-home-login {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 1.05rem;
}
.hero-home-login:hover { opacity: 0.85; }

@media (max-width: 640px) {
  .hero-home-buttons-simple { align-items: stretch; }
  .hero-home-buttons-simple .btn-yellow { text-align: center; }
  .hero-home-login { text-align: center; }
}

/* ===== Salón (alumno logueado): el hero ofrece Reservar / Tandems ===== */
/* El saludo "Hi, {nombre}" es el TITULAR del hero logueado: le damos la MISMA
   tipografía de marca que el titular de la puerta (.title-1/.title-2), para que
   la home con sesión se vea tan cuidada como sin sesión (Guille 11/07: "las
   letras y la foto, igual de bonitas que sin logear"). Antes heredaba 16px
   (tamaño de cuerpo) y se veía pobre. */
.home-salon-hi {
  margin-bottom: 1.25rem;
  font-family: 'Proxima Nova Bold', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 1px;
  color: #ffffff;
}

@media (min-width: 1025px) {
  .home-salon-hi { font-size: 48px; letter-spacing: 2px; }
}
.home-salon-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 460px;
}

/* Tira de próxima clase (sobre el azul: cristal translúcido) */
.home-salon-hero .salon-next {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none;
}
.home-salon-hero .salon-next-ico { color: #ffffff; display: flex; flex-shrink: 0; }
.home-salon-hero .salon-next-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.home-salon-hero .salon-next-label { font-weight: 700; color: #ffffff; font-size: 0.9rem; }
.home-salon-hero .salon-next-when { color: rgba(255, 255, 255, 0.9); font-size: 0.9rem; }
.home-salon-hero .salon-next-go { color: #ffffff; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; }

/* Tarjetas grandes: blancas sobre el azul (contraste), icono de color por acción.
   min-height: las dos tarjetas (Reservar / Tándems) miden IGUAL aunque su subtítulo
   ocupe distinto nº de líneas. En móvil "Language exchange with other students" caía
   a 2 líneas (104px) y la de Tándems se veía más grande que la de Reservar (88px);
   Guille 11/07 quiere que sean del mismo tamaño (además, la prioridad es que la gente
   reserve CLASES, no que Tándems destaque más). border-box: la altura incluye el
   padding. */
.home-salon-hero .salon-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border-radius: 18px;
  padding: 18px;
  min-height: 106px;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: transform 0.08s ease;
}
.home-salon-hero .salon-card:active { transform: scale(0.985); }
.home-salon-hero .salon-card-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.home-salon-hero .salon-card--book .salon-card-ico { background: #1666D6; }
.home-salon-hero .salon-card--tandem .salon-card-ico { background: #02A9CA; }
.home-salon-hero .salon-card-txt { flex: 1; display: flex; flex-direction: column; text-align: left; }
.home-salon-hero .salon-card-title { font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #12232e; }
.home-salon-hero .salon-card-sub { font-size: 0.9rem; color: #5b6b73; margin-top: 2px; }
.home-salon-hero .salon-card-arrow { flex-shrink: 0; display: flex; }
.home-salon-hero .salon-card--book .salon-card-arrow { color: #1666D6; }
.home-salon-hero .salon-card--tandem .salon-card-arrow { color: #02A9CA; }

@media (min-width: 700px) {
  .home-salon-hero { max-width: 480px; }
  .home-salon-hero .salon-card-title { font-size: 1.3rem; }
}

/* ===== Ajustes del hero de la home (Guille 11/07) =====
   Todo acotado a .hero-home-main (el hero principal de la home), para NO tocar los
   heroes que reutilizan .hero-home en otras páginas (about/team/why-started). */

/* 1) Foto de las dos personas MÁS GRANDE en móvil (venía a 220px de ancho).
   Solo el breakpoint de móvil (<=640px); tablet (360px) y escritorio quedan igual. */
@media (max-width: 640px) {
  .hero-home-main .hero-home-image { max-width: 300px; }
  .hero-home-main .hero-home-image img { max-height: 300px; }
}

/* 2) Botones (grupo de avisos + tarjetas) un poco más ABAJO: aire extra encima. */
.hero-home-main .home-salon-hero { margin-top: 16px; }

/* Mini aviso "Tu primera clase es gratis": va DEBAJO de las tarjetas, alineado con
   ellas (mismo ancho máximo) y discreto. El texto hereda el blanco del hero. */
.hero-first-free-note {
  margin-top: 14px;
  max-width: 480px;
}

/* Hero a PANTALLA COMPLETA (Guille 04/07): el azul ocupa toda la primera pantalla; el
   contenido va centrado (un poco más abajo) y el marketing (blanco) empieza al hacer
   scroll. Solo el hero PRINCIPAL (hero-home-main), NO las secciones que reutilizan
   .hero-home. 100dvh = alto real del móvil (descuenta la barra del navegador). */
.hero-home-main { min-height: 100dvh; }
.hero-home-main > .container { padding-top: 2.5rem; padding-bottom: 2.5rem; }