/* Soul Healing — la capa base: lo que TODAS las páginas comparten.
 *
 * Por qué existe
 * --------------
 * Hasta septiembre de 2026 estas reglas vivían TRES veces: en sitio.css, en
 * el <style> de index.html y en circulo/base.css. Y no con los mismos
 * valores, que es lo que las hacía peligrosas:
 *
 *   .boton         14px 28px en las páginas internas · 13px 26px en la portada
 *   .contenido     1120px en sitio.css · 1060px en la portada y en /circulo
 *   .angosto       700px  · 680px
 *   .etiqueta      --lila-marca · --suave
 *   .encabezado    44px de aire abajo · 28px
 *   .boton-linea   al pasar el mouse cambiaba borde Y texto · solo el borde
 *
 * Nadie decidió ninguna de esas diferencias: se fueron separando, porque una
 * regla escrita dos veces es una regla que ya empezó a separarse. La portada
 * es la reconstrucción más reciente (agosto de 2026), así que sus valores son
 * los que quedan; y cuando ya existía un token con ese valor exacto, se usa el
 * token —--ancho valía 1060px y --ancho-angosto valía 680px desde siempre, o
 * sea que tokens.css llevaba tiempo diciendo cuál de los dos era el bueno—.
 *
 * Dónde va
 * --------
 * Después de tokens.css y ANTES de la hoja de cada mundo (sitio.css,
 * panel.css, circulo/base.css) y del <style> de cada página, que siguen
 * mandando en lo suyo. Así una página puede seguir ajustando lo que necesite
 * sin !important.
 *
 * Regla de entrada: si una regla solo le sirve a una página, no es base. Lo
 * que está aquí es lo que ya estaba escrito dos o tres veces.
 *
 * NO está aquí, a propósito:
 *   - El foco. Vive en tokens.css, una sola vez, con :where().
 *   - .seccion. La portada pinta bandas alternadas (border-top en cada una) y
 *     sitio.css separa con .seccion + .seccion; son dos sistemas de ritmo
 *     distintos, no una regla duplicada. Unificarlos es decisión de diseño.
 */

/* ── reset y elementos ────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--papel);color:var(--tinta);font-family:var(--texto);
     font-weight:300;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img,video{display:block;max-width:100%}

/* ── ancho de la página ───────────────────────────────────────────── */
.contenido{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
.angosto{max-width:var(--ancho-angosto)}
.centrado{text-align:center}

/* ── tipografía ───────────────────────────────────────────────────── */
.marca{font-family:var(--display);font-weight:500;text-transform:uppercase;
       letter-spacing:.26em;text-indent:.26em}
.mono{font-family:var(--display);font-weight:500;text-transform:uppercase;
      letter-spacing:.1em;text-indent:.1em}
.etiqueta{font-size:10px;font-weight:400;letter-spacing:.4em;text-indent:.4em;
          text-transform:uppercase;color:var(--suave)}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.2}

/* El encabezado de una sección. Va h1 Y h2: /equipo no tenía ningún h1 —su
   título era un h2— y ese es el encabezado principal de esa página;
   cambiarle la etiqueta no debe cambiarle el tamaño. */
.encabezado{margin-bottom:28px}
.encabezado h1,
.encabezado h2{font-family:var(--display);font-weight:500;
               font-size:clamp(26px,4.4vw,38px);line-height:1.25;margin-top:14px}
.encabezado p{margin-top:14px;color:var(--suave);font-size:15.5px}
.centrado .encabezado p{max-width:520px;margin-left:auto;margin-right:auto}

/* ── botones ──────────────────────────────────────────────────────── */
.boton{display:inline-block;font-weight:400;font-size:12px;letter-spacing:.18em;
       text-transform:uppercase;padding:13px 26px;border-radius:var(--r-pastilla);
       border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.boton-lleno{background:var(--acento);color:var(--blanco)}
.boton-lleno:hover{background:var(--acento-fuerte)}
.boton-linea{border-color:var(--linea);color:var(--tinta)}
.boton-linea:hover{border-color:var(--tinta)}
/* Sobre foto o video, donde la tinta no se ve. */
.boton-claro{border:1px solid rgba(255,255,255,.55);color:var(--blanco)}
.boton-claro:hover{background:rgba(255,255,255,.16)}
.boton-ancho{width:100%;text-align:center}
.boton[disabled]{opacity:.5;cursor:default}
/* Los botones no crecen al presionarse: se asientan. Vivía en sitio.css, o
   sea que el botón de la portada —el más usado del sitio— era el único que no
   respondía al dedo. Va con el resto del componente. */
.boton{transition:background .2s,border-color .2s,color .2s,transform .12s}
.boton:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
  .boton{transition:none}
  .boton:active{transform:none}
}

