/* Consejos (consejos.html): hábitos, «si ya caíste» y dónde denunciar. Va después de sitio.css y usa sus variables
   y piezas (.eyebrow, .segmentado, .aviso, .nota). Verde = lo que haces bien · ocre = lo urgente · rojo/vino = cuidado. */

/* ---------- atajos ---------- */
.atajos ol { list-style: none; display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 760px) { .atajos ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.atajos a { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; height: 100%; padding: 16px 18px; border-radius: var(--radio); border: 2px solid var(--linea); background: var(--tarjeta); color: var(--crema); text-decoration: none; }
.atajos a:hover { border-color: var(--ocre); color: var(--crema); }
.atajo-num { grid-row: span 2; font: 400 2.6rem/1 var(--letra-cartel); color: var(--ocre); }
.atajo-titulo { font: 900 1.08rem/1.2 var(--letra-titulo); text-transform: uppercase; letter-spacing: .04em; }
.atajo-sub { color: var(--crema-suave); font-size: .95rem; line-height: 1.35; }
.atajos a.atajo-urgente { border-color: var(--ocre); background: color-mix(in srgb, var(--ocre) 14%, var(--tarjeta)); }
.atajo-urgente .atajo-sub { color: var(--luz); font-weight: 800; }
[data-error] { margin-top: 18px; }
main .nota { max-width: 62ch; }

/* ---------- bloques ---------- */
.bloque { padding-top: 64px; }
.bloque-cabeza { max-width: 760px; margin-bottom: 26px; }
.bloque-cabeza > p:not(.eyebrow) { margin-top: 12px; max-width: 60ch; color: var(--crema-suave); font-size: 1.08rem; }
.bloque-cabeza > .consejo-url { padding: 10px 14px; border-radius: 10px; background: rgb(138 169 201 / .12); font-size: 1rem; }

/* ---------- 1 · hábitos ---------- */
.habitos { list-style: none; display: grid; gap: 14px; counter-reset: habito; }
@media (min-width: 720px) { .habitos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.habito { counter-increment: habito; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 18px 66px; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--linea); }
.habito::before { content: counter(habito, decimal-leading-zero); position: absolute; left: 18px; top: 15px; font: 400 2rem/1 var(--letra-cartel); color: var(--verde); }
.habito h3 { font-size: 1.12rem; }
.habito p { color: var(--crema-suave); line-height: 1.5; overflow-wrap: anywhere; } /* el dominio de ejemplo del hábito 6 no cabe a 320 px */
.habito .habito-check { margin-top: auto; padding: 8px 12px; border-radius: 8px; background: rgb(143 174 106 / .1); color: var(--crema); font-size: .95rem; }
.check-etiqueta { font: 900 .72rem var(--letra-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--verde); }

/* ---------- 2 · si ya caíste ---------- */
.tiempos { display: grid; gap: 14px; }
@media (min-width: 980px) { .tiempos { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; } }
.tiempo { padding: 20px; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--linea); }
.tiempo-ya { border: 2px solid var(--ocre); box-shadow: var(--sombra); }
.tiempo h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 1.15rem; }
.reloj { padding: 4px 10px; border-radius: 999px; background: var(--linea); color: var(--crema); font: 400 1rem/1.2 var(--letra-cartel); letter-spacing: .06em; }
.tiempo-ya .reloj { background: var(--ocre); color: var(--tinta); }
.tiempo ol { margin-top: 14px; padding-left: 1.4em; display: grid; gap: 10px; }
.tiempo li { color: var(--crema-suave); line-height: 1.5; }
.tiempo li strong, .siempre li strong { color: var(--crema); font-weight: 800; }
.tiempo li::marker { color: var(--ocre); font-weight: 900; }

.siempre { margin-top: 16px; padding: 18px 20px; border-radius: var(--radio); border: 2px solid var(--rojo); background: color-mix(in srgb, var(--vino) 40%, var(--noche)); }
.siempre h3 { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: #e7b9a1; }
.siempre ul { margin-top: 10px; padding-left: 1.2em; display: grid; gap: 8px; }
@media (min-width: 860px) { .siempre ul { grid-template-columns: 1fr 1fr; column-gap: 36px; } }
.siempre li { color: var(--crema-suave); line-height: 1.5; }
.siempre li::marker { color: #e7b9a1; }

.casos-titulo { margin-top: 52px; font-size: clamp(1.3rem, 3.6vw, 1.75rem); text-transform: uppercase; letter-spacing: .04em; }
.casos-indice { margin: 14px 0 20px; }
.casos-indice p { margin-bottom: 8px; color: var(--crema-suave); font-weight: 800; }
.casos-indice ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.casos-indice a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--linea); background: rgb(22 21 26 / .35); color: var(--crema); font-weight: 800; font-size: .95rem; line-height: 1.25; text-decoration: none; }
.casos-indice a:hover { border-color: var(--ocre); color: var(--crema); }
.casos { list-style: none; display: grid; gap: 16px; }
@media (min-width: 860px) {
  .casos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* el caso que queda solo en la última fila ocupa todo el ancho: título y «ojo» a la izquierda, pasos a la derecha */
  .caso:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .caso:last-child:nth-child(odd) article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); grid-template-rows: auto 1fr; gap: 12px 36px; }
  .caso:last-child:nth-child(odd) .pasos-caso { grid-column: 2; grid-row: 1 / span 2; }
  .caso:last-child:nth-child(odd) .ojo { margin-top: 0; align-self: start; }
}
.caso { scroll-margin-top: calc(var(--barra) + 16px); }
.caso article { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--linea); }
.caso h4::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--verde); vertical-align: .1em; }
.caso:target article { outline: 3px solid var(--luz); outline-offset: 3px; }
.caso h4, .canal h4 { margin: 0; font-family: var(--letra-titulo); font-weight: 900; line-height: 1.2; text-wrap: balance; }
.caso h4 { font-size: 1.15rem; }
.pasos-caso { padding-left: 1.4em; display: grid; gap: 8px; }
.pasos-caso li { line-height: 1.5; }
.pasos-caso li::marker { color: var(--verde); font-weight: 900; }
.ojo { margin-top: auto; padding: 10px 14px; border-radius: 10px; background: rgb(199 154 72 / .12); font-size: .97rem; line-height: 1.45; }
.ojo strong { color: var(--luz); font-weight: 900; }

