/* ==========================================================================
   Dr. Jesús Ríos — Capa de refinamiento
   --------------------------------------------------------------------------
   Aditiva y reversible. No reescribe el sistema de diseño: usa los mismos
   tokens (--blue-brand, --font-display, --space-*) y solo corrige defectos
   de composición encontrados en la auditoría visual.

   Para desactivarla por completo: borra el <link> de index.html.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HERO EN MÓVIL
   El tráfico de pauta cae en móvil, y ahí el hero medía ~830px antes de que
   apareciera la cara del doctor: titular + subtítulo + 2 CTAs + 3 métricas.
   Se compacta el bloque de texto para que la foto entre en el primer scroll.
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {

  .jr-hero-grid {
    padding: 22px 18px 40px !important;
    gap: 24px !important;
  }

  /* Los dos botones tenían anchos distintos (uno según su texto), y una
     columna con bordes desalineados se lee como error, no como jerarquía. */
  .jr-hero-ctas {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 26px !important;
  }
  .jr-hero-ctas > * {
    width: 100%;
    /* los botones traen padding propio: sin border-box, el 100% se les suma
       y se desbordan por el borde derecho de la pantalla */
    box-sizing: border-box;
    justify-content: center;
  }

  /* Métricas: en flex-wrap caían 2 + 1, dejando "24/7" huérfano en su propia
     fila con un hueco enorme al lado. Tres columnas fijas lo resuelven. */
  .jr-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px !important;
    margin-top: 30px !important;
  }
  .jr-hero-stats > div > div:first-child {
    font-size: 27px !important;
  }
  .jr-hero-stats > div > div:last-child {
    font-size: 12px !important;
    line-height: 1.3;
    margin-top: 4px !important;
  }

  /* El rail de Instagram/WhatsApp se montaba sobre la cara del doctor.
     WhatsApp ya vive en el botón flotante e Instagram en el footer, así que
     en móvil el rail solo tapa el activo más importante de la página. */
  .jr-social-rail {
    display: none !important;
  }

  /* La cruz decorativa caía justo detrás del CTA principal: manchaba el botón
     de gris y le bajaba el contraste. Se aparta y se aclara. */
  [data-od-id="hero"] > div[aria-hidden="true"]:nth-child(2) {
    opacity: .22;
    top: 260px !important;
    left: 68% !important;
  }
}


/* --------------------------------------------------------------------------
   2. CARRUSEL DE CASOS REALES
   Los casos desfilan de izquierda a derecha. Sin librería: la lista se pinta
   dos veces y se anima translateX del -50% al 0 — al terminar, la segunda
   copia está exactamente donde empezó la primera y el bucle no tiene costura.
   -------------------------------------------------------------------------- */
.jr-casos-wrap {
  position: relative;
  margin-top: 40px;
}
.jr-casos-marquee {
  overflow-x: auto;
  scrollbar-width: none;          /* el desfile es automático: la barra sobra */
  -ms-overflow-style: none;
}
.jr-casos-marquee::-webkit-scrollbar { display: none; }
.jr-casos-marquee:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-card);
}
.jr-casos-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 0 48px;
}
.jr-casos-track > .jr-caso {
  width: 300px;
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Flechas: mueven una tarjeta por clic y pausan el desfile unos segundos.
   48px cuadrados — por encima del mínimo táctil. */
.jr-casos-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--blue-brand);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.jr-casos-flecha:hover { background: var(--blue-glass); box-shadow: var(--shadow-float); }
.jr-casos-flecha:active { transform: translateY(-50%) scale(0.94); }
.jr-casos-flecha[data-dir="izq"] { left: 12px; }
.jr-casos-flecha[data-dir="der"] { right: 12px; }
.jr-casos-flecha[data-dir="izq"] svg { transform: rotate(180deg); }

/* El desfile no se detiene nunca — tampoco al pasar el mouse. Los casos se
   repiten en bucle a propósito. (La pausa por hover se quitó a pedido.) */

/* Sin movimiento automático: scroll manual con snap. Las flechas siguen igual. */
@media (prefers-reduced-motion: reduce) {
  .jr-casos-marquee { scroll-snap-type: x mandatory; }
  .jr-casos-track > .jr-caso { scroll-snap-align: center; }
  /* La copia duplicada solo existe para el bucle del desfile. */
  .jr-casos-track > .jr-caso[aria-hidden="true"] { display: none; }
}

@media (max-width: 680px) {
  .jr-casos-track { gap: 18px; padding: 0 18px; }
  .jr-casos-track > .jr-caso { width: 230px; }
  .jr-casos-flecha { width: 44px; height: 44px; }
  .jr-casos-flecha[data-dir="izq"] { left: 4px; }
  .jr-casos-flecha[data-dir="der"] { right: 4px; }
}


