/* Alcobi · diseño «D»: estructura limpia + color por sección + cifras grandes.
   Fuentes propias (OFL), servidas desde aquí: Bricolage Grotesque (titulares) y Plus Jakarta Sans (texto). */
@font-face { font-family: "Bricolage"; src: url(/bricolage.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url(/jakarta.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --fondo: #F5F5F2; --superficie: #ffffff; --texto: #141414; --suave: #555552; --borde: #E4E2DC;
  --negro: #141414; --sobre-negro: #ffffff; --sobre-negro-suave: #C9C9C9;
  --acento: #FFD23F; --tinta: #141414;
  --c-ayudas: #FF8A6B; --c-empleo: #A9B8FF; --c-vivienda: #7FE0C2; --c-ayuntamiento: #CFC6FF;
  --c-ocio: #FF9EC7; --c-deporte: #C6F432; --c-cole: #FFD45E;
  --c-transporte: #8FD3FF; --c-trafico: #FFB86B; --c-obras: #E3CFA8;
  --urgente: #B3261E; --aviso: #7A4F00; --aviso-suave: #FFF1C7; --ok: #0B7A5C;
  --titular: "Bricolage", "Jakarta", system-ui, sans-serif;
  color-scheme: light;
}
/* Oscuro: el del móvil por defecto, o el que elija el visitante con el botón (data-theme en <html>, tema.js) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #121212; --superficie: #1E1E1E; --texto: #F0F0EC; --suave: #B5B5B0; --borde: #333331;
    --negro: #2A2A28; --sobre-negro: #ffffff; --sobre-negro-suave: #C9C9C9;
    --logo-cuerpo: #FFD23F; --logo-sonrisa: #141414;
    --urgente: #FF8A80; --aviso: #F5C86A; --aviso-suave: #3A2F15; --ok: #5CC39B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #121212; --superficie: #1E1E1E; --texto: #F0F0EC; --suave: #B5B5B0; --borde: #333331;
  --negro: #2A2A28; --sobre-negro: #ffffff; --sobre-negro-suave: #C9C9C9;
  --logo-cuerpo: #FFD23F; --logo-sonrisa: #141414;
  --urgente: #FF8A80; --aviso: #F5C86A; --aviso-suave: #3A2F15; --ok: #5CC39B;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.5 "Jakarta", system-ui, sans-serif; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--titular); letter-spacing: -0.02em; }
button { font: inherit; color: inherit; }
.envoltorio { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* Cabecera y pie */
.cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.marca { font-family: var(--titular); font-weight: 800; font-size: 34px; text-decoration: none; color: var(--texto); white-space: nowrap; }
.marca { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0; }
.marca .marca-nombre span { background: var(--acento); color: #141414; padding: 0 7px; margin-left: 2px; border-radius: 9px; }
.cab nav { display: flex; gap: 12px; }
.cab nav a { font-size: 14px; font-weight: 600; text-decoration: none; padding: 10px 0; }
.cab nav a:hover, .cab nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
.boton-tema { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--superficie); color: var(--texto);
  display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: auto; }
.boton-tema .sol { display: none; }
:root[data-theme="dark"] .boton-tema .sol { display: block; }
:root[data-theme="dark"] .boton-tema .luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .boton-tema .sol { display: block; }
  :root:not([data-theme="light"]) .boton-tema .luna { display: none; }
}
@media (max-width: 759px) { .nav-arriba { display: none !important; } body { padding-bottom: 96px; } .cab { flex-wrap: nowrap; } .marca { min-width: 0; } }
.boton-menu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--superficie);
  color: var(--texto); align-items: center; justify-content: center; cursor: pointer; flex: none; }
.boton-menu[aria-expanded="true"] { background: var(--negro); color: var(--sobre-negro); }
@media (min-width: 1024px) { .cab { flex-wrap: nowrap; } .cab nav { margin-left: auto; white-space: nowrap; } .boton-tema { margin-left: 0; order: 3; flex: none; } }
/* tablet: el menú no cabe en una línea → botón ☰ con desplegable */
/* tablet (o si el menú no cabe: .compacta, la pone tema.js): botón ☰ con desplegable */
@media (min-width: 760px) and (max-width: 1023px) {
  .cab { position: relative; flex-wrap: nowrap; }
  .boton-tema { margin-left: auto; }
  .boton-menu { display: flex; order: 3; }
  .cab .nav-arriba { display: none; }
}
@media (min-width: 760px) {
  .cab.compacta { position: relative; flex-wrap: nowrap; }
  .cab.compacta .boton-tema { margin-left: auto; }
  .cab.compacta .boton-menu { display: flex; order: 3; }
  .cab.compacta .nav-arriba { display: none; }
  .cab.menu-abierto .nav-arriba { display: flex; flex-direction: column; gap: 0; position: absolute; right: 0; top: calc(100% + 4px);
    z-index: 20; min-width: 230px; margin: 0; background: var(--superficie); border-radius: 20px; padding: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2); }
  .cab.menu-abierto .nav-arriba a { font-size: 16px; padding: 11px 14px; border-radius: 12px; }
  .cab.menu-abierto .nav-arriba a:hover { background: var(--fondo); text-decoration: none; }
}
.pie-pag { color: var(--suave); font-size: 13px; padding: 28px 16px 40px; text-align: center; }
.pie-pag p { max-width: 640px; margin: 0 auto; }

/* Colores por sección: el texto encima siempre es oscuro */
.t-ayudas { --c: var(--c-ayudas); } .t-empleo { --c: var(--c-empleo); }
.t-vivienda { --c: var(--c-vivienda); } .t-ayuntamiento { --c: var(--c-ayuntamiento); }
.t-ocio { --c: var(--c-ocio); } .t-deporte { --c: var(--c-deporte); } .t-cole { --c: var(--c-cole); }
.t-transporte { --c: var(--c-transporte); } .t-trafico { --c: var(--c-trafico); } .t-obras { --c: var(--c-obras); }

