/* Identidad propia de ONP en Línea: ciruela + verde menta, motivo de puntos de calendario. Sin colores ni logotipo de la ONP. */
:root { --fondo: #f8f6fb; --linea: #e4dcee; --tinta: #221a2e; --tenue: #665b75; --ok: #1d7a5e; }
body { --motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='2' fill='white' fill-opacity='.09'/%3E%3C/svg%3E"); }h1, h2, h3 { font-weight: 700; letter-spacing: -.015em; }

/* Barra superior y cabecera */
.barra-independencia { background: var(--primario-oscuro); font-size: .8rem; }
.cabecera nav .boton--acento { color: #1d1d1d; }

/* Portada dividida */
.diseno-a-oficinas .hero, .hero--dividido { color: #fff; background-color: var(--primario-oscuro); background-image: var(--motivo), linear-gradient(135deg, var(--primario-oscuro), var(--primario)); background-size: 48px 48px, cover; }
.hero__rejilla { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 28px; align-items: start; padding-block: 48px 56px; }
.hero--dividido h1 { color: #fff; max-width: 16em; }
.hero--dividido .hero__intro { color: rgb(255 255 255 / .88); margin: 12px 0 20px; }
.hero--dividido .buscador { grid-template-columns: 1.4fr 1fr 1fr auto; }
.hero__mas { display: grid; gap: 10px; padding: 20px; border-radius: var(--radio); background: #fff; color: var(--tinta); box-shadow: 0 12px 30px rgb(0 0 0 / .18); }
.hero__mas a { color: var(--primario); font-weight: 600; text-decoration: none; }
.hero__mas a:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { padding: 4px 12px; border-radius: 99px; background: rgb(255 255 255 / .16); color: #fff; font-size: .85rem; text-decoration: none; }
.chip:hover { background: rgb(255 255 255 / .28); color: #fff; }

/* Bandas de listados y fichas con el mismo motivo */
.diseno-a-oficinas .banda { color: #fff; background-color: var(--primario-oscuro); background-image: var(--motivo), linear-gradient(135deg, var(--primario-oscuro), var(--primario)); background-size: 48px 48px, cover; }
.diseno-a-oficinas .banda a, .diseno-a-oficinas .migas ol { color: #fff; }
.diseno-a-oficinas .banda__dir, .diseno-a-oficinas .banda__intro { color: rgb(255 255 255 / .88); }
.diseno-a-oficinas .accion { color: var(--primario-oscuro) !important; background: #fff; border-color: transparent; }
.diseno-a-oficinas .accion--principal { background: var(--acento); color: #1d1d1d !important; }
.diseno-a-oficinas .accion--tramites { background: rgb(255 255 255 / .14); color: #fff !important; border-color: rgb(255 255 255 / .5); }
.diseno-a-oficinas .estado--banda { background: #fff; }
.cifras--banda { margin-top: 18px; }
.cifras--banda .cifra { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .25); box-shadow: none; }
.cifras--banda .cifra strong { color: #fff; }
.cifras--banda .cifra span { color: rgb(255 255 255 / .85); }

/* Departamentos */
.deptos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.depto { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--linea); border-left: 4px solid var(--primario); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); text-decoration: none; }
.depto strong { font-size: 1.12rem; color: var(--primario-oscuro); }
.depto span { color: var(--tenue); font-size: .9rem; }
.depto em { font-style: normal; color: var(--primario); font-weight: 600; font-size: .9rem; }
.depto:hover { border-color: var(--primario); }

/* Trámites por necesidad */
.grupos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grupo { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); border-top: 4px solid var(--acento); }
.grupo strong { color: var(--primario-oscuro); }
.grupo a { color: var(--primario); text-decoration: none; font-weight: 500; }
.grupo a:hover { text-decoration: underline; }

/* Dos columnas */
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.dos-col--faq { grid-template-columns: 1fr 2fr; }

/* Tarjetas de oficialía */
.tarjeta { border-left: 4px solid var(--acento); }
.tarjetas--rejilla { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.tarjeta .codigo { margin-bottom: 4px; }
.estado[data-tipo="si"] { color: var(--ok); }

/* Cajas laterales */
.ficha__lateral { display: grid; gap: 14px; }
.cercanas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cercanas li { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.cercanas span { color: var(--tenue); white-space: nowrap; }
.guia-texto .articulo { max-width: none; }

/* Página de municipio: todas sus oficialías, una sección por oficina */
.nombres-oficina { display: grid; gap: 8px; margin-top: 14px; max-width: 560px; }
.nombre-oficina { display: grid; padding: 9px 14px; border-radius: var(--radio); background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .25); color: #fff !important; text-decoration: none; font-weight: 600; }
.nombre-oficina small { font-weight: 400; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.nombre-oficina:hover { background: rgb(255 255 255 / .22); }
.municipio { padding-block: 24px 8px; }
.chips--oficinas { max-height: 210px; overflow-y: auto; padding-right: 4px; }
.oficinas { display: grid; gap: 22px; }
.oficina { scroll-margin-top: 16px; padding: 22px; border: 1px solid var(--linea); border-top: 5px solid var(--primario); border-radius: var(--radio); background: var(--superficie); }
.oficina__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.oficina__cabeza h2 { margin: 0; font-size: 1.35rem; color: var(--primario-oscuro); }
.oficina__cabeza .estado { margin: 0; }
.oficina__rejilla { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.oficina__caja { padding: 16px; border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--linea); }
.oficina__caja h3, .oficina__mapa h3, .oficina__servicios h3 { margin: 0 0 10px; font-size: 1.02rem; }
.oficina__caja .datos { margin: 0; }
.oficina__servicios { margin-top: 16px; }
.oficina__mapa { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: start; margin-top: 16px; }
.oficina__mapa .mapa iframe { height: 260px; }
.oficina > .nota { margin: 12px 0 0; }

/* Portada: oficialías por departamento */
.regiones-grupos { display: grid; gap: 10px; }
.region-grupo { border: 1px solid var(--linea); border-left: 4px solid var(--primario); border-radius: var(--radio); background: var(--superficie); }
.region-grupo summary { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.region-grupo summary::-webkit-details-marker { display: none; }
.region-grupo summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--primario); }
.region-grupo[open] summary::after { content: "−"; }
.region-grupo h3 { margin: 0; font-size: 1.1rem; color: var(--primario-oscuro); }
.region-grupo small { color: var(--tenue); }
.region-grupo > p { padding: 0 18px 16px; margin: 0; }
.comunas-rejilla { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 0 18px 14px; }
.comuna-tarjeta { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta); text-decoration: none; background: var(--fondo); }
.comuna-tarjeta strong { color: var(--primario); }
.comuna-tarjeta span { color: var(--tenue); font-size: .88rem; }
.comuna-tarjeta:hover { border-color: var(--primario); }
.llamada--telefono { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.llamada--telefono h2 { margin: 0 0 6px; }

/* Portada: ilustración propia de fondo (ciudad, centro de salud, ruta, ubicación y cita) */
.hero--dividido { position: relative; overflow: hidden; }
.hero--dividido::after { content: ""; position: absolute; inset: auto 0 0 0; height: 250px; background: url("portada-fondo.svg") no-repeat center bottom / auto 100%; pointer-events: none; }
.hero--dividido > .contenedor { position: relative; z-index: 1; }
.hero--dividido .hero__rejilla { padding-block: 52px 236px; }
@media (max-width: 900px) { .hero--dividido::after { height: 150px; } .hero--dividido .hero__rejilla { padding-block: 32px 150px; } }

/* Portada: mapa de puntos con los módulos reales */
.hero__lado { display: grid; gap: 14px; align-content: start; }
.hero__mapa { margin: 0; padding: 14px 16px 12px; border-radius: var(--radio); background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .2); }
.hero__mapa svg { display: block; width: 100%; height: auto; }
.hero__mapa circle { fill: var(--acento); fill-opacity: .9; stroke: var(--primario-oscuro); stroke-width: 1; }
.hero__mapa figcaption { display: grid; gap: 2px; margin-top: 8px; color: #fff; }
.hero__mapa figcaption span { font-size: .82rem; color: rgb(255 255 255 / .8); }

/* Tablas de municipios sin módulo y lista compacta de trámites */
.tabla-desliza { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); font-size: .93rem; }
.tabla th, .tabla td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla th { background: var(--suave); color: var(--primario-oscuro); font-weight: 600; }
.tabla td:nth-child(n+2):not(:nth-child(3)), .tabla th:nth-child(n+2):not(:nth-child(3)) { white-space: nowrap; }
.tramites-lista { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tramites-lista a { display: inline-block; padding: 7px 13px; border: 1px solid var(--linea); border-radius: 99px; background: var(--superficie); color: var(--primario-oscuro); text-decoration: none; font-weight: 500; }
.tramites-lista a:hover { border-color: var(--primario); }
.sobre-municipio p { font-size: 1.02rem; line-height: 1.7; }

/* Portada: cifras bajo la portada */
.cifras { margin-top: -34px; position: relative; z-index: 2; }
.cifras.cifras--banda { margin-top: 18px; }
.cifras:not(.cifras--banda) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .cifras:not(.cifras--banda) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cifras .cifra { box-shadow: 0 10px 26px rgb(47 28 71 / .12); }

/* Portada: trámites agrupados por necesidad, con iconos */
.tramites-grupo { margin-top: 18px; }
.tramites-grupo:first-of-type { margin-top: 6px; }
.tramites-grupo h3 { margin: 0 0 2px; font-size: 1.12rem; color: var(--primario-oscuro); }
.tramites-grupo > p { margin: 0 0 12px; color: var(--tenue); }
.tramites-grupo .guias { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tramites-grupo .guia-tarjeta { height: 100%; }
/* 32 estados: en rejilla de 3 columnas; el que se abre ocupa todo el ancho */
.regiones-grupos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.region-grupo[open] { grid-column: 1 / -1; }
.region-grupo summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.region-grupo summary h3 { grid-column: 1; }
.region-grupo summary small { grid-column: 1; grid-row: 2; }
.region-grupo summary::after { grid-column: 2; grid-row: 1 / 3; margin-left: 0; }
.guia-tarjeta__marca--icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--suave); color: var(--primario); }
.tramites-grupo:nth-of-type(2) .guia-tarjeta { background: linear-gradient(180deg, #fff, #f5f0fa); }
.tramites-grupo:nth-of-type(3) .guia-tarjeta { background: linear-gradient(180deg, #fff, #eef8f4); }
.tramites-grupo:nth-of-type(3) .guia-tarjeta__marca--icono { background: #d5efe5; color: #1d7a5e; }

/* Portada: canales de EsSalud */
.canales { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 14px; }
.canal { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.canal strong { font-size: .85rem; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.canal a { font-size: 1.15rem; font-weight: 700; color: var(--primario-oscuro); text-decoration: none; }
.canal span { font-size: .88rem; color: var(--tenue); }

/* Portada: cerca de mí, en dos columnas como serviciofuneraria.cl */
.cerca-dividido { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 34px; border-radius: calc(var(--radio) + 6px); background: var(--suave); }
.cerca-dividido__texto h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-top: 0; }
.cerca-dividido__panel { display: grid; gap: 12px; padding: 24px; border: 1px solid var(--linea); border-radius: calc(var(--radio) + 4px); background: var(--superficie); box-shadow: 0 10px 28px rgb(47 28 71 / .08); }
.cerca-dividido__panel h3 { margin: 0; font-size: 1.2rem; }
.cerca-dividido__panel .nota { margin: 0; }
.cerca-dividido__o { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: .9rem; }
.cerca-dividido__o::before, .cerca-dividido__o::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }
.cerca-dividido__ir { display: grid; gap: 10px; }
.cerca-dividido__ir label { display: grid; gap: 6px; font-weight: 600; }
.cerca-dividido__ir select { padding: 11px 12px; border: 1px solid var(--linea); border-radius: 9px; font: inherit; background: #fff; }
.boton--bloque { width: 100%; justify-content: center; }
.enlace-fuerte { color: #1d7a5e; font-weight: 700; text-decoration: none; }
.enlace-fuerte:hover { text-decoration: underline; }
@media (max-width: 900px) { .cerca-dividido { grid-template-columns: 1fr; padding: 22px; gap: 20px; } .cifras { margin-top: 16px; } }

/* Portada: cómo funciona el trámite, en 4 pasos */
.como-funciona { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.como-funciona__paso { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.como-funciona__paso span { font-size: 1.6rem; font-weight: 800; color: var(--primario); }
.como-funciona__paso h3 { margin: 0; font-size: 1.05rem; color: var(--primario-oscuro); }
.como-funciona__paso p { margin: 0; color: var(--tenue); font-size: .93rem; }
.como-funciona__paso a { color: var(--primario); font-weight: 600; text-decoration: none; }
.cerca { display: grid; gap: 12px; }
.guia-texto + .ficha__lateral .llamada--oficial, .ficha__lateral .llamada--oficial { margin: 0; }

/* Servicios del módulo, en grupos como en registrocivilenlinea.cl */
.servicios-grupos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.servicio-grupo { padding: 16px; border: 1px solid var(--linea); border-left: 4px solid var(--acento); border-radius: var(--radio); background: var(--superficie); }
.servicio-grupo h3 { margin: 0 0 6px; font-size: 1rem; color: var(--primario-oscuro); }
.servicio-grupo p { margin: 0; color: var(--tenue); font-size: .93rem; }

/* Otras guías, con su descripción */
.guias-tarjetas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.guia-tarjeta { display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); text-decoration: none; }
.guia-tarjeta strong { color: var(--primario-oscuro); }
.guia-tarjeta span { color: var(--tenue); font-size: .92rem; }
.guia-tarjeta em { font-style: normal; color: var(--primario); font-weight: 600; font-size: .9rem; }
.guia-tarjeta:hover { border-color: var(--primario); }

/* Página de estado: una tarjeta por municipio, como la página de región de registrocivilenlinea.cl */
.municipios-tarjetas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.municipio-tarjeta { display: grid; gap: 10px; align-content: start; padding: 16px 18px; border: 1px solid var(--linea); border-top: 4px solid var(--primario); border-radius: var(--radio); background: var(--superficie); }
.municipio-tarjeta h3 { margin: 0; font-size: 1.08rem; }
.municipio-tarjeta h3 a { color: var(--primario-oscuro); text-decoration: none; }
.municipio-tarjeta h3 a:hover { text-decoration: underline; }
.municipio-tarjeta p { margin: 0; color: var(--tenue); }
.municipio-tarjeta .boton { justify-self: start; }
.datos--tarjeta { margin: 0; }
.datos--tarjeta div { display: grid; grid-template-columns: 78px 1fr; gap: 8px; padding: 4px 0; font-size: .92rem; }
.datos--tarjeta dt { color: var(--tenue); }
.datos--tarjeta dd { margin: 0; }

@media (max-width: 900px) {
    .oficina__rejilla, .oficina__mapa { grid-template-columns: 1fr; }
    .hero__rejilla, .dos-col, .dos-col--faq { grid-template-columns: 1fr; }
    .hero--dividido .buscador { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .hero--dividido .buscador { grid-template-columns: 1fr; }
    .tarjetas--rejilla { grid-template-columns: 1fr; }
}
.hero--dividido .buscador { grid-template-columns: 1.2fr 1.1fr 1.1fr auto; }

/* Portada (opción 1): accesos por tipo de atención, montados sobre el borde inferior de la portada */
.accesos { margin-top: -34px; position: relative; z-index: 2; }
.accesos__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.acceso { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: calc(var(--radio) + 2px); background: var(--superficie, #fff); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; box-shadow: 0 10px 26px rgb(47 28 71 / .12); transition: transform .15s, box-shadow .15s; }
.acceso:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgb(47 28 71 / .18); }
.acceso__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--suave); color: var(--primario); }
.acceso strong { font-size: 1.08rem; }
.acceso span:not(.acceso__ico) { color: var(--tenue); font-size: .92rem; }
.acceso em { font-style: normal; font-weight: 600; color: var(--primario); font-size: .92rem; margin-top: 4px; }
.acceso--urgente { border-top: 4px solid var(--acento); }
.acceso--urgente .acceso__ico { background: #e1f3ec; color: #1d7a5e; }
@media (max-width: 900px) { .accesos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .accesos { margin-top: 16px; } }
@media (max-width: 480px) { .accesos__rejilla { gap: 10px; } .acceso { padding: 14px; } }

/* Distrito (opción 1): resumen rápido de a dónde ir */
.resumen-rapido { margin-top: 24px; }
.resumen-rapido__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.resumen-rapido__celda { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie, #fff); }
.resumen-rapido__celda > div { display: grid; gap: 2px; }
.resumen-rapido__celda a { font-weight: 600; color: var(--primario); text-decoration: none; }
.resumen-rapido__celda a:hover { text-decoration: underline; }
.resumen-rapido__celda small { color: var(--tenue); }
.resumen-rapido__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--suave); color: var(--primario); }
.resumen-rapido__celda:first-child .resumen-rapido__ico { background: #e1f3ec; color: #1d7a5e; }

/* Distrito (opción 3): mapa conjunto, tarjetas con etiquetas y filtros */
.centros-distrito__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.centros-distrito--sin-mapa .centros-distrito__rejilla { grid-template-columns: 1fr; }
.mapa-distrito { min-height: 340px; height: 100%; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--suave); overflow: hidden; z-index: 0; }
.centros-distrito__lista { display: grid; gap: 10px; }
.centros-distrito--sin-mapa .centros-distrito__lista { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.centro-tarjeta { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--linea); border-left: 4px solid var(--primario); border-radius: var(--radio); background: var(--superficie, #fff); color: var(--tinta); text-decoration: none; }
.centro-tarjeta:hover { border-color: var(--primario); }
.centro-tarjeta[data-h24="1"] { border-left-color: var(--acento); }
.centro-tarjeta[hidden], .oficina[hidden] { display: none; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.etiqueta { padding: 2px 9px; border-radius: 99px; background: #fff; border: 1px solid var(--linea); color: var(--tinta); font-size: .8rem; }
.etiqueta--a { background: var(--suave); border-color: #d9cbe8; }
.etiqueta--r { background: #e1f3ec; border-color: #ecd193; color: #7a520a; font-weight: 600; }
.etiqueta--v { background: #dcefe4; border-color: #a9d3ba; color: #18603d; }
.filtros-centros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.filtro { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--linea); background: var(--superficie, #fff); color: var(--tinta); font: inherit; font-size: .88rem; cursor: pointer; }
.filtro.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
@media (max-width: 800px) { .centros-distrito__rejilla { grid-template-columns: 1fr; } .mapa-distrito { min-height: 260px; } }

/* Fichas más compactas en el distrito */
.oficinas--compactas .oficina__cabeza { flex-wrap: wrap; row-gap: 8px; }
.oficinas--compactas .oficina__cabeza .etiquetas { flex-basis: 100%; }
.oficinas--compactas .oficina__caja { padding: 14px 16px; }
.oficinas--compactas .datos > div { padding-block: 6px; }
.oficinas--compactas .mapa iframe { height: 220px; }

.indice-deps a.etiqueta { text-decoration: none; }
.indice-deps a.etiqueta:hover { border-color: var(--primario); }

/* Ficha de centro: horario como primera fila de los datos y el mapa en la segunda columna */
.oficina--centro .oficina__rejilla { align-items: stretch; }
.oficina--centro .oficina__caja--mapa { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; }
.oficina--centro .oficina__caja--mapa .mapa { min-height: 240px; height: 100%; aspect-ratio: auto; border-radius: var(--radio); overflow: hidden; }
.oficina--centro .oficina__caja--mapa iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; }
.oficina--centro .oficina__botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.oficina--centro .datos__horario dd strong { font-size: 1.05rem; color: var(--primario); }

/* Portada: canales de EsSalud en tarjetas (bloque propio de este sitio) */
.canales-bloque__cabeza { max-width: 760px; margin-bottom: 18px; }
.canales-bloque__cabeza p { color: var(--tenue); }
.canales-bloque__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.canal-tarjeta { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: calc(var(--radio) + 2px); background: var(--superficie, #fff); border: 1px solid var(--linea); }
.canal-tarjeta header { display: flex; gap: 12px; align-items: center; }
.canal-tarjeta header small { display: block; color: var(--tenue); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.canal-tarjeta h3 { margin: 0; font-size: 1.02rem; }
.canal-tarjeta__ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--primario); color: #fff; }
.canal-tarjeta:first-child .canal-tarjeta__ico { background: var(--acento); color: #1d1d1d; }
.canal-tarjeta__dato { font-size: 1.15rem; font-weight: 700; color: var(--primario); text-decoration: none; overflow-wrap: anywhere; }
.canal-tarjeta__dato:hover { text-decoration: underline; }
.canal-tarjeta ul { margin: 0; padding-left: 18px; color: var(--tinta); font-size: .9rem; display: grid; gap: 3px; }
.canal-tarjeta__cuando { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding-top: 10px; border-top: 1px dashed var(--linea); color: var(--tenue); font-size: .84rem; }
.canal-tarjeta__cuando svg { flex: none; margin-top: 2px; }

/* Guías: caja lateral con el servicio oficial real */
.servicio-oficial { display: grid; gap: 8px; padding: 18px; border-radius: calc(var(--radio) + 2px); background: linear-gradient(160deg, var(--primario-oscuro), var(--primario)); color: #fff; }
.servicio-oficial__tipo { display: inline-flex; gap: 6px; align-items: center; width: fit-content; padding: 3px 10px; border-radius: 99px; background: rgb(255 255 255 / .14); font-size: .78rem; }
.servicio-oficial__nombre { font-size: 1.15rem; line-height: 1.25; }
.servicio-oficial__dominio { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; color: rgb(255 255 255 / .78); overflow-wrap: anywhere; }
.servicio-oficial__sub { margin: 6px 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: rgb(255 255 255 / .7); }
.servicio-oficial__lista { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: .9rem; }
.servicio-oficial .boton { margin-top: 6px; background: var(--acento); color: #1d1d1d !important; border-color: var(--acento); text-align: center; }
.canales-bloque__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.canal-tarjeta:first-child { grid-row: span 2; background: var(--suave); border-color: #d9cbe8; }
.canal-tarjeta:first-child .canal-tarjeta__dato { font-size: 1.5rem; }
@media (max-width: 900px) { .canales-bloque__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .canales-bloque__rejilla { grid-template-columns: 1fr; } .canal-tarjeta:first-child { grid-row: auto; } }

/* Distrito: «¿Qué trámites puedes hacer aquí?» como lista de comprobación */
.que-hacer { margin-top: 26px; }
.que-hacer__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.que-hacer__fila { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie, #fff); }
.que-hacer__fila > div { display: grid; gap: 2px; }
.que-hacer__fila span:not(.que-hacer__marca) { color: var(--tenue); font-size: .93rem; }
.que-hacer__fila a { color: var(--primario); font-weight: 600; }
.que-hacer__marca { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; background: #dcefe4; color: #18603d; }
.que-hacer__fila--no .que-hacer__marca { background: #e1f3ec; color: #7a520a; }
.que-hacer__guia { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--linea); font-size: .85rem; text-decoration: none; white-space: nowrap; }
@media (max-width: 600px) { .que-hacer__fila { grid-template-columns: 30px 1fr; } .que-hacer__guia { grid-column: 2; justify-self: start; } }
.filtro-sedes { margin-bottom: 0; }

/* Ficha: servicios marcados por la sede */
.oficina__servicios-reniec { margin-top: 14px; padding: 14px 16px; border-radius: var(--radio); background: var(--suave); }
.oficina__servicios-reniec h3 { margin: 0 0 8px; font-size: .98rem; }
.servicios-si, .servicios-no { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; align-items: center; }
.servicio { padding: 3px 10px; border-radius: 99px; font-size: .84rem; text-decoration: none; }
.servicio--si { background: #fff; border: 1px solid #a9d3ba; color: #18603d; }
.servicio--si::before { content: "✓ "; }
.servicio--no { color: var(--tenue); border: 1px dashed var(--linea); }
.datos__horario small { display: block; color: var(--tenue); font-size: .84rem; }

/* Portada: «¿Qué vas a hacer en RENIEC?» */
.que-haces__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 14px; margin-top: 14px; }
.hacer-tarjeta { display: grid; gap: 4px; align-content: start; padding: 18px; border-radius: calc(var(--radio) + 2px); background: var(--superficie, #fff); border: 1px solid var(--linea); border-bottom: 4px solid var(--acento); }
.hacer-tarjeta strong { font-size: 1.02rem; }
.hacer-tarjeta__n { font-size: 2.1rem; font-weight: 800; color: var(--primario); line-height: 1.1; }
.hacer-tarjeta span:not(.hacer-tarjeta__n) { color: var(--tenue); font-size: .9rem; }
.hacer-tarjeta p { margin: 8px 0 0; font-size: .9rem; }
.hacer-tarjeta a { color: var(--primario); font-weight: 600; }
.hacer-tarjeta--principal { background: linear-gradient(160deg, var(--primario-oscuro), var(--primario)); color: #fff; border-bottom-color: var(--acento); }
.hacer-tarjeta--principal .hacer-tarjeta__n, .hacer-tarjeta--principal a { color: #fff; }
.hacer-tarjeta--principal span:not(.hacer-tarjeta__n) { color: rgb(255 255 255 / .82); }
@media (max-width: 900px) { .que-haces__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .que-haces__rejilla { grid-template-columns: 1fr; } }

/* Portada: canales de RENIEC en una caja con lista */
.canales-reniec__caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; padding: 26px; border-radius: calc(var(--radio) + 4px); background: var(--suave); border: 1px solid var(--linea); }
.canales-reniec__caja p { color: var(--tenue); }
.canales-reniec__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.canal-linea { display: grid; grid-template-columns: 150px 1fr; gap: 2px 14px; padding: 12px 14px; border-radius: var(--radio); background: var(--superficie, #fff); }
.canal-linea__tipo { grid-row: span 2; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); align-self: center; }
.canal-linea__dato { font-weight: 700; font-size: 1.08rem; color: var(--primario); text-decoration: none; }
.canal-linea__para { color: var(--tinta); font-size: .9rem; }
@media (max-width: 800px) { .canales-reniec__caja { grid-template-columns: 1fr; } .canal-linea { grid-template-columns: 1fr; } .canal-linea__tipo { grid-row: auto; } }

/* Agencias Perú: empresas, ficha y terminales */
.empresas-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.empresa-tarjeta { display: grid; gap: 4px; padding: 16px; border-radius: var(--radio); border: 1px solid var(--linea); border-top: 4px solid var(--acento); background: var(--superficie, #fff); color: var(--tinta); text-decoration: none; }
.empresa-tarjeta strong { font-size: 1.05rem; color: var(--primario); }
.empresa-tarjeta span { color: var(--tenue); font-size: .9rem; }
.empresa-tarjeta:hover { border-color: var(--primario); }
@media (max-width: 900px) { .empresas-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cifras-empresa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.cifras-empresa div { display: grid; padding: 16px; border-radius: var(--radio); background: var(--suave); }
.cifras-empresa strong { font-size: 1.9rem; color: var(--primario); }
.cifras-empresa span { color: var(--tenue); font-size: .9rem; }
@media (max-width: 600px) { .cifras-empresa { grid-template-columns: 1fr; } }
.ficha-empresa { margin: 10px 0 0; font-size: .93rem; color: var(--tenue); }
.ficha-empresa a { color: var(--primario); font-weight: 600; }
.lista--columnas { columns: 2; column-gap: 32px; }
@media (max-width: 700px) { .lista--columnas { columns: 1; } }
/* ===================== Diseño propio de Agencias Perú ===================== */
/* Logotipo: icono + nombre en dos tonos + lema */
.marca--logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca--logo img { width: 46px; height: 46px; }
.marca__texto { display: grid; line-height: 1.05; }
.marca__nombre { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--primario-oscuro); }
.marca__nombre b { color: var(--primario); font-weight: 800; margin-right: .05em; }
.marca__lema { margin-top: 3px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
@media (max-width: 600px) { .marca__nombre { font-size: 1.2rem; } .marca--logo img { width: 38px; height: 38px; } }

/* ===================== Diseño propio de ONP en Línea ===================== */
/* Ciruela + verde menta, títulos con serifa (tono de guía editorial), motivo de puntos de calendario. */
.cabecera { border-bottom: 3px solid var(--acento); }
h1, h2 { font-family: var(--letra-titulos, Georgia, serif); font-weight: 700; letter-spacing: -.01em; }

/* Portada: héroe con «¿Cuándo cobro?» */
.hero-onp { position: relative; overflow: hidden; color: #fff; padding: 46px 0 150px; background-color: var(--primario-oscuro); background-image: var(--motivo), linear-gradient(150deg, var(--primario-oscuro) 10%, var(--primario) 70%, #5d3d86); background-size: 36px 36px, cover; }
.hero-onp::after { content: ""; position: absolute; inset: auto 0 0 0; height: 210px; background: url("portada-fondo.svg") no-repeat center bottom / auto 100%; pointer-events: none; }
.hero-onp__rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 40px; align-items: center; }
.hero-onp__ante { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 99px; background: rgb(71 179 146 / .18); color: #bff0de; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero-onp h1 { margin: 0 0 12px; color: #fff; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; max-width: 15em; }
.hero-onp__intro { margin: 0 0 20px; color: rgb(255 255 255 / .88); font-size: 1.08rem; max-width: 600px; }
.hero-onp__cifras { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 22px; color: rgb(255 255 255 / .82); }
.hero-onp__cifras strong { display: block; font-family: var(--letra-titulos, Georgia, serif); font-size: 1.9rem; color: #fff; line-height: 1.1; }
.hero-onp__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.boton--claro { background: transparent; color: #fff !important; border: 1px solid rgb(255 255 255 / .6); }
.boton--claro:hover { background: rgb(255 255 255 / .12); }
.hero-onp .boton--acento { background: var(--acento); color: #10281f !important; border-color: var(--acento); }
.cuando-cobro { display: grid; gap: 12px; padding: 24px; border-radius: 18px; background: #fff; color: var(--tinta); box-shadow: 0 18px 40px rgb(20 10 35 / .35); border-top: 6px solid var(--acento); }
.cuando-cobro h2 { margin: 0; font-size: 1.5rem; color: var(--primario-oscuro); }
.cuando-cobro > p:first-of-type { margin: -8px 0 0; color: var(--tenue); font-size: .9rem; }
.cuando-cobro label { display: grid; gap: 5px; font-size: .85rem; font-weight: 600; color: var(--tenue); }
.cuando-cobro input, .cuando-cobro select { padding: 11px 12px; border: 1px solid var(--linea); border-radius: 10px; font: inherit; font-size: 1.05rem; color: var(--tinta); background: #fff; }
.cuando-cobro input { text-transform: uppercase; width: 5em; text-align: center; font-weight: 700; }
.cuando-cobro__resultado { min-height: 1.5em; margin: 0; padding: 0; font-size: 1.1rem; color: var(--primario-oscuro); }
.cuando-cobro__resultado strong { color: #1d7a5e; }
.cuando-cobro .nota { margin: 0; font-size: .8rem; }
@media (max-width: 900px) { .hero-onp__rejilla { grid-template-columns: 1fr; gap: 24px; } .hero-onp { padding-bottom: 120px; } .hero-onp::after { height: 130px; } }

/* Portada: próximas fechas de pago */
.crono-meses { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 14px; }
.crono-mes { padding: 18px 20px; border-radius: 16px; background: var(--superficie, #fff); border: 1px solid var(--linea); }
.crono-mes:first-child { background: var(--suave); border-color: #d9cbe8; }
.crono-mes h3 { margin: 0 0 10px; font-family: var(--letra-titulos, Georgia, serif); font-size: 1.3rem; color: var(--primario); }
.crono-mes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.crono-mes li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--linea); font-weight: 600; }
.crono-mes li:last-child { border-bottom: 0; font-weight: 400; color: var(--tenue); font-size: .9rem; }
.crono-mes li span { color: var(--tenue); font-weight: 400; }
#cronograma { padding-top: 34px; }

/* Portada: tipos de sede */
.tipos-sede { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.tipo-sede { display: grid; gap: 2px; align-content: start; padding: 16px 18px; border-radius: 14px; background: var(--superficie, #fff); border: 1px solid var(--linea); border-left: 5px solid var(--primario); color: var(--tinta); text-decoration: none; }
.tipo-sede strong { font-family: var(--letra-titulos, Georgia, serif); font-size: 2rem; color: var(--primario); line-height: 1.1; }
.tipo-sede span { font-weight: 700; }
.tipo-sede small { color: var(--tenue); font-size: .85rem; }
a.tipo-sede:hover { border-color: var(--acento); border-left-color: var(--acento); }

/* Distrito: sedes + recuadro del pago del mes */
.distrito-onp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.sedes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.sede { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 14px; background: var(--superficie, #fff); border: 1px solid var(--linea); scroll-margin-top: 16px; }
.sede:target { box-shadow: 0 0 0 3px var(--acento); }
.sede__tipo { width: fit-content; padding: 2px 10px; border-radius: 99px; background: var(--primario); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sede h3 { margin: 0; font-size: 1.08rem; color: var(--primario-oscuro); }
.sede__datos { margin: 0; display: grid; gap: 6px; }
.sede__datos div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; font-size: .92rem; }
.sede__datos dt { color: var(--tenue); }
.sede__datos dd { margin: 0; }
.sede__acciones { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.boton--chico { padding: 6px 12px; font-size: .88rem; }
.boton--suave { background: var(--suave); color: var(--primario-oscuro) !important; border-color: #d9cbe8; }
.pago-mes { position: sticky; top: 16px; padding: 20px; border-radius: 16px; background: linear-gradient(165deg, var(--primario-oscuro), var(--primario)); color: #fff; }
.pago-mes h2 { margin: 0 0 4px; font-size: 1.2rem; color: #fff; }
.pago-mes > p { margin: 0 0 12px; color: rgb(255 255 255 / .78); font-size: .86rem; }
.pago-mes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pago-mes li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: rgb(255 255 255 / .1); }
.pago-mes li strong { color: #bff0de; }
.pago-mes .nota { margin: 12px 0 0; }
.pago-mes .nota a { color: #bff0de; }
.mapa-onp .mapa-distrito { min-height: 340px; border-radius: 14px; border: 1px solid var(--linea); overflow: hidden; z-index: 0; }
.mapa-onp .mapa iframe { width: 100%; height: 300px; border: 0; border-radius: 14px; display: block; }
@media (max-width: 900px) { .distrito-onp { grid-template-columns: 1fr; } .pago-mes { position: static; } }

/* Cronograma completo */
.tabla--crono th[scope="row"] { background: var(--suave); text-transform: capitalize; }
.tabla--crono td { white-space: nowrap; }
.tabla--crono tbody tr:nth-child(even) td { background: #faf8fc; }

/* Guías: resumen en ficha */
.servicio-oficial .boton { background: var(--acento); color: #10281f !important; border-color: var(--acento); }

/* ===================== ONP en Línea: estructura al estilo afpenlinea.cl, con diseño propio ===================== */
.cabeza-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 6px 30px; margin-bottom: 16px; }
.cabeza-seccion h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.cabeza-seccion p { margin: 0; max-width: 470px; color: var(--tenue); }
.seccion--tinte { position: relative; }
.seccion--tinte::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); background: var(--suave); z-index: -1; }
#tipos { padding-block: 40px; }

/* Portada: buscador dentro del héroe */
.hero-onp .buscador { margin-top: 4px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgb(20 10 35 / .3); grid-template-columns: 1.3fr 1fr 1fr auto; }
.hero-onp .buscador__campo span { color: var(--tenue); }
.hero-onp__privado { margin: 10px 0 18px; font-size: .82rem; color: rgb(255 255 255 / .72); }
.hero-onp__cifras { margin-bottom: 0; }
@media (max-width: 900px) { .hero-onp .buscador { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hero-onp .buscador { grid-template-columns: 1fr; } }

/* Tipos de sede como tarjetas de marca */
.tipo-sede em { margin-top: 8px; font-style: normal; font-weight: 700; font-size: .88rem; color: var(--primario); }
.tipos-sede { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Cronograma: texto + tabla */
.crono-onp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; padding-block: 44px; }
.crono-onp__texto h2 { margin-top: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.crono-onp__texto > p { color: var(--tinta); line-height: 1.7; }
.destacado { margin: 18px 0; padding: 16px 18px; border-radius: 14px; background: #e1f3ec; border: 1px solid #b5e0cf; }
.destacado strong { color: #155c47; }
.destacado p { margin: 6px 0 0; color: var(--tinta); font-size: .93rem; }
.crono-onp__tabla { padding: 20px; border-radius: 18px; background: var(--superficie, #fff); border: 1px solid var(--linea); box-shadow: 0 16px 36px rgb(47 28 71 / .1); }
.crono-onp__titulo { margin: 0 0 10px; font-weight: 700; color: var(--primario-oscuro); }
.crono-onp__tabla .tabla { border: 0; }
.crono-onp__tabla .tabla th[scope="row"] { background: transparent; color: var(--tinta); font-weight: 600; }
.crono-onp__tabla .tabla td { font-weight: 700; color: var(--primario); }
@media (max-width: 900px) { .crono-onp { grid-template-columns: 1fr; } }

/* Sedes por departamento, abiertas */
.ir-dep { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 16px; margin-bottom: 18px; border-radius: 14px; background: var(--superficie, #fff); border: 1px solid var(--linea); }
.ir-dep label { flex: 1 1 260px; display: grid; gap: 5px; font-weight: 700; font-size: .88rem; }
.ir-dep select { padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; font: inherit; background: #fff; }
.dep-grupos { display: grid; gap: 14px; }
.dep-grupo { padding: 18px 20px; border-radius: 16px; background: var(--superficie, #fff); border: 1px solid var(--linea); scroll-margin-top: 16px; }
.dep-grupo h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; font-family: var(--letra-titulos, Georgia, serif); font-size: 1.25rem; }
.dep-grupo h3 a { color: var(--primario-oscuro); text-decoration: none; }
.dep-grupo h3 a:hover { text-decoration: underline; }
.dep-grupo h3 small { font-family: var(--letra-texto); font-size: .85rem; font-weight: 400; color: var(--tenue); }
.distrito-celdas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.distrito-celda { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--fondo); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.distrito-celda strong { font-size: .93rem; color: var(--primario-oscuro); }
.distrito-celda span { flex: none; padding: 1px 8px; border-radius: 99px; background: var(--suave); color: var(--primario); font-size: .78rem; font-weight: 700; }
.distrito-celda:hover { border-color: var(--primario); }

/* ¿Cómo funciona? */
.info-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.info-tarjeta { padding: 22px; border-radius: 16px; background: var(--superficie, #fff); border: 1px solid var(--linea); border-top: 4px solid var(--acento); }
.info-tarjeta h3 { margin: 0 0 8px; font-family: var(--letra-titulos, Georgia, serif); font-size: 1.2rem; color: var(--primario-oscuro); }
.info-tarjeta p { margin: 0 0 10px; line-height: 1.65; }
.info-tarjeta a { color: var(--primario); font-weight: 600; }
@media (max-width: 760px) { .info-tarjetas { grid-template-columns: 1fr; } }

/* Llamada final */
.cta-oficial { display: grid; grid-template-columns: minmax(0, 1.6fr) auto; gap: 20px; align-items: center; padding: 28px 30px; border-radius: 20px; color: #fff; background-color: var(--primario-oscuro); background-image: var(--motivo), linear-gradient(140deg, var(--primario-oscuro), var(--primario)); background-size: 36px 36px, cover; }
.cta-oficial h2 { margin: 0 0 8px; color: #fff; }
.cta-oficial p { margin: 0; color: rgb(255 255 255 / .85); }
.cta-oficial__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-oficial .boton--acento { background: var(--acento); border-color: var(--acento); color: #10281f !important; }
@media (max-width: 760px) { .cta-oficial { grid-template-columns: 1fr; padding: 22px; } }

/* Tarjetas de sede (distrito, tipo de sede) */
.sedes-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sede-tarjeta { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: 14px; background: var(--superficie, #fff); border: 1px solid var(--linea); border-left: 5px solid var(--primario); color: var(--tinta); text-decoration: none; scroll-margin-top: 16px; }
.sede-tarjeta[hidden] { display: none; }
.sede-tarjeta:hover, .sede-tarjeta:target { border-color: var(--acento); border-left-color: var(--acento); }
.sede-tarjeta__tipo { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tenue); }
.sede-tarjeta strong { font-size: 1.05rem; color: var(--primario-oscuro); }
.sede-tarjeta__dir { display: grid; font-size: .92rem; }
.sede-tarjeta__dir small { color: var(--tenue); }
.sede-tarjeta__hoy { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 8px 10px; border-radius: 10px; background: var(--suave); font-size: .86rem; }
.sede-tarjeta__hoy span { color: var(--tenue); }
.sede-tarjeta__hoy strong { font-size: .88rem; color: var(--primario); }
.sede-tarjeta em { font-style: normal; font-weight: 700; font-size: .88rem; color: var(--primario); }
.filtro-dep { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; margin-bottom: 14px; }
.filtro-dep label { display: grid; gap: 5px; font-weight: 700; font-size: .88rem; }
.filtro-dep select { min-width: 260px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; font: inherit; background: #fff; }
.filtro-dep span { color: var(--tenue); padding-bottom: 10px; }
.banda__texto { max-width: 720px; color: rgb(255 255 255 / .85); }

/* Ficha de sede */
.ficha-banda__rejilla { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 30px; align-items: center; }
.ficha-banda__tipo { display: inline-block; margin: 6px 0 8px; padding: 3px 12px; border-radius: 99px; background: var(--acento); color: #10281f; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ficha-banda h1 { margin: 0 0 8px; }
.ficha-accesos { display: grid; gap: 10px; }
.ficha-acceso { display: grid; padding: 12px 16px; border-radius: 12px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .25); color: #fff !important; text-decoration: none; }
.ficha-acceso small { font-size: .74rem; opacity: .8; }
.ficha-acceso strong { font-size: 1.02rem; }
.ficha-acceso:hover { background: rgb(255 255 255 / .18); }
.ficha-acceso--tel { background: #fff; color: var(--primario-oscuro) !important; border-color: #fff; }
.ficha-sede { padding-block: 8px 20px; }
.datos-sede { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.dato-caja { padding: 20px; border-radius: 16px; background: var(--superficie, #fff); border: 1px solid var(--linea); }
.dato-caja h3 { margin: 0 0 12px; font-size: 1.05rem; color: var(--primario-oscuro); }
.dato-lista { margin: 0; display: grid; }
.dato-lista div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.dato-lista div:last-child { border-bottom: 0; }
.dato-lista dt { color: var(--tenue); font-size: .9rem; }
.dato-lista dd { margin: 0; font-weight: 600; }
.dato-lista dd small { display: block; margin-top: 3px; font-weight: 400; color: var(--tenue); font-size: .84rem; }
.dato-lista a { color: var(--primario); }
.dias { list-style: none; margin: 0; padding: 0; display: grid; }
.dias li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--linea); font-size: .93rem; }
.dias li:last-child { border-bottom: 0; }
.dias li.hoy { border-radius: 8px; background: #e1f3ec; border-left: 4px solid var(--acento); font-weight: 700; }
.dias li.hoy span::after { content: " · hoy"; color: #1d7a5e; font-size: .78rem; }
.que-es { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.que-es__texto { padding: 22px; border-radius: 16px; background: linear-gradient(160deg, var(--suave), #eef8f4); border: 1px solid var(--linea); }
.que-es__texto h2 { margin-top: 0; }
.enlaces-chip { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.enlaces-chip a { display: inline-block; padding: 6px 13px; border-radius: 99px; background: #fff; border: 1px solid var(--linea); color: var(--primario-oscuro); font-weight: 600; font-size: .9rem; text-decoration: none; }
.enlaces-chip a:hover { border-color: var(--primario); }
.que-es .pago-mes { position: static; }
.mapa-sede { padding: 0; border-radius: 18px; overflow: hidden; background: var(--superficie, #fff); border: 1px solid var(--linea); }
.mapa-sede__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; }
.mapa-sede__cabeza h2 { margin: 0 0 6px; }
.mapa-sede__cabeza p { margin: 0; }
.mapa-sede__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.mapa-sede .mapa iframe { display: block; width: 100%; height: 340px; border: 0; }
.mapa-sede > .nota, .mapa-sede .enlace-tipo { margin: 0; padding: 12px 22px; }
.enlace-tipo a { color: var(--primario); font-weight: 700; text-decoration: none; }
.visita { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.visita__item { padding: 18px; border-radius: 14px; background: var(--superficie, #fff); border: 1px solid var(--linea); border-top: 4px solid var(--primario); }
.visita__item:last-child { border-top-color: var(--acento); }
.visita__item strong { color: var(--primario-oscuro); }
.visita__item p { margin: 6px 0 0; color: var(--tinta); font-size: .93rem; }
.tramites-oscuro { padding: 26px; border-radius: 20px; background: var(--primario-oscuro); color: #fff; }
.tramites-oscuro h2 { margin-top: 0; color: #fff; }
.tramites-oscuro > p { color: rgb(255 255 255 / .8); }
.tramites-cuadros { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.tramites-cuadros a { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 12px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); color: #fff; font-weight: 700; text-decoration: none; }
.tramites-cuadros a small { font-weight: 400; font-size: .74rem; color: #bff0de; text-transform: uppercase; letter-spacing: .05em; }
.tramites-cuadros a:hover { background: rgb(255 255 255 / .16); }
@media (max-width: 900px) { .ficha-banda__rejilla, .datos-sede, .que-es { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dato-lista div { grid-template-columns: 1fr; gap: 2px; } }

/* Guías: secciones numeradas, como pasos */
.guia-texto .articulo { counter-reset: paso; }
.guia-texto .articulo h2 { counter-increment: paso; display: flex; align-items: baseline; gap: 12px; padding-top: 18px; border-top: 1px solid var(--linea); }
.guia-texto .articulo h2::before { content: counter(paso, decimal-leading-zero); flex: none; font-family: var(--letra-texto); font-size: .9rem; font-weight: 800; color: #1d7a5e; padding: 2px 8px; border-radius: 8px; background: #e1f3ec; }

/* Ajustes tras revisión */
.cerca-sedes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cerca-sede { display: grid; gap: 3px; padding: 14px 16px; border-radius: 12px; background: var(--superficie, #fff); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.cerca-sede small { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.cerca-sede strong { color: var(--primario-oscuro); font-size: .98rem; }
.cerca-sede span { color: var(--tenue); font-size: .86rem; }
.cerca-sede:hover { border-color: var(--primario); }
.hero-onp h1 { font-size: clamp(2rem, 3.6vw, 2.7rem); }
.hero-onp .buscador { grid-template-columns: 1fr 1fr auto; }
.hero-onp .buscador__campo--nombre { grid-column: 1 / -1; }
#tramites { margin-top: 34px; }
#tramites > h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
@media (max-width: 560px) { .hero-onp .buscador { grid-template-columns: 1fr; } }
.guia-texto .articulo:not(:has(h2 ~ h2)) h2::before { content: none; }
@media (max-width: 700px) {
  .cabecera__fila { flex-wrap: wrap; row-gap: 6px; }
  .cabecera__fila nav { width: 100%; display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; white-space: nowrap; padding-bottom: 6px; scrollbar-width: none; }
  .cabecera__fila nav::-webkit-scrollbar { display: none; }
  .cabecera__fila nav a, .cabecera__fila nav button { flex: none; }
}