/* --------------------------------------------------------------------------
   3. FORMACIÓN PROFESIONAL
   Cuatro columnas en escritorio; en tablet 2 y en móvil una sola, porque a
   4 columnas los nombres de universidad se parten en cinco líneas.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .jr-formacion-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 680px) {
  .jr-formacion-grid { grid-template-columns: 1fr !important; }
  #formacion { padding: var(--space-7) 18px var(--space-6) !important; }
  .jr-honor { padding: var(--space-6) 18px !important; }
}


/* --------------------------------------------------------------------------
   3b. SERVICIOS — botones grandes que se despliegan
   Antes eran tres líneas de texto con un check. Ahora cada uno es un botón del
   tamaño de los del hero, y al pasar el mouse muestra su explicación.
   Se apoya en <details> nativo: en móvil, donde no hay hover, funciona al tocar,
   y con teclado responde a Enter. Sin JavaScript de por medio.
   -------------------------------------------------------------------------- */
.jr-servicios {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jr-servicio {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: default;
  transition: box-shadow var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.jr-servicio:hover,
.jr-servicio:focus-within {
  border-color: var(--blue-light);
  box-shadow: var(--shadow-float);
}
.jr-servicio:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.jr-servicio-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  min-height: 44px;                 /* mínimo táctil */
  box-sizing: border-box;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--blue-brand);
}
.jr-servicio-cab > span { flex: 1; }
.jr-servicio-flecha {
  flex-shrink: 0;
  color: var(--blue-light);
  transition: transform var(--dur-med) var(--ease-out);
}
.jr-servicio:hover .jr-servicio-flecha,
.jr-servicio:focus-within .jr-servicio-flecha { transform: rotate(180deg); }

/* El truco de 0fr → 1fr: es lo único que permite animar una altura desconocida
   sin fijarla a mano. El hijo necesita overflow:hidden para recortarse. */
.jr-servicio-cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur-med) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.jr-servicio-cuerpo > p {
  overflow: hidden;
  margin: 0;
  padding: 0 20px 0 51px;           /* alineado con el texto, no con el icono */
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.jr-servicio:hover .jr-servicio-cuerpo,
.jr-servicio:focus-within .jr-servicio-cuerpo {
  grid-template-rows: 1fr;
  opacity: 1;
}
.jr-servicio:hover .jr-servicio-cuerpo > p,
.jr-servicio:focus-within .jr-servicio-cuerpo > p { padding-bottom: 20px; }

/* En táctil no hay hover: el texto se muestra siempre en vez de esconderse
   detrás de un gesto que ahí no existe. */
@media (hover: none) {
  .jr-servicio-cuerpo { grid-template-rows: 1fr; opacity: 1; }
  .jr-servicio-cuerpo > p { padding-bottom: 20px; }
  .jr-servicio-flecha { display: none; }
}


/* --------------------------------------------------------------------------
   3c. FORMULARIO DE VALORACIÓN
   Va sobre el azul de marca, así que los campos son vidrio traslúcido con texto
   blanco. Sin backend: el botón arma el mensaje y abre WhatsApp.
   -------------------------------------------------------------------------- */
.jr-form {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.jr-form-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.jr-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.jr-form label > span {
  font-size: 14.5px;
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, .88);
}
.jr-form label > span > b { color: #9FC2F5; font-weight: inherit; }
.jr-form input,
.jr-form select,
.jr-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  min-height: 46px;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--white);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.jr-form textarea { resize: vertical; line-height: 1.55; }
.jr-form ::placeholder { color: rgba(255, 255, 255, .5); }
.jr-form input:hover,
.jr-form select:hover,
.jr-form textarea:hover { background: rgba(255, 255, 255, .17); }
.jr-form input:focus-visible,
.jr-form select:focus-visible,
.jr-form textarea:focus-visible {
  outline: none;
  border-color: var(--white);
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}
/* El desplegable pinta sus opciones con los colores del sistema: sobre fondo
   claro, texto oscuro — si no, en Windows salen blancas sobre blanco. */
.jr-form select option { color: var(--ink); background: var(--white); }

.jr-form-enviar {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--blue-brand);
  background: var(--white);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.jr-form-enviar:hover:not(:disabled) { transform: translateY(-2px); }
.jr-form-enviar:active:not(:disabled) { transform: scale(0.98); }
.jr-form-enviar:disabled { opacity: .45; cursor: not-allowed; }
.jr-form-nota {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
  text-align: center;
}

@media (max-width: 680px) {
  .jr-form-fila { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   3d. PÁGINA DE PREGUNTAS FRECUENTES
   Jerarquía en cuatro niveles bien separados: grupo numerado → pregunta →
   respuesta clave → desarrollo. La columna es estrecha a propósito (68ch): es
   texto largo y se lee, no se escanea.
   -------------------------------------------------------------------------- */
.jr-faq-ancho {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 24px;
}
.jr-faq-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-section);
  padding: var(--space-8) 0 var(--space-7);
}
.jr-faq-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--blue-light);
  margin-bottom: var(--space-3);
}
.jr-faq-hero h1 {
  font-size: clamp(30px, 4.4vw, 50px);
  margin: 0;
}
.jr-faq-lead {
  font-size: var(--text-lead);
  color: var(--text-muted);
  margin: var(--space-5) 0 0;
}
.jr-faq-firma {
  margin: var(--space-5) 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--blue-light);
  font-size: 14.5px;
  color: var(--text-muted);
}

