/*
 * DuDoctor · Web pública (inicio, landings de tema y preguntas frecuentes).
 *
 * Solo los componentes que site.css no cataloga. MOBILE FIRST: la base es móvil y las mejoras
 * llegan con min-width 600 / 900. Colores, espaciado y radios, siempre de branding.css.
 */

/* ==========================================================================
   1. MÉTRICAS DEL INICIO
   ========================================================================== */

/* Las métricas son editables y suelen ser texto ("Médicos colegiados"), no solo cifras: el valor
   baja un punto de tamaño y puede partirse en dos líneas equilibradas sin desbordar su celda. */
.home-stats .stats__item { justify-content: center; }
.home-stats .stats__value {
  font-size: var(--fs-lg);
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.home-stats .stats__label { text-wrap: balance; }

@media (min-width: 600px) {
  .home-stats .stats__value { font-size: var(--fs-xl); }
  /* Con tres métricas o menos ya caben en una sola fila en tablet (site.css lo hace desde 900 px). */
  .home-stats--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .home-stats--row .stats__item:last-child:nth-child(odd) { grid-column: auto; }
}

/* ==========================================================================
   1b. TARJETAS DE TEMA DEL INICIO
   ========================================================================== */

/* En móvil la tarjeta del catálogo (icono grande arriba) hace la lista de temas muy larga: aquí el
   icono baja a 48 px y comparte fila con el nombre. Desde 600 px vuelve la tarjeta de site.css. */
.home-topics .topic-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3) var(--s-4);
  height: auto;
}
.home-topics .topic-card > * { grid-column: 1 / -1; }
.home-topics .topic-card > .topic-card__icon { grid-column: 1; width: 48px; height: 48px; margin-bottom: 0; border-radius: var(--r-md); }
.home-topics .topic-card > .topic-card__icon svg { width: 24px; height: 24px; }
.home-topics .topic-card > .topic-card__name { grid-column: 2; }
.home-topics .topic-card__pricing { padding-top: 0; }
.home-topics .topic-card__link { margin-top: calc(var(--s-2) * -1); margin-bottom: calc(var(--s-2) * -1); }

@media (min-width: 600px) {
  .home-topics .topic-card { display: flex; height: 100%; gap: var(--s-3); align-items: stretch; }
  .home-topics .topic-card > .topic-card__icon { width: 64px; height: 64px; margin-bottom: var(--s-1); border-radius: var(--r-lg); align-self: flex-start; }
  .home-topics .topic-card > .topic-card__icon svg { width: 30px; height: 30px; }
  .home-topics .topic-card__pricing { padding-top: var(--s-3); }
  .home-topics .topic-card__link { margin-top: var(--s-1); margin-bottom: 0; }
}

/* ==========================================================================
   2. LISTA DE PRECIOS POR TEMA
   ========================================================================== */

.plan-list { display: grid; gap: var(--s-3); list-style: none; }
.plan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.plan__body { min-width: 0; display: grid; gap: var(--s-1); }
.plan__head { display: flex; flex-direction: column; gap: 2px; }
.plan__name { font-size: var(--fs-md); letter-spacing: -0.015em; }
.plan__price { font-weight: 700; color: var(--accent-hover); }
.plan__old { margin-right: var(--s-1); color: var(--muted); font-weight: 500; }
.plan__note { font-size: var(--fs-sm); color: var(--ink-soft); }
.plan__btn { grid-column: 1 / -1; width: 100%; }

.plan-list__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.plan-list__note svg { flex: none; margin-top: 2px; color: var(--accent); }

@media (hover: hover) {
  .plan:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); }
}
@media (min-width: 600px) {
  .plan { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-5); padding: var(--s-4) var(--s-5); }
  .plan__head { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
  .plan__btn { grid-column: auto; width: auto; }
}

/* ==========================================================================
   3. CONFIANZA Y EQUIPO MÉDICO
   ========================================================================== */

/* El carril de médicos (.doctor-rail) vive entero en site.css § 10: es un componente del catálogo,
   no un apaño de la portada, y la demo docs/preview-site.html solo carga site.css.
   Aquí queda lo que sí es de esta página. */

/* Los puntos de confianza ocupan la segunda columna, dentro de un panel translúcido. */
.home-trust-points {
  margin-top: 0;
  padding: var(--s-5);
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, #fff 6%, transparent);
}
@media (min-width: 900px) {
  .home-trust-points { padding: var(--s-6); }
}

/* ==========================================================================
   4. PREGUNTAS FRECUENTES: ÍNDICE Y BLOQUES POR TEMA
   ========================================================================== */

/* Índice de categorías: en móvil es una fila que se desliza (no ocupa media pantalla). */
.faq-index {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-5) calc(var(--gutter) * -1) 0;
  padding: var(--s-1) var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.faq-index::-webkit-scrollbar { display: none; }
.faq-index > li { flex: none; }
/* Es la navegación principal de la página y se pulsa con el dedo: nunca por debajo de los 44px
   que ya usan los controles compactos de la web (.site-header__cta, .lang-switch__btn). */
.faq-index .pill { min-height: 44px; white-space: nowrap; }

.faq-topic {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.faq-topic__name { flex: 1; min-width: 0; font-size: var(--fs-lg); letter-spacing: -0.02em; }
/* En móvil el texto se oculta y el enlace queda reducido a la flecha: sin una anchura mínima el
   objetivo táctil era la flecha de 18px. Hereda el min-height de .link-arrow (--tap) y se le da
   la misma anchura; desde 600px vuelve el texto y el centrado no cambia nada. */
.faq-topic__link { flex: none; min-width: var(--tap); justify-content: center; font-size: var(--fs-sm); }
.faq-topic__link-text { display: none; }

@media (min-width: 600px) {
  .faq-index { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .faq-topic__link-text { display: inline; }
}

/* ==========================================================================
   5. LANDING DE TEMA
   ========================================================================== */

/* Migas sobre el hero del tema: discretas, no compiten con el titular. */
.hero .breadcrumb { margin-bottom: calc(var(--s-1) * -1); }

/* Botón "Empezar consulta de {tema}": en móvil el nombre del tema no cabe en una línea y se
   omite a la vista (el enlace conserva el texto completo en su aria-label). */
.topic-cta__more { display: none; }
@media (min-width: 600px) {
  .topic-cta__more { display: inline; }
}

/* ==========================================================================
   6. HERO DEL INICIO
   ========================================================================== */

/* La parte resaltada del titular salta de línea ENTERA cuando no cabe ("…online," / "sin salas de
   espera"), en vez de partirse por la mitad. Si es más ancha que la columna, se parte por dentro. */
.hero__title em { display: inline-block; }