html,body{max-width:100%;overflow-x:clip}*,*::before,*::after{box-sizing:border-box}.container,:where(main,section,article,aside,nav,header,footer,div){min-width:0}:where(img,svg,video,iframe){max-width:100%}
:where(.section,.institution,.prevention,.news,.faq,.contact,.public-directory,.entity-directory,.site-map-directory,.news-archive,.contact-channels,.location-section,.arrival-guide,.contact-request,.cap-section,.cap-summary,.index-capacity){overflow:clip;overflow-clip-margin:0}
:where(.institution-grid,.services-grid,.news-grid,.public-grid,.rules-list,.site-map-grid,.contact-channel-grid,.arrival-steps,.archive-grid,.cap-grid,.cap-people,.cap-summary__grid,.index-capacity__features)>*{min-width:0;max-width:100%}
:where(.institution-grid,.services-grid,.news-grid,.public-grid,.rules-list,.site-map-grid,.contact-channel-grid,.arrival-steps,.archive-grid,.cap-grid,.cap-people){padding-top:10px;padding-bottom:22px}
.motion-card{overflow:hidden!important;background-clip:padding-box;transform-origin:center}.motion-card__accent{top:0!important;right:14px!important;left:14px!important;max-width:calc(100% - 28px)!important;overflow:hidden!important}.motion-card :where(.material-symbols-rounded,svg,img){transform-origin:center}
:where(.button,button,[role="button"],.cap-card__action,.text-link,.service-card a,.public-card a,.rule-card a,.site-map-card,.route-options a,.google-map-actions a){max-width:100%;min-height:44px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}:where(.button,button,[role="button"]){touch-action:manipulation}:where(.button,.cap-card__action,.text-link,.service-card a,.public-card a){gap:8px}
:where(h1,h2,h3,h4,p,strong,small,a,span,address){max-width:100%}:where(.contact-channel-card strong,.brand__text,.entity-topic summary strong,.cap-card h2,.cap-card h3,.public-card h3){overflow-wrap:anywhere}
@media(min-width:1051px) and (max-width:1280px){.navbar__content{gap:14px}.nav-menu{gap:11px}.nav-menu>a:not(.button),.nav-public{font-size:.78rem}.brand{gap:9px}.brand__text strong{font-size:.72rem}.brand__text small{font-size:.66rem}.brand .institutional-logo{inline-size:54px;block-size:54px;min-inline-size:54px;max-inline-size:54px}.nav-public>div{min-width:260px}}
@media(max-width:1050px){.nav-menu{max-width:100%;overflow-x:hidden}.nav-menu>a:not(.button),.nav-public summary,.nav-public>div a{width:100%;min-width:0}.nav-public>div{max-width:100%}}
@media(max-width:720px){.services-grid{margin-right:0!important;padding:8px 4px 16px!important;overscroll-behavior-inline:contain}.service-card{flex-basis:min(84vw,330px)}.motion-card__accent{right:10px!important;left:10px!important;max-width:calc(100% - 20px)!important}:where(.hero__actions,.emergency-strip__actions,.google-map-actions,.contact-hero__actions){max-width:100%}:where(.hero__actions,.emergency-strip__actions) .button{width:100%}}
@media(prefers-reduced-motion:reduce){.motion-card,.motion-card__accent,:where(.button,button,a){transition-duration:.01ms!important;animation-duration:.01ms!important}.motion-card:hover,.motion-card:focus-within{transform:none!important}}
.a11y-high-contrast :where(.motion-card,.button,button,[role="button"]){outline-offset:3px}@supports not (overflow:clip){html,body{overflow-x:hidden}}
/* Endurecimiento responsivo final para publicación multiplataforma. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}body{min-height:100vh;min-height:100dvh}:where(main,header,footer,section,nav,article,aside,form){max-width:100%}:where(input,select,textarea,fieldset){min-width:0;max-width:100%}
@media(max-width:1050px){.site-header,.navbar,.navbar__content{max-width:100vw}.brand{max-width:calc(100% - 58px)}.brand__text{min-width:0}.brand__text strong,.brand__text small{overflow-wrap:anywhere}.nav-menu{contain:layout paint;transform-origin:top center}.nav-menu :where(a,summary,button){touch-action:manipulation}}
@media(max-width:720px){input,select,textarea{font-size:16px!important}.container{max-width:100%}:where(.section-heading,.hero__copy,.contact-hero__grid,.public-hero__grid,.entity-hero__grid,.cap-hero__grid)>*{min-width:0}.footer{padding-bottom:calc(24px + env(safe-area-inset-bottom))}.hando-assistant{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 96px)!important}}
@media(max-width:360px){.container{width:calc(100% - 18px)!important}.brand{gap:7px}.brand__text strong{font-size:.58rem!important}.brand__text small{font-size:.57rem!important}.institutional-logo{width:46px!important;height:46px!important}.menu-toggle{width:42px!important;height:42px!important;flex-basis:42px!important}}
@media(hover:none),(pointer:coarse){:where(.motion-card,.institution-card,.service-card,.news-card,.site-map-card,.public-card,.contact-channel-card):hover{transform:none!important}.motion-card:hover{box-shadow:var(--card-shadow-rest,0 10px 30px rgba(7,24,45,.055))!important}.motion-card.is-motion-selected>.motion-card__accent::after,.motion-card:active>.motion-card__accent::after{transform:scaleX(1)}:where(a,button,summary,[role="button"]){min-height:44px}}
@media(update:slow),(prefers-reduced-data:reduce){.motion-card,.motion-card *,.reveal,.navbar,.nav-menu{animation:none!important;transition-duration:160ms!important}.hero::after,.dispatch-card::before{display:none!important}}
@media(forced-colors:active){.nav-menu{border:2px solid CanvasText!important;background:Canvas!important;color:CanvasText!important}.nav-menu a,.nav-public summary{color:LinkText!important}body.menu-open::before{background:rgba(0,0,0,.55)!important}}
@supports not (overflow:clip){.design-card,main,main>section{overflow:hidden}}
/* v84 — relación responsiva entre panel y lanzador de Hando. */
@media(max-width:600px){
.hando-launcher{right:max(12px,env(safe-area-inset-right))!important;bottom:max(12px,env(safe-area-inset-bottom))!important}
.hando-assistant{right:8px!important;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 88px)!important;left:8px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - max(12px,env(safe-area-inset-bottom)) - 104px)!important;transform-origin:right bottom!important}
}
@media(max-width:600px) and (max-height:620px){
.hando-launcher{width:64px!important;height:64px!important;padding:4px!important}
.hando-launcher__portrait{width:54px!important;height:54px!important}
.hando-launcher__portrait img{width:60px!important;height:60px!important}
.hando-assistant{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 76px)!important;max-height:calc(100dvh - max(8px,env(safe-area-inset-bottom)) - 88px)!important;border-radius:20px!important}
.hando-assistant__messages{min-height:112px!important}
}
@media(max-width:360px){
.hando-assistant{right:6px!important;left:6px!important}
}
@supports not (height:100dvh){
@media(max-width:600px){.hando-assistant{max-height:calc(100vh - max(12px,env(safe-area-inset-bottom)) - 104px)!important}}
}
/* v86 — sistema responsivo específico para tabletas (vertical y horizontal). */
@media(min-width:721px) and (max-width:1050px){
.container{width:min(calc(100% - 40px),var(--container))!important}
.accessibility-bar{padding:6px 0!important;background:#f4f7fa!important}
.accessibility-bar__inner{display:block!important;min-height:0!important;padding:0!important;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(7,24,45,.05)}
.accessibility-bar>.container{width:min(calc(100% - 28px),var(--container))!important}
.accessibility-bar__label{display:none!important}
.accessibility-bar button.accessibility-bar__toggle{display:flex!important;width:100%!important;min-height:48px!important;align-items:center;justify-content:flex-start;gap:10px;padding:7px 10px!important;border:0!important;border-radius:12px!important;background:#fff!important;color:var(--navy)!important;text-align:left;white-space:nowrap}
.accessibility-bar__toggle-icon{display:grid;width:32px;height:32px;flex:0 0 32px;place-items:center;border-radius:9px;background:#fdecee;color:var(--red);font-size:.74rem;font-weight:900}
.accessibility-bar__toggle-title{font-size:.78rem;font-weight:850}
.accessibility-bar__chevron{display:block;width:20px;height:20px;flex:0 0 20px;margin-left:auto;transition:transform .25s var(--ease-smooth)}
.accessibility-bar__toggle[aria-expanded="true"] .accessibility-bar__chevron{transform:rotate(180deg)}
.accessibility-bar__panel{display:none!important;padding:9px!important;border-top:1px solid var(--line)}
.accessibility-bar.is-open .accessibility-bar__panel{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;animation:a11y-menu-open .26s var(--ease-smooth)}
.accessibility-bar__controls,.accessibility-bar__links{display:grid!important;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0!important;padding:0!important}
.accessibility-bar button,.accessibility-bar a{width:100%;min-width:0;min-height:44px;justify-content:center;padding:6px!important;font-size:.68rem;line-height:1.12;text-align:center;white-space:normal}
.hero{padding-block:clamp(58px,8vw,82px)!important}
.hero__content{grid-template-columns:minmax(0,1fr)!important;gap:34px!important}
.hero__copy,.dispatch-card{width:100%;max-width:none!important}
.hero h1{max-width:820px;font-size:clamp(3rem,7.2vw,4.8rem)!important}
.hero__copy>p{max-width:760px}
.hero__actions{margin-top:28px}
.hero__trust{margin-top:28px}
.dispatch-card__body{padding:32px 28px 36px}
:where(.institution-grid,.services-grid,.news-grid,.public-grid,.site-map-grid,.contact-channel-grid,.arrival-steps,.archive-grid,.cap-grid,.cap-people){grid-template-columns:repeat(2,minmax(0,1fr))!important}
:where(.contact-hero__grid,.public-hero__grid,.entity-hero__grid,.cap-hero__grid,.location-layout,.contact-request__layout){grid-template-columns:minmax(0,1fr)!important;gap:36px!important}
:where(.contact-emergency,.entity-hero__visual,.public-hero__symbol,.cap-hero__visual){width:100%;max-width:none!important}
}
@media(min-width:900px) and (max-width:1050px) and (orientation:landscape){
.hero__content{grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr)!important;gap:clamp(30px,4vw,52px)!important;align-items:center}
.hero h1{font-size:clamp(2.8rem,4.6vw,4.25rem)!important}
.dispatch-card__body{padding:28px 25px 31px}
:where(.contact-hero__grid,.public-hero__grid,.entity-hero__grid,.cap-hero__grid,.location-layout){grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr)!important;gap:clamp(30px,4vw,48px)!important}
.contact-request__layout{grid-template-columns:minmax(0,.8fr) minmax(440px,1.2fr)!important}
}
@media(min-width:721px) and (max-width:899px) and (orientation:landscape){
.hero__actions .button{flex:1 1 190px}
.dispatch-card__footer div{padding-inline:8px}
}
/* v87 — corrección candidata: encabezado operable sobre herramientas adhesivas. */
@media(max-width:1050px){
.site-header{display:block!important;position:sticky!important;top:0!important;z-index:7000!important;width:100%;overflow:visible!important}
.site-header .navbar{position:relative!important;top:auto!important;z-index:1!important;overflow:visible!important}
.site-header .navbar__content{overflow:visible!important}
html.menu-locked,body.menu-open{overflow-x:clip!important;overflow-y:visible!important;overscroll-behavior:none!important}
body.menu-open .news-tools{visibility:hidden!important;opacity:0!important;pointer-events:none!important;transform:translateY(-8px)!important}
}
/* v88 — contrato global de simetría y límites visuales. */
:root{--visual-icon-sm:44px;--visual-icon-md:58px;--visual-icon-lg:64px;--visual-motion-lift:-3px;--visual-motion-scale:1.045;--visual-boundary-pad:10px}
:where(.visual-icon,[data-ui-icon],.quick-actions__icon,.stat-symbol,.stat-icon,.card-number,.mission-pattern-icon,.public-card__icon,.rule-card__icon,.entity-group__icon,.entity-topic__icon,.contact-emergency__icon,.contact-channel-card>.material-symbols-rounded,.location-map__badge>.material-symbols-rounded,.route-options>a>.material-symbols-rounded,.arrival-steps li>span,.site-map-card>span){
box-sizing:border-box!important;
flex:none!important;
aspect-ratio:1/1!important;
align-self:center;
place-items:center;
line-height:1!important;
transform-origin:center!important;
backface-visibility:hidden;
-webkit-font-smoothing:antialiased;
}
[data-ui-icon]{display:grid;inline-size:var(--ui-icon-size,var(--visual-icon-md));block-size:var(--ui-icon-size,var(--visual-icon-md));max-inline-size:100%;overflow:visible}
:where(.visual-icon,[data-ui-icon])>:is(img,svg){display:block;inline-size:min(76%,48px);block-size:min(76%,48px);max-inline-size:100%;max-block-size:100%;object-fit:contain}
:where(.design-card,.motion-card,[data-visual-boundary]){position:relative;isolation:isolate;max-inline-size:100%;min-inline-size:0;background-clip:padding-box;overflow:hidden!important}
:where(.design-card,.motion-card,[data-visual-boundary])>*{min-inline-size:0;max-inline-size:100%}
:where(.design-card,.motion-card) :where(h1,h2,h3,h4,p,strong,small,span:not(.material-symbols-rounded)){overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){
:where(.design-card,.motion-card):is(:hover,:focus-within)>.visual-icon{
transform:translateY(var(--visual-motion-lift)) rotate(-4deg) scale(var(--visual-motion-scale))!important;
}
}
:where(.design-card,.motion-card).is-motion-selected>.visual-icon{
transform:translateY(var(--visual-motion-lift)) rotate(-4deg) scale(var(--visual-motion-scale))!important;
}
:where(.button,button,[role="button"],summary,.quick-actions__grid>a,.route-options>a,.google-map-actions a){box-sizing:border-box;max-inline-size:100%;min-inline-size:0}
:where(.button,button,[role="button"]){align-items:center;justify-content:center}
[data-responsive-grid]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--responsive-grid-min,260px)),1fr));gap:var(--responsive-grid-gap,18px);align-items:stretch}
[data-responsive-grid]>*{min-inline-size:0;max-inline-size:100%}
@media(max-width:720px){
:root{--visual-icon-md:54px;--visual-icon-lg:58px;--visual-boundary-pad:8px}
[data-ui-icon]{inline-size:clamp(var(--visual-icon-sm),15vw,var(--visual-icon-md));block-size:clamp(var(--visual-icon-sm),15vw,var(--visual-icon-md))}
}
@media(min-width:721px) and (max-width:1050px){
:root{--visual-icon-md:56px;--visual-icon-lg:62px}
[data-responsive-grid]{--responsive-grid-min:240px}
}
@media(prefers-reduced-motion:reduce){:where(.design-card,.motion-card)>.visual-icon{transform:none!important}}
/* v90 — firma institucional: conserva la composición horizontal original. */
.brand{align-items:center!important;flex:0 0 auto!important;flex-wrap:nowrap!important}
.brand__text{display:grid!important;min-inline-size:0;max-inline-size:none!important;overflow:visible!important}
.brand__text strong,.brand__text small{max-inline-size:none!important;overflow-wrap:normal!important;word-break:normal!important;white-space:nowrap!important}
.brand .institutional-logo{flex:none!important;aspect-ratio:1/1;object-fit:contain!important}
@media(max-width:390px){
.brand__text strong{font-size:clamp(.54rem,2.45vw,.62rem)!important;letter-spacing:.02em!important}
.brand__text small{font-size:clamp(.54rem,2.3vw,.6rem)!important}
}
@media(max-width:330px){
:root{--header-logo-size:44px;--header-brand-gap:6px}
.brand .institutional-logo{inline-size:44px!important;block-size:44px!important;min-inline-size:44px!important;max-inline-size:44px!important}
.brand__text strong{font-size:.51rem!important;letter-spacing:.01em!important}
.brand__text small{font-size:.52rem!important}
}
@media(min-width:1281px) and (max-width:1500px){
.nav-menu{gap:13px!important}
.nav-menu>a:not(.button),.nav-public{font-size:.86rem!important}
}
/* v91 — reserva cuadrada real para iconos de normatividad en móvil. */
@media(max-width:430px){
.rule-card{grid-template-columns:54px minmax(0,1fr)!important;column-gap:14px!important}
.rule-card__icon{inline-size:54px!important;block-size:54px!important;min-inline-size:54px!important;max-inline-size:54px!important}
}
/* v93 — contenido a la izquierda e iconografía equilibrada a la derecha. */
:root{
--content-card-title-size:clamp(1.12rem,1rem + .3vw,1.38rem);
--content-card-body-size:clamp(.92rem,.88rem + .14vw,1.02rem);
}
:where(
[data-card-layout="content"],
.institution-card,.service-card,.news-card,.public-card,.rule-card,
.site-map-card,.contact-channel-card,.arrival-steps li,.archive-card,
.entity-group,.featured-story,.access-card,.content-card,.transparency-card,
.cap-card,.cap-role,.public-note,.entity-guidance,.contact-emergency,
.site-map-accessible,.cap-summary article,.index-capacity__features>span
){
text-align:start!important;
}
:where(
[data-card-layout="content"],
.institution-card,.service-card,.news-card,.public-card,.rule-card,
.site-map-card,.contact-channel-card,.arrival-steps li,.archive-card,
.entity-group,.featured-story,.access-card,.content-card,.transparency-card,
.cap-card,.cap-role,.public-note,.entity-guidance,.contact-emergency,
.site-map-accessible,.cap-summary article,.index-capacity__features>span
) :where(h2,h3,h4,p,small,strong,.eyebrow,.tag,.text-link,.button){
text-align:start!important;
min-inline-size:0;
max-inline-size:100%;
}
:where(
[data-card-layout="content"],
.institution-card,.service-card,.public-card,.contact-channel-card,
.arrival-steps li,.content-card,.transparency-card,.cap-card,.cap-role,
.public-note,.entity-guidance,.cap-summary article
) :where(h2,h3,h4){
font-size:var(--content-card-title-size)!important;
line-height:1.22!important;
text-wrap:balance;
}
:where(
[data-card-layout="content"],
.institution-card,.service-card,.public-card,.contact-channel-card,
.arrival-steps li,.content-card,.transparency-card,.cap-card,.cap-role,
.public-note,.entity-guidance,.cap-summary article
) p{
font-size:var(--content-card-body-size)!important;
line-height:1.58!important;
}
/* La caja del icono conserva su propio centrado aunque la tarjeta use eje izquierdo. */
:where([data-card-icon-position="end"]>.visual-icon,.visual-icon,[data-ui-icon]){
text-align:center!important;
flex:none!important;
}
@media(max-width:720px){
:root{
--content-card-title-size:clamp(1.05rem,4.8vw,1.2rem);
--content-card-body-size:clamp(.9rem,4vw,.98rem);
}
}
/* v92 — contrato de tarjetas: placa visual en el extremo superior derecho. */
:root{--content-card-icon-size:62px;--content-card-icon-gap:20px}
:where(
.service-card>.card-number,
.institution-card>.card-number,
.cap-card>.cap-card__icon,
.cap-card>.mission-pattern-icon,
.cap-role>.mission-pattern-icon,
.public-card>.public-card__icon,
.contact-channel-card>.material-symbols-rounded,
[data-card-icon-position="end"]>.visual-icon
){
align-self:flex-end!important;
justify-self:end!important;
margin-right:0!important;
margin-left:auto!important;
}
.service-card>.card-number{margin-bottom:clamp(20px,2.4vw,28px)!important}
.institution-card{flex-direction:column!important;gap:var(--content-card-icon-gap)!important}
.institution-card>.card-number{margin-bottom:0!important}
.institution-card>div{width:100%;min-width:0}
.cap-card>.cap-card__icon,.cap-card>.mission-pattern-icon,.cap-role>.mission-pattern-icon{margin-bottom:var(--content-card-icon-gap)!important}
.public-card>.public-card__icon{margin-top:22px!important;margin-bottom:18px!important}
.contact-channel-card>.material-symbols-rounded{margin-bottom:22px!important}
:where(.service-card,.institution-card,.cap-card,.cap-role,.public-card,.contact-channel-card) :where(h2,h3){
max-width:100%;
font-size:clamp(1.18rem,1rem + .32vw,1.38rem)!important;
line-height:1.2!important;
text-wrap:balance;
}
:where(.service-card,.institution-card,.cap-card,.cap-role,.public-card,.contact-channel-card) p{
font-size:clamp(.94rem,.9rem + .12vw,1.02rem)!important;
line-height:1.58!important;
}
/* Tarjetas horizontales: texto primero, icono a la derecha y acción al final. */
.site-map-card{grid-template-columns:minmax(0,1fr) 58px auto!important}
.site-map-card>div{grid-column:1;grid-row:1}
.site-map-card>span{grid-column:2;grid-row:1;justify-self:end}
.site-map-card>i{grid-column:3;grid-row:1}
.rule-card{grid-template-columns:52px minmax(0,1fr) 74px auto!important}
.rule-card__number{grid-column:1;grid-row:1}
.rule-card>div:not(.rule-card__icon){grid-column:2;grid-row:1}
.rule-card>.rule-card__icon{grid-column:3;grid-row:1;justify-self:end!important;margin-left:auto!important}
.rule-card>.rule-card__state{grid-column:4;grid-row:1}
@media(max-width:720px){
:root{--content-card-icon-size:54px;--content-card-icon-gap:16px}
:where(.service-card,.institution-card,.cap-card,.cap-role,.public-card,.contact-channel-card){padding:clamp(21px,5.5vw,25px)!important}
.site-map-card{grid-template-columns:minmax(0,1fr) 52px auto!important}
.rule-card{grid-template-columns:42px minmax(0,1fr) 54px!important}
.rule-card>.rule-card__state{grid-column:2;grid-row:2;justify-self:start}
}
@media(max-width:430px){
.rule-card{grid-template-columns:minmax(0,1fr) 54px!important;row-gap:14px!important}
.rule-card__number{grid-column:1;grid-row:1;align-self:center}
.rule-card>.rule-card__icon{grid-column:2;grid-row:1}
.rule-card>div:not(.rule-card__icon){grid-column:1/-1;grid-row:2}
.rule-card>.rule-card__state{grid-column:1/-1;grid-row:3}
}
/* v94 — única modificación visual: placas de iconos al extremo izquierdo. */
:where(
.service-card>.card-number,
.institution-card>.card-number,
.cap-card>.cap-card__icon,
.cap-card>.mission-pattern-icon,
.cap-role>.mission-pattern-icon,
.public-card>.public-card__icon,
.contact-channel-card>.material-symbols-rounded,
[data-card-icon-position="start"]>.visual-icon
){
align-self:flex-start!important;
justify-self:start!important;
margin-left:0!important;
margin-right:auto!important;
}
/* En tarjetas horizontales el icono abre la lectura desde la izquierda. */
.site-map-card{grid-template-columns:58px minmax(0,1fr) auto!important}
.site-map-card>span{grid-column:1;grid-row:1;justify-self:start!important}
.site-map-card>div{grid-column:2;grid-row:1}
.site-map-card>i{grid-column:3;grid-row:1}
.rule-card{grid-template-columns:74px 52px minmax(0,1fr) auto!important}
.rule-card>.rule-card__icon{grid-column:1;grid-row:1;justify-self:start!important;margin:0 auto 0 0!important}
.rule-card__number{grid-column:2;grid-row:1}
.rule-card>div:not(.rule-card__icon){grid-column:3;grid-row:1}
.rule-card>.rule-card__state{grid-column:4;grid-row:1}
@media(max-width:720px){
.site-map-card{grid-template-columns:52px minmax(0,1fr) auto!important}
.rule-card{grid-template-columns:54px 42px minmax(0,1fr)!important}
.rule-card>.rule-card__state{grid-column:3;grid-row:2;justify-self:start}
}
@media(max-width:430px){
.rule-card{grid-template-columns:54px minmax(0,1fr)!important;row-gap:14px!important}
.rule-card>.rule-card__icon{grid-column:1;grid-row:1}
.rule-card__number{grid-column:2;grid-row:1;justify-self:start}
.rule-card>div:not(.rule-card__icon){grid-column:1/-1;grid-row:2}
.rule-card>.rule-card__state{grid-column:1/-1;grid-row:3}
}
/* v96 — encabezado centrado, simétrico y adaptable a la anchura disponible. */
:root{
--header-shell-max:1560px;
--header-shell-gutter:clamp(32px,6vw,112px);
--header-brand-column:clamp(330px,27vw,430px);
}
@media(min-width:1051px){
.navbar>.navbar__content{
display:grid!important;
width:min(calc(100% - var(--header-shell-gutter)),var(--header-shell-max))!important;
max-width:var(--header-shell-max)!important;
grid-template-columns:minmax(0,var(--header-brand-column)) minmax(0,1fr);
align-items:center;
justify-content:center!important;
column-gap:clamp(22px,2.4vw,44px)!important;
margin-inline:auto!important;
}
.navbar__content>.brand{
width:max-content;
max-width:100%;
justify-self:start;
}
.navbar__content>.nav-menu{
width:100%;
min-width:0;
justify-content:center!important;
gap:clamp(12px,1.25vw,24px)!important;
margin-inline:auto;
}
.navbar__content>.nav-menu>a:not(.button),
.navbar__content>.nav-menu>.nav-public{
flex:0 0 auto;
font-size:clamp(.78rem,.69rem + .18vw,.94rem)!important;
white-space:nowrap;
}
}
@media(min-width:1051px) and (max-width:1280px){
:root{
--header-shell-gutter:40px;
--header-brand-column:clamp(285px,25vw,320px);
}
.navbar>.navbar__content{column-gap:18px!important}
.navbar__content>.nav-menu{gap:clamp(9px,1vw,13px)!important}
}
@media(min-width:1600px){
.navbar__content>.nav-menu{padding-inline:clamp(10px,1.4vw,24px)}
}
/* v97 — legibilidad, contraste, escalado fluido y rendimiento multiplataforma. */
:root{
--muted:#465568;
--line:#cbd5df;
--fluid-body:clamp(1rem,.965rem + .16vw,1.125rem);
--fluid-small:clamp(.875rem,.84rem + .12vw,.975rem);
}
body{font-size:var(--fluid-body);text-rendering:optimizeLegibility}
:where(p,li,dd,address){max-inline-size:75ch}
:where(small,.topbar,.form-note,.form-message,.contact-list span,.stat-card div span,.dispatch-card__footer span){font-size:var(--fluid-small)}
:where(input,select,textarea,button){font-size:max(1rem,1em)}
:where(a,button,summary,input,select,textarea){touch-action:manipulation}
/* El rojo institucional se oscurece sobre fondos claros para superar AA. */
:where(.eyebrow--dark,.text-link,.news-card small,.contact-form .form-message,.cap-card__action){color:#a40f1b}
:where(.section-heading p,.institution-intro p,.institution-card p,.service-card p,.news-card p,.checklist p,.content-page__article p,.content-page__article li){color:#465568}
.section--dark :where(p,.section-heading p,.service-card p),.hero__copy>p,.dispatch-card p{color:#d6e1eb}
/* Evita que el aumento de texto o una traducción rompan columnas y controles. */
:where(.container,main,section,article,nav,header,footer,form,fieldset,[class*="__grid"],[class*="__layout"]){min-inline-size:0}
:where(h1,h2,h3,h4,p,li,a,button,label,strong,small,address){overflow-wrap:break-word}
:where(.button,.menu-toggle,.accessibility-bar button,.accessibility-bar a){min-block-size:48px}
@media(min-width:1051px){
.navbar__content>.nav-menu>a:not(.button),
.navbar__content>.nav-menu>.nav-public{font-size:clamp(.875rem,.82rem + .12vw,1rem)!important}
}
@media(max-width:720px){
.container{width:min(calc(100% - clamp(24px,7vw,32px)),var(--container))!important}
.brand__text strong{font-size:clamp(.72rem,2.9vw,.88rem)!important;line-height:1.2}
.brand__text small{font-size:clamp(.7rem,2.7vw,.82rem)!important}
:where(.hero h1,.cap-hero h1,.public-hero h1,.entity-hero h1,.contact-hero h1){font-size:clamp(2.25rem,10.5vw,3.75rem)!important;line-height:1.02}
:where(.dispatch-card__footer,.footer__bottom){gap:10px}
.emergency-floating{max-width:calc(100vw - 24px)}
}
@media(max-width:390px){
.brand__text strong{font-size:clamp(.64rem,2.75vw,.76rem)!important}
.brand__text small{font-size:clamp(.63rem,2.6vw,.72rem)!important}
.navbar__content{gap:8px}
.menu-toggle{flex:0 0 48px}
}
@media(max-width:330px){
.brand__text strong{font-size:.61rem!important}
.brand__text small{font-size:.6rem!important}
}
/* Renderiza tarde el contenido fuera de pantalla sin afectar navegación ni lectores. */
@supports(content-visibility:auto){
main>section:not(:first-child),.footer{content-visibility:auto;contain-intrinsic-size:auto 760px}
}
@media(update:slow),(prefers-reduced-data:reduce){
.navbar,.dispatch-card,.cap-hero__visual,.page-back{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.motion-card,.institution-card,.service-card,.news-card{box-shadow:none!important}
}
/* v98 — escala tipográfica institucional reutilizable.
Los componentes futuros deben consumir estos tokens y usar rem/clamp. */
:root{
--type-base:clamp(.9375rem,.92rem + .08vw,1.025rem);
--type-caption:clamp(.75rem,.73rem + .08vw,.825rem);
--type-small:clamp(.8125rem,.79rem + .1vw,.9rem);
--type-body:clamp(.9375rem,.9rem + .16vw,1.05rem);
--type-lead:clamp(1rem,.96rem + .2vw,1.15rem);
--type-card-title:clamp(1.08rem,1.02rem + .24vw,1.28rem);
--type-section-title:clamp(2rem,1.55rem + 2.2vw,3.75rem);
--type-hero-title:clamp(2.35rem,1.55rem + 4vw,5rem);
}
body{font-size:var(--type-base)}
:where(p,li,dd,address){font-size:var(--type-body)}
:where(.eyebrow,.dispatch-card__label,.topbar,.breadcrumb,.public-card__order,.rule-card__level){font-size:var(--type-caption)!important}
:where(small,.form-note,.form-message,.contact-list span,.stat-card div span){font-size:var(--type-small)!important}
:where(.institution-card,.service-card,.public-card,.contact-channel-card,.cap-card,.cap-role) :where(h2,h3,h4){font-size:var(--type-card-title)!important}
:where(.section,.content-page__article,.site-map-directory) h2{font-size:var(--type-section-title)}
:where(.hero,.cap-hero,.public-hero,.entity-hero,.contact-hero) h1{font-size:var(--type-hero-title)!important}
/* El teléfono debe caber siempre, incluso con zoom o traducciones del sistema. */
.dispatch-card__number--phone{
max-inline-size:100%;
font-size:clamp(2rem,8.5vw,3rem)!important;
line-height:1!important;
letter-spacing:-.045em!important;
white-space:nowrap;
}
.dispatch-card__body{padding:clamp(26px,5vw,36px) clamp(20px,5vw,28px) clamp(30px,6vw,42px)}
.dispatch-card p{font-size:var(--type-lead);line-height:1.55}
.dispatch-card__call{font-size:clamp(.95rem,.9rem + .16vw,1.05rem)}
.dispatch-card__footer strong{font-size:clamp(.75rem,.72rem + .1vw,.84rem)}
.dispatch-card__footer span{font-size:clamp(.72rem,.69rem + .1vw,.8rem)}
@media(max-width:520px){
.dispatch-card__head{gap:10px;padding:15px 18px;font-size:var(--type-caption)}
.dispatch-card__head>*{min-width:0}
.dispatch-card__number--phone{font-size:clamp(1.9rem,8.2vw,2.55rem)!important}
.dispatch-card__footer{grid-template-columns:repeat(3,minmax(0,1fr))}
.dispatch-card__footer div{display:block;padding:14px 6px;text-align:center}
.dispatch-card__footer div+div{border-top:0;border-left:1px solid rgba(255,255,255,.13)}
.dispatch-card__footer :where(strong,span){overflow-wrap:normal}
}
/* v99 — contrato responsive del pie de página.
Una sola variable gobierna el escudo; la retícula cambia antes de que la
firma institucional pueda invadir las columnas de navegación. */
:root{--footer-logo-fluid:clamp(54px,4.25vw,72px)}
.footer{
--footer-logo-size:var(--footer-logo-fluid);
padding-block:clamp(48px,6vw,72px) calc(30px + var(--safe-bottom));
}
.footer__grid{
grid-template-columns:minmax(260px,1.45fr) repeat(2,minmax(150px,1fr));
gap:clamp(30px,4vw,56px);
}
.footer__grid>div{min-inline-size:0}
.footer__grid>div:first-child{max-inline-size:100%}
.footer .brand--footer{
display:inline-grid!important;
max-inline-size:100%;
grid-template-columns:var(--footer-logo-size) minmax(0,1fr);
gap:clamp(10px,1.2vw,16px);
align-items:center!important;
}
.footer .brand--footer .institutional-logo{
inline-size:var(--footer-logo-size)!important;
block-size:var(--footer-logo-size)!important;
min-inline-size:var(--footer-logo-size)!important;
max-inline-size:var(--footer-logo-size)!important;
}
.footer .brand--footer .brand__text{max-inline-size:min(100%,30ch)!important}
.footer .brand--footer .brand__text strong{
font-size:clamp(.72rem,.67rem + .16vw,.86rem)!important;
line-height:1.18;
white-space:normal!important;
overflow-wrap:normal!important;
}
.footer .brand--footer .brand__text small{
font-size:clamp(.68rem,.65rem + .12vw,.78rem)!important;
white-space:normal!important;
}
.footer__grid>div:first-child>p{max-inline-size:42ch;margin-block:18px 0}
.footer__bottom{flex-wrap:wrap;align-items:flex-start}
@media(min-width:721px) and (max-width:1050px){
:root{--footer-logo-fluid:clamp(52px,6.2vw,64px)}
.footer{padding-bottom:calc(96px + var(--safe-bottom))}
.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px clamp(38px,8vw,72px)}
.footer__grid>div:first-child{grid-column:1/-1}
.footer__grid>div:first-child>p{max-inline-size:56ch}
}
@media(max-width:720px){
:root{--footer-logo-fluid:clamp(46px,13vw,58px)}
.footer{padding-block:44px calc(96px + var(--safe-bottom))}
.footer__grid{grid-template-columns:minmax(0,1fr)!important;gap:32px}
.footer__grid>div:first-child{grid-column:auto}
.footer .brand--footer{grid-template-columns:var(--footer-logo-size) minmax(0,1fr)}
.footer__bottom{margin-top:36px;gap:12px}
}
@media(max-width:360px){
:root{--footer-logo-fluid:44px}
.footer .brand--footer .brand__text strong{font-size:.68rem!important}
.footer .brand--footer .brand__text small{font-size:.65rem!important}
}
.cms-live{background:var(--soft)}.cms-live__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}.cms-live__card{position:relative;display:flex;min-height:210px;flex-direction:column;padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 12px 34px rgba(7,24,45,.06)}.cms-live__card h3{margin:0 0 10px;color:var(--navy);font-size:var(--type-card-title)}.cms-live__card p{margin:0;color:var(--muted)}.cms-live__status{align-self:flex-start;margin-top:auto;padding:6px 9px;border-radius:999px;background:#eaf2f8;color:var(--navy);font-size:.75rem;font-weight:800;text-transform:capitalize}
/* v104 — contraste estable y llamadas a la acción institucionales. */
:root{--cta-navy:#07182d;--cta-navy-end:#153f68;--cta-copy:#d6e0e9;--cta-red:#cc0f1f;--cta-red-hover:#a90d19}
/* Los bloques oscuros no reciben el tinte claro de las tarjetas animadas. */
html:not(.a11y-high-contrast) :where(.public-note,.cap-cta__box,.news-contact__inner,.entity-group__header,.contact-emergency).motion-card:is(:hover,:focus-within,:active,.is-motion-selected){border-color:rgba(255,255,255,.34)!important;background:linear-gradient(135deg,var(--cta-navy),var(--cta-navy-end))!important;color:#fff!important}
html:not(.a11y-high-contrast) .public-note.motion-card:is(:hover,:focus-within,:active,.is-motion-selected) :is(h2,p){color:#fff!important}
html:not(.a11y-high-contrast) .public-note.motion-card:is(:hover,:focus-within,:active,.is-motion-selected) p{color:var(--cta-copy)!important}
/* Patrón de referencia: panel azul, texto claro y acción roja sólida. */
html:not(.a11y-high-contrast) :where(.cap-cta__box,.news-contact__inner){border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,var(--cta-navy),var(--cta-navy-end));color:#fff;box-shadow:0 20px 48px rgba(7,24,45,.14)}
html:not(.a11y-high-contrast) :where(.cap-cta__box,.news-contact__inner) :is(h2,p){color:#fff}
html:not(.a11y-high-contrast) :where(.cap-cta__box,.news-contact__inner) p{color:var(--cta-copy)}
html:not(.a11y-high-contrast) :where(.cap-cta__box,.news-contact__inner) .button{border-color:var(--cta-red);background:var(--cta-red);color:#fff;box-shadow:none}
html:not(.a11y-high-contrast) :where(.cap-cta__box,.news-contact__inner) .button:is(:hover,:focus-visible,:active){border-color:var(--cta-red-hover);background:var(--cta-red-hover);color:#fff}
html:not(.a11y-high-contrast) .news-contact{padding:64px 0;background:#f4f7fa}
html:not(.a11y-high-contrast) .news-contact__inner{padding:clamp(28px,5vw,52px);border-radius:30px}
/* Estados de botón previsibles en todas las páginas públicas. */
html:not(.a11y-high-contrast) .button:not(.button--ghost):not(.button--outline-light){color:#fff}
html:not(.a11y-high-contrast) .button--light{border-color:var(--cta-red);background:var(--cta-red);color:#fff}
html:not(.a11y-high-contrast) .button--light:is(:hover,:focus-visible,:active){border-color:var(--cta-red-hover);background:var(--cta-red-hover);color:#fff}
@media(max-width:720px){html:not(.a11y-high-contrast) .news-contact{padding:52px 0}html:not(.a11y-high-contrast) :where(.cap-cta__box,.news-contact__inner){border-radius:24px}html:not(.a11y-high-contrast) :where(.cap-cta__box,.news-contact__inner) .button{width:100%}}
@media(forced-colors:active){:where(.cap-cta__box,.news-contact__inner,.public-note){border:2px solid CanvasText}}
/* v105 — avisos horizontales estáticos, alineados y sin barra decorativa. */
:where(.static-info-panel,.public-note,.cap-note,.entity-guidance,.site-map-accessible){
position:relative;
max-inline-size:100%;
margin-block-start:clamp(36px,4vw,52px);
overflow:hidden;
transform:none!important;
transition:none!important;
}
:where(.static-info-panel,.public-note,.cap-note,.entity-guidance,.site-map-accessible):is(:hover,:focus-within,:active){
transform:none!important;
}
:where(.static-info-panel,.public-note,.cap-note,.entity-guidance,.site-map-accessible)>.motion-card__accent{
display:none!important;
}
html:not(.a11y-high-contrast) :where(.public-note,.cap-note){
padding:clamp(24px,3vw,30px);
border:1px solid rgba(7,24,45,.1);
border-radius:26px;
}
html:not(.a11y-high-contrast) .public-note{
background:var(--cta-navy);
color:#fff;
box-shadow:none;
}
html:not(.a11y-high-contrast) .public-note :is(h2,p){color:#fff}
html:not(.a11y-high-contrast) .public-note p{color:var(--cta-copy)}
html:not(.a11y-high-contrast) :where(.entity-guidance,.cap-note,.site-map-accessible){
box-shadow:none;
}
@media(max-width:720px){
:where(.static-info-panel,.public-note,.cap-note,.entity-guidance,.site-map-accessible){margin-block-start:32px;border-radius:22px}
:where(.public-note,.cap-note){align-items:start;grid-template-columns:auto minmax(0,1fr);gap:16px}
:where(.public-note,.cap-note)>span:first-child{width:52px;height:52px}
}
@media(max-width:430px){
:where(.public-note,.cap-note){grid-template-columns:1fr}
}