/* =========================================================
   Portal de Salud Mental · Prevención del Suicidio
   I.P.S. Nueva Popayán · Rehabilitar S.A.S.

   Escrito con enfoque MOBILE FIRST: la hoja base describe el
   teléfono y las consultas @media (min-width) solo agregan.

   Motivo visual: la burbuja de conversación (una esquina
   distinta en las piezas clave). Iconografía: Google Material
   Symbols Rounded; no se dibujan formas con CSS.
   Color: azul institucional del logo, verde azulado para la
   calma, dorado para el Código Dorado y rojo solo para lo
   urgente.
   ========================================================= */

/* ---------- 1. Reinicio ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}

img, svg, picture {
  display: block;
  max-width: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; }

:target { scroll-margin-top: 5.5rem; }

/* ---------- 2. Fichas de diseño ---------- */
:root {
  /* superficie */
  --papel:          #F1F4F7;
  --papel-hondo:    #E5EBF1;
  --blanco:         #FFFFFF;

  /* tinta */
  --tinta:          #10233C;
  --tinta-media:    #44596F;
  --tinta-suave:    #6E8296;

  /* institucional */
  --azul:           #004A98;
  --azul-hondo:     #003C7D;
  --azul-claro:     #1F96D4;
  --azul-papel:     #E3F0FA;

  /* verde azulado: calma y esperanza */
  --verde:          #0F7B6C;
  --verde-hondo:    #0A5C51;
  --verde-papel:    #E1F0ED;
  --verde-borde:    #BFDDD7;

  /* dorado: Código Dorado y alertas */
  --dorado:         #B87A0F;
  --dorado-claro:   #E8A82A;
  --dorado-papel:   #FBF1DC;
  --dorado-borde:   #EDD3A0;

  /* rojo: solo urgencia real */
  --rojo:           #B3243A;
  --rojo-papel:     #FCE9EC;
  --rojo-borde:     #F1C4CC;

  /* medidas */
  --envoltura:      1200px;
  --canal:          clamp(1.15rem, 4.2vw, 3rem);
  --radio-s:        12px;
  --radio:          18px;
  --radio-g:        28px;
  --burbuja:        28px 28px 28px 6px;

  /* tipografías */
  --display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --texto:   "Instrument Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* sombras */
  --sombra-s: 0 1px 2px rgba(16, 35, 60, .05), 0 6px 18px -10px rgba(16, 35, 60, .22);
  --sombra:   0 2px 4px rgba(16, 35, 60, .04), 0 18px 40px -22px rgba(16, 35, 60, .35);
}

/* ---------- 3. Base ---------- */
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.965rem + 0.16vw, 1.09rem);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Deja aire para la barra de auxilio fija del móvil. */
  padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

strong { font-weight: 650; }

.saltar {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 999;
  background: var(--tinta);
  color: #fff;
  padding: .75rem 1.4rem;
  border-radius: 0 0 var(--radio-s) var(--radio-s);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus-visible { transform: translate(-50%, 0); }

:focus-visible {
  outline: 3px solid var(--azul-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 4. Iconografía (Material Symbols) ---------- */
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  flex: none;
  user-select: none;
}

/* ---------- 5. Estructura ---------- */
.envoltura {
  width: 100%;
  max-width: var(--envoltura);
  margin-inline: auto;
  padding-inline: var(--canal);
}
.envoltura--angosta { max-width: 800px; }

.seccion { padding-block: clamp(3rem, 7.5vw, 6.4rem); }

.seccion__encabezado {
  max-width: 46rem;
  margin-bottom: clamp(1.8rem, 4.5vw, 3.4rem);
}

.seccion__titulo {
  font-size: clamp(1.8rem, 1.1rem + 3.1vw, 3.05rem);
  margin-block: .55rem .85rem;
}

.seccion__entrada {
  color: var(--tinta-media);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.19rem);
  max-width: 42rem;
}

.seccion__encabezado--claro .seccion__titulo { color: #fff; }
.seccion__encabezado--claro .seccion__entrada { color: rgba(255, 255, 255, .76); }

/* Etiquetas de sección */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .755rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde-hondo);
}
.etiqueta .material-symbols-rounded { font-size: 1.15rem; }
.etiqueta--clara  { color: var(--azul-claro); }
.etiqueta--verde  { color: var(--verde); }
.etiqueta--dorada { color: var(--dorado); }

