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

/* ===== PBC Live en el hero (Guille 03/08/2026) =====
   Verde, el color de "hay alguien ahí AHORA", igual que la bolita del menú. Es la
   única tarjeta que cambia sola: cuando entra gente, la línea de abajo pasa a
   decir cuántos hay (lo mueve el sondeo de includes/live_presence.html). */
.home-salon-hero .salon-card--live .salon-card-ico { background: #16a34a; }
.home-salon-hero .salon-card--live .salon-card-arrow { color: #16a34a; }
.home-salon-hero .live-card-on { display: inline-flex; align-items: center; gap: .3rem;
  color: #14803c; font-weight: 700; }
.home-salon-hero .live-card-on[hidden], .home-salon-hero .live-card-off[hidden] { display: none; }
/* Las banderitas de los idiomas metidos ahora en Live, pegadas al número. Vacío
   no ocupa nada (gap del inline-flex del padre). */
.home-salon-hero .live-card-flags { display: inline-flex; align-items: center; gap: .22rem; }
.home-salon-hero .live-card-flag { width: 18px; height: 13px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08); display: block; }
.home-salon-hero .live-card-dot { width: .5rem; height: .5rem; border-radius: 50%;
  background: #22c55e; flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: liveHomePulse 2s infinite; }
@media (prefers-reduced-motion: reduce) { .home-salon-hero .live-card-dot { animation: none; } }
@keyframes liveHomePulse {
  70% { box-shadow: 0 0 0 .32rem rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

@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; }

/* ── El ajolote, mascota de la casa (Guille 11/08/2026) ─────────────────────────
   Dos posturas, una por pantalla (el dibujo lo elige el <picture>):
   · ORDENADOR (>=1280px): nadando de lado en el azul, asomando POR DETRÁS del
     borde derecho de las tarjetas. Hace falta hueco de sobra a la derecha;
     medido, con 1200px el morro se salía 12px.
   · MÓVIL Y TABLET: encaramado al borde de arriba de la primera tarjeta, con las
     manos por encima.
   La regla que no se toca: NUNCA le roba un clic a "Book a class", que es la que
   trae el dinero. En ordenador va en una capa por debajo, así que en el solape
   gana la tarjeta. En móvil va por encima (si no, las manos no se verían), y por
   eso ahí el dibujo no responde al dedo y el enlace ocupa solo la parte de
   arriba, la que cae sobre el azul.
   Quieto a propósito: lo único que se mueve son las burbujas, lentas y flojas. */
.home-salon-hero { position: relative; }
.home-salon-hero .salon-card,
.home-salon-hero .salon-next { position: relative; z-index: 2; }

/* Móvil y tablet: la cabeza asomada sobre la tarjeta de reservar (maqueta de
   Guille 12/08 noche). Los DEDOS caen sobre el borde de la tarjeta (19px) y el
   corte del cuello queda sobre el blanco, como una repisa. El enlace mide solo
   la franja sobre el azul (105px); lo que pisa la tarjeta es dibujo sin tacto. */
.home-mascot {
  display: block;
  position: absolute;
  top: -105px;
  right: 16px;
  width: 116px;
  height: 105px;
  overflow: visible;
  z-index: 3;
  line-height: 0;
}
.home-mascot-img {
  width: 116px;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.20));
          filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.20));
}
/* Sitio para el bicho: sin esto se sentaría encima del "Hi, ...". Solo cuando el
   ajolote está encendido (la clase la pone la plantilla), para que a quien no lo
   ve la portada le quede exactamente igual que hoy. */
.has-mascot .hero-home-main .home-salon-hero { margin-top: 112px; }

@media (min-width: 1280px) {
  /* En ordenador vuelve a su sitio de siempre: el ajolote nada al lado. */
  .has-mascot .hero-home-main .home-salon-hero { margin-top: 16px; }
  .home-mascot {
    display: block;
    position: absolute;
    /* ABRAZANDO la tarjeta de reservar (referencia de Guille 12/08): colgado de
       la esquina derecha, solo la MANO pisa la tarjeta (capa por encima), la
       cara y el cuerpo quedan en el azul y asoman un poco por debajo. Para no
       robarle ni un clic a la tarjeta, el enlace mide solo la franja que cae
       sobre el azul y el dibujo sobresale hacia la izquierda como adorno sin
       tacto. Medido con maqueta: los DEDOS entran 28px, justo sobre la esquina
       de abajo a la derecha, y el resto queda en el azul. */
    top: -6px;
    right: auto;
    left: 100%;                /* el enlace empieza donde acaba la tarjeta */
    width: 102px;              /* solo la parte sobre el azul es clicable */
    height: 139px;
    overflow: visible;
    z-index: 3;
    line-height: 0;
  }
  .home-mascot-img {
    width: 130px;
    height: auto;
    margin-left: -28px;        /* los dedos entran 28px sobre la tarjeta */
    display: block;
    pointer-events: none;      /* el clic sobre la tarjeta es de la tarjeta */
    -webkit-filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
            filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
  }
  .home-mascot:hover .home-mascot-img { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
  .home-mascot-img { -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; }

  /* En ordenador las burbujas suben por encima de la cabeza, a la derecha. */
  .home-mascot-bubbles { top: -6px; right: 6px; left: auto; width: 46px; height: 74px; }
}

/* Burbujas: cuatro, subiendo despacio al lado del bicho, cada una con su ritmo
   para que no vayan en fila india. En móvil salen por su izquierda, que es donde
   queda azul libre. */
  .home-mascot-bubbles {
    position: absolute;
    top: 4px;
    left: -20px;
    width: 30px;
    height: 66px;
    pointer-events: none;
  }
  .home-mascot-bubbles i {
    position: absolute;
    bottom: 0;
    display: block;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
    opacity: 0;
    -webkit-animation: pbc-bubble 9s ease-in-out infinite;
            animation: pbc-bubble 9s ease-in-out infinite;
  }
  .home-mascot-bubbles i:nth-child(1) { left: 4px;  width: 7px;  height: 7px;  -webkit-animation-duration: 9s;  animation-duration: 9s;  -webkit-animation-delay: 0s;    animation-delay: 0s; }
  .home-mascot-bubbles i:nth-child(2) { left: 18px; width: 5px;  height: 5px;  -webkit-animation-duration: 11s; animation-duration: 11s; -webkit-animation-delay: 2.2s;  animation-delay: 2.2s; }
  .home-mascot-bubbles i:nth-child(3) { left: 29px; width: 9px;  height: 9px;  -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-delay: 4.5s;  animation-delay: 4.5s; }
  .home-mascot-bubbles i:nth-child(4) { left: 13px; width: 4px;  height: 4px;  -webkit-animation-duration: 12s; animation-duration: 12s; -webkit-animation-delay: 6.8s;  animation-delay: 6.8s; }

@-webkit-keyframes pbc-bubble {
  0%   { -webkit-transform: translate(0, 0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.85; }
  70%  { opacity: 0.7; }
  100% { -webkit-transform: translate(6px, -74px) scale(1); opacity: 0; }
}
@keyframes pbc-bubble {
  0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.85; }
  70%  { opacity: 0.7; }
  100% { transform: translate(6px, -74px) scale(1); opacity: 0; }
}

/* Quien pide en su móvil/ordenador "menos movimiento" no ve ni una burbuja. */
@media (prefers-reduced-motion: reduce) {
  .home-mascot-bubbles i { -webkit-animation: none; animation: none; opacity: 0; }
  .home-mascot-img { -webkit-transition: none; transition: none; }
}