/*
Theme Name: Mercocargas Institucional
Theme URI: https://mercocargas.com
Author: Mercocargas Transportes
Author URI: https://mercocargas.com
Description: Tema institucional one-page para a Mercocargas Transportes, convertido a partir do site estatico original (transporte rodoviario nacional e internacional no Mercosul).
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: mercocargas
*/

    :root {
      --ink: #111827;
      --muted: #5b6678;
      --line: #d9e1ea;
      --paper: #ffffff;
      --soft: #f4f7fa;
      --navy: #07326f;
      --blue: #0f56a6;
      --green: #16845b;
      --red: #c8362c;
      --steel: #27384d;
      --shadow: 0 18px 50px rgba(15, 37, 63, .14);
      --radius: 8px;
      --max: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior:auto;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0 auto auto 0;
      z-index: 100;
      width: var(--page-progress, 0%);
      height: 3px;
      pointer-events: none;
      background: linear-gradient(90deg, var(--blue), var(--green), var(--red));
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: Arial, Helvetica, sans-serif;
      background: var(--paper);
      line-height: 1.5;
    }

    img {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    a:focus-visible,
    button:focus-visible {
      outline: 3px solid #f0c84b;
      outline-offset: 4px;
    }

    .skip-link {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 200;
      padding: 10px 14px;
      border-radius: var(--radius);
      color: #fff;
      background: var(--navy);
      transform: translateY(-150%);

    }

    .skip-link:focus {
      transform: translateY(0);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(217, 225, 234, .82);
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(14px);
    }

    .nav {
      width: min(var(--max), calc(100% - 40px));
      min-height: 76px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 176px;
    }

    .brand img {
      width: 142px;
      height: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      color: #24344c;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .nav-links a {
      padding: 12px 0;
      position: relative;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 5px;
      left: 0;
      height: 2px;
      background: var(--green);
      transform: scaleX(0);
      transform-origin: left;

    }

    .nav-links a:hover::after,
    .nav-links a[aria-current="true"]::after {
      transform: scaleX(1);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-social {
      min-width: 118px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 12px;
      min-height: 38px;
      color: var(--navy);
      font-size: 12px;
      font-weight: 900;
      background: #fff;

    }

    .nav-social:hover {
      border-color: rgba(15, 86, 166, .28);
      box-shadow: 0 10px 26px rgba(7, 50, 111, .12);
      transform: translateY(-1px);
    }

    .brand-icon {
      width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 18px;
    }

    .brand-icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: var(--radius);
      background: var(--navy);
      color: #fff;
      font-size: 24px;
      cursor: pointer;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 46px;
      padding: 0 18px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .01em;
      cursor: pointer;

    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(7, 50, 111, .18);
    }

    .btn-primary {
      background: var(--green);
      color: #fff;
    }

    .btn-secondary {
      background: #fff;
      color: var(--navy);
      border-color: rgba(255, 255, 255, .7);
    }

    .hero {
      min-height: calc(100vh - 76px);
      position: relative;
      display: grid;
      align-items: end;
      overflow: hidden;
      color: #fff;
      background:
        linear-gradient(90deg, rgba(5, 22, 45, .92), rgba(5, 22, 45, .65) 47%, rgba(5, 22, 45, .18)),
        url("assets/mercocargas-hero-truck.png") center calc(50% + var(--hero-shift, 0px)) / cover no-repeat;
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 9px;
      background: linear-gradient(90deg, var(--blue), var(--green), var(--red));
    }

    .hero-inner {
      position: relative;
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      padding: 92px 0 86px;
    }

    .hero-layout {
      display: grid;
      grid-template-columns: minmax(0, .78fr) minmax(300px, .36fr);
      gap: 48px;
      align-items: end;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: #dfeeff;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 42px;
      height: 3px;
      background: var(--green);
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      max-width: 760px;
      margin-bottom: 22px;
      font-size: clamp(38px, 5.6vw, 72px);
      line-height: .96;
      font-weight: 900;
      letter-spacing: 0;
    }

    .hero-copy {
      max-width: 640px;
      margin-bottom: 32px;
      color: #e6eef9;
      font-size: clamp(18px, 2vw, 22px);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 54px;
    }

    .hero-proof {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      max-width: 850px;
      border: 1px solid rgba(255, 255, 255, .22);
      background: rgba(255, 255, 255, .16);
      box-shadow: 0 28px 70px rgba(0, 0, 0, .2);
    }

    .proof-item {
      padding: 20px;
      background: rgba(4, 17, 36, .48);
    }

    .proof-item strong {
      display: block;
      font-size: 28px;
      line-height: 1;
      color: #fff;
    }

    .proof-item span {
      display: block;
      margin-top: 8px;
      color: #c7d7ea;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .hero-panel {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 420px;
      padding: 26px;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: var(--radius);
      background: rgba(3, 16, 47, .62);
      box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
      backdrop-filter: blur(10px);
    }

    .panel-label {
      margin-bottom: 10px;
      color: #8fd9ba;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .panel-title {
      margin-bottom: 18px;
      font-size: 28px;
      line-height: 1.08;
      font-weight: 900;
    }

    .panel-routes {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .panel-routes li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 42px;
      padding: 0 12px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius);
      color: #edf5ff;
      font-size: 14px;
      font-weight: 800;
      background: rgba(255, 255, 255, .07);
    }

    .panel-routes span {
      color: #9fb0c5;
      font-size: 12px;
      text-transform: uppercase;
    }

    .panel-note {
      margin: 22px 0 0;
      color: #c8d5e5;
      font-size: 14px;
    }

    section {
      padding: 92px 0;
      scroll-margin-top: 92px;
    }

    .reveal-ready {
      opacity: 0;
      transform: translateY(24px);

    }

    .reveal-ready.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .service-card.reveal-ready:nth-child(2),
    .unit-card.reveal-ready:nth-child(2) { transition-delay: .07s; }

    .service-card.reveal-ready:nth-child(3),
    .unit-card.reveal-ready:nth-child(3) { transition-delay: .14s; }

    .service-card.reveal-ready:nth-child(4),
    .unit-card.reveal-ready:nth-child(4) { transition-delay: .21s; }

    .container {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(280px, .48fr);
      gap: 56px;
      align-items: end;
      margin-bottom: 44px;
    }

    .kicker {
      margin-bottom: 12px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    h2 {
      margin-bottom: 0;
      font-size: clamp(32px, 4.2vw, 54px);
      line-height: 1.02;
      font-weight: 900;
      letter-spacing: 0;
    }

    .section-head p {
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 17px;
    }

    .section-note {
      padding: 18px 20px;
      border-left: 4px solid var(--green);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 10px 28px rgba(15, 37, 63, .06);
    }

    .section-note strong {
      display: block;
      margin-bottom: 6px;
      color: var(--navy);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .section-note span {
      display: block;
      margin-top: 8px;
      color: #526173;
      font-size: 14px;
      line-height: 1.55;
    }

    .services {
      background: var(--soft);
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    .service-card {
      min-height: 360px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 10px 30px rgba(15, 37, 63, .06);
      position: relative;
      overflow: hidden;

    }

    .service-card::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--blue), var(--green));
    }

    .service-card:hover {
      transform: translateY(-6px);
      border-color: rgba(15, 86, 166, .22);
      box-shadow: 0 22px 52px rgba(15, 37, 63, .13);
    }

    .service-card::after {
      content: "";
      position: absolute;
      right: -42px;
      bottom: -42px;
      width: 140px;
      height: 140px;
      border: 1px solid rgba(15, 86, 166, .09);
      border-radius: 999px;
      background: radial-gradient(circle, rgba(22,132,91,.08), transparent 65%);
      pointer-events: none;
    }

    .service-index {
      color: var(--green);
      font-size: 13px;
      font-weight: 900;
    }

    .service-card h3 {
      margin: 26px 0 14px;
      font-size: 21px;
      line-height: 1.12;
      color: var(--navy);
    }

    .service-card p {
      color: var(--muted);
      font-size: 15px;
    }

    .service-card a {
      width: fit-content;
      margin-top: 22px;
      color: var(--blue);
      font-size: 14px;
      font-weight: 900;
      border-bottom: 2px solid rgba(15, 86, 166, .22);

    }

    .service-card a:hover {
      color: var(--green);
      border-color: rgba(22, 132, 91, .45);
    }

    .service-meta {
      display: inline-flex;
      width: fit-content;
      margin-top: 18px;
      padding: 7px 10px;
      border-radius: 999px;
      color: #334155;
      font-size: 12px;
      font-weight: 900;
      background: #eef4f8;
      text-transform: uppercase;
    }

    .service-points {
      display: grid;
      gap: 8px;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
      color: #48566a;
      font-size: 13px;
      font-weight: 700;
    }

    .service-points li {
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .service-points li::before {
      content: "";
      width: 7px;
      height: 7px;
      margin-top: 7px;
      border-radius: 999px;
      background: var(--green);
      flex: 0 0 7px;
    }

    .routes {
      padding-bottom: 0;
    }

    .route-panel {
      display: grid;
      grid-template-columns: minmax(0, .68fr) minmax(440px, .62fr);
      gap: 30px;
      align-items: center;
      padding: 40px;
      border-radius: var(--radius);
      background: var(--steel);
      color: #fff;
      overflow: hidden;
      position: relative;
    }

    .route-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, rgba(255,255,255,.07), transparent 42%),
        linear-gradient(0deg, rgba(0,0,0,.12), transparent);
      pointer-events: none;
    }

    .route-list {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
    }

    .route-list li {
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .08);
      font-size: 13px;
      font-weight: 800;
      text-align: center;
    }

    .route-intel {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 24px;
    }

    .route-intel span {
      min-height: 82px;
      padding: 14px;
      border-top: 3px solid rgba(143, 217, 186, .78);
      background: rgba(255, 255, 255, .08);
      color: #d8e4f2;
      font-size: 13px;
      font-weight: 800;
    }

    .route-intel strong {
      display: block;
      margin-bottom: 5px;
      color: #fff;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .route-visual {
      min-height: 390px;
      position: relative;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(15, 86, 166, .22), rgba(22, 132, 91, .18)),
        #172638;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }

    .route-visual svg {
      width: 100%;
      height: 100%;
      min-height: 390px;
      display: block;
    }

    .route-map-img {
      width: 100%;
      height: 100%;
      min-height: 390px;
      object-fit: cover;
      object-position: center;
      display: block;
      filter: saturate(1.05) contrast(1.05);
    }

    .route-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(4,18,38,0), rgba(4,18,38,.42)),
        linear-gradient(90deg, rgba(4,18,38,.18), transparent 34%);
      pointer-events: none;
    }

    .map-country {
      fill: rgba(255,255,255,.12);
      stroke: rgba(255,255,255,.34);
      stroke-width: 1.4;

    }

    .route-visual:hover .map-country {
      fill: rgba(255,255,255,.16);
      stroke: rgba(255,255,255,.48);
    }

    .map-country.is-origin {
      fill: rgba(22,132,91,.46);
      stroke: rgba(143,217,186,.9);
    }

    .map-country.is-destination {
      fill: rgba(15,86,166,.34);
    }

    .map-country.is-corridor {
      fill: rgba(240,200,75,.28);
    }

    .map-route {
      fill: none;
      stroke: url(#routeLine);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 10 8;
      filter: url(#softGlow);
    }

    .map-pin circle {
      fill: #fff;
      stroke-width: 5;
    }

    .map-pin text,
    .map-label {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 900;
      letter-spacing: .04em;
      fill: #eaf2fb;
    }

    .map-label {
      font-size: 11px;
      opacity: .72;
    }

    .map-pin text {
      font-size: 12px;
    }

    .route-caption {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: #d8e4f2;
      font-size: 12px;
      font-weight: 800;
      z-index: 1;
    }

    .route-caption strong {
      color: #fff;
      text-transform: uppercase;
    }

    .quote-channels {
      position: relative;
      padding: 76px 0;
      color: #fff;
      background:
        radial-gradient(circle at 84% 12%, rgba(22, 132, 91, .2), transparent 28%),
        radial-gradient(circle at 8% 86%, rgba(15, 86, 166, .24), transparent 32%),
        #071b35;
      overflow: hidden;
    }

    .quote-channels::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .34;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
    }

    .quote-channels .container {
      position: relative;
      z-index: 1;
    }

    .quote-channels .section-head p {
      color: #bac8d8;
    }

    .quote-channels .section-head h2 {
      color: #fff;
    }

    .quote-channel-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }

    .quote-channel {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 280px;
      padding: 30px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 22px;
      background: rgba(255,255,255,.075);
      box-shadow: 0 30px 80px -46px rgba(0,0,0,.78);
      overflow: hidden;

    }

    .quote-channel::after {
      content: attr(data-market);
      position: absolute;
      right: 24px;
      bottom: -22px;
      color: rgba(255,255,255,.045);
      font-family: "Sora", sans-serif;
      font-size: clamp(100px, 14vw, 170px);
      font-weight: 800;
      letter-spacing: -.1em;
      line-height: 1;
      pointer-events: none;
    }

    .quote-channel:hover {
      transform: translateY(-8px);
      border-color: rgba(143,217,186,.42);
      background: rgba(255,255,255,.1);
    }

    .quote-market {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 24px;
      color: #9edfc3;
      font-family: "Sora", sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .quote-market::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 0 6px rgba(143,217,186,.1);
    }

    .quote-channel h3 {
      position: relative;
      z-index: 1;
      margin: 0 0 14px;
      color: #fff;
      font-family: "Sora", sans-serif;
      font-size: clamp(27px, 3vw, 38px);
      line-height: 1.08;
      letter-spacing: -.045em;
    }

    .quote-channel p {
      position: relative;
      z-index: 1;
      max-width: 540px;
      margin: 0 0 24px;
      color: #bac8d8;
      font-size: 16px;
      font-weight: 300;
      line-height: 1.72;
    }

    .quote-channel-link {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      width: fit-content;
      margin-top: auto;
      padding-bottom: 7px;
      border-bottom: 1px solid rgba(143,217,186,.48);
      color: #fff;
      font-family: "Sora", sans-serif;
      font-size: 13px;
      font-weight: 650;
      letter-spacing: .02em;

    }

    .quote-channel-link::after {
      content: "↗";
      color: #8fd9ba;
      font-size: 18px;
    }

    .quote-channel-link:hover,
    .quote-channel-link:focus-visible {
      gap: 18px;
      color: #8fd9ba;
      border-color: #8fd9ba;
    }

    .quote-channel-note {
      margin: 22px 0 0;
      color: rgba(218,229,240,.68);
      font-size: 12px;
      text-align: center;
    }

    .about-grid {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(360px, .48fr);
      gap: 54px;
      align-items: start;
    }

    .about-copy {
      font-size: 18px;
      color: var(--muted);
    }

    .about-copy strong {
      color: var(--ink);
    }

    .feature-list {
      display: grid;
      gap: 14px;
      margin: 32px 0 0;
      padding: 0;
      list-style: none;
    }

    .feature-list li {
      display: flex;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 8px 24px rgba(15, 37, 63, .05);
    }

    .check {
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(22, 132, 91, .12);
      color: var(--green);
      font-weight: 900;
    }

    .people {
      display: grid;
      gap: 14px;
    }

    .people-grid,
    .unit-cards {
      display: contents;
    }

    .leadership-note {
      grid-column: 1 / -1;
      padding: 18px 20px;
      border-left: 4px solid var(--green);
      background: #eef4f8;
      color: #344256;
      font-size: 15px;
    }

    .leadership-note strong {
      color: var(--navy);
    }

    .person {
      min-height: 100%;
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr);
      align-items: center;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 18px 38px rgba(15, 37, 63, .08);
    }

    .person-photo {
      position: relative;
      overflow: hidden;
      min-height: 150px;
      height: 100%;
      display: grid;
      place-items: end center;
      background:
        linear-gradient(180deg, #f8fbfd, #e6edf4);
      border-right: 1px solid var(--line);
    }

    .person-photo::before {
      display: none;
    }

    .person-photo::after {
      content: "";
      position: absolute;
      left: 0;
      right: auto;
      top: 0;
      bottom: 0;
      width: 4px;
      height: auto;
      background: linear-gradient(90deg, var(--blue), var(--green));
    }

    .person img {
      width: 98px;
      height: 132px;
      object-fit: cover;
      object-position: top center;
      filter: saturate(.94) contrast(1.03);
    }

    .person.is-coordinator img {
      transform: scale(1.72);
      transform-origin: 50% 22%;
    }

    .person.is-administration img {
      transform: scale(2.08);
      transform-origin: 54% 20%;
    }

    .person.is-commercial img {
      transform: scale(1.72);
      transform-origin: 50% 22%;
    }

    .person-status {
      display: inline-flex;
      margin-top: 8px;
      padding: 5px 8px;
      border-radius: 999px;
      color: #536276;
      background: #edf2f6;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .person-body {
      padding: 18px 20px;
    }

    .person h3 {
      margin-bottom: 3px;
      font-size: 24px;
      color: var(--navy);
    }

    .person p {
      margin-bottom: 14px;
      color: var(--muted);
      font-weight: 800;
    }

    .person a {
      color: var(--blue);
      font-size: 14px;
      font-weight: 900;
      word-break: break-word;
    }

    .contact {
      background:
        linear-gradient(135deg, #071c36, #0b2443 58%, #08182f);
      color: #fff;
    }

    .contact .kicker {
      color: #76d7b2;
    }

    .contact .section-head p {
      color: #c8d5e5;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(300px, .36fr);
      gap: 24px;
      align-items: start;
    }

    .offices {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .office {
      min-height: 170px;
      padding: 22px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .06);

      position: relative;
    }

    .office::before {
      content: "";
      position: absolute;
      left: 0;
      top: 22px;
      bottom: 22px;
      width: 4px;
      background: var(--green);
    }

    .office.office-base {
      border-style: dashed;
      background: rgba(255, 255, 255, .035);
    }

    .office.office-base::before {
      background: #f0c84b;
    }

    .office:hover {
      border-color: rgba(143, 217, 186, .38);
      background: rgba(255, 255, 255, .09);
    }

    .office h3 {
      margin-bottom: 14px;
      font-size: 24px;
    }

    .office p,
    .office a {
      display: block;
      margin: 7px 0;
      color: #d8e4f2;
      font-size: 15px;
      word-break: break-word;
    }

    .office small {
      display: inline-flex;
      margin-bottom: 14px;
      color: #8fd9ba;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .office-kind {
      position: absolute;
      right: 18px;
      top: 18px;
      padding: 5px 8px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 999px;
      color: #d8e4f2;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: rgba(255,255,255,.06);
    }

    .office-role {
      display: inline-flex;
      width: fit-content;
      margin: 4px 0 12px;
      padding: 6px 9px;
      border-radius: 999px;
      color: #06162a;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      background: #8fd9ba;
    }

    .office.office-base .office-role {
      background: #f0c84b;
    }

    .office-detail {
      margin-top: 13px;
      color: #aebed0;
      font-size: 13px;
      font-weight: 700;
    }

    .contact-aside {
      display: grid;
      gap: 14px;
    }

    .contact-card {
      padding: 24px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .07);
      color: #fff;
      box-shadow: none;
    }

    .contact-card h3 {
      margin-bottom: 10px;
      color: #fff;
      font-size: 24px;
    }

    .contact-card p {
      color: #d8e4f2;
      font-size: 15px;
    }

    .contact-links {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .contact-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 48px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255,255,255,.13);
    }

    .contact-link::after {
      content: "→";
      color: var(--green);
      font-size: 18px;
      line-height: 1;
    }

    .contact-link span {
      color: #b7c5d8;
      font-weight: 800;
      margin-left: auto;
    }

    .institutional-note {
      padding: 24px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .07);
      color: #d8e4f2;
    }

    .institutional-note strong {
      display: block;
      margin-bottom: 8px;
      color: #fff;
      font-size: 18px;
    }

    .contact-experience {
      display: grid;
      grid-template-columns: minmax(320px, .78fr) minmax(0, 1.42fr);
      gap: 28px;
      align-items: start;
    }

    .contact-map-panel {
      padding: 22px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: var(--radius);
      background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        radial-gradient(circle at 72% 22%, rgba(143,217,186,.16), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
      background-size: 38px 38px, 38px 38px, auto, auto;
      position: relative;
      overflow: hidden;
    }

    .contact-map-panel h3 {
      max-width: 320px;
      margin-bottom: 10px;
      font-size: 30px;
      line-height: 1.04;
    }

    .contact-map-panel p {
      max-width: 340px;
      color: #c8d5e5;
      font-size: 15px;
    }

    .contact-map {
      width: 100%;
      min-height: 400px;
    }

    .contact-map svg {
      width: 100%;
      height: 400px;
      min-height: 400px;
      display: block;
    }

    .contact-legend {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .contact-legend span {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #d8e4f2;
      font-size: 13px;
      font-weight: 800;
    }

    .contact-legend i {
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: #8fd9ba;
      box-shadow: 0 0 0 5px rgba(143,217,186,.1);
    }

    .contact-legend span:nth-child(2) i {
      background: #f0c84b;
      box-shadow: 0 0 0 5px rgba(240,200,75,.1);
    }

    .unit-board {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .unit-card {
      min-height: 270px;
      display: grid;
      align-content: space-between;
      padding: 26px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
      position: relative;
      overflow: hidden;

    }

    .unit-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 6px;
      background: var(--green);
    }

    .unit-card::after {
      content: attr(data-code);
      position: absolute;
      right: 18px;
      bottom: 8px;
      color: rgba(255,255,255,.04);
      font-size: 64px;
      line-height: 1;
      font-weight: 900;
    }

    .unit-card:hover {
      transform: translateY(-4px);
      border-color: rgba(143,217,186,.42);
      background:
        linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.07));
    }

    .unit-card.is-base::before {
      background: #f0c84b;
    }

    .unit-card.is-primary {
      background:
        linear-gradient(120deg, rgba(22,132,91,.22), rgba(255,255,255,.07) 62%),
        rgba(255,255,255,.06);
    }

    .unit-eyebrow {
      margin-bottom: 14px;
      color: #8fd9ba;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .unit-card h3 {
      margin-bottom: 10px;
      font-size: 30px;
      color: #fff;
    }

    .unit-card p {
      margin-bottom: 0;
      color: #c8d5e5;
      font-size: 15px;
      line-height: 1.55;
    }

    .unit-role {
      display: inline-flex;
      width: fit-content;
      margin-bottom: 16px;
      padding: 7px 10px;
      border-radius: 999px;
      color: #06162a;
      background: #8fd9ba;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .unit-card.is-base .unit-role {
      background: #f0c84b;
    }

    .unit-lines {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
      position: relative;
      z-index: 1;
    }

    .unit-lines a,
    .unit-lines span {
      width: fit-content;
      max-width: 100%;
      color: #fff;
      font-size: 13px;
      font-weight: 900;
      word-break: break-word;
    }

    .unit-lines a {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      background: rgba(2,15,34,.26);

    }

    .unit-lines a:hover {
      color: #8fd9ba;
      border-color: rgba(143,217,186,.95);
      background: rgba(2,15,34,.5);
    }

    .unit-lines svg {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
    }

    .digital-strip {
      grid-column: span 2;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 2px;
    }

    .digital-strip a {
      min-height: 88px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
      color: #fff;
      font-size: 15px;
      font-weight: 900;

    }

    .digital-strip a:hover {
      transform: translateY(-3px);
      border-color: rgba(143,217,186,.44);
      background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.075));
    }

    .digital-strip .channel-copy {
      display: grid;
      gap: 3px;
      color: #fff;
      text-transform: none;
    }

    .digital-strip .channel-copy small {
      color: #8fd9ba;
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .channel-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      flex: 0 0 42px;
      border-radius: 12px;
      color: #fff;
      background: #16845b;
    }

    .channel-icon.linkedin { background: #0a66c2; }
    .channel-icon.instagram { background: linear-gradient(135deg, #f58529, #dd2a7b 42%, #8134af 72%, #515bd4); }

    .channel-icon svg {
      width: 22px;
      height: 22px;
      display: block;
    }

    .footer {
      padding: 30px 0;
      border-top: 1px solid rgba(255, 255, 255, .12);
      background: #06162a;
      color: #b9c6d8;
    }

    .footer-inner {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      font-size: 14px;
    }

    .footer-meta {
      color: #e1e9f4;
      font-weight: 900;
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;


      }

      .reveal-ready {
        opacity: 1;
        transform: none;
      }
    }

    @media (max-width: 980px) {
      .nav {
        min-height: 68px;
      }

      .nav-links,
      .nav-actions {
        display: none;
      }

      .menu-toggle {
        display: block;
      }

      .nav[data-open="true"] {
        align-items: flex-start;
        padding: 13px 0;
      }

      .nav[data-open="true"] .nav-links {
        position: absolute;
        top: 68px;
        left: 20px;
        right: 20px;
        display: grid;
        gap: 0;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
        box-shadow: var(--shadow);
      }

      .hero {
        min-height: auto;
      }

      .hero-inner {
        padding: 82px 0 64px;
      }

      .hero-proof,
      .hero-layout,
      .section-head,
      .route-panel,
      .quote-channel-grid,
      .about-grid,
      .contact-grid,
      .contact-experience,
      .unit-card.is-primary {
        grid-template-columns: 1fr;
      }

      .hero-panel {
        min-height: auto;
      }

      .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .route-intel {
        grid-template-columns: 1fr;
      }

      .contact-map-panel {
        min-height: auto;
      }

      .digital-strip {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 680px) {
      .nav,
      .container,
      .hero-inner,
      .footer-inner {
        width: min(100% - 28px, var(--max));
      }

      .brand img {
        width: 126px;
      }

      h1 {
        font-size: 42px;
      }

      section {
        padding: 68px 0;
      }

      .hero {
        background:
          linear-gradient(180deg, rgba(5, 22, 45, .94), rgba(5, 22, 45, .78)),
          url("assets/mercocargas-hero-truck.png") center / cover no-repeat;
      }

      .hero-proof,
      .hero-layout,
      .service-grid,
      .route-list,
      .offices,
      .unit-board,
      .digital-strip {
        grid-template-columns: 1fr;
      }

      .unit-card.is-primary,
      .digital-strip {
        grid-column: auto;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .route-panel {
        padding: 26px;
      }

      .route-visual {
        min-height: 260px;
      }

      .people,
      .offices {
        grid-template-columns: 1fr;
      }

      .person-photo {
        min-height: 250px;
      }

      .person img {
        height: 238px;
      }

      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    /* Premium institutional system */
    :root {
      --ink: #0b1728;
      --muted: #647184;
      --line: #dce4eb;
      --soft: #f3f6f8;
      --navy: #082c61;
      --blue: #0d58aa;
      --green: #16845b;
      --steel: #1a3149;
      --shadow: 0 28px 70px -34px rgba(8, 36, 68, .34);
      --radius: 20px;
      --max: 1240px;
      --ease-premium: cubic-bezier(.22, 1, .36, 1);
    }

    body {
      font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    h1, h2, h3,
    .panel-title,
    .proof-item strong,
    .btn,
    .nav-links,
    .unit-role,
    .service-index {
      font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    }

    .site-header {
      background: rgba(255, 255, 255, .88);
      border-bottom-color: rgba(8, 44, 97, .08);
      backdrop-filter: blur(20px) saturate(1.25);
      box-shadow: 0 12px 34px rgba(8, 36, 68, 0);
      transform: translate3d(0, 0, 0);

      will-change: transform;
    }

    .site-header.is-scrolled {
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 16px 38px -28px rgba(8, 36, 68, .58);
    }

    .site-header.is-hidden {
      transform: translate3d(0, calc(-100% - 2px), 0);
    }

    .nav { min-height: 82px; }
    .brand img { width: 150px; }
    .nav-links { font-size: 12px; font-weight: 600; letter-spacing: .14em; }
    .nav-social { border-radius: 999px; font-family: "Sora", sans-serif; font-weight: 600; }

    .hero {
      min-height: min(920px, calc(100vh - 82px));
      isolation: isolate;
      background:
        linear-gradient(90deg, rgba(3, 18, 38, .96) 0%, rgba(4, 26, 53, .82) 46%, rgba(4, 26, 53, .20) 100%),
        url("assets/mercocargas-hero-truck.png") center calc(50% + var(--hero-shift, 0px)) / cover no-repeat;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .38;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        radial-gradient(circle at 78% 24%, rgba(22,132,91,.25), transparent 25%);
      background-size: 56px 56px, 56px 56px, auto;
      mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
    }

    .hero-inner { padding: 110px 0 92px; }
    .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr); gap: 72px; }
    .hero-layout > *,
    .hero-panel > * { min-width: 0; }
    .panel-title { overflow-wrap: anywhere; }
    .eyebrow, .kicker { font-family: "Sora", sans-serif; font-weight: 600; letter-spacing: .2em; }

    h1 {
      max-width: 800px;
      font-size: clamp(52px, 6.4vw, 92px);
      line-height: .94;
      letter-spacing: -.065em;
      font-weight: 700;
    }

    h1 span { color: #8fd9ba; }
    .hero-copy { max-width: 680px; font-size: clamp(18px, 1.6vw, 21px); font-weight: 300; line-height: 1.65; }
    .hero-actions { margin-bottom: 58px; }
    .btn { min-height: 52px; padding: 0 22px; border-radius: 999px; font-size: 13px; font-weight: 600; }
    .btn-primary { box-shadow: 0 18px 36px -18px rgba(22,132,91,.88); }

    .hero-proof { border-radius: 18px; overflow: hidden; border-color: rgba(255,255,255,.16); }
    .proof-item { padding: 22px; backdrop-filter: blur(12px); }
    .proof-item strong { font-size: 30px; font-weight: 600; }
    .proof-item span { font-weight: 500; letter-spacing: .08em; }

    .hero-panel {
      min-height: 470px;
      padding: 30px;
      border-radius: 26px;
      background: linear-gradient(160deg, rgba(16,43,75,.78), rgba(3,16,47,.6));
      box-shadow: 0 40px 90px -30px rgba(0,0,0,.58);
      backdrop-filter: blur(18px);
    }

    .panel-title { font-size: 30px; letter-spacing: -.04em; }
    .panel-routes li { min-height: 46px; border-radius: 12px; font-weight: 600; }

    .corridor-belt {
      overflow: hidden;
      padding: 18px 0;
      border-bottom: 1px solid rgba(8,44,97,.08);
      background: #fff;
    }

    .corridor-track {
      display: flex;
      width: max-content;

    }

    .corridor-group { display: flex; align-items: center; }
    .corridor-group span {
      display: inline-flex;
      align-items: center;
      gap: 26px;
      padding: 0 26px;
      color: #516176;
      font-family: "Sora", sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .15em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .corridor-group span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
        section { padding: 124px 0; }
    .section-head { gap: 80px; margin-bottom: 56px; }
    h2 { font-size: clamp(40px, 5vw, 68px); line-height: .98; letter-spacing: -.055em; font-weight: 700; }
    .section-head p { font-size: 17px; line-height: 1.75; font-weight: 300; }
    .section-note { padding: 22px 24px; border-left-width: 3px; border-radius: 16px; box-shadow: 0 22px 55px -38px rgba(8,36,68,.42); }

    .services { background: linear-gradient(180deg, #f4f7f9, #eef3f6); }
    .service-grid { gap: 20px; }
    .service-card {
      min-height: 390px;
      padding: 30px;
      border-radius: 22px;
      box-shadow: 0 24px 62px -44px rgba(8,36,68,.5);

    }

    .service-card::before { height: 3px; transform: scaleX(.18); transform-origin: left; transition: transform .4s var(--ease-premium); }
    .service-card:hover::before { transform: scaleX(1); }
    .service-card:hover { transform: translateY(-10px); box-shadow: 0 36px 80px -42px rgba(8,36,68,.48); }
    .service-card h3 { font-size: 21px; line-height: 1.16; letter-spacing: -.035em; }
    .service-card p { line-height: 1.7; font-weight: 300; }
    .service-meta { border-radius: 999px; }

    .routes {
      padding-bottom: clamp(64px, 6vw, 88px);
      background: #fff;
    }
    .route-panel { padding: 54px; gap: 64px; border-radius: 28px; box-shadow: 0 46px 110px -50px rgba(1,14,31,.72); }
    .route-panel h2 { max-width: 540px; }
    .route-panel > div > p { font-size: 17px; line-height: 1.7; font-weight: 300; }
    .route-list li, .route-intel span { border-radius: 14px; }
    .route-visual { min-height: 0; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; }
    .route-map-img { min-height: 0; object-fit: contain; }
    .route-visual::after { display: none; }

    .about-grid { gap: 72px; }
    .about-copy > p { font-size: 18px; line-height: 1.75; font-weight: 300; }
    .feature-list li { border-radius: 16px; padding: 20px; box-shadow: 0 18px 46px -36px rgba(8,36,68,.46); }
    .leadership-note { padding: 22px 24px; border-radius: 0 16px 16px 0; }
    .person { border-radius: 18px; box-shadow: 0 26px 62px -42px rgba(8,36,68,.46); }
    .person h3 { font-size: 25px; letter-spacing: -.035em; }

    @media (min-width: 981px) {
      .about-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
      }

      .about-copy {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 54px;
      }

      .about-copy > p {
        margin: 0;
      }

      .feature-list {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 8px;
      }

      .people {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .leadership-note {
        grid-column: 1 / -1;
      }

      .person {
        grid-template-columns: 96px minmax(0, 1fr);
        min-height: 164px;
        height: 164px;
      }

      .person-photo {
        min-height: 164px;
        height: 164px;
        place-items: center;
      }

      .person-body {
        padding: 16px 18px;
      }

      .person h3 {
        font-size: 22px;
      }

      .person a {
        font-size: 12px;
      }
    }

    @media (min-width: 1241px) {
      .people {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .person-body {
        padding: 14px;
      }

      .person h3 {
        font-size: 19px;
      }

      .person p {
        margin-bottom: 10px;
        font-size: 13px;
      }

      .person a {
        font-size: 10.5px;
        letter-spacing: -.025em;
      }
    }

    .person.is-pablo img {
      object-position: 47.5% 24%;
      transform: scale(1.72);
      transform-origin: 50% 22%;
    }

    .contact { background: radial-gradient(circle at 8% 14%, rgba(15,86,166,.16), transparent 24%), #061b35; }
    .contact .section-head { margin-bottom: 42px; }
    .contact-experience {
      grid-template-columns: minmax(300px, .68fr) minmax(0, 1.62fr);
      gap: 24px;
    }
    .contact-map-panel, .unit-card, .digital-strip a { border-radius: 20px; }
    .contact-map-panel { padding: 18px; }
    .contact-map {
      min-height: 0;
      height: auto;
      aspect-ratio: 1122 / 1402;
      overflow: hidden;
      border-radius: 14px;
      background: #03182e;
    }
    .contact-map svg { display: none; }
    .contact-map-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
    .contact-legend { display: none; }
    .unit-board {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .unit-card {
      min-height: 286px;
      padding: 22px 20px;
      box-shadow: 0 28px 60px -42px rgba(0,0,0,.7);
    }
    .unit-card.is-primary { order: 1; }
    .unit-card[data-code="BA"] { order: 2; }
    .unit-card[data-code="COR"] { order: 3; }
    .unit-card.is-base {
      min-height: 0;
      order: 4;
      grid-column: 1 / -1;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      align-content: center;
      gap: 22px;
      padding: 16px 22px;
      background: linear-gradient(110deg, rgba(240,200,75,.13), rgba(255,255,255,.055) 48%);
    }
    .unit-card.is-base:hover { transform: none; }
    .unit-card.is-base > div:first-child {
      min-width: 0;
      display: grid;
      grid-template-columns: auto auto minmax(190px, 1fr);
      align-items: center;
      gap: 18px;
    }
    .unit-card.is-base .unit-eyebrow { display: none; }
    .unit-card.is-base h3 { margin: 0; }
    .unit-card.is-base .unit-role { margin: 0; justify-self: start; }
    .unit-card.is-base p { max-width: 520px; }
    .unit-card.is-base .unit-lines {
      margin: 0;
      justify-content: flex-end;
    }
    .unit-card.is-base .unit-lines span {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 12px;
      border: 1px solid rgba(240,200,75,.28);
      border-radius: 999px;
      background: rgba(2,15,34,.24);
      white-space: nowrap;
    }
    .unit-card h3 { font-size: 27px; letter-spacing: -.04em; }
    .unit-card p { font-size: 14px; line-height: 1.5; }
    .unit-role { margin-bottom: 13px; padding: 6px 9px; font-size: 10px; }
    .unit-lines { gap: 8px; margin-top: 18px; }
    .unit-lines a { min-height: 36px; padding: 0 10px; font-size: 12px; }
    .digital-strip {
      order: 5;
      grid-column: 1 / -1;
      gap: 12px;
      margin-top: 0;
    }
    .digital-strip a { min-height: 70px; padding: 12px 14px; }
    .channel-icon { width: 38px; height: 38px; flex-basis: 38px; }
    .channel-icon { border-radius: 14px; }
    .footer { background: #041426; }
    .footer-inner {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 20px;
    }
    .footer-left {
      min-width: 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px 14px;
      justify-self: start;
    }
    .footer-left p { margin: 0; }
    .footer-signature {
      margin: 0;
      justify-self: center;
      color: #91a1b6;
      font-size: 13px;
      font-weight: 400;
      white-space: nowrap;
    }
    .footer-signature a {
      color: #b9c6d8;
      text-decoration: none;
      text-underline-offset: 3px;

    }
    .footer-signature a:hover,
    .footer-signature a:focus-visible {
      color: #8fd9ba;
      text-decoration: underline;
      text-decoration-color: rgba(143,217,186,.62);
    }
    .footer-legal {
      min-width: 0;
      justify-self: end;
    }

    .reveal-ready {
      opacity: 0;
      filter: blur(7px);
      transform: translate3d(0, 30px, 0) scale(.985);

    }

    .reveal-ready.is-visible { opacity: 1; filter: none; transform: none; }

    @media (max-width: 980px) {
      .hero-layout { grid-template-columns: 1fr; gap: 42px; }
      .hero-panel { min-height: 390px; }
      section { padding: 92px 0; }
      .route-panel { padding: 38px; }
      .routes { padding-bottom: 58px; }
      .quote-channels { padding: 64px 0; }
      .quote-channels .section-head { gap: 32px; margin-bottom: 38px; }
      .quote-channel { min-height: 250px; }
      .contact-experience { grid-template-columns: 1fr; }
      .contact-map-panel { display: block; }
      .contact-map { min-height: 0; height: auto; }
      .digital-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 1100px) {
      .route-panel {
        grid-template-columns: 1fr;
        gap: 38px;
      }
      .route-panel > * { min-width: 0; }
      .route-visual {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
      }
      .contact-experience { grid-template-columns: 1fr; }
      .contact-map-panel {
        width: min(420px, 100%);
        justify-self: center;
      }
    }

    @media (max-width: 860px) {
      .site-header {
        backdrop-filter: blur(12px) saturate(1.12);

      }

      .unit-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .unit-card.is-base,
      .digital-strip { grid-column: 1 / -1; }
      .digital-strip { grid-template-columns: 1fr; }
      .footer { padding: 24px 0; }
      .footer-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "footer-left footer-legal"
          "footer-signature footer-signature";
        align-items: start;
        gap: 10px 18px;
      }
      .footer-left { grid-area: footer-left; }
      .footer-signature { grid-area: footer-signature; }
      .footer-legal { grid-area: footer-legal; }
    }

    @media (min-width: 681px) and (max-width: 860px) {
      .menu-toggle {
        width: 48px;
        height: 48px;
      }

      .hero-panel {
        display: none;
      }

      section {
        padding: 72px 0;
      }

      .quote-channel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .quote-channel {
        min-height: 290px;
      }

      .feature-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .feature-list li {
        align-items: flex-start;
        padding: 16px;
        font-size: 15px;
      }

      .about-grid {
        gap: 48px;
      }
    }

    @media (min-width: 681px) and (max-width: 1240px) {
      .people {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .people-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: clamp(360px, 68vw, 560px);
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scroll-padding-inline: 0 18px;
        padding: 2px 18px 14px 0;
        margin-right: -14px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .people-grid::-webkit-scrollbar {
        display: none;
      }

      .people-grid > * {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
      }

      .people-grid .person {
        grid-template-columns: 96px minmax(0, 1fr);
        min-height: 176px;
        height: 176px;
      }

      .people-grid .person-photo {
        min-height: 176px;
        height: 176px;
      }

      .people-grid .person img {
        width: 96px;
        height: 168px;
      }
    }

    @media (max-width: 680px) {
      .nav { min-height: 72px; }
      .brand img { width: 122px; }
      .menu-toggle {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 22px;
        touch-action: manipulation;
      }
      .nav[data-open="true"] { padding: 12px 0; }
      .nav[data-open="true"] .nav-links {
        top: 72px;
        left: 14px;
        right: 14px;
        gap: 0;
        padding: 8px;
        border-radius: 18px;
        box-shadow: 0 26px 64px -30px rgba(8, 36, 68, .58);
      }
      .nav[data-open="true"] .nav-links a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 12px;
        border-bottom: 1px solid rgba(8, 44, 97, .08);
      }
      .nav[data-open="true"] .nav-links a:last-child { border-bottom: 0; }

      .hero {
        padding: 0;
        background-position: 60% center;
      }
      .hero-inner { padding: 56px 0 44px; }
      .hero-layout { gap: 26px; }
      .eyebrow {
        gap: 9px;
        margin-bottom: 15px;
        font-size: 11px;
        line-height: 1.45;
        letter-spacing: .16em;
      }
      .eyebrow::before { width: 24px; }
      h1 {
        margin-bottom: 18px;
        font-size: clamp(39px, 11.6vw, 46px);
        line-height: .98;
        letter-spacing: -.055em;
      }
      h2 {
        font-size: clamp(34px, 9.4vw, 39px);
        line-height: 1.01;
        letter-spacing: -.045em;
      }
      .hero-copy {
        margin-bottom: 24px;
        font-size: 16px;
        line-height: 1.58;
      }
      .hero-actions { gap: 10px; margin-bottom: 26px; }
      .hero-actions .btn { min-height: 50px; }
      .hero-proof {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-radius: 15px;
      }
      .proof-item { padding: 14px 10px; }
      .proof-item strong { font-size: 23px; }
      .proof-item span {
        margin-top: 6px;
        font-size: 9px;
        line-height: 1.35;
        letter-spacing: .055em;
      }
      .hero-panel {
        display: none;
      }
      .panel-label { margin-bottom: 7px; font-size: 10px; }
      .panel-title { margin-bottom: 0; font-size: 22px; line-height: 1.15; }
      .panel-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .panel-routes li { min-height: 42px; padding: 0 10px; font-size: 12px; }
      .panel-routes span { font-size: 9px; }
      .panel-note { margin-top: 0; font-size: 12px; line-height: 1.5; }

      section { padding: 54px 0; scroll-margin-top: 78px; }
      .section-head { gap: 18px; margin-bottom: 28px; }
      .kicker { margin-bottom: 10px; font-size: 10px; }
      .section-note { padding: 16px; }
      .section-note strong { font-size: 12px; }
      .section-note span { margin-top: 6px; }
      .service-grid { gap: 14px; }
      .service-card { min-height: auto; padding: 22px 20px; }
      .service-card h3 { font-size: 20px; }
      .service-card p { line-height: 1.6; }
      .service-points { margin-top: 14px; }
      .service-meta { margin-top: 15px; }

      .route-panel { gap: 24px; padding: 24px 18px; border-radius: 22px; }
      .route-panel > div > p { font-size: 15px; line-height: 1.58; }
      .route-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
      .route-list li { padding: 10px 8px; font-size: 12px; }
      .route-intel { gap: 8px; margin-top: 16px; }
      .route-intel span { min-height: 0; padding: 12px; }
      .routes { padding-bottom: 42px; }
      .quote-channel-grid { grid-template-columns: 1fr; }
      .quote-channels { padding: 44px 0; }
      .quote-channels .section-head { gap: 14px; margin-bottom: 22px; }
      .quote-channels .section-head h2 { font-size: clamp(32px, 10vw, 40px); }
      .quote-channels .section-head p { font-size: 14px; line-height: 1.55; }
      .quote-channel-grid { gap: 12px; }
      .quote-channel { min-height: 0; padding: 19px 18px; border-radius: 18px; }
      .quote-market { margin-bottom: 16px; font-size: 10px; }
      .quote-channel h3 { margin-bottom: 8px; font-size: clamp(22px, 7.4vw, 28px); }
      .quote-channel p { margin-bottom: 17px; font-size: 14px; line-height: 1.5; }
      .quote-channel-link { min-height: 48px; font-size: 12px; }
      .quote-channel-note { margin-top: 13px; font-size: 11px; line-height: 1.4; }
      .about-grid { gap: 42px; }
      .about-copy > p { font-size: 16px; line-height: 1.65; }
      .feature-list { gap: 10px; }
      .feature-list li { padding: 16px; }
      .person.is-coordinator img { transform: scale(1.55); transform-origin: 50% 22%; }
      .person.is-administration img { transform: scale(1.9); transform-origin: 54% 20%; }
      .person.is-pablo img {
        object-position: 47.5% 24%;
        transform: scale(1.55);
        transform-origin: 50% 22%;
      }
      .person a { display: inline-flex; align-items: center; min-height: 44px; }
      .contact .section-head { margin-bottom: 32px; }
      .contact-map-panel { display: block; padding: 14px; }
      .contact-map { min-height: 0; height: auto; }
      .unit-board { grid-template-columns: 1fr; }
      .unit-card { min-height: 0; padding: 20px 18px; }
      .unit-lines { margin-top: 14px; }
      .unit-lines a { min-height: 44px; }
      .unit-card.is-base {
        grid-column: auto;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 20px;
      }
      .unit-card.is-base > div:first-child { display: block; }
      .unit-card.is-base .unit-eyebrow { display: block; margin-bottom: 8px; }
      .unit-card.is-base h3 { margin-bottom: 10px; }
      .unit-card.is-base .unit-role { margin-bottom: 10px; }
      .unit-card.is-base .unit-lines { justify-content: flex-start; }
      .unit-card.is-base .unit-lines span { white-space: normal; }
      .digital-strip { grid-column: auto; grid-template-columns: 1fr; }

      .service-grid,
      .quote-channel-grid,
      .people-grid,
      .unit-cards {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 88%;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scroll-padding-inline: 0 18px;
        padding: 2px 18px 14px 0;
        margin-right: -14px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .service-grid::-webkit-scrollbar,
      .quote-channel-grid::-webkit-scrollbar,
      .people-grid::-webkit-scrollbar,
      .unit-cards::-webkit-scrollbar {
        display: none;
      }

      .service-grid > *,
      .quote-channel-grid > *,
      .people-grid > *,
      .unit-cards > * {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
      }

      .people {
        gap: 14px;
      }

      .people-grid .person {
        min-height: 210px;
        grid-template-columns: 92px minmax(0, 1fr);
      }

      .people-grid .person-photo {
        min-height: 210px;
      }

      .people-grid .person img {
        width: 92px;
        height: 200px;
      }

      .people-grid .person.is-commercial img {
        transform: scale(1.55);
        transform-origin: 50% 22%;
      }

      .people-grid .person-body {
        padding: 14px;
      }

      .people-grid .person h3 {
        font-size: 22px;
      }

      .people-grid .person p {
        margin-bottom: 8px;
        font-size: 14px;
      }

      .people-grid .person a {
        font-size: 12px;
      }

      .unit-cards {
        grid-column: 1 / -1;
        margin-right: 0;
      }

      .unit-cards .unit-card {
        height: 100%;
      }

      .footer-inner { width: min(100% - 28px, var(--max)); }
      .footer-left { gap: 3px 10px; font-size: 12px; line-height: 1.45; }
      .footer-signature { font-size: 12px; }

      .reveal-ready {
        filter: none;
        transform: translate3d(0, 10px, 0);

      }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal-ready { opacity: 1; filter: none; transform: none; }
      .corridor-track { animation: none; }
    }
  

html{scroll-behavior:auto!important}*,*::before,*::after{transition:none!important;animation:none!important}.reveal,.reveal.in,.is-visible,[class*="reveal"]{opacity:1!important;transform:none!important;visibility:visible!important}