:root {
  --papel: #F5EFE3;
  --papel-2: #ECE3D2;
  --tarjeta: #FFFBF4;
  --tinta: #26241F;
  --tinta-2: #5E584D;
  --linea: #DCCFB9;
  --coral: #D9573F;
  --coral-suave: #F6D8CE;
  --azul: #2F6690;
  --azul-suave: #D7E4EF;
  --tierra: #A0703C;
  --tierra-suave: #EFE0CB;
  --verde: #4F8A55;
  --verde-suave: #DAE9D6;
  --radio: 14px;
  --sombra: 0 1px 0 rgba(38, 36, 31, .05), 0 10px 24px -16px rgba(38, 36, 31, .35);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--azul); }
button { font: inherit; color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.estrecho { max-width: 760px; }
.kicker { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: .6em; }
.lead { font-size: 1.15rem; color: var(--tinta-2); max-width: 46em; }
.nota { font-size: .88rem; color: var(--tinta-2); }
.mudo { color: var(--tinta-2); }

/* Cabecera */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(245, 239, 227, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.cab-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca b { font-family: var(--serif); font-size: 1.25rem; display: block; line-height: 1; }
.marca small { font-size: .72rem; color: var(--tinta-2); letter-spacing: .04em; }
.logo { width: 32px; height: 32px; }
#nav { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
#nav::-webkit-scrollbar { display: none; }
#nav a { text-decoration: none; color: var(--tinta-2); padding: 8px 12px; border-radius: 999px; white-space: nowrap; font-size: .93rem; }
#nav a:hover { background: var(--papel-2); color: var(--tinta); }
#nav a[aria-current="page"] { background: var(--tinta); color: var(--papel); }

main { min-height: 70vh; padding: 40px 0 64px; }
.pie { border-top: 1px solid var(--linea); padding: 20px 0 32px; font-size: .85rem; color: var(--tinta-2); }
.enlace { background: none; border: 0; padding: 0; color: var(--azul); text-decoration: underline; cursor: pointer; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--tinta); color: var(--papel); border: 0; border-radius: 999px;
  padding: 11px 20px; font-weight: 600; cursor: pointer; text-decoration: none; font-size: .95rem;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.coral { background: var(--coral); color: #fff; }
.btn.sec { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.btn.peq { padding: 7px 14px; font-size: .85rem; }
.btn.hecho { background: var(--verde-suave); color: var(--verde); box-shadow: none; transform: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.botones { display: flex; gap: 10px; flex-wrap: wrap; }

/* Tarjetas y rejillas */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); }
.tarjeta.plana { box-shadow: none; }
.tarjeta.tinta { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.tarjeta.tinta .mudo, .tarjeta.tinta .nota { color: #CFC6B5; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lado { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
.pila { display: grid; gap: 18px; }
section + section { margin-top: 48px; }
[id] { scroll-margin-top: 90px; }
.cab-seccion { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.cab-seccion h2 { margin: 0; }

/* Portada */
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero h1 em { font-style: italic; color: var(--coral); }
.portal-ilu { aspect-ratio: 1 / 1; max-width: 400px; justify-self: center; width: 100%; }
.pasos-como { counter-reset: paso; }
.paso-como { position: relative; padding-top: 54px; }
.paso-como::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: 18px; left: 22px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--c, var(--coral)); color: #fff; font-family: var(--serif); font-weight: 700;
  display: grid; place-items: center; font-size: .95rem;
}
.paso-como h3 { margin-top: 6px; }
.paso-como p { margin: 0; color: var(--tinta-2); font-size: .95rem; }
.cita { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.3; max-width: 30em; }
.rol h3 { margin-bottom: .3em; }
.rol p { color: var(--tinta-2); font-size: .95rem; }
.cifras { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 8px; }
.cifra b { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; }
.cifra span { font-size: .82rem; color: var(--tinta-2); }

/* Formularios */
label { display: grid; gap: 6px; font-size: .9rem; font-weight: 500; margin-bottom: 14px; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea {
  font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--linea);
  background: #fff; color: var(--tinta); width: 100%;
}
input:focus, select:focus, textarea:focus, .chip:focus-visible, .btn:focus-visible, .turno:focus-visible { outline: 3px solid var(--azul-suave); outline-offset: 1px; border-color: var(--azul); }
textarea { min-height: 80px; resize: vertical; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 400; }
label.check input { width: 18px; height: 18px; accent-color: var(--coral); }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo-titulo { font-size: .9rem; font-weight: 600; margin: 4px 0 8px; display: flex; justify-content: space-between; gap: 8px; }
.campo-titulo small { font-weight: 400; color: var(--tinta-2); }
.acciones { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.error { color: var(--coral); font-size: .88rem; min-height: 1.2em; margin: 8px 0 0; }

.pasos { list-style: none; padding: 0; margin: 0 0 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.pasos li { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--tinta-2); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--papel-2); }
.pasos li span { width: 22px; height: 22px; border-radius: 50%; background: var(--linea); display: grid; place-items: center; font-size: .75rem; font-weight: 600; }
.pasos li.actual { background: var(--tinta); color: var(--papel); }
.pasos li.actual span { background: var(--coral); color: #fff; }
.pasos li.hecho span { background: var(--verde); color: #fff; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  --c: var(--tinta);
  border: 1.5px solid var(--linea); background: #fff; border-radius: 999px; padding: 7px 13px;
  font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: .85; }
.chip.sin-punto::before { display: none; }
.chip:hover { border-color: var(--c); }
.chip.on { background: var(--c); border-color: var(--c); color: #fff; }
.chip.on::before { background: #fff; }
.grupo-cat { margin-bottom: 6px; }
.grupo-cat h4 { font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); margin: 0 0 8px; font-weight: 600; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.etiqueta { --c: var(--tinta-2); font-size: .76rem; padding: 3px 9px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); display: inline-flex; align-items: center; gap: 5px; }
.etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.etiqueta.tenue { opacity: .55; }
.insignia { display: inline-block; font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--coral-suave); color: #8E3020; letter-spacing: .02em; }
.insignia.azul { background: var(--azul-suave); color: var(--azul); }
.insignia.verde { background: var(--verde-suave); color: #2F5E35; }

/* Personas */
.persona { display: flex; gap: 14px; align-items: flex-start; }
.avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; color: #fff; font-size: 1rem; }
.avatar.xl { width: 76px; height: 76px; font-size: 1.6rem; }
.persona h3, .persona h4 { margin: 0 0 2px; }
.persona h4 { font-size: 1.05rem; }
.persona .meta { font-size: .82rem; color: var(--tinta-2); }
.persona p { font-size: .92rem; margin: 8px 0 0; }
.tarjeta-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.por-que { font-size: .85rem; background: var(--papel); border-radius: 10px; padding: 10px 12px; margin-top: 14px; }
.por-que b { font-weight: 600; }

/* Mentor destacado */
.mentor-xl { border-top: 6px solid var(--coral); }
.mentor-xl .persona h3 { font-size: 1.6rem; }

.turnos { display: grid; gap: 8px; margin: 12px 0 16px; }
.turno { text-align: left; border: 1.5px solid var(--linea); background: #fff; border-radius: 10px; padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between; }
.turno:hover { border-color: var(--tinta); }
.turno.on { border-color: var(--coral); background: var(--coral-suave); }

/* Eventos */
.evento { display: flex; flex-direction: column; }
.evento .fecha { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.calendario { flex: none; width: 52px; text-align: center; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--tinta); background: #fff; }
.calendario small { display: block; background: var(--tinta); color: var(--papel); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; padding: 2px 0; }
.calendario b { display: block; font-family: var(--serif); font-size: 1.35rem; line-height: 1.4; }
.evento .org { font-size: .8rem; color: var(--tinta-2); }
.evento h4 { margin: 0; font-size: 1.08rem; }
.evento p { font-size: .9rem; color: var(--tinta-2); margin: 8px 0 0; }
.evento .tarjeta-pie { margin-top: auto; padding-top: 14px; }
.plazas { font-size: .8rem; color: var(--tinta-2); }
.barra { height: 6px; background: var(--papel-2); border-radius: 99px; overflow: hidden; margin-top: 4px; width: 110px; }
.barra i { display: block; height: 100%; background: var(--verde); border-radius: 99px; }

/* Primeros pasos */
.progreso { height: 10px; background: rgba(255, 255, 255, .15); border-radius: 99px; overflow: hidden; margin: 10px 0 16px; }
.progreso i { display: block; height: 100%; background: var(--coral); border-radius: 99px; transition: width .4s ease; }
.lista-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.lista-pasos li { display: flex; align-items: center; gap: 10px; font-size: .92rem; padding: 6px 0; }
.lista-pasos .marca-paso { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #8F877A; display: grid; place-items: center; font-size: .75rem; }
.lista-pasos li.ok .marca-paso { background: var(--verde); border-color: var(--verde); color: #fff; }
.lista-pasos li.ok span.t { color: #CFC6B5; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.lista-pasos a, .lista-pasos button.enlace { color: #F3B9A9; font-size: .82rem; margin-left: auto; white-space: nowrap; }

/* Agenda */
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--linea); font-size: .92rem; }
.agenda li:first-child { border-top: 0; }
.agenda .cuando { font-weight: 600; font-size: .85rem; }
.agenda .cuando small { display: block; font-weight: 400; color: var(--tinta-2); }

/* Red */
.red-svg { width: 100%; height: auto; display: block; }
.red-svg text { font-family: var(--sans); font-size: 11px; fill: var(--tinta); paint-order: stroke; stroke: var(--tarjeta); stroke-width: 4px; stroke-linejoin: round; }
.red-svg .t-yo { font-family: var(--serif); font-size: 14px; font-weight: 700; fill: #fff; stroke: none; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--tinta-2); margin-top: 8px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* Acogida */
.acogida-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
.dato { display: flex; gap: 10px; margin: 10px 0; font-size: .95rem; }
.dato b { min-width: 76px; font-weight: 600; }
.lista-simple { margin: 0; padding-left: 1.1em; }
.lista-simple li { margin: 6px 0; }
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.pestana { border: 1.5px solid var(--linea); background: transparent; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: .9rem; }
.pestana.on { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* Organizaciones */
.alcance { background: var(--azul-suave); border-radius: 12px; padding: 14px 16px; margin: 4px 0 16px; }
.alcance b { font-family: var(--serif); font-size: 1.8rem; color: var(--azul); line-height: 1; margin-right: 6px; }
.barras { display: grid; gap: 8px; }
.barras div { display: grid; grid-template-columns: 140px 1fr 24px; gap: 10px; align-items: center; font-size: .85rem; }
.barras .b { height: 10px; border-radius: 99px; background: var(--c); }

/* Modal */
dialog { border: 0; border-radius: 18px; padding: 26px; width: min(520px, calc(100vw - 32px)); background: var(--tarjeta); color: var(--tinta); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); }
dialog::backdrop { background: rgba(38, 36, 31, .45); }
dialog h3 { font-size: 1.4rem; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease;
  background: var(--tinta); color: var(--papel); padding: 12px 20px; border-radius: 12px; font-size: .92rem;
  max-width: calc(100vw - 32px); z-index: 50; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
}
#toast.ver { transform: translate(-50%, 0); opacity: 1; }

.vacio { text-align: center; padding: 30px; color: var(--tinta-2); border: 1.5px dashed var(--linea); border-radius: var(--radio); }

@media (max-width: 960px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lado, .hero, .acogida-hero { grid-template-columns: minmax(0, 1fr); }
  .portal-ilu { max-width: 260px; order: -1; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  main { padding-top: 28px; }
  .g2, .g3, .g4, .fila { grid-template-columns: minmax(0, 1fr); }
  .cab-in { padding: 10px 0; }
  #nav { width: 100%; }
  .barras div { grid-template-columns: 110px 1fr 24px; }
  .agenda li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Directorio, mapa y entidades ---------- */
.mapa { height: 440px; border-radius: var(--radio); border: 1px solid var(--linea); overflow: hidden; margin-top: 16px; background: var(--papel-2); z-index: 0; }
.mapa.peq { height: 300px; margin: 12px 0 0; }
.filtros { display: grid; gap: 12px; margin-top: 18px; }
.filtros input[type=search] { max-width: 480px; }
.pestana .punto, .chip .punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--tinta)); margin-right: 6px; vertical-align: 1px; }
.pestana .cuenta { color: var(--tinta-2); font-size: .8rem; margin-left: 4px; }
.pestana.on .cuenta { color: #CFC6B5; }
.pestana:disabled { opacity: .4; cursor: not-allowed; }
.cat-tarjeta { text-decoration: none; color: var(--tinta); border-left: 6px solid var(--c); display: flex; align-items: baseline; gap: 12px; }
.cat-tarjeta b { font-family: var(--serif); font-size: 2rem; }
.entidad { border-top: 4px solid var(--c); }
.ent-cab { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.insignia.tierra { background: var(--tierra-suave); color: #6E4A22; }
.insignia.gris { background: var(--papel-2); color: var(--tinta-2); }
.aviso-dato { font-size: .78rem; color: #8E6A2A; margin: 8px 0 0; }
.aviso-demo { font-size: .8rem; background: #FFF3D6; color: #7A5A12; border-radius: 8px; padding: 6px 10px; margin: 10px 0 0; }
.resultados { display: grid; gap: 6px; margin: 8px 0; }
.resultado { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.resultado .nota { display: block; margin: 0; }
.actividades { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.actividades li { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; padding: 6px 10px; background: var(--papel); border-radius: 8px; }
.fila-accion { display: flex; gap: 8px; }
.lado-derecha { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.alinear-arriba { align-items: start; }
.practico { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.practico li { display: grid; font-size: .92rem; }
.practico .nota { margin: 0; font-size: .8rem; }
.guia-enlace { display: grid; gap: 4px; text-decoration: none; color: var(--tinta); border-left: 6px solid var(--coral); }
.guia-enlace .nota { margin: 0; }

/* Espacios clave */
.entidad.clave { border-top-color: var(--tinta); box-shadow: 0 0 0 2px var(--tinta), var(--sombra); }
.clave-cinta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -22px -22px 14px; padding: 8px 22px; background: var(--tinta); color: var(--papel); border-radius: var(--radio) var(--radio) 0 0; font-size: .85rem; }
.etiqueta.fuerte { font-weight: 600; }
.compromiso { font-size: .9rem; margin: 10px 0 0; padding-left: 10px; border-left: 3px solid var(--linea); }
label.distintivo { align-items: flex-start; margin-bottom: 10px; }
label.distintivo span { display: grid; gap: 2px; }
label.distintivo .nota { margin: 0; font-size: .8rem; }

/* Despliegue */
.dep-pasos { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; }
.dep-paso { display: grid; grid-template-columns: 40px 1fr; gap: 14px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; }
.dep-n { width: 34px; height: 34px; border-radius: 50%; background: var(--papel-2); display: grid; place-items: center; font-weight: 700; font-family: var(--serif); }
.dep-paso.hecho .dep-n { background: var(--verde); color: #fff; }
.dep-paso.activo .dep-n { background: var(--coral); color: #fff; animation: latido 1s infinite alternate; }
.dep-paso h3 { margin: 4px 0 6px; }
@keyframes latido { to { transform: scale(1.12); } }

/* ---------- Seguimiento ---------- */
.aviso-hito { display: flex; justify-content: space-between; gap: 16px; align-items: center; background: var(--coral-suave); border: 1px solid #EBB3A3; border-radius: var(--radio); padding: 14px 18px; margin-bottom: 22px; flex-wrap: wrap; }
.hitos { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.hitos li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; }
.hitos li div { display: grid; }
.hitos .nota { margin: 0; font-size: .8rem; }
.punto-hito { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linea); display: grid; place-items: center; font-size: .7rem; color: #fff; }
.hitos li.listo .punto-hito { border-color: var(--coral); background: var(--coral-suave); }
.hitos li.hecho .punto-hito { background: var(--verde); border-color: var(--verde); }
.cuestionario .pregunta { padding: 14px 0; border-top: 1px dashed var(--linea); }
.cuestionario .pregunta:first-child { border-top: 0; padding-top: 0; }
.cuestionario .chips { margin-bottom: 0; }
.nps .chip { min-width: 40px; justify-content: center; }
.evolucion { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.evo-col { display: grid; gap: 4px; text-align: center; }
.evo-col .nota { margin: 0; font-size: .8rem; }
.evo-barra { height: 120px; background: var(--papel-2); border-radius: 10px; display: flex; align-items: flex-end; overflow: hidden; margin-bottom: 6px; }
.evo-barra i { display: block; width: 100%; background: var(--coral); border-radius: 10px 10px 0 0; }
.hitos-linea { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hitos-linea li { font-size: .74rem; color: var(--tinta-2); display: grid; gap: 4px; }
.hitos-linea li span { height: 6px; border-radius: 99px; background: var(--papel-2); }
.hitos-linea li.listo span { background: var(--coral-suave); outline: 1.5px solid var(--coral); }
.hitos-linea li.hecho span { background: var(--verde); }
.hitos-linea small { color: var(--tinta); font-size: .72rem; }
.con-alerta { border-left: 5px solid var(--coral); }
.alerta { background: var(--coral-suave); color: #7E2A1A; border-radius: 8px; padding: 8px 12px; font-size: .88rem; margin: 12px 0 0; }

/* ---------- Autoevaluación y escuela ---------- */
.progreso.claro { background: var(--papel-2); margin: 12px 0 6px; height: 8px; }
.competencias { display: grid; gap: 10px; margin-top: 12px; }
.comp { display: grid; grid-template-columns: 190px 1fr 110px; gap: 12px; align-items: center; font-size: .88rem; }
.comp small { color: var(--tinta-2); }
.comp-barra { position: relative; height: 12px; background: var(--papel-2); border-radius: 99px; }
.comp-barra i { display: block; height: 100%; border-radius: 99px; background: var(--azul); }
.comp-barra i.n1 { background: var(--coral); } .comp-barra i.n2 { background: var(--tierra); } .comp-barra i.n4 { background: var(--verde); }
.comp-barra em { position: absolute; top: -3px; width: 3px; height: 18px; background: var(--tinta-2); border-radius: 2px; transform: translateX(-2px); }
.modulo .ideas { padding-left: 1.2em; } .modulo .ideas li { margin: 8px 0; }
.caso { background: var(--papel); border-radius: 12px; padding: 16px 18px; margin: 18px 0; }
.opciones { display: grid; gap: 8px; }
.opcion { text-align: left; background: #fff; border: 1.5px solid var(--linea); border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.opcion:hover { border-color: var(--tinta); }
.opcion.bien { border-color: var(--verde); background: var(--verde-suave); }
.opcion.mal { border-color: var(--coral); background: var(--coral-suave); }
.opcion[aria-disabled="true"] { opacity: .55; }
.explicacion { border-radius: 10px; padding: 10px 14px; margin: 12px 0 6px; font-size: .92rem; }
.explicacion.bien { background: var(--verde-suave); } .explicacion.mal { background: var(--coral-suave); }
.llevar { border-left: 4px solid var(--coral); padding: 8px 14px; background: var(--tarjeta); font-family: var(--serif); font-size: 1.1rem; }
.modulo-tarjeta.hecho { opacity: .8; }

/* ---------- Guía de bienvenida ---------- */
.guia-portada { border-bottom: 2px solid var(--tinta); padding-bottom: 20px; margin-bottom: 18px; }
.indice { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 18px; font-size: .9rem; }
.guia-seccion { margin-top: 36px; }
.guia-seccion h2 { display: flex; gap: 12px; align-items: baseline; }
.guia-seccion h2 span { font-size: .9rem; width: 30px; height: 30px; border-radius: 50%; background: var(--coral); color: #fff; display: inline-grid; place-items: center; flex: none; }
.aporte h4 { margin: 14px 0 4px; font-size: 1.05rem; }
.aporte p { margin: 0 0 6px; }
.firma { font-size: .85rem; color: var(--tinta-2); font-style: italic; }
.firma span { font-style: normal; }
.guia-pasos, .guia-lista { padding-left: 1.2em; margin: 8px 0 0; }
.guia-lista { list-style: none; padding: 0; }
.guia-pasos li, .guia-lista li { margin: 8px 0; display: grid; }
.guia-pasos li span, .guia-lista li span { font-size: .88rem; color: var(--tinta-2); }
.guia ul, ul.guia { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.guia li label { margin: 0; align-items: flex-start; }
.guia li label > span { display: grid; gap: 2px; font-size: .9rem; }
.guia li .nota { margin: 0; font-size: .78rem; }
.guia li.ok b { text-decoration: line-through; color: var(--tinta-2); }
.guia-qr { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; background: var(--tarjeta); border: 2px dashed var(--tinta); border-radius: var(--radio); padding: 20px; }
.qr { background: var(--tarjeta); padding: 8px; border-radius: 8px; display: inline-block; }
.qr img, .qr canvas { display: block; }

/* Cartel imprimible */
.cartel { max-width: 560px; margin: 0 auto; text-align: center; background: var(--tarjeta); border: 3px solid var(--tinta); border-radius: 24px; padding: 36px 32px; }
.cartel h1 em { color: var(--coral); }
.cartel-texto { font-size: 1.15rem; }
.cartel .qr { margin: 12px auto 18px; }
.cartel-espacio { font-size: 1rem; }

@media (max-width: 960px) {
  .lado-derecha { grid-template-columns: minmax(0, 1fr); }
  .comp { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 640px) {
  .mapa { height: 320px; }
  .guia-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hitos-linea { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .cabecera, .pie, .no-imprimir, #toast { display: none !important; }
  body { background: #fff; }
  main { padding: 0; }
  .guia-seccion { break-inside: avoid-page; }
  .tarjeta, .cartel { box-shadow: none; }
  .cartel-pagina { padding-top: 40px; }
}
.leaflet-tile-pane { filter: saturate(.45) sepia(.18) brightness(1.03); }
.leaflet-container { font-family: var(--sans); }

.leaflet-image-layer { image-rendering: auto; }

/* ---------- Tablón, ayuda y cuenta ---------- */
.lado-tablon { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.anuncio { border-left: 5px solid var(--c); }
.respuesta { background: var(--papel); border-radius: 10px; padding: 10px 12px; font-size: .9rem; }
.respuesta .nota { margin: 4px 0 0; }
.respuesta .btn, .respuesta .insignia { margin-top: 8px; }
.respuesta .btn { display: flex; width: max-content; }
.aviso-urgencia { background: var(--azul-suave); border-radius: 12px; padding: 12px 16px; margin: 0 0 22px; font-size: .92rem; }
.modo-datos { margin: -4px 0 18px; }
.ayuda-enlace { display: grid; gap: 6px; border-left: 6px solid var(--azul); }
.ayuda-enlace .nota { margin: 0; }
.enlace-grande { display: grid; gap: 6px; text-decoration: none; color: var(--tinta); }
.enlace-grande b { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.enlace-grande .kicker { margin: 0; }
.enlace-grande .nota { margin: 0; }
@media (max-width: 960px) { .lado-tablon { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Entrada única, preguntas por perfil y portadas ordenadas ---------- */
:root { --coral-fuerte: #B8432F; --verde-fuerte: #3F7346; --c-rol: var(--tinta); }
body[data-rol="llega"] { --c-rol: var(--coral-fuerte); }
body[data-rol="mentor"] { --c-rol: var(--azul); }
body[data-rol="entidad"] { --c-rol: var(--verde-fuerte); }
.rol-llega { --c: var(--coral-fuerte); --c-suave: var(--coral-suave); }
.rol-mentor { --c: var(--azul); --c-suave: var(--azul-suave); }
.rol-entidad { --c: var(--verde-fuerte); --c-suave: var(--verde-suave); }

#nav button { border: 0; background: none; font: inherit; color: var(--tinta-2); padding: 8px 12px; border-radius: 999px; white-space: nowrap; font-size: .93rem; cursor: pointer; }
#nav button:hover { background: var(--papel-2); color: var(--tinta); }
#nav button[aria-current="page"] { background: var(--c-rol); color: #fff; }

.barra-inferior { display: none; }
.barra-inferior button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 0; border: 0; background: none; font: inherit; font-size: .72rem; color: var(--tinta-2); cursor: pointer; }
.barra-inferior button[aria-current="page"] { color: var(--c-rol); font-weight: 600; }
@media (max-width: 760px) {
  #nav { display: none; }
  .barra-inferior { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--tarjeta); border-top: 1px solid var(--linea);
    padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  #toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

.entrada h1 { margin-top: 4px; }
.pregunta-entrada { font-family: var(--sans); font-size: 1.15rem; font-weight: 600; margin: 26px 0 12px; }
.opciones-rol { display: grid; gap: 12px; }
.opcion-rol { display: grid; gap: 4px; text-align: left; padding: 20px 22px; background: var(--tarjeta); border: 1px solid var(--linea); border-left: 6px solid var(--c); border-radius: 14px; cursor: pointer; font: inherit; color: var(--tinta); box-shadow: var(--sombra); }
.opcion-rol:hover { border-color: var(--c); }
.opcion-rol b { font-size: 1.1rem; }
.opcion-rol span { color: var(--tinta-2); font-size: .95rem; }
.explorar { margin-top: 28px; display: grid; gap: 10px; }
.aviso-qr { background: var(--papel-2); border-radius: 10px; padding: 10px 14px; font-size: .9rem; margin-bottom: 18px; }

.preguntas .tarjeta h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 4px 0 14px; }
.preguntas .tarjeta h2 { font-size: 1.3rem; margin: 22px 0 10px; }
.cab-preguntas { display: grid; gap: 8px; margin-bottom: 16px; }
.cab-preguntas-fila { display: flex; justify-content: space-between; align-items: center; }
.cab-preguntas-fila .enlace { min-height: 44px; text-decoration: none; font-weight: 500; color: var(--c); }
.progreso-pasos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.progreso-pasos i { height: 4px; border-radius: 99px; background: var(--linea); }
.progreso-pasos i.on { background: var(--c); }
.btn.ancho { width: 100%; min-height: 52px; margin-top: 8px; }
.btn.azul { background: var(--azul); color: #fff; }
.btn.verde { background: var(--verde-fuerte); color: #fff; }
.opcion-grande { display: grid; gap: 2px; text-align: left; padding: 12px 14px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; font: inherit; color: var(--tinta); cursor: pointer; min-height: 60px; }
.opcion-grande span { font-size: .85rem; color: var(--tinta-2); }
.opcion-grande.on { border: 2px solid var(--c, var(--tinta)); background: var(--c-suave, var(--papel-2)); }
.resultado.elegido { border: 2px solid var(--verde-fuerte); margin-bottom: 10px; }
.ya-cuenta { margin-top: 18px; border-top: 1px dashed var(--linea); padding-top: 12px; }
.ya-cuenta summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

.razon { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--c-suave); border-radius: 10px; padding: 10px 14px; font-size: .92rem; margin-bottom: 6px; }
.razon .enlace { color: var(--c); font-weight: 600; min-height: 44px; }
h2.nivel { font-family: var(--sans); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c, var(--tinta-2)); margin: 24px 0 12px; font-weight: 700; }
h2.nivel.todo { color: var(--tinta-2); border-top: 1px solid var(--linea); padding-top: 26px; margin-top: 40px; }
.prioridades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.prioridad { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sombra); }
.prioridades > .prioridad:first-child { border: 2px solid var(--c-rol); }
.prioridad h3 { font-size: 1.08rem; margin: 0 0 4px; }
.prioridad p { margin: 0; font-size: .93rem; }
.prioridad .botones { margin-top: auto; padding-top: 10px; }
.prioridad .persona p { margin-top: 6px; }
.prioridad.alerta-prioridad { background: var(--coral-suave); border-color: var(--coral-fuerte); }
.prioridades.secundarias .prioridad { box-shadow: none; }
.prioridad.compacta { box-shadow: none; padding: 14px; }
.a-un-toque { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.toque { display: grid; gap: 2px; text-align: left; padding: 12px 14px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; text-decoration: none; color: var(--tinta); font: inherit; cursor: pointer; min-height: 64px; }
.toque span { font-size: .85rem; color: var(--tinta-2); }
.toque:hover { border-color: var(--c-rol); }
.mas-grupo { display: grid; gap: 4px; margin-bottom: 16px; }
.mas-grupo h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin: 0 0 4px; }
.mas-grupo a, .mas-grupo .enlace { display: flex; align-items: center; min-height: 44px; font-size: 1rem; text-align: left; }

/* 16 categorías */
.cats-portada .cat-tarjeta { padding: 14px 16px; gap: 10px; }
.cats-portada .cat-tarjeta b { font-size: 1.5rem; }
.cats-portada .cat-tarjeta span { font-size: .92rem; }
.pestanas-cat { margin-top: -10px; }
.insignia .punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }

/* ---------- Atlas de actividades y Tablón: las dos ventanas al barrio ---------- */
#nav button[data-id="atlas"] { color: #8E3322; font-weight: 600; }
#nav button[data-id="tablon"] { color: #24527A; font-weight: 600; }
#nav button[data-id="atlas"][aria-current="page"] { background: #B8432F; color: #fff; }
#nav button[data-id="tablon"][aria-current="page"] { background: var(--azul); color: #fff; }
.barra-inferior button[data-id="atlas"][aria-current="page"] { color: #B8432F; }
.barra-inferior button[data-id="tablon"][aria-current="page"] { color: var(--azul); }

.segmentos { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--papel-2); border-radius: 999px; }
.segmentos button { min-height: 44px; padding: 0 18px; white-space: nowrap; border: 0; border-radius: 999px; background: transparent; color: var(--tinta); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.segmentos button.on { background: var(--tinta); color: var(--papel); }
.segmentos.azul { background: #E1E7EC; }
.segmentos.azul button.on { background: var(--azul); color: #fff; }

.atlas { display: flex; flex-direction: column; gap: 22px; }
.at-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.at-cab h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin: 0 0 8px; }
.at-cab .lead { margin: 0; }
.at-cats { margin: 0; }
.at-cuerpo { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.at-mapa { flex: 999 1 520px; min-width: 0; }
.at-mapa .mapa { height: min(620px, 70vh); margin-top: 0; border-radius: 20px; }
.at-agenda { flex: 1 1 320px; min-width: 0; max-height: 720px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; border-radius: 20px; }
.at-agenda h2 { margin: 0; font-size: 1.5rem; }
.at-dia { display: flex; flex-direction: column; gap: 8px; }
.at-dia h3 { margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--tinta); font-family: inherit; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.at-item { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--papel); }
.at-item > .punto { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--c); }
.at-item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.at-item b { font-size: 1.02rem; line-height: 1.35; }
.at-item.puerta { background: #FBEDE7; }
.at-hora { font-size: .82rem; font-weight: 600; color: var(--tinta-2); }
.at-puerta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.insignia.coral-fuerte { background: #B8432F; color: #fff; }
.insignia.rojo { background: #A33030; color: #fff; }
.insignia.gris { background: var(--papel-2); color: var(--tinta-2); }
.at-anyo { background: var(--tinta); color: var(--papel); border-radius: 20px; padding: 24px; }
.at-anyo .cab-seccion h2 { margin: 0; }
.at-anyo .nota { color: #E9D9C2; }
.at-meses { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.at-mes { display: flex; flex-direction: column; gap: 6px; min-height: 110px; padding: 10px; border-radius: 10px; background: #3A3731; font-size: .85rem; line-height: 1.3; }
.at-mes b { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.at-mes.ahora { background: #D4781F; color: var(--tinta); }
.pin-atlas { background: none; border: 0; }
.pin-atlas span { display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(38, 36, 31, .4); }
.pin-atlas b { transform: rotate(45deg); color: #fff; font-size: 15px; }
.at-pop { margin: 6px 0 0; padding-left: 16px; }

.ventanas { display: flex; flex-direction: column; gap: 22px; margin: 26px 0 8px; }
.ventana { border-radius: 20px; overflow: hidden; }
.v-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 18px 22px 14px; }
.v-cab h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 1.9rem); }
.v-cab .kicker { display: block; margin-bottom: 2px; }
.v-atlas { background: var(--tarjeta); border: 2px solid #B8432F; }
.v-atlas .kicker { color: #8E3322; }
.v-atlas .btn.coral, .btn.coral.fuerte { background: #B8432F; }
.v-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 22px 14px; }
.v-dias a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; border-radius: 10px; background: var(--papel); color: var(--tinta); text-decoration: none; font-size: .75rem; }
.v-dias a b { font-family: var(--serif); font-size: 1.25rem; }
.v-dias a span:last-child { color: var(--tinta-2); }
.v-dias a.hoy { background: #B8432F; color: #fff; }
.v-dias a.hoy span:last-child { color: #fff; }
.mini-mapa { position: relative; display: block; width: 100%; aspect-ratio: 1.78; overflow: hidden; background: var(--papel-2); }
.mini-mapa img { position: absolute; max-width: none; }
.mm-pin { position: absolute; width: 34px; height: 34px; margin: -34px 0 0 -17px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(38, 36, 31, .35); }
.mm-pin b { transform: rotate(45deg); color: #fff; font-size: 13px; }
.mm-etq { position: absolute; margin: -32px 0 0 22px; padding: 3px 8px; border-radius: 6px; background: var(--tarjeta); color: var(--tinta); font-size: .8rem; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 3px rgba(38, 36, 31, .25); }
.mm-atrib { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 5px; background: rgba(255, 251, 244, .92); color: var(--tinta-2); font-size: .7rem; }
.v-prox { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.v-prox > div { display: flex; flex-direction: column; gap: 3px; padding: 14px 22px; border-top: 1px solid var(--papel-2); }
.v-prox > div.puerta { background: #FBEDE7; }
.v-prox .at-hora { color: #8E3322; text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; }
.v-tablon { background: var(--azul); color: #fff; padding-bottom: 22px; }
.v-tablon .kicker { color: #D9E5EF; }
.btn.claro { background: var(--tarjeta); color: #24527A; }
.btn.borde-claro { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px var(--tarjeta); }
.btn.azul { background: var(--azul); color: #fff; }
.btn.rojo { background: #A33030; color: #fff; }
.v-anuncios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; padding: 0 22px; }
.v-anuncio { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: var(--tarjeta); color: var(--tinta); }
.v-anuncio h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.v-anuncio.pide { outline: 3px solid #E7A9A0; }
.v-anuncio .btn { margin-top: auto; align-self: flex-start; }
.v-tipo { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #24527A; }
.v-anuncio.pide .v-tipo { color: #8A2626; }
.v-en-atlas, .ag-atlas { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: .9rem; font-weight: 600; color: #8E3322; }
.v-tablon .vacio { color: #fff; border-color: rgba(255, 255, 255, .5); }

.banda-tablon { background: var(--azul); color: #fff; margin: -40px 0 26px; }
.banda-tablon .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; padding-block: 36px 32px; }
.banda-tablon .wrap > div:first-child { max-width: 46em; }
.banda-tablon .kicker { color: #D9E5EF; }
.banda-tablon h1 { margin: 0 0 8px; font-size: clamp(2rem, 4.6vw, 3.2rem); text-wrap: balance; }
.banda-tablon p { margin: 0; color: #E6EEF5; font-size: 1.05rem; }
.banda-tablon .btn { min-height: 52px; padding-inline: 26px; font-size: 1.02rem; }
.tablon { display: flex; flex-direction: column; gap: 18px; }
.tb-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.tablon .pestanas-cat { margin: 0; }
.tb-cuerpo { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.tb-anuncios { flex: 999 1 540px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.tb-anuncios > .vacio { grid-column: 1 / -1; }
.anuncio-g { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); }
.ag-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.ag-tipo { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c); filter: brightness(.8); }
.ag-cat { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--papel); font-size: .8rem; font-weight: 600; }
.anuncio-g h3 { margin: 0; font-size: 1.5rem; line-height: 1.25; text-wrap: balance; }
.anuncio-g p { margin: 0; line-height: 1.55; color: #3D3A33; }
.ag-atlas { min-height: 44px; padding: 0 14px; border-radius: 12px; background: #FBEDE7; text-decoration: none; margin-top: 0; }
.ag-atlas i { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #B8432F; }
.ag-pie { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--papel-2); }
.ag-autor { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ag-autor > i { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--papel-2); font-style: normal; font-weight: 700; }
.ag-autor > span { display: flex; flex-direction: column; }
.ag-autor .nota { margin: 0; }
.tb-ayuda { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px; background: #F7E1DC; border-radius: 20px; }
.tb-ayuda .kicker { color: #8A2626; margin: 0; }
.tb-ayuda h2 { margin: 0; font-size: 1.45rem; }
.tb-ayuda .btn.sec { align-self: flex-start; }
.tb-pide { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--tarjeta); border-radius: 14px; }
.tb-pide p { margin: 0; line-height: 1.5; }
.tb-pide .btn { align-self: flex-start; }
@media (max-width: 640px) {
  .v-cab, .v-prox > div { padding-inline: 16px; }
  .v-dias { padding-inline: 16px; gap: 4px; }
  .v-anuncios { padding-inline: 16px; }
  .at-mapa .mapa { height: 340px; }
  .at-cab .segmentos { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .at-cab .segmentos button { padding: 0 8px; font-size: .9rem; }
  .at-cats { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; }
  .at-cats .pestana { flex: none; }
  .mm-etq { display: none; }
}
.prioridades.secundarias > .prioridad:first-child { border: 1px solid var(--linea); }