/* ═══════════════════════════════════════════════════════════════
   LOALVIC SPORTS — COMPONENTES DE DOSSIER
   Bloques de contenido para explicar un servicio a fondo:
   ciclo de trabajo, pasos, herramientas, entregables y preguntas.
   ═══════════════════════════════════════════════════════════════ */

/* ─── CICLO SEMANAL / CRONOGRAMA ────────────────────────────── */
.ciclo { display: grid; gap: 0; border-top: 2px solid var(--tinta); }

.ciclo__paso {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--borde);
  align-items: start;
}
@media (max-width: 640px) {
  .ciclo__paso { grid-template-columns: 1fr; gap: var(--s-2); }
}

.ciclo__cuando {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--acento);
  line-height: 1.1;
  padding-top: 2px;
}
.ciclo__cuando small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tenue);
  margin-top: 4px;
}
.ciclo__que {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--tinta);
  margin-bottom: var(--s-2);
}
.ciclo__desc { font-size: var(--t-sm); color: var(--suave); max-width: 62ch; }
.ciclo__quien {
  display: inline-block;
  margin-top: var(--s-3);
  padding: 0.24rem 0.7rem;
  border-radius: var(--r-full);
  background: var(--acento-suave);
  color: var(--acento);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.06em;
}

/* ─── PASOS NUMERADOS (alta del jugador) ────────────────────── */
.pasos-num {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--s-5);
  counter-reset: paso;
}
.paso-card {
  counter-increment: paso;
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.paso-card::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: var(--s-4); right: var(--s-5);
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--acento-suave);
  line-height: 1;
}
.paso-card__cuando {
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--s-3);
}
.paso-card h3 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--tinta);
  margin-bottom: var(--s-2);
  max-width: 80%;
}
.paso-card p { font-size: var(--t-sm); color: var(--suave); }

/* ─── HERRAMIENTAS ──────────────────────────────────────────── */
.herramientas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-5);
}
.herramienta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 1px solid var(--acento);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.herramienta__n {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--tinta);
  margin-bottom: var(--s-2);
}
.herramienta p { font-size: var(--t-sm); color: var(--suave); }

/* ─── ENTREGABLES (qué recibe el jugador) ───────────────────── */
.entregables { display: grid; gap: var(--s-4); }
.entregable {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-5);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
}
.entregable__marca {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--blanco);
  display: grid; place-items: center;
  font-size: var(--t-sm); font-weight: 700;
  flex-shrink: 0;
}
.entregable h3 {
  font-family: var(--font-display);
  font-size: var(--t-lg); color: var(--tinta);
  margin-bottom: var(--s-1);
}
.entregable p { font-size: var(--t-sm); color: var(--suave); }

/* ─── HORARIO TIPO ──────────────────────────────────────────── */
.horario {
  background: var(--tinta);
  color: var(--blanco);
  border-radius: var(--r-lg);
  padding: var(--s-7);
}
.horario__dias {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sobre-negro-tenue);
  margin-bottom: var(--s-6);
}
.horario__fila {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  align-items: baseline;
}
@media (max-width: 600px) {
  .horario__fila { grid-template-columns: 1fr; gap: var(--s-1); }
}
.horario__hora {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--blanco);
}
.horario__act { font-size: var(--t-sm); color: var(--sobre-negro); }
.horario__act strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--blanco);
  margin-bottom: 2px;
}

/* ─── PREGUNTAS FRECUENTES ──────────────────────────────────── */
.faq { display: grid; gap: 0; border-top: 1px solid var(--borde); max-width: 860px; }
.faq details {
  border-bottom: 1px solid var(--borde);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--tinta);
  transition: color var(--dur-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-body);
  font-size: 1.5rem; font-weight: 300;
  color: var(--acento);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--acento); }
.faq__r {
  padding-bottom: var(--s-5);
  font-size: var(--t-base);
  color: var(--suave);
  max-width: 68ch;
}

/* ─── LISTA DE MATERIAL ─────────────────────────────────────── */
.material { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: var(--s-6); }
.material__col h3 {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--acento);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--acento);
  margin-bottom: var(--s-4);
  font-family: var(--font-body);
}
.material__col--extra h3 { color: var(--tenue); border-bottom-color: var(--borde); }
.material__col li {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--borde-suave);
  font-size: var(--t-sm);
  color: var(--texto-medio);
}
.material__col li::before { content: '—'; color: var(--tenue); flex-shrink: 0; }

/* ─── BARRA DE DESCARGA DEL DOSSIER ─────────────────────────── */
.descarga {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-7);
  background: var(--acento-suave);
  border-radius: var(--r-lg);
}
.descarga__t {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  color: var(--tinta);
  margin-bottom: var(--s-1);
}
.descarga p { font-size: var(--t-sm); color: var(--texto-medio); }

/* ─── PUNTOS CLAVE / DIFERENCIALES ──────────────────────────── */
.clave {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-6);
}
.clave__item { border-top: 2px solid var(--tinta); padding-top: var(--s-5); }
/* ⚠️ `.clave__n` ya no se usa en alto-rendimiento (la numeración 01-05 era
   decorativa: cinco características, no cinco pasos). La regla se queda
   por si algún dossier la usa. */
.clave__n {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--acento);
  margin-bottom: var(--s-3);
}
.clave__item h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  color: var(--tinta);
  margin-bottom: var(--s-3);
}
.clave__item p { font-size: var(--t-sm); color: var(--suave); }

/* ─── GUÍAS PARA FAMILIAS (artículo largo, 9 oct 2026) ───────── */
.articulo__cuerpo { max-width: 68ch; margin-inline: auto; }
.articulo__cuerpo h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  margin-top: var(--s-8); margin-bottom: var(--s-4);
  scroll-margin-top: 6rem;
}
.articulo__cuerpo p,
.articulo__cuerpo li { font-size: var(--t-lg); line-height: 1.7; color: var(--texto-medio); }
.articulo__cuerpo p + p { margin-top: var(--s-4); }
.articulo__cuerpo ul, .articulo__cuerpo ol { margin: var(--s-4) 0; padding-left: 1.3em; display: grid; gap: var(--s-3); }
.articulo__cuerpo ul { list-style: disc; }
.articulo__cuerpo ol { list-style: decimal; }
.articulo__cuerpo strong { color: var(--tinta); }
.articulo__cuerpo a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
.articulo__cuerpo .aviso { margin: var(--s-6) 0; font-size: var(--t-base); }
.articulo__indice {
  border: 1px solid var(--borde); border-radius: 12px;
  padding: var(--s-5) var(--s-6); margin-bottom: var(--s-6);
}
.articulo__indice > p {
  font-size: 0.72rem !important; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tinta) !important; margin: 0 0 var(--s-2);
}
.articulo__indice ol { margin: 0; gap: var(--s-2); }
.articulo__indice li { font-size: var(--t-base) !important; }

.guias-lista { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.guia-tarjeta {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6); border: 1px solid var(--borde); border-top: 5px solid #03DAFD;
  border-radius: 12px; background: #fff; color: inherit; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.guia-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(3,35,73,.10); }
.guia-tarjeta h2 { font-size: 1.5rem; color: #032349; }
.guia-tarjeta p { color: var(--suave); }
.guia-tarjeta__tema { font-size: .72rem !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #032349 !important; }
.guia-tarjeta__ir { margin-top: auto; font-weight: 600; color: var(--acento); }