/* Medina & Rivera · Sitio web
   Mobile-first · CSS layers + nesting · container queries · scroll-driven animations · 3D transforms */
@layer pdfjs, reset, tokens, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
  img, picture, svg { display: block; max-width: 100%; }
  img { height: auto; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; padding: 0; }
  a { color: inherit; }
}

@layer tokens {
  @property --rx { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
  @property --ry { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
  :root {
    --navy: #0b1f3a; --navy-2: #14305a; --steel: #2f5e96; --gold: #e8b36a; --gold-d: #9a6420;
    --ink: #1b2430; --muted: #5b6675; --mist: #c9d3e0; --rule: #e1e6ee; --light: #f3f5f8; --white: #fff;
    --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --gutter: clamp(1.25rem, 5vw, 3.5rem);
    --maxw: 1240px;
    --r: 18px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --shadow: 0 1px 2px rgb(11 31 58 / .06), 0 12px 32px -12px rgb(11 31 58 / .28);
    --fs-display: clamp(2.6rem, 9.5vw, 6.2rem);
    --fs-h2: clamp(2.1rem, 6.8vw, 4rem);
    --fs-lead: clamp(1.05rem, 2.6vw, 1.3rem);
  }
}

@layer base {
  body {
    font-family: var(--font); font-size: 1rem; line-height: 1.55; color: var(--ink); background: var(--white);
    font-variation-settings: "wdth" 100; -webkit-font-smoothing: antialiased; overflow-x: clip;
  }
  .display { font-variation-settings: "wdth" 72; font-weight: 750; line-height: .95; letter-spacing: -.02em; text-wrap: balance; }
  .h2 { font-size: var(--fs-h2); margin-block: .35em .5em; }
  .lead { font-size: var(--fs-lead); line-height: 1.5; text-wrap: pretty; max-width: 46ch; }
  p { text-wrap: pretty; }
  .eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
    & b { color: var(--gold-d); margin-right: .9em; } }
  .eyebrow--gold { color: var(--mist); & b { color: var(--gold); } }
  .hero .eyebrow--gold { color: var(--gold); }
  .label { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .label--light { color: #8fa3bf; }
  .num { font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 100; font-weight: 800; letter-spacing: -.03em; }
  .gold { color: var(--gold-d); }
  .sec--dark .gold { color: var(--gold); }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
  .skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--gold); color: var(--navy); padding: .6rem 1rem; border-radius: 10px;
    &:focus { top: 1rem; } }
  .ico { width: 1.25em; height: 1.25em; flex: none; }
  .cover { width: 100%; height: 100%; object-fit: cover; }
  picture:has(.cover) { width: 100%; height: 100%; }
}

@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
  .sec { position: relative; padding-block: clamp(4.5rem, 12vw, 9rem); isolation: isolate; }
  .sec--light { background: var(--white); }
  .sec--mist { background: var(--light); }
  .sec--dark { background: var(--navy); color: var(--white); & .lead, & p { color: var(--mist); } & h3 { color: var(--white); } }
  .split { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
  @media (min-width: 900px) {
    .split { grid-template-columns: 1.1fr .9fr; }
    .split--rev { grid-template-columns: 1.2fr .8fr; }
  }
}

@layer components {
  /* ---------- Navegación: cápsula de material blanco translúcido (visible desde la carga) ---------- */
  .progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
  .nav {
    --nav-h: 60px;
    position: fixed; z-index: 50; top: max(.6rem, env(safe-area-inset-top)); left: clamp(.6rem, 2.5vw, 1.5rem); right: clamp(.6rem, 2.5vw, 1.5rem);
    height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 .5rem 0 .75rem; border-radius: 20px; color: var(--navy);
    /* Material: fondo blanco translúcido + desenfoque + borde superior luminoso */
    background: rgb(255 255 255 / .72);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px rgb(11 31 58 / .07), 0 12px 32px -14px rgb(11 31 58 / .45);
    transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
    animation: navIn .7s var(--ease) both;
    &.is-scrolled { background: rgb(255 255 255 / .84); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px rgb(11 31 58 / .08), 0 16px 40px -14px rgb(11 31 58 / .4); }
  }
  /* Aparece como un material: escala, opacidad y desenfoque a la vez */
  @keyframes navIn { from { opacity: 0; transform: translateY(-10px) scale(.97); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
  .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; min-height: 44px; border-radius: 12px; }
  .brand__mark { width: 38px; height: auto; }
  .brand__name { font-weight: 700; font-variation-settings: "wdth" 108; letter-spacing: .05em; text-transform: uppercase; font-size: .86rem; line-height: 1.1;
    & small { display: block; font-weight: 500; font-size: .56rem; letter-spacing: .16em; color: var(--muted); } }
  .nav__toggle { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgb(11 31 58 / .06); color: var(--navy);
    transition: background-color .15s var(--ease), transform .1s var(--ease);
    &:active { transform: scale(.94); background: rgb(11 31 58 / .12); }
    & .ico { width: 22px; height: 22px; } }
  /* Menú móvil: hoja de material que nace del botón y vuelve a él por el mismo camino */
  .menu {
    position: fixed; inset: calc(max(.6rem, env(safe-area-inset-top)) + 60px + .5rem) clamp(.6rem, 2.5vw, 1.5rem) auto auto;
    width: min(340px, calc(100vw - 1.2rem)); max-height: calc(100dvh - 7rem); overflow-y: auto; margin: 0; border: 0; padding: .6rem;
    border-radius: 22px; color: var(--navy);
    background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px rgb(11 31 58 / .07), 0 30px 60px -20px rgb(11 31 58 / .55);
    flex-direction: column; gap: 2px; transform-origin: top right;
    opacity: 0; transform: translateY(-8px) scale(.94);
    transition: opacity .28s var(--ease), transform .32s var(--ease), overlay .32s allow-discrete, display .32s allow-discrete;
    &:popover-open { display: flex; opacity: 1; transform: none; @starting-style { opacity: 0; transform: translateY(-8px) scale(.94); } }
    &::backdrop { background: rgb(11 31 58 / 0); transition: background-color .3s, overlay .3s allow-discrete, display .3s allow-discrete; }
    &:popover-open::backdrop { background: rgb(11 31 58 / .28); @starting-style { background: rgb(11 31 58 / 0); } }
    & a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 0 1rem; border-radius: 14px; text-decoration: none;
      font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em;
      transition: background-color .12s var(--ease);
      &:active { background: rgb(11 31 58 / .08); }
      &[aria-current=true] { background: rgb(11 31 58 / .06); &::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-d); margin-left: auto; } } }
    & .btn { justify-content: center; margin-top: .4rem; }
  }
  .menu__close { display: none; }
  @media (min-width: 1200px) {
    .nav { padding-inline: .9rem .5rem; }
    .nav__toggle { display: none; }
    .menu { position: static; display: flex; flex-direction: row; align-items: center; gap: .15rem; width: auto; max-height: none; padding: 0; overflow: visible;
      background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; opacity: 1; transform: none;
      & a:not(.btn) { min-height: 40px; padding: 0 .8rem; font-size: .86rem; font-weight: 500; letter-spacing: 0; color: rgb(11 31 58 / .78); border-radius: 12px;
        transition: color .15s, background-color .15s;
        &[aria-current=true] { color: var(--navy); background: rgb(11 31 58 / .06); &::after { display: none; } } }
      & .btn { margin: 0 0 0 .5rem; font-size: .85rem; min-height: 42px; padding: .55rem 1.1rem; } }
  }
  @media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
    .menu a:not(.btn):hover { color: var(--navy); background: rgb(11 31 58 / .05); }
  }
  @media (prefers-reduced-transparency: reduce) { .nav, .menu { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
  @media (prefers-contrast: more) { .nav, .menu { background: #fff; box-shadow: 0 0 0 2px var(--navy); } }

  /* ---------- Botones ---------- */
  .btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .8rem 1.35rem; border-radius: 999px; font-weight: 600; text-decoration: none;
    font-size: .95rem; letter-spacing: .01em; transition: transform .15s var(--ease), background-color .25s var(--ease);
    &:active { transform: scale(.97); } }
  .btn--gold { background: var(--gold); color: var(--navy); box-shadow: 0 8px 24px -10px rgb(232 179 106 / .8); &:hover { background: #f0c27f; } }
  .btn--ghost { color: var(--white); background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); backdrop-filter: blur(8px);
    &:hover { background: rgb(255 255 255 / .16); } }
  .btn--lg { min-height: 56px; padding-inline: 1.6rem; }

  /* ---------- Hero 3D ---------- */
  .hero { position: relative; min-height: 100svh; display: grid; align-content: end; padding: 7rem 0 clamp(2.5rem, 7vh, 5rem);
    color: var(--white); background: var(--navy); overflow: hidden; perspective: 1200px; isolation: isolate; }
  .hero__bg { position: absolute; inset: -6%; z-index: -2; transform: translate3d(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -16px), 0) scale(1.06); will-change: transform; }
  .hero__shade { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgb(11 31 58 / .85), rgb(11 31 58 / .35) 62%, rgb(11 31 58 / .05)), linear-gradient(0deg, var(--navy) 0, rgb(11 31 58 / 0) 45%); }
  .hero__inner { transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
  .hero__title { font-size: var(--fs-display); margin-block: .6rem 1.2rem; max-width: 12ch; transform: translateZ(40px); perspective: 600px; }
  .hero__lead { color: var(--mist); max-width: 38ch; transform: translateZ(20px); }
  .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; transform: translateZ(30px); }
  .hero__chips { display: flex; gap: .6rem; margin-top: 2.2rem; flex-wrap: wrap; transform-style: preserve-3d; }
  .chip3d { padding: .7rem 1rem; border-radius: 14px; background: rgb(255 255 255 / .08); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 18px 40px -18px rgb(0 0 0 / .6); transform: translateZ(var(--z));
    & b { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
    & span { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); } }
  .hero__places { position: absolute; left: var(--gutter); bottom: max(1.2rem, env(safe-area-inset-bottom)); display: none; gap: 2rem;
    font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
  @media (min-width: 900px) { .hero__places { display: flex; } .hero { padding-bottom: 5.5rem; } }
  .gyro { position: absolute; right: var(--gutter); top: 5.4rem; display: inline-flex; gap: .4rem; align-items: center; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .55rem .85rem; border-radius: 999px; background: rgb(255 255 255 / .12); backdrop-filter: blur(8px); min-height: 40px; }

  /* ---------- Quiénes somos ---------- */
  .axes { display: grid; margin-top: 2rem; }
  .axis { display: flex; gap: 1rem; padding-block: 1.1rem; border-top: 1px solid var(--rule); align-items: center; &:first-child { border-top: 0; } }
  .axis__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--white); flex: none;
    box-shadow: 0 10px 20px -10px rgb(11 31 58 / .7); }
  .axis__v { font-size: clamp(1.1rem, 3.4vw, 1.4rem); font-variation-settings: "wdth" 80; font-weight: 700; color: var(--navy); line-height: 1.2; }
  .frame3d { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }

  .mv { display: grid; padding: 0; }
  .mv__img { height: 46vh; }
  .mv__body { padding-block: clamp(3.5rem, 10vw, 7rem); }
  .mv__cols { display: grid; gap: 2rem; margin-top: 1rem; & article p:last-child { margin-top: .8rem; } }
  @media (min-width: 900px) {
    .mv { grid-template-columns: 1fr 2fr; }
    .mv__img { height: auto; }
    .mv__body { width: auto; margin: 0; padding-inline: 4rem var(--gutter); }
    .mv__cols { grid-template-columns: 1fr 1fr; gap: 3rem; }
  }

  /* ---------- Cifras ---------- */
  .cifras__bg, .sectores__bg, .contacto__bg { position: absolute; inset: 0; z-index: -1; opacity: .16; }
  .cifras__bg::after, .sectores__bg::after, .contacto__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy), transparent 30%, transparent 70%, var(--navy)); }
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; margin-block: 2.5rem 1.5rem; }
  .stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .4rem; border-top: 1px solid rgb(255 255 255 / .15); padding-top: 1rem;
    & dd { font-size: clamp(2.2rem, 9vw, 4.4rem); line-height: 1; color: var(--white); white-space: nowrap; }
    & .u { font-size: .48em; font-weight: 700; letter-spacing: 0; margin-inline: .08em .18em; vertical-align: .55em; }
    & .u:last-child { margin-inline: .18em 0; }
    &.stat--gold .u { font-size: 1em; vertical-align: 0; margin: 0; }
    &.stat--gold dd { color: var(--gold); } }
  @media (min-width: 900px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; } }
  .note { font-size: .75rem; color: #8fa3bf !important; max-width: 70ch; }
  .timeline { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 10px; margin-top: 3rem; padding: 10px 0 1rem 10px; scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
    & li { flex: 0 0 min(46%, 220px); scroll-snap-align: start; position: relative; padding: 1.6rem 1rem 0 0; border-top: 1px solid #5a7394; }
    & li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 2px var(--white); }
    & li:first-child::before, & li:last-child::before { background: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 0 7px rgb(232 179 106 / .2); }
    & b { display: block; font-size: 1.25rem; font-weight: 800; }
    & li:first-child b, & li:last-child b { color: var(--gold); }
    & span { font-size: .88rem; color: var(--mist); } }
  @media (min-width: 900px) { .timeline li { flex: 1; } }

  /* ---------- Capacidad ---------- */
  .band { position: relative; color: var(--white); min-height: 46vh; display: grid; align-items: end; margin-top: calc(-1 * clamp(4.5rem, 12vw, 9rem)); margin-bottom: 3rem;
    & > picture { position: absolute; inset: 0; }
    &::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(11 31 58 / .94), rgb(11 31 58 / .55)); }
    & .band__body { position: relative; z-index: 2; padding-block: 5rem 2.5rem; } & .lead { color: var(--mist); } }
  .phases { display: grid; gap: 1rem; }
  .phase { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: center; padding: 1.2rem; border-radius: var(--r); background: var(--light);
    & .phase__ico { grid-row: span 3; width: 58px; height: 58px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; }
    & .phase__n { font-size: .7rem; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
    & h3 { font-size: 1.5rem; font-variation-settings: "wdth" 75; font-weight: 750; color: var(--navy); line-height: 1; }
    & p { font-size: .9rem; color: var(--muted); } }
  @media (min-width: 900px) {
    .phases { grid-template-columns: repeat(5, 1fr); position: relative; }
    .phases::before { content: ""; position: absolute; left: 10%; right: 10%; top: 42px; border-top: 1.5px dashed var(--mist); }
    .phase { grid-template-columns: 1fr; text-align: center; justify-items: center; background: transparent; padding: 0; gap: .4rem; position: relative;
      & .phase__ico { grid-row: auto; width: 84px; height: 84px; box-shadow: 0 0 0 8px var(--white); } & h3 { font-size: 1.7rem; } }
  }
  .pillars { display: grid; gap: 1rem; margin-top: 2rem; }
  @media (min-width: 640px) { .pillars { grid-template-columns: 1fr 1fr; } }
  .pillar { background: var(--white); border-radius: var(--r); padding: 1.3rem; box-shadow: var(--shadow); transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
    & h3 { font-size: 1.15rem; font-variation-settings: "wdth" 80; font-weight: 750; color: var(--navy); margin-block: .9rem .35rem; line-height: 1.15; }
    & p { font-size: .9rem; color: var(--muted); } }

  /* ---------- Tecnología ---------- */
  .tech__grid { display: grid; gap: 1.5rem; margin-block: 2rem; }
  @media (min-width: 900px) { .tech__grid { grid-template-columns: 1fr 1fr; } }
  .device { padding: .9rem .9rem 1.3rem; border-radius: 22px; background: linear-gradient(160deg, rgb(255 255 255 / .09), rgb(255 255 255 / .02));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 30px 60px -30px rgb(0 0 0 / .7); transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
    & .device__screen { border-radius: 14px; overflow: hidden; margin-bottom: 1.1rem; aspect-ratio: 1014 / 357; }
    & h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.6rem; font-variation-settings: "wdth" 75; font-weight: 750; padding-inline: .4rem; }
    & > p { padding-inline: .4rem; }
    & .tags { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #8fa3bf !important; margin-top: .6rem; } }
  .appicon img { width: 34px; border-radius: 9px; }
  .flow { display: grid; gap: .6rem; margin-top: 1rem;
    & li { display: flex; align-items: center; gap: .8rem; font-weight: 700; font-variation-settings: "wdth" 85; font-size: 1.05rem; }
    & li span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--navy); flex: none; }
    & li:last-child span { background: var(--gold); } }
  @media (min-width: 900px) { .flow { grid-template-columns: repeat(4, 1fr); & li:not(:last-child)::after { content: "→"; margin-left: auto; margin-right: 1rem; color: var(--mist); font-weight: 400; } } }
  .claim { margin-top: 2rem; font-size: clamp(1.5rem, 5vw, 2.2rem); font-variation-settings: "wdth" 72; font-weight: 750; color: var(--gold) !important; letter-spacing: -.01em; line-height: 1.1; }

  /* ---------- Mapas ---------- */
  .mapcard, .colmap { position: relative; border-radius: 24px; transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; }
  .mapcard { background: var(--navy); box-shadow: var(--shadow); }
  .mapcard picture, .colmap picture { border-radius: 24px; overflow: hidden; }
  .pin { position: absolute; display: grid; transform: translate(14px, -50%) translateZ(40px); color: var(--white); line-height: 1.15; pointer-events: none;
    & b { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
    & small { font-size: .7rem; color: var(--gold); }
    &.pin--left { transform: translate(calc(-100% - 14px), -120%) translateZ(40px); text-align: right; } }
  .offices { display: grid; gap: 1rem; margin-top: 2rem; }
  .office { display: grid; grid-template-columns: 112px 1fr; gap: 1rem; align-items: center;
    & picture { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; }
    & h3 { font-size: 1.4rem; font-variation-settings: "wdth" 80; font-weight: 750; color: var(--navy); line-height: 1.1; margin-block: .15rem; }
    & p:last-child { font-size: .85rem; color: var(--muted); } & a { text-decoration: none; } }

  /* ---------- Sectores ---------- */
  .mix { display: grid; gap: 1.2rem; margin-top: 2rem;
    & li { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; color: var(--mist); }
    & b { font-size: 2.6rem; color: var(--white); } & b.gold { color: var(--gold); } }
  .glass { border-radius: 24px; padding: 1.4rem; background: rgb(255 255 255 / .06); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 30px 60px -30px rgb(0 0 0 / .6); }
  .bars { & h3 { font-size: 1.3rem; font-variation-settings: "wdth" 80; font-weight: 750; } & figcaption p { font-size: .8rem; margin-bottom: 1.2rem; }
    & ul { display: grid; gap: .75rem; }
    & li { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center; font-size: .82rem; }
    & .bars__k { color: var(--mist); } & em { font-style: normal; color: #8fa3bf; }
    & b { font-variant-numeric: tabular-nums; font-size: .85rem; }
    & .bars__track { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgb(255 255 255 / .08); overflow: hidden; }
    & .bars__bar { display: block; height: 100%; width: calc(var(--v) * 100%); min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, var(--steel), var(--gold));
      transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease) calc(var(--i) * 70ms); }
    &.is-in .bars__bar { transform: scaleX(1); } }

  /* ---------- Proyectos: tarjetas 3D ---------- */
  .cards { display: grid; gap: 1rem; margin-top: 2rem; }
  @media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .cards { grid-template-columns: repeat(3, 1fr); } .card3d--xl { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } }
  .card3d { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3.2; border-radius: 22px; overflow: hidden; text-align: left; isolation: isolate; color: var(--white);
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
    box-shadow: 0 30px 60px -28px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .08);
    & picture { position: absolute; inset: 0; z-index: -2; }
    & img { transition: transform .8s var(--ease); }
    &:hover img, &:focus-visible img { transform: scale(1.05); }
    &::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(11 31 58 / .95), rgb(11 31 58 / .15) 60%, transparent); }
    &:active { scale: .985; } }
  .card3d__glare { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / .25), transparent 55%); }
  .card3d.is-tilting .card3d__glare { opacity: 1; }
  .card3d__body { position: absolute; inset: auto 0 0; padding: 1.3rem; display: grid; gap: .25rem; transform: translateZ(50px); }
  .tag { justify-self: start; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 99px; background: rgb(255 255 255 / .16); backdrop-filter: blur(8px); margin-bottom: .4rem; }
  .card3d__t { font-size: clamp(1.4rem, 4.5vw, 1.9rem); font-variation-settings: "wdth" 75; font-weight: 750; line-height: 1; letter-spacing: -.01em; }
  .card3d--xl .card3d__t { font-size: clamp(1.8rem, 5.5vw, 3.2rem); }
  .card3d__l { font-size: .85rem; color: var(--mist); }
  .card3d__v { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; margin-top: .2rem; }

  /* ---------- Coverflow ---------- */
  .coverflow { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2.5rem calc(50% - min(40vw, 190px)) 2rem; perspective: 1100px;
    scrollbar-width: none; overscroll-behavior-x: contain; &::-webkit-scrollbar { display: none; } }
  .cf { flex: 0 0 min(80vw, 380px); scroll-snap-align: center; transform-style: preserve-3d;
    & article { height: 100%; border-radius: 22px; overflow: hidden; background: var(--navy-2); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .07); }
    & .cf__img { position: relative; aspect-ratio: 16 / 10; &::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(0deg, rgb(11 31 58 / .85), transparent); } }
    & .cf__v { position: absolute; z-index: 1; left: 1rem; bottom: .8rem; font-weight: 800; color: var(--gold); font-size: 1.15rem; text-shadow: 0 2px 12px rgb(0 0 0 / .7); }
    & h3 { font-size: 1.35rem; font-variation-settings: "wdth" 78; font-weight: 750; line-height: 1.05; padding: 1rem 1.1rem 0; }
    & .cf__l { font-style: italic; font-size: .85rem; padding-inline: 1.1rem; }
    & dl { padding: .4rem 1.1rem 1.2rem; display: grid; }
    & dt { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: #8fa3bf; margin-top: .7rem; }
    & dd { font-size: .85rem; color: var(--white); } }

  /* ---------- Otros proyectos ---------- */
  .tabs { display: inline-flex; gap: .3rem; padding: .3rem; border-radius: 999px; background: var(--light); margin-block: 1rem 1.5rem;
    & [role=tab] { min-height: 44px; padding: .5rem 1.2rem; border-radius: 999px; font-weight: 600; color: var(--muted); transition: background-color .25s, color .25s; }
    & [aria-selected=true] { background: var(--navy); color: var(--white); } }
  .list { border-top: 1.5px solid var(--navy); }
  .row { display: grid; gap: .5rem; padding-block: 1rem; border-bottom: 1px solid var(--rule);
    & h3 { font-size: 1.05rem; font-variation-settings: "wdth" 82; font-weight: 700; color: var(--ink); line-height: 1.2; }
    & p { font-size: .8rem; color: var(--muted); }
    & .row__v { display: flex; gap: .8rem; align-items: baseline; & b { color: var(--navy); font-variant-numeric: tabular-nums; } & span { font-size: .78rem; color: var(--muted); } } }
  @media (min-width: 800px) { .row { grid-template-columns: 1fr auto; align-items: center; & .row__v { flex-direction: column; align-items: flex-end; gap: 0; } } }

  /* ---------- Huella ---------- */
  .regions { display: grid; gap: .7rem; margin-top: 2rem;
    & li { display: flex; gap: .9rem; padding: 1rem; border-radius: 16px; background: var(--light); transition: background-color .3s, color .3s; }
    & li.is-active { background: var(--navy); & h3, & p { color: var(--white); } & .regions__k { color: var(--gold); } }
    & h3 { font-size: 1.2rem; font-variation-settings: "wdth" 80; font-weight: 750; color: var(--navy); line-height: 1.1; }
    & .regions__k { font-weight: 600; color: var(--navy-2); font-size: .85rem; } & p { font-size: .82rem; color: var(--muted); } }
  .badge { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-d); color: var(--white); font-weight: 800; font-size: .85rem; }
  .colmap { max-width: 520px; justify-self: center; width: 100%;
    & figcaption { display: flex; gap: .5rem; align-items: center; font-size: .78rem; color: var(--muted); margin-top: .6rem;
      & i { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--navy-2); } } }
  .badge--map { position: absolute; transform: translate(-50%, -50%) translateZ(60px); width: 34px; height: 34px; box-shadow: 0 0 0 3px var(--white), 0 10px 20px -6px rgb(0 0 0 / .5);
    transition: scale .3s var(--ease);
    &::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--gold); animation: ping 2.4s var(--ease) infinite; }
    &.is-active { scale: 1.3; } }
  @keyframes ping { from { scale: 1; opacity: .9; } to { scale: 2.4; opacity: 0; } }

  /* ---------- Galería ---------- */
  .gallery { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2rem var(--gutter) 1rem; scrollbar-width: none; &::-webkit-scrollbar { display: none; }
    & li { flex: 0 0 min(75vw, 340px); scroll-snap-align: center; }
    & figure { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; }
    & figcaption { position: absolute; inset: auto 0 0; padding: 3rem 1rem 1rem; color: var(--white); font-size: .8rem; background: linear-gradient(0deg, rgb(11 31 58 / .9), transparent);
      & b { display: block; font-size: 1.1rem; font-variation-settings: "wdth" 80; } } }
  @media (min-width: 1100px) { .gallery { display: grid; grid-template-columns: repeat(4, 1fr); width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; padding-inline: 0; overflow: visible;
    & li:nth-child(even) figure { translate: 0 2.5rem; } } }

  /* ---------- Clientes ---------- */
  .marquee { overflow: hidden; margin-block: 2rem; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    & ul { display: flex; gap: 1rem; width: max-content; animation: marquee 38s linear infinite; padding-block: 1rem; }
    & li { width: 170px; height: 112px; display: grid; place-items: center; background: var(--white); border-radius: 16px; padding: 1rem; box-shadow: var(--shadow); }
    & img { max-height: 76px; width: auto; object-fit: contain; }
    &:hover ul { animation-play-state: paused; } }
  @keyframes marquee { to { transform: translateX(calc(-50% - .5rem)); } }
  .principal { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem;
    & li { padding: .55rem 1rem; border-radius: 999px; background: var(--white); color: var(--navy); font-weight: 700; font-variation-settings: "wdth" 85; box-shadow: 0 0 0 1px var(--rule); } }

  /* ---------- Proyección regional ---------- */
  .region__t span { color: var(--gold); font-variation-settings: "wdth" 100; font-weight: 400; }
  .points { display: grid; gap: 1.2rem; margin-top: 2rem; & h3 { font-size: 1.2rem; font-variation-settings: "wdth" 80; } & p { font-size: .9rem; } }
  .region__media { display: grid; gap: 1rem; }
  .mapcard--dark { background: var(--navy-2); }
  .canal { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9;
    & figcaption { position: absolute; inset: auto 0 0; padding: .6rem .8rem; font-size: .62rem; color: var(--mist); background: linear-gradient(0deg, rgb(11 31 58 / .85), transparent); } }
  .route { display: flex; align-items: center; gap: clamp(.4rem, 2vw, .8rem); margin-top: 3rem; font-size: clamp(.56rem, 2.4vw, .66rem); letter-spacing: clamp(.06em, .6vw, .16em); text-transform: uppercase; font-weight: 700;
    & i { flex: 1; height: 2px; background: var(--white); border-radius: 2px; } & i.dash { background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 18px); } }

  /* ---------- Contacto ---------- */
  .contacto { min-height: 90svh; display: grid; align-content: center; }
  .contacto__bg { opacity: .3; }
  .contacto__t { font-size: clamp(2.8rem, 10vw, 6.4rem); margin-block: .6rem 1rem; & em { display: block; font-style: normal; color: var(--gold); } }
  .ctas { display: flex; flex-direction: column; gap: .8rem; margin-top: 2rem; & .btn { justify-content: center; } }
  @media (min-width: 700px) { .ctas { flex-direction: row; } }
  .addr { display: grid; gap: 1.5rem; margin-top: 3rem; & p:last-child { margin-top: .4rem; } & a { text-decoration: none; color: var(--white); } }
  @media (min-width: 700px) { .addr { grid-template-columns: 1fr 1fr; } }
  .foot { background: #07152a; color: var(--mist); font-size: .78rem; padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); }
  .foot__in { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; & span { display: flex; align-items: center; gap: .6rem; } }
  .foot__mark { width: 28px; background: var(--white); border-radius: 50%; padding: 3px; }
  .fab { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 40; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: #25d366; color: var(--white); box-shadow: 0 14px 30px -10px rgb(0 0 0 / .5); transition: transform .2s var(--ease), opacity .3s;
    & .ico { width: 28px; height: 28px; } &:active { transform: scale(.94); } }
  body:has(.hero.is-visible) .fab, body:has(.contacto.is-visible) .fab { opacity: 0; pointer-events: none; }

  /* ---------- Ficha: <dialog> nativo ---------- */
  .ficha { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; padding: 0; background: var(--navy); color: var(--white); overflow-y: auto; overscroll-behavior: contain;
    &::backdrop { background: rgb(5 12 25 / .7); backdrop-filter: blur(6px); }
    & .ficha__media { display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
      & picture { aspect-ratio: 4 / 3; overflow: hidden; } & picture:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } }
    & .ficha__body { padding: 1.6rem var(--gutter) calc(2rem + env(safe-area-inset-bottom)); }
    & h2 { font-size: clamp(2rem, 7vw, 3.2rem); margin-block: .5rem .3rem; }
    & .ficha__l { font-style: italic; color: var(--mist); }
    & dl { display: grid; gap: 1rem; margin-top: 1.5rem; }
    & dt { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: #8fa3bf; }
    & dd { margin-top: .2rem; color: var(--white); }
    & .ficha__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    & .ficha__v { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid #3a5578;
      & b { font-size: clamp(1.6rem, 6vw, 2.2rem); color: var(--gold); font-weight: 800; letter-spacing: -.02em; } }
    opacity: 0; transform: translateY(4%) scale(.98); transition: opacity .35s var(--ease), transform .45s var(--ease), overlay .45s allow-discrete, display .45s allow-discrete;
    &[open] { opacity: 1; transform: none; @starting-style { opacity: 0; transform: translateY(4%) scale(.98); } } }
  .ficha__close { position: fixed; top: max(.8rem, env(safe-area-inset-top)); right: .8rem; z-index: 3; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: rgb(11 31 58 / .6); backdrop-filter: blur(12px); color: var(--white); }
  @media (min-width: 900px) {
    .ficha[open] { display: grid; }
    .ficha { width: min(1180px, 94vw); height: min(760px, 90dvh); margin: auto; border-radius: 26px; grid-template-columns: 1.25fr 1fr; overflow: hidden;
      & .ficha__media { grid-template-rows: 1.6fr 1fr; overflow: hidden; & picture, & picture:first-child { aspect-ratio: auto; } }
      & .ficha__body { overflow-y: auto; padding: 2.6rem; }
      & .ficha__close { position: absolute; top: 1rem; right: 1rem; margin: 0; } }
  }
}

