/* Undernet global visual system, P0.1-P0.5 */
:root{
  /* Canonical color palette */
  --udc-canvas:#1b1b1b;
  --udc-surface:#242424;
  --udc-card:#303030;
  --udc-elevated:#474747;
  --udc-line:#565656;
  --udc-text:#f4f4f4;
  /* Effective approved value preserved from the V2 compatibility layer. */
  --udc-muted:#d0d2d3;
  --udc-orange:#ef7d00;
  --udc-orange-hover:#ff981f;
  --udc-on-accent:#17120d;

  /* Canonical typography */
  --udc-font-family:Arial,Helvetica,sans-serif;
  --udc-font-body:1rem;
  --udc-font-small:.9rem;
  --udc-font-eyebrow:.78rem;
  --udc-font-lead:1.18rem;
  --udc-font-h1:clamp(2.65rem,4vw,3.5rem);
  --udc-font-h2:clamp(2rem,3.6vw,3.35rem);
  --udc-font-h3:1.5rem;
  --udc-line-body:1.6;
  --udc-line-heading:1.08;
  --udc-page-h1:var(--udc-font-h1); /* Compatibility alias during migration. */
  --udc-nav-font-size:1rem;
  --udc-nav-submenu-font-size:.95rem;

  /* Canonical spacing scale */
  --udc-space-1:.5rem;
  --udc-space-2:.75rem;
  --udc-space-3:1rem;
  --udc-space-4:1.5rem;
  --udc-space-5:2rem;
  --udc-space-6:3rem;
  --udc-space-7:4rem;
  --udc-space-8:5.5rem;

  /* Canonical geometry and elevation */
  --udc-radius-sm:9px;
  --udc-radius-md:18px;
  --udc-shadow-header:0 6px 18px rgba(0,0,0,.20);
  --udc-shadow-card:0 18px 46px rgba(0,0,0,.18);
  --udc-container:1180px;
  --udc-header-height:96px;

  /* Canonical interaction states. Components consume these tokens instead of inventing local states. */
  --udc-focus-color:var(--udc-orange-hover);
  --udc-focus-width:2px;
  --udc-focus-offset:3px;
}

html,body{background:var(--udc-canvas);color:var(--udc-text)}
main,#contenido{background:var(--udc-canvas)}

/* Canonical secondary copy. Legacy V2 used --muted (#666), which is too dark
   on the current dark canvas. Shared descriptive prose now consumes the global
   muted token instead of inheriting the historical light-theme value. */
.section-heading > p:last-child,
.section-copy,
.prose-large,
.visual-heading > p:last-child,
.hero-lead,
.page-lead,
.service-card p,
.purpose-card small{
  color:var(--udc-muted);
}

/* P0.2: sections no longer alternate arbitrary dark hues. */
section,.section,.section:nth-of-type(odd),.section:nth-of-type(even){
  background:var(--udc-section-bg,var(--udc-canvas))!important;
  border-color:var(--udc-section-line,var(--udc-line))!important;
}

/* Shared section boundaries remain visible even when adjacent sections use the same canvas. */
main#contenido > section + section{
  border-top:1px solid var(--udc-line)!important;
}

/* Override page-specific pilots that previously introduced navy/brown section palettes. */
main#contenido > section.section,
main#contenido > section.section:not(.service-editorial):not(.section-orange-soft):not(.section-soft):not(.cta-section){
  background:var(--udc-section-bg,var(--udc-canvas))!important;
  border-color:var(--udc-section-line,var(--udc-line))!important;
}
main#contenido > section.section.service-editorial,
main#contenido > section.section.section-soft,
main#contenido > section.section.section-orange-soft,
main#contenido > section.alt-section,
main#contenido > section.section-alt{
  background:var(--udc-section-alt-bg,var(--udc-surface))!important;
  border-color:var(--udc-section-line,var(--udc-line))!important;
}