/* ---------- 6. Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.45rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -.005em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.boton .material-symbols-rounded { font-size: 1.25rem; }

.boton--principal {
  background: var(--azul);
  color: #fff;
  box-shadow: var(--sombra-s);
}
.boton--principal:hover { background: var(--azul-hondo); transform: translateY(-2px); }

.boton--sencillo {
  background: transparent;
  color: var(--tinta);
  border-color: rgba(16, 35, 60, .22);
}
.boton--sencillo:hover { border-color: var(--tinta); background: rgba(255, 255, 255, .7); transform: translateY(-2px); }

/* Enlace con icono, para teléfonos y accesos directos */
.enlace-dato {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(0, 74, 152, .28);
  padding-bottom: 1px;
}
.enlace-dato .material-symbols-rounded { font-size: 1.15rem; }
.enlace-dato:hover { border-bottom-color: var(--azul); }

/* ---------- 7. Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(241, 244, 247, .9);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(16, 35, 60, .08);
  transition: box-shadow .25s ease;
}
.cabecera.is-desplazada { box-shadow: 0 10px 30px -22px rgba(16, 35, 60, .6); }

.cabecera__interior {
  position: relative;
  width: 100%;
  max-width: var(--envoltura);
  margin-inline: auto;
  padding: .6rem var(--canal);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  justify-content: space-between;
}

.marca {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  min-width: 0;
}
.marca__logo {
  height: clamp(34px, 5.4vw, 46px);
  width: auto;
  border-radius: 999px;
}
.marca__texto {
  display: none;
  flex-direction: column;
  line-height: 1.14;
  font-size: .8rem;
  padding-left: .8rem;
  border-left: 1px solid rgba(16, 35, 60, .16);
}
.marca__texto strong { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; font-size: .93rem; }
.marca__texto span { color: var(--tinta-suave); }

/* Navegación: en el móvil es un panel desplegable. */
.con-js .navegacion {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--blanco);
  border-bottom: 1px solid rgba(16, 35, 60, .1);
  box-shadow: 0 24px 40px -28px rgba(16, 35, 60, .7);
  padding: .6rem var(--canal) 1.1rem;
  display: none;
}
.con-js .navegacion.is-abierta { display: block; }

.navegacion__lista {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .15rem;
}
.navegacion__lista a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem .9rem;
  border-radius: var(--radio-s);
  font-size: 1.02rem;
  font-weight: 550;
  color: var(--tinta-media);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}
.navegacion__lista a .material-symbols-rounded { font-size: 1.2rem; }
.navegacion__lista a:hover { color: var(--tinta); background: var(--papel); }
.navegacion__lista a.is-actual { color: var(--azul); background: var(--azul-papel); }

/* La llamada a la acción va después para ganar sin !important. */
.navegacion__lista a.navegacion__destacado {
  background: var(--tinta);
  color: #fff;
  justify-content: center;
  margin-top: .5rem;
}
.navegacion__lista a.navegacion__destacado:hover,
.navegacion__lista a.navegacion__destacado:focus-visible,
.navegacion__lista a.navegacion__destacado.is-actual {
  background: var(--azul);
  color: #fff;
}

/* El botón solo existe si hay JS que lo opere; sin JS el menú queda desplegado. */
.menu-boton {
  display: none;
  align-items: center;
  gap: .4rem;
  background: transparent;
  border: 1.5px solid rgba(16, 35, 60, .2);
  border-radius: 999px;
  padding: .45rem .9rem .45rem .75rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.con-js .menu-boton { display: inline-flex; }
.menu-boton__icono { font-size: 1.3rem; }

/* ---------- 8. Portada ---------- */
.portada {
  position: relative;
  padding-block: clamp(1.8rem, 5.5vw, 4.4rem) clamp(2.4rem, 6vw, 4.8rem);
  overflow: hidden;
}
.portada::before {
  content: "";
  position: absolute;
  inset: -18% -30% auto 20%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, var(--verde-papel), transparent 68%);
  z-index: 0;
}