@layer motion {
  /* Revelado: scroll-driven animations nativas; respaldo con IntersectionObserver (clase .is-in) */
  .reveal { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .reveal.is-in { opacity: 1; translate: 0 0; }
  @supports (animation-timeline: view()) {
    .reveal { opacity: 1; translate: 0 0; transition: none; animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes rise { from { opacity: 0; translate: 0 36px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
    .progress { animation: grow linear both; animation-timeline: scroll(root); }
    @keyframes grow { to { transform: scaleX(1); } }
    .hero__inner { animation: heroOut linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes heroOut { to { opacity: .15; translate: 0 -10vh; scale: .96; } }
    .cf { view-timeline: --cf inline; }
    .cf article { animation: flow linear both; animation-timeline: --cf; }
    @keyframes flow {
      0% { transform: rotateY(50deg) translateZ(-140px) scale(.86); opacity: .5; }
      50% { transform: rotateY(0) translateZ(0) scale(1); opacity: 1; }
      100% { transform: rotateY(-50deg) translateZ(-140px) scale(.86); opacity: .5; }
    }
    .gallery li { view-timeline: --g inline; }
    .gallery figure { animation: tiltIn linear both; animation-timeline: --g; }
    @keyframes tiltIn { 0% { transform: perspective(800px) rotateY(20deg) scale(.92); } 50% { transform: none; } 100% { transform: perspective(800px) rotateY(-20deg) scale(.92); } }
    @media (min-width: 1100px) { .gallery figure { animation: none; } }
  }
  /* Titulares: palabras que se levantan en 3D */
  .word { display: inline-block; opacity: 0; transform: translateY(.45em) rotateX(-75deg); transform-origin: 50% 100%;
    animation: word 1s var(--ease) forwards; animation-delay: calc(var(--w) * 70ms + 150ms); }
  @keyframes word { to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal, .word { opacity: 1 !important; translate: none !important; animation: none !important; }
    .word { transform: none !important; }
    .marquee ul { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .marquee li[aria-hidden] { display: none; }
    .cf article, .gallery figure, .hero__inner { animation: none !important; }
  }
  @media (prefers-reduced-transparency: reduce) { .glass, .chip3d { backdrop-filter: none; background: var(--navy-2); } }
}

/* ---------- Coverflow: avance automático ---------- */
@layer components {
  .coverflow { position: relative; scroll-behavior: smooth; }
  .cf-ctrl { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
  .cf-toggle { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--white);
    background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
    & .ico { width: 18px; height: 18px; grid-area: 1 / 1; }
    & .i-play { display: none; }
    &[aria-pressed=true] .i-play { display: block; } &[aria-pressed=true] .i-pause { display: none; } }
  /* Anillo de progreso hasta el siguiente avance */
  .cf-ring { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(var(--gold) calc(var(--p, 0) * 1turn), transparent 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
  .cf-dots { display: flex; flex-wrap: wrap; gap: 0; flex: 1; }
  .cf-dot { width: 22px; height: 30px; display: grid; place-items: center;
    &::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: rgb(255 255 255 / .28); transition: width .35s var(--ease), background-color .35s; }
    &[aria-current=true]::before { width: 20px; background: var(--gold); } }
  .cf-count { flex: none; font-size: .8rem; color: var(--mist); font-variant-numeric: tabular-nums; & b { color: var(--white); } }
  @media (max-width: 599px) { .cf-dots { display: none; } }
}

/* ---------- Proyectos emblemáticos: carrusel 3D con avance automático ---------- */
@layer components {
  .showcase { position: relative; display: flex; gap: clamp(.8rem, 2vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 2.5rem calc(50% - min(44vw, 460px)) 1.5rem; perspective: 1400px; scrollbar-width: none; overscroll-behavior-x: contain;
    &::-webkit-scrollbar { display: none; } }
  .sc { flex: 0 0 min(88vw, 920px); scroll-snap-align: center; transform-style: preserve-3d;
    & .card3d { aspect-ratio: 4 / 4.6; max-height: min(74svh, 640px); }
    & .card3d__t { font-size: clamp(1.7rem, 6.5vw, 3.4rem); }
    & .card3d__body { padding: clamp(1.3rem, 3vw, 2.4rem); } }
  @media (min-width: 700px) { .sc .card3d { aspect-ratio: 16 / 9; } }
  .coverflow, .showcase { &:focus-visible { outline-offset: -6px; } }
}
@layer motion {
  @supports (animation-timeline: view()) {
    .sc { view-timeline: --sc inline; animation: sweep linear both; animation-timeline: --sc; }
    @keyframes sweep {
      0% { transform: rotateY(28deg) translateZ(-160px) scale(.9); opacity: .45; filter: saturate(.6) brightness(.8); }
      50% { transform: none; opacity: 1; filter: none; }
      100% { transform: rotateY(-28deg) translateZ(-160px) scale(.9); opacity: .45; filter: saturate(.6) brightness(.8); }
    }
  }
  @media (prefers-reduced-motion: reduce) { .sc { animation: none !important; } }
}

/* ---------- Enfoque local ---------- */
@layer components {
  .stat .u--plain { font-size: 1em; vertical-align: 0; margin: 0; }
  .mapcard--light { background: var(--light); box-shadow: var(--shadow); }
  .addr { grid-template-columns: 1fr; }
}
@layer components { .pin b, .pin small { text-shadow: 0 1px 8px rgb(11 31 58 / .95), 0 0 2px rgb(11 31 58 / .9); } }
@layer components {
  .bars li { grid-template-areas: "k n" "t t"; }
  .bars .bars__k { grid-area: k; } .bars li > b { grid-area: n; font-size: 1rem; } .bars .bars__track { grid-area: t; }
}

/* ---------- Pasada de detalle (pautas de Apple) ---------- */
@layer base {
  html { -webkit-tap-highlight-color: transparent; }
  /* Foco visible con contraste suficiente en fondos claros y oscuros */
  :focus-visible { outline: 2.5px solid var(--gold-d); outline-offset: 3px; }
  .sec--dark :focus-visible, .hero :focus-visible, .ficha :focus-visible { outline-color: var(--gold); }
}
@layer components {
  /* Respuesta inmediata al presionar (no al soltar) */
  .tabs [role=tab], .cf-toggle, .cf-dot, .principal li, .regions li { transition: transform .1s var(--ease), background-color .2s, color .2s; }
  .tabs [role=tab]:active, .cf-toggle:active, .ficha__close:active, .menu__close:active { transform: scale(.95); }
  .regions li:active { transform: scale(.985); }
  /* Áreas táctiles de al menos 44 px */
  .cf-dot { width: 26px; height: 44px; }
  .cf-toggle { width: 48px; height: 48px; }
  /* Botón del carrusel sobre material, con estado presionado */
  .cf-toggle[aria-pressed=true] { background: rgb(232 179 106 / .16); }
}
/* El hover solo existe donde hay puntero: en táctil no queda "pegado" */
@media (hover: none) {
  .btn--gold:hover { background: var(--gold); }
  .btn--ghost:hover { background: rgb(255 255 255 / .08); }
  .card3d:hover img { transform: none; }
}
@media (prefers-contrast: more) {
  .glass, .chip3d, .device { background: var(--navy-2); backdrop-filter: none; box-shadow: 0 0 0 1.5px var(--white); }
  .label, .eyebrow { color: var(--ink); } .sec--dark .label, .sec--dark .eyebrow { color: var(--white); }
}

/* ---------- Capacidad integral: una sola sección sobre la imagen de fondo ---------- */
@layer components {
  .capacidad { overflow: hidden; }
  .capacidad__bg { position: absolute; inset: 0; z-index: -1;
    & picture, & img { width: 100%; height: 100%; object-fit: cover; }
    &::after { content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgb(11 31 58 / .9) 0%, rgb(11 31 58 / .72) 38%, rgb(11 31 58 / .82) 70%, rgb(11 31 58 / .96) 100%),
                  linear-gradient(90deg, rgb(11 31 58 / .55), transparent 70%); } }
  .capacidad .lead { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
  .capacidad .phase { background: rgb(255 255 255 / .07); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 20px 40px -24px rgb(0 0 0 / .6);
    & .phase__ico { background: var(--white); color: var(--navy); }
    & .phase__n { color: var(--gold); }
    & h3 { color: var(--white); }
    & p { color: var(--mist); } }
  @media (min-width: 900px) {
    .capacidad .phases::before { border-top-color: rgb(255 255 255 / .3); }
    .capacidad .phase { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
      & .phase__ico { box-shadow: 0 0 0 8px rgb(255 255 255 / .1), 0 14px 30px -10px rgb(0 0 0 / .6); } }
  }
  @media (prefers-reduced-transparency: reduce) { .capacidad .phase { background: var(--navy-2); backdrop-filter: none; } }
}

/* ---------- Grupos de enlaces del menú (submenú) ---------- */
@layer components {
  .menu-group { position: relative; }
  .menu-group > summary { list-style: none; display: flex; align-items: center; gap: .35rem; min-height: 48px; padding: 0 1rem; border-radius: 14px;
    font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; cursor: pointer; user-select: none; transition: background-color .12s var(--ease);
    &::-webkit-details-marker { display: none; }
    &:active { background: rgb(11 31 58 / .08); } }
  .chev { width: 16px; height: 16px; margin-left: auto; transition: transform .25s var(--ease); }
  .menu-group[open] .chev { transform: rotate(180deg); }
  .menu .submenu { display: grid; gap: 2px; padding: .15rem 0 .4rem .75rem; }
  .menu .submenu a { min-height: 44px; font-size: 1rem; font-weight: 500; color: rgb(11 31 58 / .82); }
  .menu .submenu a[target=_blank]::after { content: "↗"; margin-left: .45em; font-size: .8em; opacity: .55; }
  .menu-group[open] .submenu { animation: subIn .24s var(--ease) both; }
  @keyframes subIn { from { opacity: 0; transform: translateY(-6px); } }
  @media (min-width: 1200px) {
    .menu-group > summary { min-height: 40px; padding: 0 .7rem 0 .8rem; font-size: .86rem; font-weight: 500; letter-spacing: 0; color: rgb(11 31 58 / .78); border-radius: 12px;
      transition: color .15s, background-color .15s; }
    .menu-group[open] > summary, .menu-group > summary.has-current { color: var(--navy); background: rgb(11 31 58 / .06); }
    .chev { width: 14px; height: 14px; margin-left: 0; }
    /* Panel desplegable: material blanco que nace del botón */
    .menu .submenu { position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; min-width: 230px; padding: .45rem; border-radius: 16px;
      background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
      box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(11 31 58 / .07), 0 24px 48px -18px rgb(11 31 58 / .5); transform-origin: top center; }
    .menu-group[open] .submenu { animation: subInDesk .22s var(--ease) both; }
    @keyframes subInDesk { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
    .menu .submenu a { min-height: 40px; font-size: .88rem; white-space: nowrap; color: rgb(11 31 58 / .85); }
  }
  @media (hover: hover) and (pointer: fine) { .menu-group > summary:hover { color: var(--navy); background: rgb(11 31 58 / .05); } }
  @media (prefers-reduced-transparency: reduce) { .menu .submenu { background: #fff; backdrop-filter: none; } }
}

/* ---------- Páginas de documentos ---------- */
@layer components {
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .docs-hero { padding-top: calc(clamp(4.5rem, 12vw, 9rem) + 2rem); padding-bottom: clamp(2.5rem, 6vw, 4rem);
    background: radial-gradient(120% 120% at 100% 0%, var(--steel) 0%, transparent 55%), var(--navy); }
  .docs-hero .h2 { margin-bottom: .3em; }
  .docs-search { display: flex; align-items: center; gap: .6rem; max-width: 520px; margin-top: 1.8rem; min-height: 52px; padding: 0 1rem; border-radius: 16px;
    background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); color: var(--mist);
    & input { flex: 1; min-width: 0; border: 0; background: none; color: var(--white); font: inherit; font-size: 1rem; outline: none; min-height: 48px;
      &::placeholder { color: rgb(201 211 224 / .75); } }
    &:focus-within { box-shadow: inset 0 0 0 2px var(--gold); } }
  .docs-body { padding-top: clamp(2.5rem, 6vw, 4rem); }
  .docs-cat + .docs-cat { margin-top: 2.5rem; }
  .docs-cat > .label { margin-bottom: .9rem; }
  .docs-grid { display: grid; gap: .8rem; }
  @media (min-width: 760px) { .docs-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .docs-grid { grid-template-columns: repeat(3, 1fr); } }
  .doc-card { position: relative; display: flex; border-radius: 18px; background: var(--light); transition: background-color .2s, box-shadow .2s, transform .1s var(--ease);
    &:active { transform: scale(.99); } }
  @media (hover: hover) { .doc-card:hover { background: var(--white); box-shadow: var(--shadow); } }
  .doc-card__main { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; align-items: start; padding: 1.1rem; text-decoration: none; color: inherit; border-radius: 18px; }
  .doc-card__ico { grid-row: span 3; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: var(--white); }
  .doc-card__t { font-variation-settings: "wdth" 85; font-weight: 700; font-size: 1.08rem; line-height: 1.2; color: var(--navy); }
  .doc-card__d { font-size: .86rem; color: var(--muted); }
  .doc-card__f { font-size: .74rem; color: var(--muted); margin-top: .25rem; }
  .doc-card__dl { flex: none; align-self: center; width: 44px; height: 44px; margin-right: .7rem; border-radius: 12px; display: grid; place-items: center; color: var(--navy);
    background: rgb(11 31 58 / .06); transition: background-color .15s, transform .1s var(--ease);
    &:active { transform: scale(.94); } }
  @media (hover: hover) { .doc-card__dl:hover { background: rgb(11 31 58 / .12); } }
  .docs-empty { text-align: center; padding: 3rem 1rem; color: var(--muted);
    & .ico { width: 44px; height: 44px; margin: 0 auto 1rem; color: var(--mist); }
    & h2 { font-variation-settings: "wdth" 80; font-size: 1.4rem; color: var(--navy); margin-bottom: .3rem; } }
  .crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist);
    & a { color: var(--gold); text-decoration: none; font-weight: 600; } }
  .crumbs + .h2 { margin-top: .9rem; }
  .doc-meta { font-size: .85rem; color: #8fa3bf !important; margin-top: .4rem; }
  .doc-ctas { margin-top: 1.6rem; }
  .pdf-frame { border-radius: 20px; overflow: hidden; background: var(--light); box-shadow: var(--shadow); height: min(80svh, 1100px); min-height: 420px;
    & iframe { width: 100%; height: 100%; border: 0; display: block; } }
  .pdf-note { margin-top: .9rem; font-size: .85rem; color: var(--muted); & a { color: var(--navy); font-weight: 600; } }
}

@layer components { @media (min-width: 1200px) { .menu a:not(.btn), .menu-group > summary { white-space: nowrap; } } }

/* ───────── Visor interno de PDF (visor-pdf.js) ───────── */
@layer components {
  .pv { --pv-bg: #e9edf3; position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
    background: var(--pv-bg); box-shadow: 0 30px 60px -36px rgb(11 31 58 / .45), 0 0 0 1px rgb(11 31 58 / .08); isolation: isolate; }
  .pv__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .6rem; background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgb(11 31 58 / .08); color: var(--navy); font-variant-numeric: tabular-nums; }
  .pv__grp { display: flex; align-items: center; gap: .15rem; }
  .pv__btn, .pv__zoom { min-width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 12px; color: var(--navy);
    transition: background-color .15s var(--ease), transform .1s var(--ease), opacity .15s;
    &:hover:not(:disabled) { background: rgb(11 31 58 / .06); } &:active:not(:disabled) { transform: scale(.94); }
    &:disabled { opacity: .3; cursor: default; } & .ico { width: 20px; height: 20px; } }
  .pv__zoom { padding-inline: .5rem; font-size: .85rem; font-weight: 650; min-width: 64px; &[aria-pressed=true] { color: var(--gold-d); } }
  .pv__pg { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); white-space: nowrap;
    & input { width: 3.2ch; min-width: 44px; height: 36px; text-align: center; font: inherit; font-weight: 650; color: var(--navy); border-radius: 10px;
      border: 1px solid rgb(11 31 58 / .14); background: var(--white); &:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } }
    & b { color: var(--navy); font-weight: 650; } }
  .pv__scroll { position: relative; height: clamp(440px, calc(100svh - 170px), 1100px); overflow: auto; overscroll-behavior: contain;
    scroll-padding-top: 12px; -webkit-overflow-scrolling: touch; &:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); } }
  .pv__pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; width: max-content; min-width: 100%; }
  .pv--desborda .pv__pages { align-items: flex-start; }
  .pv__page { position: relative; flex: none; background: var(--white); border-radius: 4px; overflow: hidden;
    box-shadow: 0 1px 2px rgb(11 31 58 / .12), 0 12px 32px -18px rgb(11 31 58 / .35);
    & canvas { display: block; width: 100%; height: 100%; }
    &:not(.is-lista) { background: linear-gradient(100deg, #fff 30%, #f2f5f9 50%, #fff 70%) 0 0 / 300% 100%; animation: pvShimmer 1.4s linear infinite; } }
  @keyframes pvShimmer { to { background-position: -150% 0; } }
  .pv__msg { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: .8rem; padding: 2rem; text-align: center; color: var(--muted);
    & p { max-width: 36ch; line-height: 1.5; } & b { color: var(--navy); } & a { color: var(--gold-d); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; } }
  .pv[data-estado=cargando] .pv__msg, .pv[data-estado=error] .pv__msg { display: grid; }
  .pv[data-estado=nativo] .pv__msg { display: none; }
  .pv[data-estado=nativo] .pv__pages { padding: 0; height: 100%; }
  .pv__nativo { width: 100%; height: 100%; border: 0; background: var(--white); }
  .pv:not([data-estado=listo]) .pv__grp:not(.pv__grp--fin) { visibility: hidden; }
  .pv__spin { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid rgb(11 31 58 / .12); border-top-color: var(--gold-d); animation: pvGiro .8s linear infinite; }
  @keyframes pvGiro { to { rotate: 1turn; } }
  .pv--full { position: fixed; inset: 0; z-index: 200; border-radius: 0; box-shadow: none;
    & .pv__scroll { height: auto; flex: 1; } & .pv__bar { padding-top: max(.5rem, env(safe-area-inset-top)); } }
  .pv:fullscreen { border-radius: 0; & .pv__scroll { height: auto; flex: 1; } }
  html.pv-bloqueo, html.pv-bloqueo body { overflow: hidden; }
  .textLayer ::selection { background: rgb(232 179 106 / .45); }
  @media (max-width: 599px) {
    .pv { border-radius: 16px; margin-inline: -8px; }
    .pv__bar { padding: .35rem .25rem; gap: 0; }
    .pv__grp { gap: 0; }
    .pv__btn { min-width: 38px; } .pv__zoom { min-width: 50px; padding-inline: .15rem; font-size: .8rem; }
    .pv__pg > span { display: none; } .pv__pg input { width: 44px; min-width: 0; }
    .pv__pages { padding: 8px; gap: 8px; }
    .pv__scroll { height: calc(100svh - 150px); min-height: 420px; } }
  @media (prefers-reduced-motion: reduce) { .pv__page:not(.is-lista), .pv__spin { animation: none; } }
  @media (prefers-reduced-transparency: reduce) { .pv__bar { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; } }
}