/* «La primera hora de una crisis» · sólo lo propio de esta herramienta, bajo #crisis.
   La regla de los 60 minutos de la portada: el hilo rosa se tiende (scaleX, 600 ms) y las cuatro
   cuentas aparecen escalonadas a 80 ms (opacity + 8 px). Sólo transform y opacity. */

/* ——— La regla de la primera hora (portada) ——— */
#crisis .cr-regla{position:relative;margin:34px 0 0;padding:0 2px}
#crisis .cr-regla-linea{position:relative;height:30px}
/* marcas de minuto: una fina cada minuto, una más alta cada cinco */
#crisis .cr-regla-marcas{position:absolute;left:0;right:0;bottom:0;height:30px;
 background:
  repeating-linear-gradient(90deg,rgb(243 242 245/.34) 0 1px,transparent 1px calc(100% / 12)) 0 100%/100% 14px no-repeat,
  repeating-linear-gradient(90deg,rgb(243 242 245/.16) 0 1px,transparent 1px calc(100% / 60)) 0 100%/100% 7px no-repeat}
#crisis .cr-regla-marcas::after{content:"";position:absolute;right:0;bottom:0;width:1px;height:14px;background:rgb(243 242 245/.34)}
#crisis .cr-regla-hilo{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
 background:linear-gradient(90deg,var(--rosa-tinta),var(--rosa-hilo) 55%,var(--rosa-suave));box-shadow:0 0 10px rgb(196 92 124/.4);
 transform-origin:0 50%}
#crisis .cr-regla-tiempos{position:relative;height:52px;margin:0;padding:0;list-style:none}
#crisis .cr-regla-tiempos li{position:absolute;top:0;left:calc(var(--x) * 100%);display:grid;justify-items:start;gap:4px;padding-top:12px}
#crisis .cr-regla-tiempos li:last-child{left:auto;right:0;justify-items:end}
#crisis .cr-regla-tiempos li::before{content:"";position:absolute;top:-5px;left:-4px;width:9px;height:9px;border-radius:50%;
 background:var(--rosa-perla);box-shadow:inset 0 0 0 2px var(--rosa-hilo),0 0 0 4px rgb(196 92 124/.18)}
#crisis .cr-regla-tiempos li:last-child::before{left:auto;right:-4px;border-radius:2px;transform:rotate(45deg)}
#crisis .cr-regla-tiempos b{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--rosa-suave)}
#crisis .cr-regla-tiempos span{font:500 12px/1 var(--mono);letter-spacing:.02em;color:var(--sutil)}

@media (prefers-reduced-motion:no-preference){
 #crisis .hr-portada.hr-activo .cr-regla-hilo{animation:cr-tiende .6s var(--entra) .18s both}
 #crisis .hr-portada.hr-activo .cr-regla-tiempos li{animation:cr-cuenta .42s var(--entra) both;animation-delay:calc(.42s + var(--i) * 80ms)}
}
@keyframes cr-tiende{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cr-cuenta{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* el 911 sube: en el teléfono va justo bajo el titular, antes del botón */
#crisis .hr-portada .hr-911{margin-top:22px}
#crisis .hr-portada .hr-acciones{margin-top:22px}
#crisis .hr-portada .hr-meta{margin-top:30px}

/* ——— El hilo de avance: fondo firme, para que el texto que pasa debajo no se encime ——— */
#crisis .hr-avance{background:rgb(11 10 12/.95);box-shadow:0 18px 22px -10px rgb(11 10 12/.95)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 #crisis .hr-avance{background:rgb(11 10 12/.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}

/* ——— Pasos ——— */
#crisis .hr-texto.cr-corto{min-height:88px}
#crisis .cr-hora{font:500 13px/1 var(--mono);font-style:normal;letter-spacing:.04em;color:var(--rosa-suave);white-space:nowrap}
#crisis .cr-hora:empty{display:none}

/* ——— La hoja: la tabla de los 60 minutos respira un poco más ——— */
#crisis .hr-hoja td:first-child{min-width:5.2em}
/* «Copiar sólo este texto» en un solo renglón a 390 px */
#crisis .hr-cita-copia{white-space:nowrap;letter-spacing:.05em;padding:0 12px}

/* ——— Computadora: la regla acompaña al título, del lado izquierdo ——— */
@media (min-width:1200px){
 /* lo que te llevas acompaña al título; el 911 queda junto al botón */
 #crisis .hr-portada>.hr-lleva{grid-row:1 / span 3;margin-top:0}
 #crisis .hr-portada>.hr-911{grid-row:4 / span 6;margin-top:22px}
 #crisis .cr-regla{max-width:520px;margin-top:40px}
}

/* lo que depende de una respuesta (data-hr-si) se oculta de verdad, aunque su clase traiga display */
#crisis [data-hr-si][hidden]{display:none!important}