.portada__reja {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.8rem, 5vw, 3.4rem);
  align-items: start;
}

/* En el móvil la fecha se apila bajo el nombre y el icono ocupa las dos
   filas; así el texto puede partirse sin dejar el icono solo en su renglón.
   Desde la tableta vuelve a ser una sola línea. */
.etiqueta--dia {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .15rem .55rem;
  background: var(--blanco);
  border: 1px solid rgba(16, 35, 60, .09);
  border-radius: var(--radio);
  padding: .55rem 1rem .55rem .8rem;
  color: var(--tinta-media);
  box-shadow: var(--sombra-s);
  line-height: 1.35;
}
.etiqueta__icono { color: var(--azul-claro); grid-row: span 2; }
.etiqueta__nombre { grid-column: 2; }
.etiqueta__estado {
  grid-column: 2;
  color: var(--azul);
  letter-spacing: .06em;
  justify-self: start;
}

.portada__titulo {
  font-size: clamp(2.4rem, 1.1rem + 6.4vw, 4.8rem);
  letter-spacing: -.035em;
  font-weight: 800;
  margin-block: clamp(1rem, 2.4vw, 1.4rem) 0;
}
.portada__titulo em {
  font-style: normal;
  color: var(--verde);
}

.portada__entrada {
  margin-top: 1.1rem;
  max-width: 34rem;
  font-size: clamp(1.05rem, 1rem + 0.36vw, 1.22rem);
  color: var(--tinta-media);
}
.portada__entrada strong { color: var(--tinta); }

.portada__lema {
  display: flex;
  gap: .7rem;
  margin-top: 1.3rem;
  padding: .9rem 1.05rem;
  max-width: 34rem;
  background: var(--verde-papel);
  border: 1px solid var(--verde-borde);
  border-radius: var(--burbuja);
  color: var(--verde-hondo);
  font-size: .96rem;
  line-height: 1.5;
}
.portada__lema .material-symbols-rounded { font-size: 1.35rem; }

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

/* Tarjeta de ayuda inmediata */
.auxilio {
  background: var(--blanco);
  border: 1px solid rgba(16, 35, 60, .09);
  border-radius: var(--radio-g);
  padding: clamp(1.2rem, 3.5vw, 1.9rem);
  box-shadow: var(--sombra);
}
.auxilio__rotulo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--rojo-papel);
  color: var(--rojo);
  border-radius: 999px;
  padding: .35rem .9rem .35rem .7rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.auxilio__rotulo .material-symbols-rounded { font-size: 1.15rem; }
.auxilio__titulo {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  margin-block: .7rem .5rem;
}
.auxilio__texto { color: var(--tinta-media); font-size: .97rem; }

