/* Identidad propia de Agencias Perú: rojo ladrillo + amarillo de señal vial, motivo de línea discontinua de carretera. Sin colores de ninguna empresa. */
:root { --fondo: #faf6f3; --linea: #e8d8ce; --tinta: #2b1a14; --tenue: #6e5a50; --ok: #1e8e5a; }
body { --motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M0 30h14M24 30h14M48 30h12' stroke='white' stroke-opacity='.08' stroke-width='3' stroke-linecap='round'/%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(90 31 21 / .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, #f8efe9); }
.tramites-grupo:nth-of-type(3) .guia-tarjeta { background: linear-gradient(180deg, #fff, #fdf6e3); }
.tramites-grupo:nth-of-type(3) .guia-tarjeta__marca--icono { background: #f8e6bf; color: #8a5f0e; }

/* 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(90 31 21 / .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: #8a5f0e; 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(90 31 21 / .12); transition: transform .15s, box-shadow .15s; }
.acceso:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgb(90 31 21 / .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: #fbefd3; color: #8a5f0e; }
@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: #fbefd3; color: #8a5f0e; }

/* 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: #e3c9bb; }
.etiqueta--r { background: #fbefd3; 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: #e3c9bb; }
.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: #fbefd3; 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; } }

/* Portada: héroe con buscador de ruta */
.hero-bus { position: relative; overflow: hidden; color: #fff; padding: 44px 0 150px; background-color: var(--primario-oscuro); background-image: var(--motivo), linear-gradient(135deg, var(--primario-oscuro), var(--primario)); background-size: 60px 60px, cover; }
.hero-bus::after { content: ""; position: absolute; inset: auto 0 0 0; height: 220px; background: url("portada-fondo.svg") no-repeat center bottom / auto 100%; pointer-events: none; }
.hero-bus__rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.hero-bus__antetitulo { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.hero-bus h1 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.02em; }
.hero-bus__intro { margin: 0 0 20px; color: rgb(255 255 255 / .88); max-width: 620px; }
.buscador-ruta { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: end; padding: 16px; border-radius: calc(var(--radio) + 4px); background: #fff; color: var(--tinta); box-shadow: 0 14px 34px rgb(0 0 0 / .22); }
.buscador-ruta label { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.buscador-ruta select { padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); font: inherit; font-size: 1rem; color: var(--tinta); background: #fff; text-transform: none; letter-spacing: 0; }
.buscador-ruta__flecha { font-size: 1.4rem; font-weight: 800; color: var(--primario); padding-bottom: 8px; }
.buscador-ruta__resultado { min-height: 1.4em; margin-top: 10px; color: #fff; }
.buscador-ruta__resultado a { color: var(--acento); }
.hero-bus__chips { margin-top: 12px; }
.hero-bus__cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-bus__cifras div { display: grid; padding: 16px; border-radius: var(--radio); background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22); }
.hero-bus__cifras strong { font-size: 2rem; line-height: 1.1; }
.hero-bus__cifras span { color: rgb(255 255 255 / .82); font-size: .9rem; }
@media (max-width: 900px) { .hero-bus__rejilla { grid-template-columns: 1fr; } .hero-bus { padding-bottom: 130px; } }
@media (max-width: 600px) { .buscador-ruta { grid-template-columns: 1fr; } .buscador-ruta__flecha { display: none; } }

/* Portada: tablero de salidas */
.tablero { border-radius: calc(var(--radio) + 4px); background: #1d1310; color: #f7e9c8; padding: 22px; box-shadow: 0 14px 30px rgb(0 0 0 / .18); }
.tablero__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.tablero__cabeza h2 { margin: 0; color: #fff; }
.tablero__cabeza span { color: #c9b38a; font-size: .9rem; }
.tablero__filas { display: grid; gap: 4px; }
.tablero__fila { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 6px; background: #2a1c17; color: #f7e9c8; text-decoration: none; font-family: ui-monospace, Consolas, monospace; }
.tablero__fila:hover { background: #3a2720; }
.tablero__ruta { font-weight: 700; color: var(--acento); letter-spacing: .04em; }
.tablero__ruta i { font-style: normal; color: #fff; }
.tablero__dato { color: #e9d7b0; font-size: .9rem; }
.tablero__ver { padding: 3px 10px; border-radius: 4px; background: var(--acento); color: #1d1310; font-weight: 700; font-size: .85rem; }
.tablero__nota { margin: 12px 0 0; color: #b39c74; font-size: .82rem; }
@media (max-width: 640px) { .tablero__fila { grid-template-columns: 1fr auto; } .tablero__dato:nth-of-type(3), .tablero__ver { display: none; } }

/* Portada: terminales */
.terminales-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.terminal-tarjeta { display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: var(--radio); background: var(--superficie, #fff); border: 1px solid var(--linea); border-left: 5px solid var(--acento); color: var(--tinta); text-decoration: none; }
.terminal-tarjeta:hover { border-color: var(--primario); }
.terminal-tarjeta__lugar { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.terminal-tarjeta strong { color: var(--primario); }
.terminal-tarjeta__n { font-weight: 700; }
.terminal-tarjeta__emp { color: var(--tenue); font-size: .88rem; }
@media (max-width: 900px) { .terminales-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .terminales-rejilla { grid-template-columns: 1fr; } }

/* Portada: flota en barras */
.flota { display: grid; gap: 6px; }
.flota__fila { display: grid; grid-template-columns: 170px 1fr 90px 80px 100px; gap: 12px; align-items: center; padding: 9px 12px; border-radius: var(--radio); background: var(--superficie, #fff); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.flota__fila:hover { border-color: var(--primario); }
.flota__nombre { font-weight: 700; color: var(--primario); }
.flota__barra { height: 12px; border-radius: 99px; background: var(--suave); overflow: hidden; }
.flota__barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primario), var(--acento)); }
.flota__n { font-weight: 700; text-align: right; }
.flota__edad, .flota__ag { color: var(--tenue); font-size: .88rem; text-align: right; }
@media (max-width: 760px) { .flota__fila { grid-template-columns: 1fr 1fr; } .flota__barra { grid-column: 1 / -1; order: 3; } .flota__edad, .flota__ag { display: none; } }

/* Portada: departamentos por zonas */
.zonas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.zona { padding: 14px 16px; border-radius: var(--radio); background: var(--superficie, #fff); border: 1px solid var(--linea); border-top: 4px solid var(--primario); }
.zona h3 { margin: 0 0 8px; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; color: var(--primario); }
.zona ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.zona li { display: flex; justify-content: space-between; gap: 8px; }
.zona li a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.zona li a:hover { color: var(--primario); text-decoration: underline; }
.zona li span { color: var(--tenue); font-size: .85rem; }
@media (max-width: 1000px) { .zonas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .zonas { grid-template-columns: 1fr 1fr; } }

/* Distrito: mapa conjunto y fichas compactas agrupadas */
.mapa-bus .mapa-distrito { min-height: 360px; border-radius: var(--radio); border: 1px solid var(--linea); overflow: hidden; z-index: 0; }
.mapa-uno .mapa iframe { width: 100%; height: 300px; border: 0; border-radius: var(--radio); display: block; }
.grupo-agencias h2 span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; margin-left: 6px; padding: 0 8px; border-radius: 99px; background: var(--suave); color: var(--primario); font-size: .9rem; vertical-align: middle; }
.agencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.agencia { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: var(--radio); background: var(--superficie, #fff); border: 1px solid var(--linea); border-top: 4px solid var(--primario); }
.agencia[data-terminal="1"] { border-top-color: var(--acento); }
.agencia:target { box-shadow: 0 0 0 3px var(--acento); }
.agencia__cabeza h3 { margin: 0 0 6px; font-size: 1.02rem; }
.agencia__cabeza .estado { margin: 6px 0 0; font-size: .85rem; }
.agencia p { margin: 0; }
.agencia__dir, .agencia__horario { display: flex; gap: 6px; align-items: flex-start; color: var(--tinta); font-size: .92rem; }
.agencia__dir svg, .agencia__horario svg { flex: none; margin-top: 3px; color: var(--primario); }
.agencia__horario { color: var(--tenue); }
.agencia__dentro { font-size: .85rem; color: var(--tenue); font-style: italic; }
.agencia__acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px !important; }
.boton--chico { padding: 6px 12px; font-size: .88rem; }
.agencia__empresa { font-size: .88rem; color: var(--primario); font-weight: 600; }