/* TusRifas: contenido.css
   ¿Cómo funciona?, Preguntas frecuentes, Sobre nosotros, Contacto y Legales */

.contenido-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; align-items: start; padding-bottom: 1rem; }
.indice { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.indice p { font-size: var(--t-xs); font-weight: 700; color: var(--tinta-60); margin-bottom: .5rem; }
.indice ul { list-style: none; padding: 0; display: grid; gap: .125rem; border-left: 2px solid var(--linea); }
.indice a { display: block; padding: .375rem .875rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--tinta-80); text-decoration: none; font-size: var(--t-s); font-weight: 600; }
.indice a:hover, .indice a.is-activo { color: var(--tinta); border-left-color: var(--sol); }

@media (max-width: 900px) {
  .contenido-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .indice { position: static; }
  .indice ul { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; }
  .indice a { border: 1.5px solid var(--linea); border-radius: 999px; margin: 0; padding: .375rem .875rem; background: var(--blanco); }
}

/* Prosa */
.prosa { max-width: 72ch; }
.prosa > section + section { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--linea); }
.prosa h2 { font-size: var(--t-xl); margin-bottom: 1rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prosa h3 { font-size: var(--t-l); margin: 1.75rem 0 .5rem; font-stretch: 100%; }
.prosa p, .prosa li { color: var(--tinta-80); line-height: 1.65; }
.prosa p + p { margin-top: .875rem; }
.prosa ul, .prosa ol { padding-left: 1.25rem; margin-top: .75rem; display: grid; gap: .5rem; }
.prosa .tabla-datos { margin-top: 1rem; background: var(--blanco); border-radius: var(--radio-m); }
.prosa .tabla-datos th, .prosa .tabla-datos td { padding: .75rem 1rem; }
.nota-legal { font-size: var(--t-xs); color: var(--tinta-60); margin-top: 1rem; }

/* ¿Cómo funciona? Línea de pasos */
.linea-pasos { list-style: none; padding: 0; counter-reset: lp; max-width: 820px; }
.linea-pasos > li { counter-increment: lp; position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 1.25rem; padding-bottom: 2.25rem; }
.linea-pasos > li::before {
  content: counter(lp); width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blanco); border: 2px solid var(--tinta); font-size: 2.25rem; font-weight: 800; font-stretch: var(--ancho-condensado); position: relative; z-index: 1;
}
.linea-pasos > li:not(:last-child)::after { content: ''; position: absolute; left: 35px; top: 72px; bottom: 0; border-left: 2px dashed var(--linea-fuerte); }
.linea-pasos h2 { font-size: var(--t-xl); margin: .75rem 0 .5rem; }
.linea-pasos p { color: var(--tinta-80); }
.linea-pasos .aviso { margin-top: .875rem; max-width: 60ch; }

@media (max-width: 560px) {
  .linea-pasos > li { grid-template-columns: 48px minmax(0, 1fr); gap: 1rem; }
  .linea-pasos > li::before { width: 48px; height: 48px; font-size: 1.5rem; }
  .linea-pasos > li:not(:last-child)::after { left: 23px; top: 48px; }
  .linea-pasos h2 { margin-top: .5rem; font-size: var(--t-l); }
}

.estados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.estados .tarjeta h3 { font-size: var(--t-l); margin-bottom: .75rem; }
.estados dl { display: grid; gap: .875rem; }
.estados dt { margin-bottom: .25rem; }
.estados dd { margin: 0; font-size: var(--t-s); color: var(--tinta-80); }
@media (max-width: 760px) { .estados { grid-template-columns: 1fr; } }

.cta-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding: 1.75rem 2rem; border-radius: var(--radio-l); background: var(--tinta); color: var(--blanco); }
.cta-final h2 { font-size: var(--t-xl); }
.cta-final p { color: #C6D3E0; margin-top: .25rem; }

/* Preguntas frecuentes */
.faq-buscador { max-width: 560px; margin-bottom: 2rem; }
.faq-grupo + .faq-grupo { margin-top: 2.5rem; }
.faq-grupo h2 { font-size: var(--t-l); color: var(--tinta-60); font-stretch: 100%; margin-bottom: .25rem; }
.faq-grupo .acordeon:last-child { border-bottom: 1px solid var(--linea); }
.faq-sin-resultados { padding: 2rem 0; color: var(--tinta-60); }

/* Sobre nosotros */
.principios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.principio { padding: 1.5rem; border-radius: var(--radio-m); background: var(--blanco); border-top: 4px solid var(--sol); }
.principio h3 { margin: 0 0 .375rem; font-size: var(--t-l); }
.principio p { font-size: var(--t-s); }
@media (max-width: 640px) { .principios { grid-template-columns: 1fr; } }

/* Contacto */
.contacto-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem; align-items: start; }
.canales { display: grid; gap: .75rem; }
.canal { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border-radius: var(--radio-m); background: var(--blanco); text-decoration: none; color: var(--tinta); border: 1.5px solid transparent; }
a.canal:hover { border-color: var(--tinta); color: var(--tinta); }
.canal > i { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--papel); font-size: 1.25rem; flex-shrink: 0; }
.canal strong { display: block; }
.canal span { font-size: var(--t-s); color: var(--tinta-60); }
.form-contacto .acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
@media (max-width: 860px) { .contacto-grid { grid-template-columns: 1fr; } }
.prosa ul + p, .prosa ol + p, .prosa .tabla-datos + p { margin-top: .875rem; }
.acordeon__cuerpo { max-width: 72ch; }
.acordeon__cuerpo ol, .acordeon__cuerpo ul { padding-left: 1.25rem; display: grid; gap: .375rem; }