/* ============================================================
   CLÍNICA SAN XAVIER — Mejoras estéticas (auditoría Awwwards)
   Se carga DESPUÉS de decor.css. No introduce color nuevo: solo
   trabaja con los tokens ya definidos en styles.css (variaciones
   de luminosidad, opacidad, sombra y profundidad).

   Contenido de este archivo:
   1. Lenguaje de movimiento (scroll-reveal + profundidad del hero)
   2. Unificación editorial de "Cómo funciona" con el resto de
      secciones (elimina el patrón de tarjeta/SaaS que rompía la
      consistencia con "Especialidades")
   3. Detalle tipográfico editorial en testimonios (comilla Playfair)
   4. Microinteracciones de foco/hover más precisas
   5. Panel de marca en login/registro (antes: card genérica flotante)
   ============================================================ */

/* ---------------------------------------------------------------
   1. MOTION SYSTEM — entrance
   Filosofía: calmado, lento, nunca "rebota". Un sitio de salud
   emocional no debe sentirse juguetón; el movimiento debe sentirse
   como una respiración, no como una demostración de producto.
--------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
  /* stagger automático dentro de listas/grids reveladas por fila */
  [data-reveal-group] > *:nth-child(1) { --reveal-delay: 0ms; }
  [data-reveal-group] > *:nth-child(2) { --reveal-delay: 90ms; }
  [data-reveal-group] > *:nth-child(3) { --reveal-delay: 180ms; }
  [data-reveal-group] > *:nth-child(4) { --reveal-delay: 270ms; }
  [data-reveal-group] > *:nth-child(5) { --reveal-delay: 360ms; }
  [data-reveal-group] > *:nth-child(6) { --reveal-delay: 450ms; }
}

/* ---------------------------------------------------------------
   1b. MOTION SYSTEM — profundidad del hero
   Blob, puntos y mascota responden al movimiento del cursor a
   velocidades distintas (capas), reforzando la sensación de
   profundidad ya sugerida por el drop-shadow existente.
   Solo en dispositivos con puntero fino (mouse) y sin
   prefers-reduced-motion; en móvil/touch no se activa.
--------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  .hero-visual {
    perspective: 1000px;
  }
  .hero-visual-blob,
  .hero-visual-dots,
  .hero-mascot {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hero-visual[data-depth] .hero-visual-blob {
    transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -6px), 0);
  }
  .hero-visual[data-depth] .hero-visual-dots--tl {
    transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 12px), 0);
  }
  .hero-visual[data-depth] .hero-visual-dots--br {
    transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -10px), 0);
  }
  .hero-visual[data-depth] .hero-mascot {
    transform: translate3d(calc(var(--mx, 0) * 4px), calc(var(--my, 0) * 4px), 0);
  }
}

/* ---------------------------------------------------------------
   2. "CÓMO FUNCIONA" — unificación editorial
   ANTES: decor.css convertía cada paso en una tarjeta con
   box-shadow + border-radius de 20px, un patrón "SaaS genérico"
   que contradecía la intención explícita de redesign.css de
   construir la página como filas editoriales (igual que
   "Especialidades" y el FAQ). Esto generaba inconsistencia visual:
   dos vocabularios de tarjeta distintos en la misma página.
   DESPUÉS: se retira la tarjeta y se integra el paso como fila
   editorial, con el color de cada paso reducido a un marcador de
   número (ya existente) en vez de un borde superior de 4px sobre
   una caja. Se conserva el mascot circular como único acento
   "vivo" de la fila.
--------------------------------------------------------------- */
.steps {
  display: block;
  border-top: 1px solid var(--color-border-strong);
}
.step {
  /* BUG (encontrado en captura real): esta regla decía
     "100px 68px 1fr" — una rejilla de 3 columnas escrita para un
     markup de 3 hijos (número + ícono + texto) que ya no existe.
     El HTML actual de cada <li> solo tiene 2 hijos directos:
     .step-icon-mascot y .step-body (el número vive DENTRO de
     step-body, no al lado). Con 3 columnas para 2 hijos, todo el
     título+párrafo caía comprimido en la columna de 68px, y el
     texto se partía palabra por palabra en vertical, con un hueco
     vacío enorme en la columna 1fr que nadie ocupaba.
     FIX: 2 columnas, una por cada hijo real. */
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  box-shadow: none;
  align-items: center;
  transition: background 0.25s ease;
}
.step:hover { background: var(--color-warm-white); }
.step-body { min-width: 0; } /* deja que el párrafo haga wrap normal, no letra por letra */
.step-number {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--color-stone);
  margin-bottom: 2px;
}
.step-icon-mascot {
  width: 68px; height: 68px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-border-strong) inset;
}
.step--pink .step-icon-mascot { box-shadow: 0 0 0 2px var(--pink) inset; }
.step--blue .step-icon-mascot { box-shadow: 0 0 0 2px var(--color-blue-light) inset; }
.step--green .step-icon-mascot { box-shadow: 0 0 0 2px var(--green-light) inset; }

@media (max-width: 900px) {
  .step { grid-template-columns: 68px 1fr; }
}

/* ---------------------------------------------------------------
   2b. "CÓMO FUNCIONA" — la mascota tapaba la palabra "terapia"
   BUG: decor.css posiciona .how-mascot en position:absolute;
   right:0 dentro de .how-it-works-header, pero ese contenedor
   mide lo mismo que el título (max-width: 60ch en redesign.css) —
   mascota y texto compiten por el mismo espacio y la mascota gana
   por estar encima en el z-index implícito del absolute.
   FIX: se reserva espacio real a la derecha del título en
   desktop (el título ya no puede crecer hasta el borde) y se
   sube la mascota para que quede sobre la línea del texto, no
   encima de una palabra. En el breakpoint donde decor.css ya
   oculta la mascota (<900px) esto no aplica.
--------------------------------------------------------------- */
@media (min-width: 901px) {
  .how-it-works-header {
    padding-right: 132px;
  }
  .how-it-works-header .section-title {
    max-width: 44ch;
  }
  .how-mascot {
    top: -1.75rem;
    right: 8px;
  }
}