.jr-faq-grupo { margin-top: var(--space-8); }
.jr-faq-grupo-cab {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
/* El número SÍ es información: los grupos van de la duda más temprana
   (a quién elijo) a la más tardía (cómo es consultar). */
.jr-faq-num {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--blue-light);
  flex-shrink: 0;
}
.jr-faq-grupo-cab h2 { font-size: var(--text-h3); margin: 0; }
.jr-faq-grupo-sub {
  margin: 6px 0 0;
  font-size: 15px;
  font-style: italic;
  color: var(--text-muted);
}

.jr-faq-item {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.jr-faq-item[open] { border-color: var(--blue-light); box-shadow: var(--shadow-card); }
.jr-faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 17px 20px;
  min-height: 44px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--blue-brand);
}
.jr-faq-item > summary::-webkit-details-marker { display: none; }
.jr-faq-item > summary:hover { background: var(--blue-glass); }
.jr-faq-item > summary > span { flex: 1; }
.jr-faq-item > summary > svg {
  flex-shrink: 0;
  color: var(--blue-light);
  transition: transform var(--dur-fast) var(--ease-out);
}
.jr-faq-item[open] > summary > svg { transform: rotate(180deg); }
.jr-faq-resp {
  padding: 0 20px 18px;
  border-top: 1px solid var(--border-soft);
}
.jr-faq-resp p { margin: var(--space-4) 0 0; font-size: 16px; color: var(--text-body); }
/* La primera frase resume la respuesta: va en negrita para quien solo escanea. */
.jr-faq-resp p.jr-faq-clave { font-weight: var(--weight-medium); color: var(--ink); }
.jr-faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--space-4);
  min-height: 44px;
  font-weight: var(--weight-medium);
  color: var(--blue-brand);
  border-bottom: 2px solid var(--blue-light);
}
.jr-faq-cta:hover { border-color: var(--blue-brand); }

.jr-faq-banner {
  margin-top: var(--space-9);
  background: var(--grad-cta);
  color: var(--text-on-blue);
  border-radius: 18px;
  padding: var(--space-7) var(--space-6);
  text-align: center;
}
.jr-faq-banner h3 { font-family: var(--font-display); font-size: 26px; margin: 0 0 8px; color: #fff; }
.jr-faq-banner p { margin: 0 0 var(--space-5); color: rgba(255, 255, 255, .85); }
.jr-faq-banner-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.jr-faq-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  background: var(--white);
  color: var(--blue-brand);
  transition: transform var(--dur-press) var(--ease-out);
}
.jr-faq-btn.alt { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .5); }
.jr-faq-btn:hover { transform: translateY(-2px); }
.jr-faq-btn.alt:hover { color: #fff; border-color: #fff; }

.jr-faq-legal {
  margin: var(--space-8) 0 var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 680px) {
  .jr-faq-ancho { padding: 0 18px; }
  .jr-faq-hero { padding: var(--space-7) 0 var(--space-6); }
  .jr-faq-num { font-size: 26px; }
  .jr-faq-grupo { margin-top: var(--space-7); }
}


/* --------------------------------------------------------------------------
   4. ANCLAS BAJO LA NAVBAR FIJA
   Al llegar desde otra página con #resultados o #servicios, el título de la
   sección quedaba tapado por la navbar sticky.
   -------------------------------------------------------------------------- */
#inicio,
#resultados,
#servicios,
#contacto,
#diferenciadores {
  scroll-margin-top: 96px;
}
@media (max-width: 680px) {
  #inicio,
  #resultados,
  #servicios,
  #contacto,
  #diferenciadores {
    scroll-margin-top: 74px;
  }
}


/* --------------------------------------------------------------------------
   5. TAP TARGETS EN TÁCTIL
   Medido: el CTA "Agenda tu valoración" quedaba en 150×31 px y los enlaces con
   flecha en 25 px de alto. El mínimo táctil son 44 px (WCAG 2.5.8 / Apple HIG).
   En una landing de pauta esto no es solo accesibilidad: es el botón que convierte.
   Ambos ya son flex centrados, así que el min-height no descoloca nada.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .jr-btn,
  .jr-arrow-link {
    min-height: 44px;
    box-sizing: border-box;
  }
  /* Los enlaces del footer son display:block; el aire vertical hace el área. */
  [data-od-id="footer"] a {
    padding-block: 8px;
  }
}


/* --------------------------------------------------------------------------
   6. PISO DE CALIDAD
   Foco visible para navegación por teclado sobre fondo azul (el --focus-ring
   base es azul y desaparecía dentro de las secciones de marca), y respeto a
   prefers-reduced-motion en las animaciones flotantes de los tags del hero.
   -------------------------------------------------------------------------- */
[data-od-id="cta-final"] a:focus-visible,
[data-od-id="footer"] a:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .65);
}

/* El canvas de partículas no se apaga con CSS (es un rAF, no una animación CSS):
   se resuelve no montándolo, en js/01-hero.jsx. */
@media (prefers-reduced-motion: reduce) {
  .jr-hero-tags .jr-tag {
    animation: none !important;
  }
}