/* Proteccion Superior de Mexico — identidad negro, oro y rojo */
:root{--navy:#d4a839;--navy-deep:#050403;--steel:#2b2520;--blue:#b90f19;--cyan:#e2b84b;--green:#d8b34f;--ink:#fff8e7;--text:#e9dfca;--muted:#ad9f86;--soft:#090705;--panel:#100d09;--line:rgba(224,183,74,.22);--line-strong:rgba(224,183,74,.45);--shadow:0 30px 90px rgba(0,0,0,.65);--radius:2px}
html{background:#050403}
body{background:radial-gradient(circle at 12% 8%,rgba(226,184,75,.13),transparent 30rem),radial-gradient(circle at 88% 4%,rgba(185,15,25,.13),transparent 32rem),linear-gradient(180deg,#050403 0%,#120d09 46%,#050403 100%);color:var(--text)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:#e2b84b}
.loading-screen{background:radial-gradient(circle at center,rgba(185,15,25,.12),transparent 24rem),linear-gradient(180deg,#050403,#100a06)}
.loading-screen:before,.site-shell:before,.site-shell:after{color:#e2b84b24;text-shadow:0 0 16px rgba(226,184,75,.14)}
.loading-trident{width:clamp(170px,20vw,245px);filter:drop-shadow(0 0 18px rgba(226,184,75,.32)) drop-shadow(0 20px 44px rgba(0,0,0,.65))}
.loading-line{background:linear-gradient(90deg,transparent,rgba(185,15,25,.42),rgba(226,184,75,.72),rgba(185,15,25,.42),transparent);box-shadow:0 0 18px rgba(226,184,75,.2)}
.loading-line:after{background:linear-gradient(90deg,transparent,#b90f19,#e2b84b,#fff0b0,transparent);box-shadow:0 0 20px rgba(226,184,75,.45)}
.site-shell{background:#050403}
.motion-backdrop{background:radial-gradient(circle at 50% 18%,rgba(226,184,75,.11),transparent 30rem),#050403}
.motion-backdrop:after{background:linear-gradient(180deg,rgba(5,4,3,.12),rgba(5,4,3,.76)),radial-gradient(circle at 50% 52%,transparent 0%,rgba(40,8,7,.22) 58%,rgba(5,4,3,.82) 100%)}
.motion-backdrop:before{background:conic-gradient(from 12deg,transparent 0deg 66deg,rgba(226,184,75,.03) 76deg,rgba(226,184,75,.22) 89deg,rgba(185,15,25,.24) 94deg,rgba(226,184,75,.07) 105deg,transparent 122deg 360deg)}
.motion-frame{filter:grayscale(.28) sepia(.25) saturate(.9) contrast(1.18) brightness(.58)}
.motion-frame-one,.motion-frame-two,.motion-frame-three{background-blend-mode:multiply,normal}
.site-header{border-bottom:1px solid rgba(226,184,75,.24);background:rgba(5,4,3,.87);box-shadow:0 10px 36px rgba(0,0,0,.36)}
.brand-logo{width:92px;height:calc(var(--header-h) - 8px);justify-content:flex-start}
.brand-logo img{width:auto;height:100%;filter:drop-shadow(0 0 10px rgba(226,184,75,.25)) drop-shadow(0 10px 22px rgba(0,0,0,.48))}
.desktop-nav a:hover,.desktop-nav a[aria-current=page],.mobile-nav a[aria-current=page]{color:#e2b84b}
.header-action{border-color:rgba(226,184,75,.5);background:linear-gradient(135deg,rgba(226,184,75,.16),rgba(185,15,25,.14));color:#fff3cf}
.header-action:hover,.header-action[aria-current=page]{background:linear-gradient(135deg,rgba(226,184,75,.28),rgba(185,15,25,.25));box-shadow:0 20px 42px rgba(185,15,25,.2)}
.mobile-nav{background:rgba(5,4,3,.98)}
main#inicio{background:rgba(5,4,3,.72)}
.hero-section{background:linear-gradient(90deg,rgba(5,4,3,.32),transparent 50%,rgba(91,7,12,.08))}
.hero-mark,.institutional-mark,.strategic-mark{opacity:.07;filter:grayscale(1) sepia(1) saturate(2) hue-rotate(350deg) brightness(1.2)}
.eyebrow{color:#e2b84b;font-weight:500;letter-spacing:.18em}
h1,h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:.015em}
.btn{clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);border-radius:0}
.btn-primary{background:linear-gradient(135deg,#efd171,#b88924);color:#100b05;box-shadow:0 18px 38px rgba(226,184,75,.18)}
.btn-primary:hover{background:linear-gradient(135deg,#fff0a8,#d5a52e);box-shadow:0 22px 46px rgba(226,184,75,.28)}
.btn-secondary:hover{border-color:rgba(185,15,25,.72);background:rgba(185,15,25,.12)}
.hero-brand-card{width:min(390px,100%);padding:1.35rem;background:linear-gradient(145deg,rgba(226,184,75,.08),rgba(185,15,25,.06)),rgba(5,4,3,.74);border-color:rgba(226,184,75,.3);box-shadow:inset 0 0 0 1px rgba(185,15,25,.08),0 28px 58px rgba(0,0,0,.52);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.hero-brand-card img{width:min(220px,70%);max-height:235px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(226,184,75,.22)) drop-shadow(0 14px 28px rgba(0,0,0,.5))}
.hero-brand-card:after{background:linear-gradient(90deg,transparent,#b90f19,#e2b84b,#b90f19,transparent)}
.heading-mark{width:clamp(82px,9vw,118px);max-height:125px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(226,184,75,.22))}
.heading-logo,.dark-logo{width:min(235px,68vw);max-height:260px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(226,184,75,.22)) drop-shadow(0 12px 26px rgba(0,0,0,.46))}
.route-card,.service-card,.capability-list article,.strategic-grid article,.institutional-points span,.contact-panel{border-color:rgba(226,184,75,.22);background:linear-gradient(145deg,rgba(226,184,75,.055),rgba(185,15,25,.025)),rgba(12,9,6,.78);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.route-card:hover,.service-card:hover{border-color:rgba(226,184,75,.62);background:linear-gradient(145deg,rgba(226,184,75,.11),rgba(185,15,25,.07));box-shadow:0 28px 58px rgba(185,15,25,.12)}
.route-card span,.service-icon{border-color:rgba(226,184,75,.42);background:rgba(226,184,75,.09);color:#e2b84b}
.services-section,.contact-section{background:radial-gradient(circle at 50% 0%,rgba(226,184,75,.07),transparent 30rem),rgba(7,5,4,.88)}
.strategic-section{background:linear-gradient(135deg,rgba(185,15,25,.14),transparent 38%),linear-gradient(180deg,rgba(12,8,5,.92),rgba(24,13,8,.88))}
.strategic-grid span{color:#e2b84b}
.capabilities-section{background:linear-gradient(180deg,rgba(10,7,5,.9),rgba(5,4,3,.84))}
.media-strip,.strategic-media-strip{border-color:rgba(226,184,75,.22);background:radial-gradient(circle at 18% 18%,rgba(185,15,25,.1),transparent 24rem),linear-gradient(135deg,rgba(226,184,75,.06),rgba(255,255,255,.015)),rgba(5,4,3,.72)}
.media-strip img{border-color:rgba(226,184,75,.18);filter:grayscale(.35) sepia(.28) saturate(.72) contrast(1.24) brightness(.48)}
.contact-form input:focus,.contact-form textarea:focus{border-color:#e2b84b;box-shadow:0 0 0 4px rgba(226,184,75,.11)}
.form-status{color:#e2b84b}.form-status.is-error{color:#e44850}
@media (max-width:1040px){.brand-logo{width:84px}}
@media (max-width:900px){.brand-logo{width:82px}.hero-brand-card img{width:min(200px,70%)}}
@media (max-width:640px){.brand-logo{width:70px}.loading-trident{width:170px}.hero-brand-card{padding:1rem}.heading-logo,.dark-logo{width:min(200px,62vw)}}

/* Navegacion siempre visible: sustituye el boton de menu */
.menu-toggle,.mobile-nav{display:none!important}
@media (max-width:1080px){
  .desktop-nav{display:flex;margin-left:auto;gap:.62rem}
  .desktop-nav a{font-size:.64rem;letter-spacing:.045em;white-space:nowrap}
  .header-action{display:none}
  .site-header{gap:.75rem}
}
@media (max-width:760px){
  :root{--header-h:128px}
  .site-header{height:var(--header-h);display:grid;grid-template-columns:1fr;grid-template-rows:70px 50px;gap:0;padding:0 0 .45rem;align-content:start}
  .brand-logo{width:66px;height:68px;justify-self:center;justify-content:center}
  .desktop-nav{width:100%;height:50px;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:0 .25rem;border-top:1px solid rgba(226,184,75,.2);border-bottom:1px solid rgba(185,15,25,.16)}
  .desktop-nav a{min-width:0;display:flex;align-items:center;justify-content:center;padding:.45rem .08rem;border-left:1px solid rgba(226,184,75,.1);font-size:clamp(.46rem,2.35vw,.62rem);line-height:1.1;letter-spacing:0;text-align:center;white-space:normal}
  .desktop-nav a:last-child{border-right:1px solid rgba(226,184,75,.1)}
}

/* Imagenes editoriales de cada area */
.page-feature{position:relative;width:min(var(--content-max),100%);height:clamp(260px,34vw,430px);margin:0 auto 2.4rem;overflow:hidden;border:1px solid rgba(226,184,75,.28);background:#080604;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);box-shadow:0 30px 72px rgba(0,0,0,.5)}
.page-feature:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,4,3,.02) 35%,rgba(5,4,3,.88) 100%),linear-gradient(90deg,rgba(185,15,25,.13),transparent 42%,rgba(226,184,75,.07))}
.page-feature img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.08) brightness(.88);transition:transform .8s ease}
.page-feature:hover img{transform:scale(1.018)}
.page-feature figcaption{position:absolute;z-index:2;left:1.4rem;right:1.4rem;bottom:1rem;margin:0;color:#f4d77e;font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.strategic-section .page-feature{width:100%;margin:0}
.page-feature-contact{width:min(var(--contact-max),100%);height:clamp(230px,30vw,380px)}
.route-card{grid-template-rows:145px auto auto 1fr;overflow:hidden}
.route-card>img{width:calc(100% + 2.7rem);height:145px;max-width:none;margin:-1.35rem -1.35rem 0;object-fit:cover;filter:saturate(.72) contrast(1.1) brightness(.66);transition:filter .25s ease,transform .5s ease}
.route-card:hover>img{filter:saturate(.92) contrast(1.08) brightness(.82);transform:scale(1.025)}
@media (max-width:760px){
  .page-feature{height:240px;margin-bottom:1.6rem;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
  .page-feature figcaption{left:.9rem;right:.9rem;bottom:.75rem;font-size:.56rem;line-height:1.35;letter-spacing:.1em}
  .page-feature-contact{height:220px}
  .route-card{grid-template-rows:170px auto auto 1fr}
  .route-card>img{height:170px}
}

/* Gradacion fotografica unificada: elimina dominantes azules */
.motion-frame{
  filter:grayscale(.78) sepia(.88) saturate(1.22) hue-rotate(346deg) contrast(1.2) brightness(.5)
}
.page-feature img,
.route-card>img,
.media-strip img,
.capability-media img{
  filter:grayscale(.7) sepia(.82) saturate(1.18) hue-rotate(346deg) contrast(1.17) brightness(.7)
}
.page-feature:hover img,
.route-card:hover>img{
  filter:grayscale(.58) sepia(.86) saturate(1.3) hue-rotate(346deg) contrast(1.18) brightness(.8)
}
.capability-media img{border-color:rgba(226,184,75,.28);box-shadow:0 22px 52px rgba(0,0,0,.55),0 0 0 1px rgba(185,15,25,.07)}