/* ---------------------------------------------------------------
   3. TESTIMONIOS — comilla editorial
   ANTES: el texto en cursiva Playfair no tenía ningún dispositivo
   tipográfico que lo distinguiera de un párrafo cualquiera.
   DESPUÉS: una comilla tipográfica de gran tamaño, en el mismo
   display type, muy atenuada — un recurso editorial clásico que
   ancla el testimonio como cita, sin agregar color nuevo.
--------------------------------------------------------------- */
/* ---------------------------------------------------------------
   2c. TARJETAS DE CONFIANZA ("[AÑOS]+", "[SESIONES]+", "[N]")
   BUG: decor.css les da max-width: 18ch, pero el número usa
   font-size clamp(2rem, 3.4vw, 2.6rem) — a ese tamaño "[SESIONES]+"
   no cabe en 18ch sin partirse, y al ser un token sin espacios no
   puede hacer wrap: se desborda y la siguiente tarjeta lo tapa.
   FIX: se cambia max-width por min-width (la tarjeta crece con su
   contenido en vez de intentar encajarlo a la fuerza) y se permite
   partir el token si algún día el dato real es aún más largo.
--------------------------------------------------------------- */
.about-trust-stat {
  max-width: none;
  min-width: 168px;
}
.about-trust-number {
  overflow-wrap: anywhere;
}

.testimonial-card { position: relative; }
.testimonial-card::before {
  content: "“";
  position: absolute;
  top: 0.1em;
  left: 0.7em;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.testimonial-text { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   4. MICROINTERACCIONES — foco y detalle
--------------------------------------------------------------- */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-link span.arrow { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; }
  .hero-link:hover span.arrow { transform: translateX(4px); }
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.faq-icon { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-item { transition: background 0.25s ease; }
.faq-item:hover { background: var(--color-warm-white); }

/* ---------------------------------------------------------------
   5. AUTH — panel de marca (login.html / registro.html)
   ANTES: una card blanca centrada sobre gradiente, indistinguible
   de cualquier formulario de cualquier SaaS.
   DESPUÉS: layout partido — panel de marca (gradiente + mascota +
   una línea editorial) a la izquierda, formulario a la derecha.
   En móvil, el panel se reduce a una franja superior compacta.
--------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  align-items: stretch;
  justify-content: initial;
  padding: 0;
}
.auth-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(ellipse at 20% 15%, var(--pink) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, var(--color-blue-muted) 0%, transparent 55%),
    var(--color-charcoal);
  color: var(--color-warm-white);
  overflow: hidden;
}
.auth-panel .hero-eyebrow { color: rgba(255, 255, 255, 0.75); position: relative; z-index: 1; }
.auth-panel-quote {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.55;
  max-width: 34ch;
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}
.auth-panel-quote p { margin: 0; }
.auth-panel-quote-strong {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--color-warm-white);
  line-height: 1.3;
}
.auth-panel-mascot {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 62%;
  height: auto;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.25));
}
.auth-panel-foot {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

/* Decoración de fondo del panel izquierdo (hojas + iconos) */
.auth-panel-leaf {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
}
.auth-panel-leaf-1 { top: -40px; left: -50px; width: 220px; transform: rotate(-18deg); }
.auth-panel-leaf-2 { bottom: -60px; right: -40px; width: 260px; transform: rotate(12deg); opacity: 0.3; }
.auth-panel-icon {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  filter: brightness(0) invert(1);
}
.auth-panel-icon-1 { top: 18%; right: 8%; width: 70px; transform: rotate(-8deg); }
.auth-panel-icon-2 { bottom: 22%; left: 6%; width: 64px; transform: rotate(10deg); }
.auth-panel-icon-3 { top: 46%; right: -10px; width: 56px; transform: rotate(-4deg); }

/* Decoración de fondo del lado del formulario */
.auth-form-side { position: relative; overflow: hidden; }
.auth-form-leaf {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
}
.auth-form-leaf-1 { top: -60px; right: -70px; width: 240px; transform: rotate(24deg); }
.auth-form-leaf-2 { bottom: -70px; left: -60px; width: 260px; transform: rotate(-16deg); }
.auth-form-icon {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
}
.auth-form-icon-1 { top: 10%; left: 8%; width: 46px; }
.auth-form-icon-2 { bottom: 14%; right: 10%; width: 42px; }
.auth-form-icon-3 { top: 40%; right: 4%; width: 50px; }
.auth-form-icon-4 { bottom: 40%; left: 4%; width: 44px; }
.auth-form-side > *:not(.auth-form-leaf):not(.auth-form-icon) { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .auth-panel-leaf, .auth-panel-icon { display: none; }
}
@media (max-width: 600px) {
  .auth-form-leaf, .auth-form-icon { display: none; }
}
.auth-form-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.auth-form-side .auth-card {
  border: none;
  padding: 0;
  max-width: 400px;
}
.auth-form-side .auth-logo { display: none; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6);
    min-height: 0;
  }
  .auth-panel-quote { font-size: 0.8rem; max-width: 22ch; gap: 0.5em; }
  .auth-panel-quote p:nth-child(n+3) { display: none; }
  .auth-panel-quote-strong { font-size: 1rem; }
  .auth-panel-mascot { max-width: 84px; align-self: auto; }
  .auth-panel-foot { display: none; }
  .auth-form-side .auth-logo { display: flex; margin-top: var(--space-6); }
}