/* Portada */
.hero { background: var(--acento); color: var(--tinta); border-radius: 28px; padding: 22px 20px; margin-top: 4px; }
.hero h1 { margin: 0; font-size: clamp(36px, 9vw, 56px); line-height: .98; font-weight: 800; letter-spacing: -0.035em; max-width: 14ch; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.hero-chips span { background: rgba(255,255,255,.7); border-radius: 14px; padding: 7px 12px; font-size: 14px; font-weight: 600; }
.hero-chips .oscuro { background: var(--tinta); color: #fff; }
.hero-chips .oscuro b { font-family: var(--titular); font-size: 18px; color: var(--acento); }
.hero-txt { margin: 14px 0 0; font-size: 15px; max-width: 52ch; }

.soy { margin: 22px 0 0; }
.soy > span { display: block; font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.soy div { display: flex; flex-wrap: wrap; gap: 8px; }
.soy button { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--superficie);
  font-size: 14px; font-weight: 600; cursor: pointer; }
.soy button[aria-pressed="true"] { background: var(--c-ayudas); color: var(--tinta); font-weight: 700; }

.bloque { margin: 30px 0 0; }
.bloque > h2, .explora h2 { font-size: 26px; font-weight: 800; margin: 0 0 12px; }
.bloque .ayuda { color: var(--suave); font-size: 14px; margin: -6px 0 12px; }
.vacio, .vacio-filtro { color: var(--suave); font-size: 15px; }
.vacio-filtro button, .filtro-activo button { border: 0; background: var(--superficie); border-radius: 14px;
  min-height: 36px; padding: 0 12px; font-weight: 700; cursor: pointer; }
.filtro-activo { margin: -4px 0 12px; display: flex; align-items: center; gap: 8px; }
.filtro-activo span { background: var(--negro); color: var(--sobre-negro); border-radius: 14px; padding: 7px 12px; font-size: 14px; font-weight: 700; }

.ficha a { text-decoration: none; color: inherit; }
/* «¡Que se acaba!»: carrusel horizontal en el móvil */
.carrusel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; }
.ficha.urge { flex: 0 0 248px; scroll-snap-align: start; }
.ficha.urge a { display: flex; flex-direction: column; gap: 10px; height: 100%; background: var(--superficie);
  border-radius: 22px; padding: 16px; }
.cab-urge { display: flex; align-items: center; gap: 10px; }
.dias { width: 56px; height: 56px; border-radius: 50%; background: var(--negro); color: var(--sobre-negro); flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.dias b { font-family: var(--titular); font-size: 24px; font-weight: 800; color: var(--acento); }
.dias small { font-size: 10px; font-weight: 600; margin-top: 2px; }
.cierra-pronto .dias b { color: var(--acento); }
.etq { font-size: 12px; font-weight: 700; background: var(--c); color: var(--tinta); border-radius: 10px; padding: 4px 8px; text-transform: uppercase; letter-spacing: .03em; }
.urge .nombre { font-size: 17px; font-weight: 700; line-height: 1.25; }
.urge .cuando { font-size: 13px; color: var(--suave); margin-top: auto; }
@media (min-width: 760px) {
  .carrusel { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; margin: 0; padding: 0; }
}

/* Tarjetas de color */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.ficha.t-ayudas a, .ficha.t-empleo a, .ficha.t-vivienda a, .ficha.t-ayuntamiento a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 196px; height: 100%;
  background: var(--c); color: var(--tinta); border-radius: 24px; padding: 16px; }
.ficha a:hover .frase, .ficha a:hover .nombre { text-decoration: underline; }
.ficha .cuando { font-size: 13px; font-weight: 700; }
.ficha .centro { display: flex; flex-direction: column; gap: 6px; }
.ficha .cifra { font-family: var(--titular); font-size: clamp(30px, 8.4vw, 42px); font-weight: 800; letter-spacing: -0.04em; line-height: .95; }
.ficha .frase { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ficha .sub { font-size: 14px; font-weight: 600; line-height: 1.3; opacity: .82; }
.ficha.t-ayudas .nombre, .ficha.t-empleo .nombre, .ficha.t-vivienda .nombre, .ficha.t-ayuntamiento .nombre {
  font-family: var(--titular); font-size: 20px; font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; }

/* Listas compactas (por confirmar, cerrado) */
.lista-compacta { list-style: none; padding: 0; margin: 0; background: var(--superficie); border-radius: 22px; overflow: hidden; }
.ficha.fila a, .fila-c a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.ficha.fila:last-child a, .fila-c:last-child a { border-bottom: 0; }
.punto { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.fila .nombre { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.3; }
.fila .cuando { font-size: 12px; color: var(--suave); text-align: right; max-width: 34%; }
.b-cerrado details summary, .internos summary { cursor: pointer; list-style: none; }
.b-cerrado summary::-webkit-details-marker, .internos summary::-webkit-details-marker { display: none; }
.b-cerrado summary h2, .internos summary h2 { display: inline-flex; gap: 8px; align-items: center; font-size: 20px; color: var(--suave); margin: 0 0 12px; }
.b-cerrado summary h2::before, .internos summary h2::before { content: "▸"; }
.b-cerrado details[open] summary h2::before, .internos details[open] summary h2::before { content: "▾"; }
.n { font-family: "Jakarta", sans-serif; font-size: 13px; font-weight: 700; background: var(--borde); color: var(--texto); border-radius: 999px; padding: 1px 9px; }

/* Explora */
.explora { margin: 22px 0 0; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .rejilla { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 22px; background: var(--c); color: var(--tinta); border-radius: 22px; padding: 16px; text-decoration: none; }
.tile b { display: block; font-family: var(--titular); font-size: 20px; font-weight: 800; }
.tile small { font-size: 13px; font-weight: 600; }
.tile:hover b { text-decoration: underline; }
/* En /ayudas/: los temas son un filtro, arriba y compactos; el elegido se marca y los demás se apagan */
.explora h2 { font-size: 22px; }
.tiles.compactas { gap: 8px; }
@media (min-width: 760px) { .tiles.compactas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiles.compactas .tile { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; border: 3px solid transparent; }
.tiles.compactas .tile svg { flex: none; }
.tiles.compactas .tile b { font-size: 17px; }
.tiles.compactas .tile small { display: block; font-size: 12px; line-height: 1.25; }
.tiles.compactas .tile[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--fondo) inset; }
.tiles.compactas.con-filtro .tile[aria-pressed="false"] { opacity: .45; }

/* Valgrande y Telegram */
.valgrande-card { display: flex; flex-direction: column; background: var(--negro); color: var(--sobre-negro); border-radius: 26px;
  padding: 22px; margin: 30px 0 0; text-decoration: none; }
.vg-titulo { font-family: var(--titular); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--acento); }
.vg-sub { font-size: 15px; color: var(--sobre-negro-suave); }
.vg-cifras { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 16px; }
.vg-cifras b { display: block; font-family: var(--titular); font-size: 26px; font-weight: 800; }
.vg-cifras small { font-size: 12px; color: var(--sobre-negro-suave); }
.vg-mas { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--acento); }
.cta-telegram { display: flex; align-items: center; gap: 14px; background: var(--superficie); border-radius: 22px; padding: 16px; margin: 14px 0 0; text-decoration: none; }
.cta-telegram .ico { width: 48px; height: 48px; border-radius: 50%; background: var(--acento); color: var(--tinta); flex: none; display: flex; align-items: center; justify-content: center; }
.cta-telegram b { display: block; font-size: 16px; }
.cta-telegram small { font-size: 13px; color: var(--suave); }
.aviso-pleno { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; background: var(--c); color: var(--tinta);
  border-radius: 22px; padding: 14px 18px; margin: 14px 0 0; text-decoration: none; font-size: 15px; }
.aviso-pleno .etq { display: block; width: 100%; padding: 0; background: none; font-size: 12px; }
.internos { margin: 30px 0 0; }
.internos details { background: var(--superficie); border-radius: 22px; padding: 14px 18px 4px; }
.internos summary h2 { font-size: 17px; margin: 0 0 10px; }

/* Ficha */
.cabecera-ficha { background: var(--c); color: var(--tinta); border-radius: 30px; padding: 14px 18px 24px; margin-top: 4px; }
.fila-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.volver { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--tinta); display: flex; align-items: center; justify-content: center; flex: none; }
.org { font-size: 12px; font-weight: 700; background: rgba(255,255,255,.75); border-radius: 12px; padding: 6px 10px; }
.cabecera-ficha .tipo { margin: 20px 0 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.cifra-xl { display: block; font-family: var(--titular); font-size: clamp(56px, 17vw, 88px); font-weight: 800; letter-spacing: -0.045em; line-height: .9; margin: 8px 0 0; }
.cabecera-ficha h1 { font-size: 22px; font-weight: 800; line-height: 1.15; margin: 8px 0 0; }
.cabecera-ficha h1 .cifra-xl { display: block; margin: 0 0 8px; }
.cabecera-ficha h1 .sub { display: block; font-size: 24px; letter-spacing: -0.02em; }
.cabecera-ficha h1.h1-xl { font-size: clamp(28px, 7.5vw, 40px); line-height: 1.04; margin-top: 8px; }
.cabecera-ficha .lead { font-size: 16px; line-height: 1.5; margin: 14px 0 0; max-width: 62ch; }
.pendiente { font-style: italic; color: var(--suave); }
.cuenta { display: flex; align-items: center; gap: 16px; background: var(--negro); color: var(--sobre-negro); border-radius: 24px; padding: 18px; margin: 14px 0 0; }
.cuenta .dias { width: 72px; height: 72px; background: var(--acento); color: var(--tinta); }
.cuenta .dias b { font-size: 30px; color: var(--tinta); }
.cuenta .dias small { font-size: 11px; font-weight: 700; }
.cuenta > span:last-child small { display: block; font-size: 13px; color: var(--sobre-negro-suave); }
.cuenta > span:last-child b { font-family: var(--titular); font-size: 22px; font-weight: 800; }
.cuenta.confirmar .dias { background: var(--aviso-suave); }
.acciones { display: flex; gap: 10px; margin: 12px 0 0; }
.acciones .boton { flex: 1; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px;
  border-radius: 16px; font-size: 15px; font-weight: 700; text-decoration: none; }
.boton.amarillo { background: var(--acento); color: var(--tinta); }
.boton.blanco { background: var(--superficie); color: var(--texto); }
.boton.negro { background: var(--negro); color: var(--sobre-negro); }
.boton.xl { min-height: 58px; font-size: 17px; width: 100%; border-radius: 18px; }
.boton.sec { background: var(--superficie); color: var(--texto); }
.boton:hover { filter: brightness(.95); }
.ir { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; }
.caja { background: var(--superficie); border-radius: 24px; padding: 20px; margin: 12px 0 0; }
.caja h2 { font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.caja p { margin: 0; }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.4; }
.ok { width: 26px; height: 26px; border-radius: 50%; background: var(--c-vivienda); color: var(--tinta); flex: none; display: flex; align-items: center; justify-content: center; }
.caja .nota { margin-top: 12px; }
.mas summary { cursor: pointer; list-style: none; }
.mas summary::-webkit-details-marker { display: none; }
.mas summary h2 { margin: 0; font-size: 20px; display: flex; justify-content: space-between; }
.mas summary h2::after { content: "+"; }
.mas[open] summary h2::after { content: "−"; }
.mas h3 { font-size: 16px; margin: 16px 0 4px; }
.verif { display: flex; align-items: flex-start; justify-content: center; gap: 8px; color: var(--suave); font-size: 13px; margin: 18px 0 0; text-align: center; }
.verif svg { color: var(--ok); flex: none; margin-top: 2px; }

/* Páginas de texto (pleno, Valgrande, fuentes) */
.migas { font-size: 14px; color: var(--suave); margin: 8px 0 0; }
.detalle { background: var(--superficie); border-radius: 26px; padding: 22px 20px; margin: 12px 0 0; }
.detalle h1 { font-size: clamp(28px, 7vw, 42px); line-height: 1.05; font-weight: 800; margin: 8px 0 12px; }
.detalle h2 { font-size: 22px; font-weight: 800; margin: 26px 0 8px; }
.detalle .lead { font-size: 17px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tipo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.chip { font-size: 12px; font-weight: 600; background: var(--fondo); border-radius: 999px; padding: 2px 9px; color: var(--suave); }
.estado { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--fondo); }
.e-abierto { background: var(--c-vivienda); color: var(--tinta); }
.aviso { background: var(--aviso-suave); color: var(--texto); border-radius: 16px; padding: 12px 14px; margin: 12px 0 0; font-size: 15px; }
.plazo.revisar { color: var(--aviso); font-weight: 600; }
dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 16px 0 0; }
dt { color: var(--suave); font-size: 14px; }
dd { margin: 0; overflow-wrap: anywhere; }
dd small { color: var(--suave); }
@media (max-width: 560px) { dl { grid-template-columns: 1fr; gap: 2px; } dd { margin-bottom: 10px; } }
.fuentes { padding-left: 20px; }
.fuentes li { margin: 0 0 6px; }
.nota { color: var(--suave); font-size: 14px; }
.puntos { padding-left: 22px; }
.puntos li { margin: 0 0 16px; }
.puntos .oficial { color: var(--suave); font-size: 14px; margin: 4px 0; }
.puntos .exp { margin: 4px 0 0; }
.indice { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.indice a { font-size: 14px; font-weight: 600; background: var(--fondo); border-radius: 999px; padding: 8px 12px; text-decoration: none; }
.cita { font-size: 11px; vertical-align: super; text-decoration: none; margin-left: 1px; color: var(--suave); }
.filtros-cat { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.filtros-cat button { min-height: 40px; font-size: 14px; font-weight: 600; padding: 0 14px; border-radius: 20px; cursor: pointer; border: 0; background: var(--superficie); }
.filtros-cat button[aria-pressed="true"] { background: var(--negro); color: var(--sobre-negro); }

/* Valgrande */
.vg-hero { background: var(--negro); color: var(--sobre-negro); border-radius: 30px; padding: 14px 20px 24px; margin-top: 4px; }
.vg-guia { margin: 18px 0 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sobre-negro-suave); }
.vg-hero h1 { margin: 4px 0 0; font-size: clamp(52px, 15vw, 84px); line-height: .95; font-weight: 800; letter-spacing: -0.045em; color: var(--acento); }
.vg-hero .vg-sub { margin: 10px 0 0; font-size: 17px; max-width: 40ch; color: var(--sobre-negro); }
.vg-hero .vg-cifras b { font-size: 30px; }
.vg-indice { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 12px 16px; position: sticky; top: 0; z-index: 2; background: var(--fondo); }
.vg-indice a { flex: none; font-size: 14px; font-weight: 600; background: var(--superficie); border-radius: 18px; padding: 9px 14px; text-decoration: none; }
.aviso-plazos { display: flex; align-items: center; gap: 8px; background: var(--acento); color: var(--tinta); border-radius: 18px; padding: 14px 18px; margin: 4px 0 0; text-decoration: none; }
.vg-sec { margin: 30px 0 0; scroll-margin-top: 70px; }
.vg-sec > h2 { font-size: 26px; font-weight: 800; margin: 0 0 12px; display: flex; gap: 8px; align-items: center; }
.vg-intro { color: var(--suave); font-size: 15px; margin: -4px 0 12px; }
.caja h3 { font-size: 18px; margin: 16px 0 4px; }
.caja h3:first-child { margin-top: 0; }
.caja p + p { margin-top: 10px; }
.aviso-caja { background: var(--aviso-suave); }
.progreso { background: var(--superficie); border-radius: 22px; padding: 16px 18px; }
.barra { display: flex; gap: 5px; }
.barra span { flex: 1; height: 10px; border-radius: 5px; background: var(--borde); }
.barra .seg-hecho { background: var(--c-vivienda); }
.barra .seg-en-curso { background: var(--acento); }
.progreso p { margin: 10px 0 0; font-size: 15px; }
.pasos { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.paso { display: flex; gap: 14px; background: var(--superficie); border-radius: 20px; padding: 14px 16px; }
.paso.p-en-curso { background: var(--acento); color: var(--tinta); }
.paso.p-pendiente { background: transparent; border: 2px dashed var(--borde); }
.bola { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--borde); }
.p-hecho .bola { background: var(--c-vivienda); color: var(--tinta); }
.p-en-curso .bola { background: var(--tinta); box-shadow: inset 0 0 0 8px var(--tinta), inset 0 0 0 14px var(--acento); }
.paso p { margin: 0; font-size: 15px; line-height: 1.45; }
.paso .paso-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.paso-cab b { font-family: var(--titular); font-size: 18px; }
.paso .est { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.p-en-curso .cita { color: var(--tinta); }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dato { background: var(--superficie); border-radius: 20px; padding: 14px 16px; }
.dato.ancho { grid-column: 1 / -1; }
.dato small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.dato b { display: block; font-family: var(--titular); font-size: clamp(26px, 7vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 4px 0 6px; }
.dato p { margin: 0; font-size: 14px; color: var(--suave); line-height: 1.4; }
.dato .dato-txt { color: var(--texto); font-size: 15px; margin-top: 4px; }
.promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.promo { display: flex; flex-direction: column; gap: 8px; background: var(--c-vivienda); color: var(--tinta); border-radius: 24px; padding: 18px; margin: 0; }
.promo h3 { font-family: var(--titular); font-size: 22px; font-weight: 800; margin: 0; line-height: 1.1; }
.promo .cita { color: var(--tinta); }
.promo-modelo { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.promo-dato { margin: 0; font-size: 15px; line-height: 1.4; }
.promo-dato b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.sello { align-self: flex-start; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.6); border-radius: 12px; padding: 5px 10px; }
.sello.cambio { background: var(--acento); }
.promo details { font-size: 14px; }
.promo summary { cursor: pointer; font-weight: 700; }
.promo dl { grid-template-columns: 1fr; gap: 2px; margin: 8px 0 0; }
.promo dt { color: var(--tinta); opacity: .75; font-size: 12px; text-transform: uppercase; }
.promo dd { margin-bottom: 8px; }
.promo .boton { margin-top: auto; align-self: flex-start; min-height: 46px; }
.caja details summary { cursor: pointer; font-weight: 700; margin-top: 14px; }
.crono { list-style: none; padding: 0; margin: 0; }
.crono .anyo { display: flex; gap: 14px; }
.crono .anyo > b { font-family: var(--titular); font-size: 22px; font-weight: 800; flex: 0 0 56px; }
.crono ul { list-style: none; padding: 0 0 18px 16px; margin: 0; border-left: 3px solid var(--acento); flex: 1; }
.crono ul li { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.crono time { display: block; font-size: 13px; font-weight: 700; color: var(--suave); }
.noticias { list-style: none; padding: 0; margin: 0; background: var(--superficie); border-radius: 22px; overflow: hidden; }
.noticias li { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.noticias li a { font-weight: 600; text-decoration: none; }
.noticias li a:hover { text-decoration: underline; }
.ver-mas { display: block; width: 100%; min-height: 48px; margin: 10px 0 0; border: 0; border-radius: 16px; background: var(--superficie); font-weight: 700; cursor: pointer; }
.seguir { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 14px; }
.seguir .cta-telegram { margin: 0; }
.seguir .ico { font-size: 12px; font-weight: 800; }
.mas summary h2 { font-size: 22px; }
.noticias .medio { display: block; font-size: 13px; color: var(--suave); margin-top: 2px; }
.tr-estado { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; margin-left: 6px; border-radius: 999px; background: var(--borde); color: var(--suave); vertical-align: 1px; }
.tr-apartado p { margin: 0 0 8px; overflow-wrap: anywhere; }
.tr-apartado p:last-child { margin-bottom: 0; }

/* Pleno */
.hero-lila { background: var(--c-ayuntamiento); }
.fecha-grande { display: inline-flex; align-items: center; gap: 12px; }
.fecha-grande b { font-family: var(--titular); font-size: clamp(64px, 18vw, 92px); font-weight: 800; letter-spacing: -0.05em; line-height: .9; }
.fecha-grande span { font-family: var(--titular); font-size: 22px; font-weight: 800; line-height: 1.05; }
.pleno-h1 { margin: 8px 0 0; }
.pleno-datos { display: block; margin: 10px 0 0; font-size: 16px; font-weight: 600; }
.temas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.temas span { background: var(--superficie); border-radius: 14px; padding: 7px 12px; font-size: 14px; font-weight: 600; }
.temas b { font-family: var(--titular); margin-left: 4px; }
.puntos-pleno { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.punto-pleno { display: flex; gap: 14px; background: var(--superficie); border-radius: 20px; padding: 16px; }
.num { width: 34px; height: 34px; border-radius: 11px; background: var(--c-ayuntamiento); color: var(--tinta); flex: none;
  display: flex; align-items: center; justify-content: center; font-family: var(--titular); font-weight: 800; }
.punto-pleno .exp { margin: 6px 0 0; font-size: 16px; line-height: 1.45; }
.punto-pleno .oficial { margin: 8px 0 0; font-size: 13px; color: var(--suave); line-height: 1.4; }
.punto-pleno .oficial span { font-weight: 700; }
.proximo-pleno { display: flex; flex-direction: column; gap: 8px; background: var(--negro); color: var(--sobre-negro); border-radius: 26px;
  padding: 20px; margin: 14px 0 0; text-decoration: none; }
.proximo-pleno .fecha-grande b { color: var(--acento); }
.etq-negra { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sobre-negro-suave); }

/* Fuentes y método */
.fuentes-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.fuente-tile { background: var(--c); color: var(--tinta); border-radius: 22px; padding: 18px; }
.fuente-ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.65); display: flex; align-items: center; justify-content: center; }
.fuente-tile h3 { font-size: 20px; font-weight: 800; margin: 12px 0 6px; }
.fuente-tile p { margin: 0; font-size: 15px; line-height: 1.45; }
.reglas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.reglas li { display: flex; gap: 14px; background: var(--superficie); border-radius: 20px; padding: 16px; font-size: 15px; line-height: 1.5; }
.reglas .num { background: var(--acento); }
.reglas b { display: block; font-family: var(--titular); font-size: 18px; margin-bottom: 2px; }
.reglas-datos .dato b { font-size: clamp(22px, 6vw, 28px); }

/* Agenda */
.hero-rosa { background: var(--c-ocio); }
.filtros-agenda { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.filtros-agenda div { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros-agenda button { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--superficie);
  font-size: 14px; font-weight: 600; cursor: pointer; }
.filtros-agenda button[aria-pressed="true"] { background: var(--negro); color: var(--sobre-negro); }
.dia { margin: 26px 0 0; }
.dia h2 { font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.eventos { display: flex; flex-direction: column; gap: 8px; }
.evento details { background: var(--superficie); border-radius: 20px; }
.evento summary { display: flex; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.evento summary::-webkit-details-marker { display: none; }
.ev-hora { flex: 0 0 64px; font-family: var(--titular); font-size: 16px; font-weight: 800; line-height: 1.2; padding-top: 2px; }
.ev-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-cat { align-self: flex-start; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: var(--c); color: var(--tinta); border-radius: 8px; padding: 2px 7px; }
.ev-cuerpo b { font-size: 16px; line-height: 1.3; }
.ev-donde { font-size: 14px; color: var(--suave); }
.ev-precio.gratis { color: var(--ok); font-weight: 700; }
.evento summary:hover b { text-decoration: underline; }
.ev-mas { padding: 0 16px 14px 94px; font-size: 15px; line-height: 1.5; }
.ev-mas p { margin: 0 0 6px; }
.ev-fuente { font-size: 13px; color: var(--suave); }
@media (max-width: 420px) { .ev-mas { padding-left: 16px; } .ev-hora { flex-basis: 54px; font-size: 15px; } }
.plan { flex: 0 0 220px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; background: var(--c);
  color: var(--tinta); border-radius: 22px; padding: 16px; text-decoration: none; min-height: 150px; }
.plan .cuando { font-size: 13px; font-weight: 800; }
.plan b { font-family: var(--titular); font-size: 19px; font-weight: 800; line-height: 1.12; }
.plan .ev-donde { color: var(--tinta); opacity: .8; font-size: 13px; margin-top: auto; }
.plan:hover b { text-decoration: underline; }
.ver-agenda { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: 15px; text-decoration: none; }

/* Ciudad */
.hero-cielo { background: var(--c-transporte); }
.avisos { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; }
.aviso-ciudad { background: var(--superficie); border-radius: 22px; padding: 16px 18px; }
.av-cab { display: flex; align-items: center; gap: 8px; margin: 0; }
.av-sub { font-size: 13px; color: var(--suave); font-weight: 600; }
.aviso-ciudad h3 { font-size: 20px; font-weight: 800; margin: 8px 0 6px; line-height: 1.2; }
.aviso-ciudad p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.av-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--suave); margin: 4px 0 0 !important; }
.av-pie .sello { background: var(--acento); color: var(--tinta); }
.filtros-ciudad { margin-top: 16px; }

/* Barra inferior (móvil) */
.barra-nav { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 10;
  background: #141414; border-radius: 26px; padding: 7px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.barra-nav a, .barra-nav button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border: 0;
  border-radius: 18px; background: none; color: #fff; font: 600 11px "Jakarta", sans-serif; text-decoration: none; cursor: pointer; }
.barra-nav [aria-current], .barra-nav [aria-expanded="true"] { background: var(--acento); color: #141414; font-weight: 700; }
.mas-panel { position: fixed; right: 10px; bottom: 86px; z-index: 11; background: var(--superficie); border-radius: 20px;
  padding: 8px; display: flex; flex-direction: column; min-width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.mas-panel a { padding: 12px 14px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.mas-panel a:hover { background: var(--fondo); }
@media (min-width: 760px) { .barra-nav, .mas-panel { display: none !important; } }

/* Inicio: resumen del día y secciones */
.hero-fecha { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.hoy { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 0; }
.hoy-col { display: contents; }
@media (min-width: 760px) { .hoy { flex-direction: row; align-items: flex-start; }
  .hoy-col { display: flex; flex-direction: column; gap: 12px; flex: 1 1 0; min-width: 0; } }
.hoy-card { display: flex; flex-direction: column; gap: 8px; background: var(--c); color: var(--tinta); border-radius: 24px;
  padding: 18px; text-decoration: none; }
.hoy-card.blanca { background: var(--superficie); color: var(--texto); }
.hoy-card.negra { background: var(--negro); color: var(--sobre-negro); }
.hoy-cab { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.hoy-cab a { font-size: 13px; font-weight: 700; color: inherit; }
.hoy-etq { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.hoy-etq.rojo { color: var(--urgente); }
.hoy-card.negra .hoy-etq { color: var(--sobre-negro-suave); }
.hoy-lista { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 12px; }
.hoy-lista li { display: flex; gap: 12px; align-items: flex-start; }
.hoy-lista li > a { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; flex: 1; flex-direction: row; }
.hoy-lista b { display: block; font-size: 16px; line-height: 1.3; }
.hoy-lista small { display: block; font-size: 13px; opacity: .85; }
.hoy-hora { flex: 0 0 52px; font-family: var(--titular); font-size: 17px; font-weight: 800; }
.hoy-lista.urg span:last-child { font-size: 15px; font-weight: 600; line-height: 1.3; }
.hoy-lista.urg .dias { width: 48px; height: 48px; }
.hoy-lista.urg .dias b { font-size: 19px; }
.hoy-lista:not(.urg) li > a { flex-direction: column; align-items: flex-start; gap: 2px; }
.hoy-grande { font-family: var(--titular); font-size: 24px; font-weight: 800; }
.hoy-cifra { font-family: var(--titular); font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: .95; }
.hoy-titular { font-family: var(--titular); font-size: 20px; font-weight: 800; line-height: 1.15; }
.secciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .secciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seccion { display: flex; flex-direction: column; gap: 8px; min-height: 150px; background: var(--c); color: var(--tinta);
  border-radius: 22px; padding: 14px; text-decoration: none; }
.sec-nombre { font-family: var(--titular); font-size: 19px; font-weight: 800; line-height: 1.05; }
.sec-num { margin-top: auto; font-size: 13px; font-weight: 600; }
.sec-num b { font-family: var(--titular); font-size: 30px; font-weight: 800; }
.seccion small { font-size: 12px; font-weight: 600; line-height: 1.3; }
.seccion:hover .sec-nombre { text-decoration: underline; }
.sec-txt { font-size: 13px; line-height: 1.25; }
.sec-txt b { display: block; font-family: var(--titular); font-size: 20px; font-weight: 800; line-height: 1.1; }
.secciones-familias { margin-top: 16px; }

/* Calendario */
.hero-calendario { background: var(--c-trafico); }
.cal-anyo h3, .cal-sub { font-size: 22px; font-weight: 800; margin: 18px 0 10px; }
.cal-lista { list-style: none; padding: 0; margin: 0; background: var(--superficie); border-radius: 22px; overflow: hidden; }
.cal-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.cal-fila:last-child { border-bottom: 0; }
.cal-fila.pasado { opacity: .5; }
.cal-dia { width: 52px; height: 52px; border-radius: 14px; background: var(--acento); color: var(--tinta); flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.cal-dia b { font-family: var(--titular); font-size: 22px; font-weight: 800; }
.cal-dia small { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.cal-dia.pasado { background: var(--borde); }
.cal-txt { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.cal-txt b { font-size: 16px; line-height: 1.3; }
.cal-txt small { font-size: 13px; color: var(--suave); }
.cal-etq { font-size: 12px; font-weight: 800; border-radius: 10px; padding: 4px 8px; color: var(--tinta); }
.cal-etq.local { background: var(--c-ayuntamiento); }
.cal-etq.puente { background: var(--c-vivienda); }
.cal-notas { margin: 12px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.cal-notas li { margin-bottom: 6px; }
.impuestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.impuesto { background: var(--superficie); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.impuesto.abierto { background: var(--c-trafico); color: var(--tinta); }
.impuesto.cerrado { opacity: .65; }
.impuesto h3 { font-size: 19px; font-weight: 800; margin: 0; line-height: 1.2; }
.imp-fechas { margin: 0; font-family: var(--titular); font-size: 17px; font-weight: 800; }
.impuesto .sello { align-self: flex-start; background: var(--fondo); color: var(--texto); }
.impuesto .sello.abierto { background: var(--negro); color: var(--acento); }
.imp-lista { margin: 0; padding-left: 18px; font-size: 14px; }
.imp-dom { margin: 0; font-size: 13px; line-height: 1.45; }
.impuesto.abierto .nota { color: var(--tinta); }
.cal-pasados { margin: 10px 0 0; }
.cal-pasados summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--suave); padding: 6px 0; }

/* Botones de filtro (Ciudad, Agenda, Trámites «Soy…») e índice del Calendario: pastel variado; el pulsado, negro. En Ciudad, el
   color de cada tema (el de sus tarjetas). Texto siempre oscuro: el pastel es igual en modo oscuro. */
:is(.filtros-cat:not(.vg-filtros), .filtros-agenda div, .soy div) button:not([aria-pressed="true"]) { color: var(--tinta); }
:is(.filtros-cat:not(.vg-filtros), .filtros-agenda div, .soy div) button:not([aria-pressed="true"]):nth-child(6n+1) { background: #D4F5E6; }
:is(.filtros-cat:not(.vg-filtros), .filtros-agenda div, .soy div) button:not([aria-pressed="true"]):nth-child(6n+2) { background: #E4DEFF; }
:is(.filtros-cat:not(.vg-filtros), .filtros-agenda div, .soy div) button:not([aria-pressed="true"]):nth-child(6n+3) { background: #FFDCCF; }
:is(.filtros-cat:not(.vg-filtros), .filtros-agenda div, .soy div) button:not([aria-pressed="true"]):nth-child(6n+4) { background: #D6ECFF; }
:is(.filtros-cat:not(.vg-filtros), .filtros-agenda div, .soy div) button:not([aria-pressed="true"]):nth-child(6n+5) { background: #FFF1B3; }
:is(.filtros-cat:not(.vg-filtros), .filtros-agenda div, .soy div) button:not([aria-pressed="true"]):nth-child(6n+6) { background: #FFE0EE; }
.filtros-cat.filtros-ciudad button[data-tema="transporte"]:not([aria-pressed="true"]) { background: var(--c-transporte); }
.filtros-cat.filtros-ciudad button[data-tema="trafico"]:not([aria-pressed="true"]) { background: var(--c-trafico); }
.filtros-cat.filtros-ciudad button[data-tema="obras"]:not([aria-pressed="true"]) { background: var(--c-obras); }
.soy button[aria-pressed="true"] { background: var(--negro); color: var(--sobre-negro); }
.cal-indice a { color: var(--tinta); }
.cal-indice a:nth-child(1) { background: #D4F5E6; } .cal-indice a:nth-child(2) { background: #E4DEFF; }
.cal-indice a:nth-child(3) { background: #FFDCCF; } .cal-indice a:nth-child(4) { background: #D6ECFF; }
/* Valgrande: muchos botones, sin colores; neutros pero con borde para que se vean sobre el fondo */
:is(.vg-indice:not(.cal-indice) a, .vg-filtros button:not([aria-pressed="true"])) {
  background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--suave); }

/* Agenda: compartir y calendario dentro de cada plan */
.ev-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 !important; }
.ev-acciones a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 20px;
  background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--borde); font-size: 14px; font-weight: 700; text-decoration: none; }
/* Ficha: «¿Te ha servido?» (mismo formato que el aviso de Telegram) */
.cta-compartir { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; padding: 16px; border-radius: 22px;
  background: #D4F5E6; color: var(--tinta); text-decoration: none; }
.cta-compartir .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tinta); color: #fff; flex: none; }
.cta-compartir b { display: block; font-family: var(--titular); font-size: 18px; }
.cta-compartir small { font-size: 14px; }

/* Familias */
.hero-familias { background: var(--c-deporte); }
.lista-insc, .lista-clubes { list-style: none; padding: 0; margin: 0; background: var(--superficie); border-radius: 22px; overflow: hidden; }
.lista-insc li { padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.lista-insc li:last-child, .lista-clubes li:last-child { border-bottom: 0; }
.lista-insc li > b { display: block; font-size: 16px; line-height: 1.3; }
.lista-insc p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
.lista-insc .camp { box-shadow: inset 5px 0 0 var(--c-deporte); }
.insc-cuando { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--suave); }
.lista-clubes li { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.club-titulo { font-weight: 800; font-size: 16px; text-decoration: none; }
.club-titulo:hover { text-decoration: underline; }
.club-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.club-botones a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 19px;
  background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--texto); font-size: 13px; font-weight: 700; text-decoration: none; }
.club-botones a:first-child { background: var(--negro); color: var(--sobre-negro); box-shadow: none; }
.club-nombre { display: flex; flex-direction: column; gap: 3px; }
.club-nombre small { color: var(--suave); font-size: 13px; }
.club-nombre .sello { align-self: flex-start; }
.club-nombre .sello { background: var(--c-deporte); color: var(--tinta); padding: 3px 9px; font-size: 12px; }
.acciones-club { flex-wrap: wrap; }
.acciones-club .boton { flex: 1 1 auto; justify-content: center; }
.checks-simple { margin: 0; padding-left: 20px; line-height: 1.6; }

/* colegios (/familias/colegios/) */
.filtros-cole { margin-bottom: 8px; }
.grupo-cole { margin-top: 8px; }
.cole .sellos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cole .sello { background: var(--c-cole); color: var(--tinta); padding: 3px 9px; font-size: 12px; }
.cabecera-ficha .sellos { display: flex; flex-wrap: wrap; gap: 6px; }
.etapas small { display: block; color: var(--suave); font-size: 14px; }
.cta-cole .ico { background: var(--c-cole); }
.caja .checks-simple a { overflow-wrap: anywhere; }
.filtros-club { margin-bottom: 8px; }
.grupo-club { margin-top: 8px; }
.cta-club .ico { background: var(--c-deporte); }
.cta-musica .ico { background: var(--c-ocio); }
/* escuela de música */
.ambito .tipo-mini { margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.ambito h2 { margin-top: 4px; }
.precios { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.precios td { padding: 8px 0; border-top: 1px solid var(--borde); vertical-align: top; }
.precios td:last-child { text-align: right; font-weight: 800; white-space: nowrap; padding-left: 12px; }
.h2-sec { font-size: 22px; margin: 28px 0 0; }
.caja p, .caja li { overflow-wrap: anywhere; }
.indice-ambitos { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.indice-ambitos a { font-size: 14px; font-weight: 600; background: var(--c-ocio); color: var(--tinta); border-radius: 18px; padding: 9px 14px; text-decoration: none; }
.mas-noticias { margin-top: 10px; }
.mas-noticias summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.mas-noticias .noticias { margin-top: 6px; }
.noticias li .ev-cat { margin-right: 6px; }
.noti-det summary { cursor: pointer; list-style: none; }
.noti-det summary::-webkit-details-marker { display: none; }
.noti-det summary b { font-weight: 600; }
.noti-det summary b::after { content: " +"; color: var(--suave); }
.noti-det[open] summary b::after { content: " −"; }
.noti-det p { margin: 8px 0 0; }
.seccion.ancha { grid-column: 1 / -1; min-height: 0; }
@media (min-width: 760px) { .seccion.ancha { grid-column: auto; min-height: 150px; } }
.filtros-noticias .hoy-btn .n { background: rgba(0,0,0,.08); color: inherit; margin-left: 4px; }
.filtros-noticias .hoy-btn[aria-pressed="true"] .n { background: rgba(255,255,255,.2); }
.boton-buscar { width: 44px; height: 44px; border-radius: 50%; background: var(--superficie); color: var(--texto);
  display: flex; align-items: center; justify-content: center; flex: none; margin-left: auto; }
.cab .boton-buscar + .boton-tema { margin-left: 8px; }
@media (min-width: 1024px) { .boton-buscar { margin-left: 0; order: 3; } .boton-tema { margin-left: 8px; order: 4; } }
@media (min-width: 760px) and (max-width: 1023px) { .boton-buscar { margin-left: auto; } .boton-menu { order: 5; } }
@media (min-width: 760px) { .cab.compacta .boton-buscar { margin-left: auto; } .cab.compacta .boton-tema { margin-left: 8px; } }
.buscar-form, .buscar-portada { display: flex; gap: 8px; margin-top: 14px; }
.buscar-form input, .buscar-portada input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 12px 16px; border-radius: 999px;
  border: 2px solid transparent; background: var(--superficie); color: var(--texto); }
.buscar-form input:focus, .buscar-portada input:focus { outline: none; border-color: var(--negro); }
.buscar-portada .boton { padding: 0 16px; display: flex; align-items: center; }
.resultados li a { display: block; text-decoration: none; }
.resultados li b { font-weight: 600; }
.resultados li a:hover b { text-decoration: underline; }
.tg-banner { display: flex; align-items: center; gap: 12px; background: #229ED9; color: #fff; border-radius: 22px; padding: 14px 16px;
  margin: 14px 0; text-decoration: none; }
.tg-banner .ico { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex;
  align-items: center; justify-content: center; }
.tg-banner b { display: block; font-size: 17px; line-height: 1.2; }
.tg-banner small { display: block; font-size: 13.5px; opacity: .92; margin-top: 2px; }
.tg-banner .tg-unirse { margin-left: auto; flex: none; background: #fff; color: #0b6d99; font-weight: 800; border-radius: 999px; padding: 8px 14px; }
.cta-arriba { margin-top: 0; }
.form-contacto { display: flex; flex-direction: column; gap: 14px; }
.form-contacto label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.form-contacto input, .form-contacto select, .form-contacto textarea { font: inherit; font-weight: 400; padding: 12px 14px;
  border-radius: 14px; border: 2px solid var(--borde); background: var(--fondo); color: var(--texto); }
.form-contacto .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-ok { background: var(--c-vivienda); color: var(--tinta); border-radius: 14px; padding: 12px 14px; font-weight: 600; }

/* Novedades */
.hero-novedades { background: var(--c-vivienda); }
.hero-novedades-link { color: inherit; font-weight: 700; }
.nv-cifras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.nv-cifra { display: flex; flex-direction: column; min-width: 92px; padding: 10px 14px; border-radius: 18px; background: var(--c);
  color: var(--tinta); text-decoration: none; box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }
.nv-cifra b { font-family: var(--titular); font-size: 34px; font-weight: 800; line-height: 1; }
.nv-cifra span { font-size: 13px; font-weight: 700; margin-top: 4px; }
.nv-filtros { margin: 18px 0 4px; }
.nv-dia { margin: 22px 0 0; scroll-margin-top: 70px; }
.nv-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.nv-cab h2 { font-size: 24px; font-weight: 800; margin: 0; }
.nv-cab p { margin: 2px 0 0; color: var(--suave); font-size: 14px; line-height: 1.35; }
.nv-lista { list-style: none; padding: 0; margin: 0; background: var(--superficie); border-radius: 22px; overflow: hidden; }
.nv-item { display: flex; gap: 10px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.nv-item:last-child { border-bottom: 0; }
.nv-item a { font-weight: 600; text-decoration: none; }
.nv-item a:hover { text-decoration: underline; }
.nv-etq { flex: none; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px;
  border-radius: 999px; background: var(--c); color: var(--tinta); }
.nv-mas { margin-top: 8px; }
.nv-mas summary { cursor: pointer; font-weight: 700; padding: 6px 4px; }
.nv-prensa { margin: 8px 4px 0; font-weight: 700; }

/* Cursos (/cursos/, /cursos/upmd/) */
.hero-cursos { background: var(--c-cole); }
.hero-cursos .botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.secciones.secciones-cursos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 14px; }
.grupo-curso h2 { display: flex; align-items: center; gap: 8px; }
/* mosaico: columnas en las que cada tarjeta ocupa su altura (sin huecos entre tarjetas de distinto tamaño) */
.cursos { columns: 300px 3; column-gap: 10px; }
.curso { display: flex; flex-direction: column; gap: 8px; background: var(--superficie); border-radius: 22px; padding: 16px;
  break-inside: avoid; margin: 0 0 10px; }
.curso.terminado { opacity: .55; }
.curso-cab { display: flex; flex-direction: column; gap: 6px; }
.curso-cab h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.curso-cab span { align-self: flex-start; }
.curso-sello { font-size: 12px; font-weight: 800; border-radius: 10px; padding: 3px 9px; background: var(--borde); color: var(--texto); }
.curso-sello.pronto { background: var(--c-cole); color: var(--tinta); }
.curso-sello.marcha { background: var(--c-vivienda); color: var(--tinta); }
.curso-cab .curso-sello + .curso-sello { margin-top: -2px; }
.curso-meta { margin: 0; font-size: 13px; color: var(--suave); }
.curso-precio { margin: 0; font-size: 14px; }
.curso-precio b { font-family: var(--titular); font-size: 20px; }
.curso-grupos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.curso-grupos li { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; padding-left: 10px;
  box-shadow: inset 3px 0 0 var(--c-cole); }
.curso-grupos li span { font-size: 13px; color: var(--suave); }
.curso-grupos li.acabado { opacity: .5; text-decoration: line-through; }
.curso-req { margin: 0; padding-left: 18px; font-size: 13px; color: var(--suave); line-height: 1.45; }
.curso-mas summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.curso-mas p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.curso-link { font-size: 14px; font-weight: 700; }
.ev-insc { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 800; border-radius: 10px; padding: 3px 9px;
  background: var(--c-cole); color: var(--tinta); }
.hero-saludo { margin: 8px 0 0; font-size: 17px; font-weight: 600; line-height: 1.4; max-width: 60ch; }

/* /alcobi/: presentación */
.ab-hero h1 span { background: var(--acento); color: var(--negro); padding: 0 12px; margin-left: 4px; border-radius: 16px; }
.ab-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 0; }
.ab-cifra { background: var(--superficie); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.ab-cifra b { font-family: var(--titular); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.ab-cifra span { font-size: 14px; color: var(--suave); }
.ab-lista li { margin-bottom: 4px; }
.ab-tag { margin: 10px 0 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sobre-negro-suave); }
.ab-hero h1 { font-size: clamp(40px, 10vw, 68px); }


/* Logo (opción A, sin lema): mascota y nombre en una línea */
.marca { display: flex; flex-wrap: nowrap; align-items: center; column-gap: 7px; }
.logo-mascota { display: block; width: 52px; }
.logo-mascota svg, .ab-mascota svg { display: block; width: 100%; height: auto; animation: balanceo 7s ease-in-out infinite; transform-origin: 55% 90%; }
/* como el título de /alcobi/: letras juntas (mismo espaciado que .vg-hero h1) */
.marca-nombre { font-weight: 800; line-height: 1.1; letter-spacing: -0.045em; }
.marca .marca-nombre span { letter-spacing: -0.03em; }
@keyframes balanceo { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-6deg); } 96% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .logo-mascota svg, .ab-mascota svg { animation: none !important; } }
.ab-hero { --logo-cuerpo: #FFD23F; --logo-sonrisa: #141414; }
.ab-fila { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.ab-mascota { display: block; flex: none; width: 150px; order: 2; margin-right: 12px; }
.ab-texto { min-width: 0; }
.ab-mascota svg { animation-name: salto; animation-duration: 4s; }
@keyframes salto { 0%, 80%, 100% { transform: translateY(0); } 86% { transform: translateY(-9px); } 92% { transform: translateY(0); } 96% { transform: translateY(-4px); } }
/* móvil: mascota a la derecha de «Quién soy» y el título; el párrafo debajo, a todo el ancho */
@media (max-width: 600px) {
  .ab-fila { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
  .ab-texto { display: contents; }
  .ab-mascota { grid-column: 2; grid-row: 1 / 3; width: 84px; margin-right: 0; }
  .ab-tag, .ab-hero h1 { grid-column: 1; }
  .ab-hero .vg-sub { grid-column: 1 / -1; }
}
@media (max-width: 759px) { .marca { font-size: 30px; } .logo-mascota { width: 46px; } }

/* Aviso de cookies (cookies.js): solo si hay Google Analytics. En móvil, encima de la barra de abajo. */
.aviso-cookies { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 30;
  max-width: 620px; margin: 0 auto; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 20px; padding: 14px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.aviso-cookies p { margin: 0 0 12px; font-size: 15px; }
.aviso-cookies-botones { display: flex; gap: 10px; }
.aviso-cookies-botones .boton { flex: 1; min-height: 46px; }
@media (max-width: 759px) { .aviso-cookies { bottom: calc(86px + env(safe-area-inset-bottom)); } }