/* ---------- 3 · dónde denunciar ---------- */
.paises-control { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.ver-todos { min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--frio); font: 800 .95rem var(--letra); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ver-todos:hover { color: var(--luz); }
.pais-panel { padding-top: 4px; } /* sin marco propio: las tarjetas son los canales */
.pais-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.pais-cabeza h3 { font: 400 clamp(1.8rem, 5vw, 2.4rem)/1 var(--letra-cartel); text-transform: uppercase; letter-spacing: .05em; color: var(--luz); }
.pais-emergencia { font-weight: 800; color: var(--crema-suave); }
.pais-emergencia a, .emergencia a { font: 400 1.45rem/1 var(--letra-cartel); letter-spacing: .05em; color: var(--luz); }
.pais-panel > .nota { margin: -4px 0 14px; }
.canales { list-style: none; display: grid; gap: 12px; }
@media (min-width: 820px) { .canales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.canal { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; border: 1px solid var(--linea); background: rgb(22 21 26 / .45); }
.canal h4 { font-size: 1.02rem; }
.canal > p { color: var(--crema-suave); font-size: .97rem; line-height: 1.5; }
.contactos { list-style: none; display: grid; gap: 4px; }
.contacto { font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.contacto a { display: inline-block; padding: 3px 0; }
.contacto-tipo { display: inline-block; min-width: 6.2em; margin-right: 8px; font: 900 .7rem/1.2 var(--letra-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--crema-suave); }
.contacto-nota { font-weight: 600; color: var(--crema-suave); }
.contacto-otro { font-weight: 600; }
@media (max-width: 559px) {
  .canal { padding: 14px 12px; }
}
.fuente { margin-top: auto; padding-top: 4px; color: var(--crema-suave); font-size: .85rem; overflow-wrap: anywhere; }

/* ---------- cierre ---------- */
.cierre h2 { margin-bottom: 18px; }
.chiste { display: grid; gap: 10px; max-width: 62ch; padding: 20px 22px; border-radius: var(--radio); border: 2px solid var(--verde); background: color-mix(in srgb, var(--cactus) 16%, var(--tarjeta)); }
.linea-dialogo { font-weight: 800; font-size: 1.08rem; }
.linea-dialogo strong { color: var(--luz); font-weight: 900; }
.acotacion, .remate { color: var(--crema-suave); font-weight: 600; }
.emergencia { margin-top: 18px; max-width: 62ch; padding: 14px 18px; border: 2px solid var(--rojo); border-radius: var(--radio); background: color-mix(in srgb, var(--vino) 30%, var(--noche)); line-height: 1.5; }
.legal { margin-top: 14px; max-width: 62ch; color: var(--crema-suave); font-size: .95rem; }

@media (prefers-reduced-motion: no-preference) {
  .atajos a, .casos-indice a { transition: border-color .15s ease, color .15s ease; }
}

/* ---------- impresión: hoja limpia (sitio.css ya oculta barra, pie, botones y el póster) ---------- */
@media print {
  main { --crema: #111; --crema-suave: #333; --luz: #111; --ocre: #7a5a1c; --verde: #3d5a1f; --frio: #111; --rojo: #8a2f26; --tarjeta: #fff; --linea: #bbb; }
  .atajos, .casos-indice, .paises-control, [data-error] { display: none !important; }
  .reloj, .tiempo-ya .reloj { background: none; border: 1px solid #555; color: #111; }
  .siempre h3, .siempre li::marker { color: var(--rojo); }
  .bloque { padding-top: 20px; }
  .habito, .tiempo, .siempre, .caso article, .canal, .pais-panel, .chiste, .emergencia, .cai-aviso, .ojo, .habito-check, .regla { background: #fff !important; box-shadow: none !important; }
  .habito, .tiempo, .siempre, .caso, .canal, .chiste, .emergencia { break-inside: avoid; }
  .pais-panel { padding: 0; border: 0; }
  h2, h3, h4 { break-after: avoid; }
  a { text-decoration: none; }
}