.auxilio__canales {
  display: grid;
  gap: .55rem;
  margin-top: 1.2rem;
}
.auxilio__canales a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .85rem;
  padding: .8rem .9rem;
  border-radius: var(--radio);
  background: var(--azul-papel);
  border: 1px solid rgba(0, 74, 152, .14);
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.auxilio__canales a:hover { transform: translateY(-2px); border-color: var(--azul); }
.auxilio__icono { color: var(--azul); font-size: 1.6rem; }
.auxilio__flecha { color: var(--tinta-suave); font-size: 1.3rem; }
.auxilio__dato { display: grid; gap: .05rem; min-width: 0; }
.auxilio__clave {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.auxilio__valor {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -.01em;
  color: var(--tinta);
}

.auxilio__urgente a {
  background: var(--rojo-papel);
  border-color: var(--rojo-borde);
}
.auxilio__urgente a:hover { border-color: var(--rojo); }
.auxilio__urgente .auxilio__icono { color: var(--rojo); }
.auxilio__urgente .auxilio__valor { color: var(--rojo); }

.auxilio__nota {
  display: flex;
  gap: .55rem;
  margin-top: 1.1rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.auxilio__nota .material-symbols-rounded { font-size: 1.15rem; }

/* ---------- 9. Cifras ---------- */
.cifras {
  background: var(--blanco);
  border-block: 1px solid rgba(16, 35, 60, .07);
  padding-block: clamp(2.2rem, 4.5vw, 3.2rem);
}
.cifras__titulo {
  font-family: var(--texto);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 1.4rem;
}
.cifras__lista {
  display: grid;
  gap: 1.3rem;
}
.cifra {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icono numero"
    "icono texto";
  gap: 0 .9rem;
  padding-top: 1rem;
  border-top: 5px solid var(--azul);
  border-radius: 2px;
}
.cifra__icono {
  grid-area: icono;
  align-self: start;
  font-size: 2rem;
  color: var(--azul);
  margin-top: .1rem;
}
.cifra__numero {
  grid-area: numero;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--azul);
}
.cifra__texto {
  grid-area: texto;
  color: var(--tinta-media);
  font-size: .95rem;
  line-height: 1.45;
  margin-top: .15rem;
}
.cifra--clave { border-top-color: var(--verde); }
.cifra--clave .cifra__icono,
.cifra--clave .cifra__numero { color: var(--verde); }

.fuente {
  margin-top: 1.4rem;
  font-size: .84rem;
  font-style: italic;
  color: var(--tinta-suave);
}

/* ---------- 10. Ruta integral ---------- */
.seccion--ruta { background: var(--papel); }

.ruta {
  display: grid;
  gap: .9rem;
}

.paso {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  background: var(--blanco);
  border: 1px solid rgba(16, 35, 60, .08);
  border-radius: var(--radio-g);
  padding: clamp(1.1rem, 3vw, 1.7rem);
  box-shadow: var(--sombra-s);
}

.paso__marca {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--azul-papel);
  color: var(--azul);
}
.paso__marca .material-symbols-rounded { font-size: 1.65rem; }

.paso__indice {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--azul);
}
.paso__titulo {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  margin-block: .3rem .55rem;
}
.paso__texto { color: var(--tinta-media); }

.paso__contactos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin-top: .9rem;
}

.paso--dorado {
  background: var(--dorado-papel);
  border-color: var(--dorado-borde);
}
.paso--dorado .paso__marca { background: #fff; color: var(--dorado); }
.paso--dorado .paso__indice { color: var(--dorado); }
.paso--dorado .paso__texto { color: #6C4B12; }
.paso--dorado .enlace-dato { color: var(--dorado); border-bottom-color: rgba(184, 122, 15, .35); }
.paso--dorado .enlace-dato:hover { border-bottom-color: var(--dorado); }

/* ---------- 11. Señales de alerta ---------- */
.seccion--senales { background: var(--blanco); }

.senales {
  display: grid;
  gap: clamp(1.1rem, 2.6vw, 2rem);
}

.senales__pestanas {
  display: flex;
  gap: .65rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  /* Sangrado a los bordes para que se note que hay más pestañas. */
  margin-inline: calc(var(--canal) * -1);
  padding-inline: var(--canal);
}

.pestana {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icono nombre"
    "icono uso";
  align-items: center;
  gap: 0 .75rem;
  width: min(16rem, 72vw);
  text-align: left;
  background: var(--papel);
  border: 1.5px solid rgba(16, 35, 60, .09);
  border-radius: var(--radio);
  padding: .9rem 1rem;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
.pestana:hover { border-color: rgba(16, 35, 60, .28); transform: translateY(-2px); }

.pestana__icono {
  grid-area: icono;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verde-papel);
  color: var(--verde-hondo);
  font-size: 1.45rem;
  transition: background-color .2s ease, color .2s ease;
}
.pestana__nombre {
  grid-area: nombre;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.pestana__uso {
  grid-area: uso;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.pestana.is-activa {
  background: var(--blanco);
  border-color: var(--azul);
  box-shadow: 0 0 0 1px var(--azul), var(--sombra-s);
}
.pestana.is-activa .pestana__icono { background: var(--azul); color: #fff; }
.pestana.is-activa .pestana__uso { color: var(--azul); }

.panel {
  display: grid;
  gap: clamp(1.1rem, 3vw, 2.2rem);
  align-items: start;
  background: var(--papel);
  border: 1px solid rgba(16, 35, 60, .07);
  border-radius: var(--radio-g);
  padding: clamp(1.1rem, 2.6vw, 1.8rem);
}
.panel[hidden] { display: none; }

.panel__lamina {
  display: grid;
  place-items: center;
  border-radius: var(--burbuja);
  background: var(--azul-papel);
  aspect-ratio: 5 / 2;
  padding: 1rem;
}
.panel__simbolo {
  font-size: clamp(3.4rem, 12vw, 5.5rem);
  color: var(--azul);
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48;
}

.panel__indice {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--azul);
}
.panel__indice span { color: var(--tinta-suave); font-weight: 600; }

.panel__titulo {
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem);
  margin-block: .35rem .9rem;
}

.panel__lista { display: grid; gap: .65rem; }
.panel__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  color: var(--tinta-media);
  line-height: 1.5;
}
.panel__lista li::before {
  content: "chevron_right";
  font-family: "Material Symbols Rounded";
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--azul-claro);
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.panel__aviso {
  display: flex;
  gap: .6rem;
  margin-top: 1.2rem;
  padding: .85rem 1rem;
  border-radius: var(--radio-s);
  background: var(--dorado-papel);
  border: 1px solid var(--dorado-borde);
  color: #6C4B12;
  font-size: .92rem;
  line-height: 1.5;
}
.panel__aviso .material-symbols-rounded { font-size: 1.25rem; color: var(--dorado); }

/* ---------- 12. Chequeo ---------- */
.seccion--chequeo {
  background: var(--tinta);
  background-image: url("assets/svg/patron-pulso.svg");
  background-repeat: repeat-x;
  background-position: center bottom 1.8rem;
  color: #fff;
}

.chequeo {
  display: grid;
  gap: .8rem;
}

.signo {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  text-align: left;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .17);
  border-radius: var(--radio);
  padding: 1rem 1.05rem;
  color: rgba(255, 255, 255, .9);
  font-size: 1rem;
  line-height: 1.45;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.signo:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }

.signo__caja {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, .6);
  transition: color .2s ease;
}