/* El punto de color que clasifica un área. display:inline-block porque casi
   siempre es un <i> o un <span> dentro de un renglón de texto; flex:none
   para cuando el renglón sí es un flex. */
.punto{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}

/* ── líneas de crisis en el pie ───────────────────────────────────────
   Va en la base y no en sitio.css porque es un bloque de cumplimiento: la
   promesa del sitio es que no atendemos urgencias y que las líneas —Línea de
   la Vida entre ellas— se encuentran rápido. Tiene que verse igual en
   cualquier página que lo pinte, y estaba escrito dos veces.

   De las dos copias gana la de la portada, que tiene los selectores afinados:
   `.crisis-911 > span:last-child` en lugar de `.crisis-911 span` deja
   "Si hay riesgo inmediato, llama al 911" en UN renglón con el número, en vez
   de partirlo en tres. Lo mismo con `.crisis-grupo a > span`.

   Y se conserva el ajuste de celular que solo tenía sitio.css: la portada no
   lo tenía y ahora también lo gana.

   Los dos selectores son porque el pie se llama .pie-pagina en unas páginas y
   footer.pie en otras. TODO(Jad): un solo nombre. */
.pie-pagina .crisis,
footer.pie .crisis{margin:0 0 28px;padding:24px 26px;border-radius:14px;
                   background:rgba(255,255,255,.55);border:1px solid var(--linea);
                   text-align:left}
.pie-pagina .crisis-titulo,
footer.pie .crisis-titulo{font-family:var(--display);font-size:19px;
                          color:var(--tinta);margin:0 0 8px}
.pie-pagina .crisis-texto,
footer.pie .crisis-texto{font-size:13.5px;line-height:1.6;color:var(--suave);
                         margin:0 0 16px;max-width:70ch}
.pie-pagina .crisis-911,
footer.pie .crisis-911{display:block;border:1px solid var(--linea);border-radius:10px;
                       padding:12px 16px;margin:0 0 18px;font-size:14.5px;
                       color:var(--tinta)}
.pie-pagina .crisis-911 b,
footer.pie .crisis-911 b{font-size:19px;font-weight:600;color:var(--acento);
                         font-variant-numeric:tabular-nums;margin-left:2px}
.pie-pagina .crisis-911 > span:last-child,
footer.pie .crisis-911 > span:last-child{display:block;font-size:12px;
                         color:var(--suave);margin-top:2px}
.pie-pagina .crisis-grupos,
footer.pie .crisis-grupos{display:grid;gap:18px 32px}
@media(min-width:760px){
  .pie-pagina .crisis-grupos,
  footer.pie .crisis-grupos{grid-template-columns:1fr 1fr}
}
.pie-pagina .crisis-rotulo,
footer.pie .crisis-rotulo{font-size:11px;font-weight:600;letter-spacing:.14em;
                          text-transform:uppercase;color:var(--lila-marca);
                          margin:0 0 8px}
.pie-pagina .crisis-grupo a,
footer.pie .crisis-grupo a{display:block;border:0;margin-bottom:12px}
.pie-pagina .crisis-grupo b,
footer.pie .crisis-grupo b{display:block;font-size:14.5px;font-weight:500;
                           color:var(--acento);letter-spacing:.02em;
                           font-variant-numeric:tabular-nums}
.pie-pagina .crisis-grupo a > span,
footer.pie .crisis-grupo a > span{display:block;font-size:12.5px;line-height:1.55;
                           color:var(--suave);margin-top:2px;max-width:52ch}
.pie-pagina .crisis-grupo a:hover b,
footer.pie .crisis-grupo a:hover b{color:var(--tinta)}
@media(max-width:559px){
  .pie-pagina .crisis,
  footer.pie .crisis{padding:18px;margin:26px 0 22px}
}