/* P0.3: one neutral global header and one shared navigation palette. */
header,.site-header,.main-header,.header-v2{
  background:var(--udc-canvas);
  border-bottom:1px solid var(--udc-line);
  box-shadow:var(--udc-shadow-header);
}
.main-nav a,
.site-header .main-nav a,
.header-v2 .main-nav a{
  color:var(--udc-text);
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active,
.main-nav a[aria-current="page"],
.site-header .main-nav a:hover,
.site-header .main-nav a:focus-visible,
.site-header .main-nav a.active,
.site-header .main-nav a[aria-current="page"],
.header-v2 .main-nav a:hover,
.header-v2 .main-nav a:focus-visible,
.header-v2 .main-nav a.active,
.header-v2 .main-nav a[aria-current="page"]{
  color:var(--udc-orange);
}

/* Canonical desktop header proportions. */
@media(min-width:1021px){
  .site-header .header-inner{min-height:var(--udc-header-height)}
  .site-header .main-nav>.nav-root>li>a,
  .site-header .nav-submenu-toggle{
    font-size:var(--udc-nav-font-size);
    padding-top:35px;
    padding-bottom:32px;
  }
}

/* Shared Services submenu. No decorative chevron: the label itself is the controller. */
.nav-has-submenu{position:relative}
.nav-submenu-toggle{
  appearance:none;
  border:0;
  border-bottom:3px solid transparent;
  background:transparent;
  color:var(--udc-text);
  padding:30px 0 27px;
  font:inherit;
  font-size:var(--udc-nav-font-size);
  line-height:inherit;
  cursor:pointer;
}
.nav-submenu-toggle:hover,
.nav-submenu-toggle:focus-visible,
.nav-has-submenu.is-active>.nav-submenu-toggle{
  color:var(--udc-orange);
  border-bottom-color:var(--udc-orange);
}
.nav-submenu-toggle:focus-visible{
  outline:var(--udc-focus-width) solid var(--udc-focus-color);
  outline-offset:var(--udc-focus-offset);
}
.nav-submenu{
  display:none!important;
  position:absolute;
  z-index:80;
  top:calc(100% - 1px);
  left:50%;
  width:210px!important;
  margin:0!important;
  padding:8px!important;
  list-style:none;
  transform:translateX(-50%);
  background:var(--udc-surface)!important;
  border:1px solid var(--udc-line);
  border-radius:var(--udc-radius-sm);
  box-shadow:var(--udc-shadow-card);
}
.nav-has-submenu.is-open>.nav-submenu,
.nav-has-submenu:focus-within>.nav-submenu{
  display:block!important;
}
@media(min-width:1021px){
  .nav-has-submenu:hover>.nav-submenu{display:block!important}
}
.main-nav .nav-submenu a{
  display:block;
  padding:10px 12px!important;
  border:0!important;
  border-radius:calc(var(--udc-radius-sm) - 2px);
  color:var(--udc-text)!important;
  font-size:var(--udc-nav-submenu-font-size);
  line-height:1.35;
  white-space:nowrap;
}
.main-nav .nav-submenu a:hover,
.main-nav .nav-submenu a:focus-visible,
.main-nav .nav-submenu a[aria-current="page"]{
  background:var(--udc-card)!important;
  color:var(--udc-orange)!important;
  outline:none;
}

/* Shared buttons own their palette here; legacy V2 keeps only geometry/layout. */
.button-primary,
.btn-primary{
  background:var(--udc-orange);
  border-color:var(--udc-orange);
  color:var(--udc-on-accent);
}
.button-primary:hover,.button-primary:focus-visible,
.btn-primary:hover,.btn-primary:focus-visible{
  background:var(--udc-orange-hover);
  border-color:var(--udc-orange-hover);
  color:var(--udc-on-accent);
}
.button-secondary,
.button-light{
  background:var(--udc-card);
  border:1px solid var(--udc-line);
  color:var(--udc-text);
}
.button-secondary:hover,.button-secondary:focus-visible,
.button-light:hover,.button-light:focus-visible{
  background:var(--udc-elevated);
  border-color:var(--udc-orange);
  color:var(--udc-text);
}

/* P0.4: restrained, neutral interior-page hero. */
.page-hero,
main#contenido > section.page-hero{
  background:var(--udc-canvas);
  border-bottom:1px solid var(--udc-line);
  color:var(--udc-text);
  padding-top:var(--udc-space-6);
  padding-bottom:var(--udc-space-6);
}
.page-hero h1,
main#contenido > section.page-hero h1{
  max-width:900px;
  font-size:var(--udc-page-h1);
  line-height:1.06;
  letter-spacing:-.035em;
  color:#fff;
  text-shadow:none;
}
.page-hero p,.page-lead,.hero-lead{color:var(--udc-hero-copy-color,var(--udc-muted))}
.eyebrow,.kicker,.overline{color:var(--udc-eyebrow-color,var(--udc-orange))}

/* Shared surfaces. Component-specific layout remains untouched. */
.service-card{
  background:var(--udc-card);
  border-color:var(--udc-line);
  color:var(--udc-text);
}
.service-card p{color:var(--udc-muted)}

/* Home + corporate normalization.
   Home's photographic slider remains a distinct component, but its dark areas now use
   the same neutral palette as the rest of the site instead of the legacy navy tokens. */
.home-slider-arrow,.home-slider-pause{
  background:rgba(48,48,48,.94)!important;
  color:var(--udc-text)!important;
  border-color:var(--udc-line)!important;
}
.home-slider-dots button{background:var(--udc-line)!important}
.home-slider-dots button.is-active{background:var(--udc-orange)!important}

.purpose-card{
  background:var(--udc-card);
  border-color:var(--udc-line);
  color:var(--udc-text);
}
.client-name-grid span,
.standard-pill,
.standards-core{
  background:var(--udc-card);
  border-color:var(--udc-line);
  color:var(--udc-text);
}
.purpose-card:hover,.purpose-card:focus-visible{
  background:var(--udc-elevated);
  border-color:var(--udc-orange);
}
/* Nosotros keeps one canvas; depth comes from cards and callouts, not navy section bands. */
.nosotros-experience-section{
  background:var(--udc-canvas);
  border-color:var(--udc-line);
}
.nosotros-experience-card,
.process-grid article{
  background:var(--udc-card);
  border-color:var(--udc-line);
}
.process-grid article p{
  color:var(--udc-muted);
}
.nosotros-experience-card:hover,
.nosotros-experience-card:focus-visible,
.process-grid article:hover{
  background:var(--udc-elevated);
}