.signo[aria-pressed="true"] {
  background: #fff;
  border-color: #fff;
  color: var(--tinta);
  font-weight: 550;
}
.signo[aria-pressed="true"] .signo__caja {
  color: var(--azul-claro);
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.veredicto {
  display: grid;
  gap: .5rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding: 1.1rem 1.25rem;
  border-radius: var(--radio);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  transition: background-color .3s ease, border-color .3s ease;
}
.veredicto__marcador {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
}
.veredicto__marcador .material-symbols-rounded { font-size: 1.3rem; }
.veredicto__marcador strong { color: #fff; font-size: 1.55rem; }
.veredicto__texto { color: rgba(255, 255, 255, .84); }

.veredicto.is-atencion {
  background: rgba(232, 168, 42, .14);
  border-color: var(--dorado-claro);
}
.veredicto.is-urgente {
  background: rgba(206, 62, 62, .2);
  border-color: #F0908E;
}
.veredicto.is-urgente .veredicto__texto { color: #FFE1E1; }

.chequeo__pie {
  display: flex;
  gap: .6rem;
  margin-top: 1.3rem;
  font-size: .89rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .6);
}
.chequeo__pie .material-symbols-rounded { font-size: 1.2rem; }

/* ---------- 13. Cómo acompañar ---------- */
.seccion--acompanar { background: var(--papel); }

.tarjetas {
  display: grid;
  gap: 1rem;
  /* Crece por sí sola: 1 columna en el móvil, 2 en la tableta y 3
     en el escritorio, sin apretar el texto en anchos intermedios. */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
.tarjeta {
  background: var(--blanco);
  border: 1px solid rgba(16, 35, 60, .08);
  border-radius: var(--radio-g);
  padding: clamp(1.2rem, 3vw, 1.7rem);
  box-shadow: var(--sombra-s);
}
.tarjeta__icono {
  font-size: 2.3rem;
  color: var(--verde);
  margin-bottom: .7rem;
  font-variation-settings: "FILL" 0, "wght" 350, "GRAD" 0, "opsz" 40;
}
.tarjeta__titulo {
  font-size: 1.2rem;
  margin-bottom: .45rem;
}
.tarjeta p { color: var(--tinta-media); font-size: .98rem; }

.cuidados {
  display: grid;
  gap: 1rem;
}

.bloque {
  border-radius: var(--radio-g);
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid transparent;
}
.bloque--suma  { background: var(--verde-papel); border-color: var(--verde-borde); }
.bloque--evita { background: var(--dorado-papel); border-color: var(--dorado-borde); }

.bloque__titulo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: clamp(1.2rem, 1.05rem + 0.75vw, 1.55rem);
  margin-bottom: 1.1rem;
}
.bloque__titulo .material-symbols-rounded {
  font-size: 1.7rem;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.bloque--suma  .bloque__titulo { color: var(--verde-hondo); }
.bloque--evita .bloque__titulo { color: #8A5B10; }

.bloque__lista { display: grid; gap: .8rem; }
.bloque__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  line-height: 1.5;
}
.bloque__lista li::before {
  font-family: "Material Symbols Rounded";
  font-size: 1.3rem;
  line-height: 1.4;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}
.bloque--suma  .bloque__lista li::before { content: "check"; color: var(--verde); }
.bloque--evita .bloque__lista li::before { content: "close"; color: #B0700F; }

/* ---------- 14. Código Dorado ---------- */
.codigo {
  background: linear-gradient(160deg, #FBF1DC, #F6E3BE);
  border-block: 1px solid var(--dorado-borde);
  padding-block: clamp(2.8rem, 6.5vw, 4.8rem);
  color: #5E4210;
}
.codigo__reja {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.codigo__titulo {
  font-size: clamp(1.7rem, 1.15rem + 2.6vw, 2.7rem);
  color: #4A340B;
  margin-block: .5rem .8rem;
}
.codigo__texto { font-size: clamp(1rem, .97rem + .3vw, 1.13rem); max-width: 34rem; }
.codigo__texto strong { color: #4A340B; }

.codigo__columnas {
  display: grid;
  gap: 1rem;
}
.codigo__bloque {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--dorado-borde);
  border-radius: var(--radio-g);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.codigo__subtitulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.12rem;
  color: var(--dorado);
  margin-bottom: .85rem;
}
.codigo__subtitulo .material-symbols-rounded {
  font-size: 1.5rem;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.codigo__lista { display: grid; gap: .6rem; }
.codigo__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: start;
  font-size: .97rem;
  line-height: 1.5;
}
.codigo__lista li::before {
  content: "arrow_right";
  font-family: "Material Symbols Rounded";
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--dorado-claro);
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* ---------- 15. Mitos ---------- */
.seccion--mitos { background: var(--blanco); }

.mitos {
  display: grid;
  gap: 1rem;
}
.mito {
  background: var(--papel);
  border: 1px solid rgba(16, 35, 60, .08);
  border-radius: var(--radio-g);
  overflow: hidden;
}
.mito__falso,
.mito__cierto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  padding: 1rem 1.15rem;
  line-height: 1.5;
}
.mito__falso {
  background: var(--rojo-papel);
  color: var(--rojo);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -.015em;
  border-bottom: 1px solid var(--rojo-borde);
}
.mito__falso .material-symbols-rounded {
  font-size: 1.4rem;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}
.mito__cierto {
  color: var(--tinta-media);
  font-size: .97rem;
}
.mito__cierto .material-symbols-rounded {
  font-size: 1.4rem;
  color: var(--verde);
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}

/* ---------- 16. Factores protectores ---------- */
.seccion--cuidar { background: var(--verde-papel); }

.protectores {
  display: grid;
  gap: 1rem;
}
.protector {
  background: var(--blanco);
  border: 1px solid var(--verde-borde);
  border-radius: var(--burbuja);
  padding: clamp(1.2rem, 3vw, 1.6rem);
}
.protector__icono {
  font-size: 2.4rem;
  color: var(--verde);
  margin-bottom: .6rem;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 40;
}
.protector__titulo {
  font-size: 1.15rem;
  color: var(--verde-hondo);
  margin-bottom: .4rem;
}
.protector p { color: var(--tinta-media); font-size: .96rem; }

/* ---------- 17. Preguntas ---------- */
.seccion--preguntas { background: var(--papel); }

.preguntas { display: grid; gap: .65rem; }

.pregunta {
  background: var(--blanco);
  border: 1px solid rgba(16, 35, 60, .08);
  border-radius: var(--radio);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pregunta[open] { border-color: rgba(16, 35, 60, .2); box-shadow: var(--sombra-s); }

.pregunta summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 0.97rem + 0.35vw, 1.15rem);
  letter-spacing: -.018em;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }

.pregunta__signo {
  font-size: 1.35rem;
  color: var(--azul);
  background: var(--azul-papel);
  border-radius: 50%;
  padding: .15rem;
  transition: transform .22s ease;
}
.pregunta[open] .pregunta__signo { transform: rotate(45deg); }

.pregunta__respuesta {
  padding: 0 1.15rem 1.15rem;
  color: var(--tinta-media);
}
.pregunta__respuesta a { color: var(--azul); text-underline-offset: 3px; }

/* ---------- 18. Ayuda ---------- */
.ayuda {
  background: var(--azul);
  background-image: url("assets/svg/patron-pulso.svg");
  background-repeat: repeat;
  color: #fff;
  padding-block: clamp(2.8rem, 6.5vw, 5rem);
}
.ayuda__reja {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.ayuda .etiqueta--clara { color: #B7DCF5; }
.ayuda__titulo {
  font-size: clamp(1.65rem, 1.15rem + 2.6vw, 2.6rem);
  margin-block: .55rem .9rem;
}
.ayuda__texto { color: rgba(255, 255, 255, .86); max-width: 32rem; }
.ayuda__texto + .ayuda__texto { margin-top: .8rem; }
.ayuda__texto strong { color: #fff; }

.ayuda__datos {
  display: grid;
  gap: .55rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radio-g);
  padding: clamp(.9rem, 3vw, 1.2rem);
}
.ayuda__datos a,
.ayuda__estatico {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .85rem;
  padding: .75rem .85rem;
  border-radius: var(--radio);
  text-decoration: none;
  transition: background-color .18s ease;
}
.ayuda__datos a:hover { background: rgba(255, 255, 255, .14); }
.ayuda__datos .material-symbols-rounded { font-size: 1.6rem; color: #B7DCF5; }
.ayuda__dato { display: grid; gap: .05rem; min-width: 0; }
.ayuda__clave {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #B7DCF5;
}
.ayuda__valor {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.ayuda__estatico .ayuda__valor { font-size: 1rem; font-family: var(--texto); font-weight: 600; }

/* ---------- 19. Barra de auxilio (fija en el móvil) ---------- */
.barra-auxilio {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .55rem var(--canal) calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(16, 35, 60, .12);
}
.barra-auxilio__accion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .75rem .5rem;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-weight: 650;
  font-size: .95rem;
  text-decoration: none;
}
.barra-auxilio__accion .material-symbols-rounded { font-size: 1.3rem; }
.barra-auxilio__accion--chat { background: var(--verde); }

/* ---------- 20. Pie ---------- */
.pie {
  background: var(--tinta);
  color: rgba(255, 255, 255, .74);
  padding-top: clamp(2.4rem, 5.5vw, 4rem);
  font-size: .95rem;
}
.pie__reja {
  display: grid;
  gap: clamp(1.7rem, 4vw, 3rem);
  padding-bottom: clamp(1.8rem, 4vw, 3rem);
}
.pie__marca img { width: min(15rem, 70%); height: auto; border-radius: 999px; }
.pie__lema {
  margin-top: .9rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: #fff;
}

.pie__enlaces h2 {
  font-family: var(--texto);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: .9rem;
}
.pie__enlaces ul { display: grid; gap: .45rem; }
.pie__enlaces a { text-decoration: none; }
.pie__enlaces a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.pie__hashtag {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  color: #fff;
  margin-bottom: .7rem;
  letter-spacing: -.02em;
}
.pie__nota p + p { margin-top: .7rem; }
.pie__legal { font-size: .85rem; color: rgba(255, 255, 255, .5); }

.pie__base {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: .84rem;
  color: rgba(255, 255, 255, .55);
}

/* ---------- 21. Aparición al desplazar ---------- */
.revelar {
  opacity: 0;
  transform: translateY(16px);
}
.revelar.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* =========================================================
   22. Crecimiento hacia pantallas mayores
   ========================================================= */

/* Teléfono grande */
@media (min-width: 30em) {
  .barra-auxilio { padding-inline: max(var(--canal), 1.5rem); }
  .cifras__lista { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.6rem; }
}

/* Tableta */
@media (min-width: 48em) {
  .etiqueta--dia {
    display: inline-flex;
    border-radius: 999px;
    padding: .4rem .95rem .4rem .7rem;
  }
  .etiqueta--dia .etiqueta__nombre,
  .etiqueta--dia .etiqueta__estado { grid-column: auto; }
  .etiqueta__estado {
    border-left: 1px solid rgba(16, 35, 60, .14);
    padding-left: .55rem;
  }

  .chequeo { grid-template-columns: repeat(2, 1fr); }
  .veredicto {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.2rem;
  }
  .cuidados { grid-template-columns: repeat(2, 1fr); }
  .codigo__columnas { grid-template-columns: repeat(2, 1fr); }
  .mitos { grid-template-columns: repeat(2, 1fr); }
  .protectores { grid-template-columns: repeat(2, 1fr); }
  .panel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
  .panel__lamina { aspect-ratio: 1; }
  .ayuda__reja { grid-template-columns: 1.05fr .95fr; }
  .pie__reja { grid-template-columns: 1fr 1fr; }
  .pie__nota { grid-column: 1 / -1; }
}

/* Escritorio */
@media (min-width: 60em) {
  html, :target { scroll-padding-top: 6.5rem; scroll-margin-top: 6.5rem; }

  body { padding-bottom: 0; }
  .barra-auxilio { display: none; }

  .marca__texto { display: flex; }
  .con-js .menu-boton { display: none; }

  /* La navegación vuelve a ser una barra horizontal. */
  .con-js .navegacion {
    position: static;
    display: block;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .navegacion__lista {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(.2rem, 1vw, .8rem);
  }
  .navegacion__lista a {
    padding: .5rem .7rem;
    border-radius: 999px;
    font-size: .93rem;
  }
  .navegacion__lista a:hover { background: rgba(255, 255, 255, .8); }
  .navegacion__lista a.navegacion__destacado { margin-top: 0; padding-inline: 1rem; }

  .portada__reja { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }

  .cifras__lista { grid-template-columns: repeat(4, 1fr); }

  .ruta { grid-template-columns: repeat(2, 1fr); }
  .paso--dorado { grid-column: 1 / -1; }

  .senales { grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr); align-items: start; }
  .senales__pestanas {
    flex-direction: column;
    overflow: visible;
    padding: 0;
    margin: 0;
    position: sticky;
    top: 6.5rem;
  }
  .pestana { width: 100%; }

  .panel { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }

  .mitos { grid-template-columns: repeat(3, 1fr); }
  .protectores { grid-template-columns: repeat(3, 1fr); }

  .codigo__reja { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; }

  .pie__reja { grid-template-columns: 1.1fr .8fr 1.1fr; }
  .pie__nota { grid-column: auto; }
}

@media (min-width: 75em) {
  .portada__titulo { font-size: 4.8rem; }
}

/* ---------- 23. Preferencias del sistema ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  .seccion__entrada,
  .panel__lista li,
  .tarjeta p,
  .protector p,
  .mito__cierto { color: var(--tinta); }
  .pestana { border-color: rgba(16, 35, 60, .4); }
}

/* ---------- 24. Impresión ---------- */
@media print {
  .cabecera, .menu-boton, .portada__acciones, .saltar, .barra-auxilio { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; padding-bottom: 0; }
  .seccion, .ayuda, .pie, .codigo, .cifras { padding-block: 1.2rem; background: #fff !important; color: #000 !important; }
  .signo, .veredicto, .ayuda__datos, .pie__hashtag, .seccion__titulo, .ayuda__titulo, .codigo__titulo { color: #000 !important; }
  .panel[hidden] { display: grid !important; }
  .pregunta__respuesta { display: block !important; }
  .revelar { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; }
}