/* Areas de Experiencia: map the legacy navy palette to the global system.
   Photographic hero/CTA overlays remain intact because they serve image legibility. */
.ae-section-intro,.ae-detail,.ae-detail-alt,.ae-services{
  background:var(--udc-canvas);
  border-color:var(--udc-line);
}
.ae-area-card,.ae-framework,.ae-info-card{
  background:var(--udc-card);
  border-color:var(--udc-line);
  color:var(--udc-text);
}
.ae-area-card:hover,.ae-area-card:focus-visible{
  background:var(--udc-elevated);
  border-color:var(--udc-orange);
}
.ae-relation-card{
  background:var(--udc-card);
  border-left-color:var(--udc-orange);
}
.ae-area-card-vial::before,.ae-area-card-vial::after{
  /* Preserve the intentional photographic Seguridad Vial treatment. */
  background-color:transparent;
}

/* Shared accessibility utility for visually hidden assistive text. */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Shared footer: one compact, canonical component across the site. */
footer,.site-footer,.footer-v2{
  background:var(--udc-canvas);
  border-top:1px solid var(--udc-line);
  color:var(--udc-muted);
}
.site-footer{
  padding:1.5rem 0 1.15rem;
}
.site-footer .footer-main{
  display:flex;
  align-items:center;
  gap:2.25rem;
}
.site-footer .footer-brand{
  flex:0 0 auto;
  display:block;
}
.site-footer .footer-logo{
  display:block;
  width:160px;
  margin:0;
}
.site-footer .footer-nav{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.7rem 1.4rem;
}
.site-footer .footer-nav a{
  color:var(--udc-text);
  font-size:.78rem;
  line-height:1.35;
  text-decoration:none;
}
.site-footer .footer-nav a:hover,
.site-footer .footer-nav a:focus-visible{
  color:var(--udc-orange);
  text-decoration:none;
}
.site-footer .footer-nav a:focus-visible{
  outline:var(--udc-focus-width) solid var(--udc-focus-color);
  outline-offset:var(--udc-focus-offset);
}
.site-footer .footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.12);
  color:var(--udc-muted);
  font-size:.76rem;
}

/* P0.5: mobile scale and density. */
@media(max-width:1020px){
  .main-nav{
    background:var(--udc-surface);
    border-bottom-color:var(--udc-line);
    box-shadow:0 12px 24px rgba(0,0,0,.24);
  }
  .nav-toggle span{background:var(--udc-text)}
  .nav-submenu-toggle{
    display:block;
    width:100%;
    padding:12px 0;
    border:0;
    color:var(--udc-text);
    text-align:left;
  }
  .nav-has-submenu.is-active>.nav-submenu-toggle{color:var(--udc-orange)}
  .nav-submenu{
    position:static;
    width:100%!important;
    margin:0!important;
    padding:0 0 6px var(--udc-space-4)!important;
    transform:none;
    background:transparent!important;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .nav-has-submenu:not(.is-open)>.nav-submenu{display:none!important}
  .nav-has-submenu.is-open>.nav-submenu{display:block!important}
  .main-nav .nav-submenu a{
    padding:9px 0!important;
    background:transparent!important;
  }
  .main-nav .nav-submenu a:hover,
  .main-nav .nav-submenu a:focus-visible,
  .main-nav .nav-submenu a[aria-current="page"]{
    background:transparent!important;
  }
}
@media(max-width:900px){
  :root{
    --udc-font-h1:clamp(2.25rem,9vw,2.65rem);
    --udc-page-h1:var(--udc-font-h1);
  }
  .page-hero,main#contenido > section.page-hero{
    padding-top:2.65rem;
    padding-bottom:2.65rem;
  }
  .site-footer{padding:1.4rem 0 1.1rem}
  .site-footer .footer-main{align-items:flex-start;flex-direction:column;gap:1.25rem}
  .site-footer .footer-nav{justify-content:flex-start}
  .site-footer .footer-bottom{margin-top:1.25rem}
}
@media(max-width:980px){
  .home-slide-media::after{
    background:linear-gradient(180deg,rgba(48,48,48,.98),rgba(48,48,48,0))!important;
  }
}
@media(max-width:620px){
  :root{
    --udc-font-h1:clamp(2.15rem,10vw,2.45rem);
    --udc-page-h1:var(--udc-font-h1);
  }
  .page-hero,main#contenido > section.page-hero{
    padding-top:2.25rem;
    padding-bottom:2.25rem;
  }
  /* Canonical responsive lead owner. The main/section scope outranks later
     page-specific two-class selectors without relying on !important. */
  main#contenido > section .hero-lead,
  main#contenido > section .page-lead{font-size:1.05rem}
  .site-footer{padding:1.25rem 0 1rem}
  .site-footer .footer-logo{width:145px}
  .site-footer .footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:.75rem 1rem}
  .site-footer .footer-bottom{align-items:flex-start;flex-direction:column;gap:.75rem}
}