/* ==========================================================================
   REDSIS — Design System
   Built from: Redsis_Website_Navigation_Architecture (Aug 5 2026),
               Redsis_Services_and_Solutions_Portfolio_4,
               Redsis_Messaging, Redsis_Positioning_Recommendation (Jun 19 2026)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --yellow:#FFD500;
  --yellow-deep:#FFC000;
  --yellow-tint:#FBF9F0;
  --yellow-tint-2:#FFFBEF;
  --yellow-text:#8C6A00;    /* accessible dark amber for text-on-light (WCAG AA: 5.03:1 on #fff) */

  --black:#1D1D1B;
  --black-2:#111111;
  --ink:#2A2A28;

  --blue:#006699;
  --blue-dark:#00527A;
  --sky:#0281B7;            /* bright icon/accent blue (v11 home) */
  --sky-soft:#DDEBF6;       /* light-blue section band */
  --sky-softer:#F3F8FB;     /* faint blue band (FAQ) */
  --sky-text:#016C99;       /* accessible sky-blue for text-on-light (WCAG AA: 5.82:1 on #fff) */
  --teal-deep:#012233;      /* v11 hero/explorer gradient dark stop */
  --teal-mid:#00344F;
  --teal-bright:#0A5E76;    /* gradient light stop */

  --gray-900:#333333;
  --gray-700:#5A5A57;
  --gray-600:#666666;
  --gray-500:#6E6E6C;
  --gray-400:#9A9A97;
  --gray-300:#C9C9C6;
  --gray-200:#DDDDDA;
  --gray-150:#E6E6E3;
  --gray-100:#EFEFEC;
  --gray-50:#F5F5F5;
  --white:#FFFFFF;

  --wrap:1240px;
  --wrap-narrow:920px;
  --header-h:76px;

  --radius:3px;
  --radius-lg:6px;

  --shadow-sm:0 1px 3px rgba(29,29,27,.08);
  --shadow-md:0 6px 24px rgba(29,29,27,.10);
  --shadow-lg:0 18px 56px rgba(29,29,27,.16);

  --font:"Inter","Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--white);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.18;letter-spacing:-.018em;color:var(--black)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--gray-200);margin:0}
:focus-visible{outline:3px solid var(--black-2);outline-offset:2px;box-shadow:0 0 0 6px var(--yellow)}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--yellow);
  color:var(--black);padding:12px 20px;font-weight:700;
}
.skip-link:focus{left:0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding:76px 0}
.section-sm{padding:52px 0}
.section-lg{padding:104px 0}
.section-gray{background:var(--gray-50)}
/* ── Casos de exito (Insights) ──────────────────────────────────────────────
   Los fragmentos originales traian su propio <style> con acento rojo #C8102E y
   tipografia Aptos. Se descarto: aqui solo se usan los tokens del sitio. */
.story-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--gray-150);border:1px solid var(--gray-150);border-radius:10px;overflow:hidden;margin:0}
.story-facts .fact{background:#fff;padding:18px 20px}
.story-facts .fact-k{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gray-500)}
.story-facts .fact-v{margin:0;font-size:15px;line-height:1.45;color:var(--black)}
.section-gray .story-facts .fact{background:var(--gray-50)}
.story-list{margin:0 0 4px;padding-left:22px;list-style:disc}
.story-list li{margin:0 0 9px;line-height:1.6;color:var(--gray-700)}
.story-list li::marker{color:var(--yellow-deep)}
.story-sub{font-size:19px;font-weight:700;line-height:1.25;margin:26px 0 8px;color:var(--black)}
.story-sub+p,.story-sub+ul{margin-top:0}
/* Antes / despues — dos tarjetas; la del estado actual resaltada en amarillo,
   que es el acento de la marca (el material original usaba un rojo #C8102E). */
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:6px}
.cmp-card{border:1px solid var(--gray-200);border-radius:12px;padding:22px 24px;background:#fff}
.cmp-card h3{font-size:18px;font-weight:700;line-height:1.3;margin:0 0 8px;color:var(--black)}
.cmp-card p{margin:0 0 10px;color:var(--gray-700);line-height:1.6}
.cmp-card p:last-child{margin-bottom:0}
.cmp-tag{margin:0 0 8px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--gray-500)}
.cmp-now{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
.cmp-now .cmp-tag{color:var(--yellow-text)}
.section-gray .cmp-card{background:#fff}
/* Resultados — una columna por cifra, con regla superior; etiquetas en fichas. */
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:6px}
.res-col .res-rule{height:3px;background:var(--yellow);border-radius:2px;margin-bottom:14px}
.res-col h3{font-size:18px;font-weight:700;line-height:1.3;margin:0 0 8px;color:var(--black)}
.res-col p{margin:0;color:var(--gray-700);line-height:1.6}
.res-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:26px 0 0}
.res-chips li{border:1px solid var(--gray-200);border-radius:99px;padding:7px 16px;font-size:14px;color:var(--gray-600);background:#fff}
/* Blog — columna estrecha para lectura larga, cita destacada y fuentes. */
.wrap.narrow{max-width:760px}
.post-byline{margin:0 0 26px;font-size:14px;color:var(--gray-500)}
.post-h2{font-size:26px;font-weight:700;line-height:1.25;margin:38px 0 12px;color:var(--black)}
.post-h2:first-of-type{margin-top:0}
.post-quote{margin:30px 0;padding:4px 0 4px 22px;border-left:4px solid var(--yellow)}
.post-quote blockquote{margin:0;font-size:19px;line-height:1.5;color:var(--black);font-weight:500}
.post-quote figcaption{margin-top:8px;font-size:14px;color:var(--gray-500)}
.post-sources ul{margin:0;padding-left:20px}
.post-sources li{margin:0 0 8px;line-height:1.55;font-size:15px}
.post-sources a{color:var(--blue)}
.section-line{border-top:1px solid var(--gray-200)}
.section-dark{background:var(--black);color:#E9E9E6}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}
.section-dark a{color:var(--yellow)}

.grid{display:grid;gap:28px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
.g-6{grid-template-columns:repeat(6,1fr)}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;
}
.eyebrow-y{color:var(--yellow-text)}
.section-dark .eyebrow{color:var(--yellow)}
h1,.h1{font-size:clamp(34px,4.6vw,54px)}
h2,.h2{font-size:clamp(27px,3.1vw,38px)}
h3,.h3{font-size:clamp(20px,2vw,24px)}
h4,.h4{font-size:18px}
.lede{font-size:clamp(18px,1.45vw,21px);line-height:1.55;color:var(--gray-700);max-width:74ch}
.section-dark .lede{color:#BEBEB9}
.muted{color:var(--gray-600)}
.small{font-size:14px;line-height:1.55}
.xsmall{font-size:12.5px;line-height:1.5;color:var(--gray-500)}
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.rule{width:56px;height:4px;background:var(--yellow);margin:0 0 22px;border-radius:2px}
.rule-center{margin-left:auto;margin-right:auto}
.section-head{max-width:78ch;margin-bottom:44px}
.section-head.center{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;font-size:15px;font-weight:700;letter-spacing:.005em;
  border-radius:var(--radius);transition:.16s var(--ease);white-space:nowrap;
  border:2px solid transparent;text-decoration:none!important;
}
.btn-primary{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.btn-primary:hover{background:var(--yellow-deep);border-color:var(--yellow-deep);transform:translateY(-1px)}
.btn-dark{background:var(--black);color:#fff;border-color:var(--black)}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--black);border-color:var(--gray-300)}
.btn-ghost:hover{border-color:var(--black);background:var(--white)}
.section-dark .btn-ghost,.hero .btn-ghost,.page-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.38)}
.section-dark .btn-ghost:hover,.hero .btn-ghost:hover,.page-hero .btn-ghost:hover{
  border-color:var(--yellow);color:var(--yellow);background:rgba(255,213,0,.07)
}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn-row.center{justify-content:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15px;
  color:var(--blue);text-decoration:none;
}
.link-arrow::after{content:"→";transition:transform .16s var(--ease)}
.link-arrow:hover{text-decoration:none}
.link-arrow:hover::after{transform:translateX(4px)}
.link-arrow-y{color:var(--yellow-text)}
.section-dark .link-arrow{color:var(--yellow)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{position:sticky;top:0;z-index:600;background:var(--black);color:#fff}
.header-inner{
  display:flex;align-items:center;gap:22px;height:var(--header-h);
  max-width:1420px;margin:0 auto;padding:0 28px;
}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:38px;width:auto}

.nav{display:flex;align-items:center;gap:2px;margin:0 auto}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:6px;padding:0 17px;height:var(--header-h);
  color:#fff;font-size:15.5px;font-weight:500;letter-spacing:.005em;
  background:none;border:0;position:relative;text-decoration:none;
}
.nav-link::after{
  content:"";position:absolute;left:17px;right:17px;bottom:20px;height:3px;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .18s var(--ease);border-radius:2px;
}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--yellow);text-decoration:none}
.nav-link:hover::after,.nav-link[aria-expanded="true"]::after,.nav-link.is-current::after{transform:scaleX(1)}
.nav-link.is-current{color:var(--yellow)}
.nav-caret{width:9px;height:9px;opacity:.7;transition:transform .18s var(--ease)}
.nav-link[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}

.header-tools{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* Search */
.search-box{
  display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.24);border-radius:var(--radius);
  padding:0 12px;height:38px;width:132px;transition:width .22s var(--ease),background .18s;
}
.search-box:focus-within{width:268px;background:rgba(255,255,255,.13);border-color:var(--yellow)}
.search-box svg{width:15px;height:15px;flex:0 0 auto;opacity:.8}
.search-box input{
  background:none;border:0;color:#fff;font-size:14px;width:100%;outline:none;padding:0;
}
.search-box input::placeholder{color:rgba(255,255,255,.6)}

/* Region */
.region-btn{
  display:flex;align-items:center;gap:7px;color:#fff;font-size:14px;font-weight:600;
  padding:9px 8px;border-radius:var(--radius);
}
.region-btn:hover,.region-btn[aria-expanded="true"]{color:var(--yellow)}
.region-btn .globe{width:17px;height:17px;color:var(--yellow)}
.region-btn .chev{width:8px;height:8px;opacity:.75}

.header .btn-primary{padding:11px 22px;font-size:14.5px}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:2px;background:#fff;position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;transition:.18s var(--ease)
}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- Mega menu ---------- */
.mega{
  position:absolute;top:var(--header-h);left:0;right:0;z-index:590;
  background:transparent;padding:0 28px 34px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  pointer-events:none;
}
.mega.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.mega-card{
  max-width:1420px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);border-top:4px solid var(--yellow);
  padding:34px 40px 30px;color:var(--ink);
}
.mega-top{display:flex;align-items:baseline;gap:22px;margin-bottom:24px;flex-wrap:wrap}
.mega-title{font-size:22px;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.mega-sub{font-size:15px;color:var(--gray-600);font-style:italic}
.mega-kicker{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:16px;
}
/* row-gap solo afecta a los menus de dos filas (Industries, About); en los de una
   fila no hay filas que separar. Sin el, el titulo de la fila 2 quedaba pegado a
   la ultima linea de la fila 1. */
.mega-cols{display:grid;column-gap:0;row-gap:26px}
.mega-cols.c-5{grid-template-columns:repeat(5,1fr)}
.mega-cols.c-4{grid-template-columns:repeat(4,1fr)}
.mega-cols.c-3{grid-template-columns:repeat(3,1fr)}
.mega-col{padding:0 24px;border-left:1px solid var(--gray-150)}
.mega-col:first-child{padding-left:0;border-left:0}
.mega-col:last-child{padding-right:0}
/* Primero y ultimo de CADA fila, no solo de la primera: :first-child/:last-child
   solo aciertan cuando el menu cabe en una fila. Industries (6 en c-3) y About
   (8 en c-4) ocupan dos, y el primero de la segunda fila conservaba los 24px de
   padding y el borde, asi que su titulo caia 25px a la derecha del de arriba.
   El grid no cambia de ancho: el mega se oculta por debajo de 1024px. */
.mega-cols.c-5>.mega-col:nth-child(5n+1),
.mega-cols.c-4>.mega-col:nth-child(4n+1),
.mega-cols.c-3>.mega-col:nth-child(3n+1){padding-left:0;border-left:0}
.mega-cols.c-5>.mega-col:nth-child(5n),
.mega-cols.c-4>.mega-col:nth-child(4n),
.mega-cols.c-3>.mega-col:nth-child(3n){padding-right:0}
.mega-col .mega-col-title{font-size:16.5px;margin:0 0 9px;letter-spacing:-.01em;font-weight:700;line-height:1.18;color:var(--black)}
.mega-col .mega-col-title a{color:var(--black)}
.mega-col .mega-col-title a:hover{color:var(--blue);text-decoration:none}
.mega-col .col-rule{width:34px;height:3px;background:var(--yellow);margin-bottom:11px;border-radius:2px}
.mega-col .col-desc{font-size:13.5px;line-height:1.5;color:var(--gray-600);margin-bottom:14px}
.mega-list li{margin-bottom:7px}
.mega-list a{
  display:block;font-size:14px;color:var(--gray-900);line-height:1.4;
  padding:3px 0 3px 13px;position:relative;
}
.mega-list a::before{
  content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;
  background:var(--gray-300);transition:.15s var(--ease);
}
.mega-list a:hover{color:var(--blue);text-decoration:none}
.mega-list a:hover::before{background:var(--yellow-deep);transform:scale(1.35)}
.mega-list .is-reserved{display:none} /* ships dark — awaiting confirmation */

.mega-foot{display:grid;gap:20px;margin-top:28px}
.mega-foot.f-2{grid-template-columns:1fr 1fr}
.mega-note{
  background:var(--yellow-tint);border-left:4px solid var(--yellow);
  padding:20px 24px;border-radius:0 var(--radius) var(--radius) 0;
}
.mega-note .mega-note-title{font-size:16px;margin:0 0 7px;font-weight:700;line-height:1.18;letter-spacing:-.018em;color:var(--black)}
.mega-note p{font-size:13.5px;line-height:1.55;color:var(--gray-700);margin-bottom:12px}
.mega-note-dark{background:var(--black);border-left-color:var(--yellow);color:#D8D8D4}
.mega-note-dark h4{color:#fff}
.mega-note-dark p{color:#B9B9B4}
.mega-note-dark .link-arrow{color:var(--yellow)}
.mega-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--gray-50);border-left:4px solid var(--yellow);padding:20px 26px;
  margin-top:28px;border-radius:0 var(--radius) var(--radius) 0;
}
.mega-cta .mega-cta-title{font-size:17px;margin:0 0 5px;font-weight:700;line-height:1.18;letter-spacing:-.018em;color:var(--black)}
.mega-cta p{font-size:13.5px;color:var(--gray-600);margin:0}

/* ---------- Region panel ---------- */
.region-panel{
  position:absolute;top:var(--header-h);right:28px;z-index:595;width:min(720px,calc(100vw - 56px));
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.region-panel.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.region-grid{
  display:grid;grid-template-columns:1.25fr .85fr;background:#fff;
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border-top:4px solid var(--yellow);
}
.region-left{padding:26px 28px}
.region-left .region-col-title{font-size:19px;margin:0 0 8px;font-weight:700;line-height:1.18;letter-spacing:-.018em;color:var(--black)}
.region-left .col-rule{width:44px;height:3px;background:var(--yellow);margin-bottom:16px;border-radius:2px}
.region-list li a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 14px;border-bottom:1px solid var(--gray-150);color:var(--black);
  font-weight:700;font-size:15px;transition:.14s var(--ease);
}
.region-list li a:hover{background:var(--gray-50);text-decoration:none;padding-left:18px}
.region-list .lang{font-weight:400;font-size:13.5px;color:var(--gray-500)}
.region-list .is-current a{background:var(--yellow-tint-2);border:1px solid var(--yellow);border-radius:var(--radius)}
.region-list .tag{
  font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--yellow-text);
  text-transform:uppercase;
}
.region-note{font-size:12.5px;color:var(--gray-500);margin-top:14px}
.region-right{background:var(--black);color:#CFCFCA;padding:26px 26px}
.region-right .region-col-title{color:#fff;font-size:18px;line-height:1.25;margin:0 0 10px;font-weight:700;letter-spacing:-.018em}
.region-right .col-rule{width:44px;height:3px;background:var(--yellow);margin-bottom:18px;border-radius:2px}
.region-right ul li{font-size:13.5px;line-height:1.45;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.region-right .link-arrow{margin-top:16px;font-size:14px;color:var(--yellow)}

.overlay{
  position:fixed;inset:var(--header-h) 0 0;background:rgba(20,20,18,.42);z-index:580;
  opacity:0;visibility:hidden;transition:.2s var(--ease);backdrop-filter:blur(1.5px);
}
.overlay.is-open{opacity:1;visibility:visible}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed;inset:0;z-index:700;background:#fff;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .26s var(--ease);visibility:hidden;
}
.mobile-menu.is-open{transform:translateX(0);visibility:visible}
.mm-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--black);padding:0 18px;height:var(--header-h);flex:0 0 auto;
}
.mm-top img{height:34px}
.mm-close{color:#fff;font-size:26px;line-height:1;width:44px;height:44px}
.mm-pinned{padding:16px 18px;border-bottom:1px solid var(--gray-200);flex:0 0 auto;background:var(--gray-50)}
.mm-search{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--gray-300);
  border-radius:var(--radius);padding:0 14px;height:46px;margin-bottom:12px;
}
.mm-search input{border:0;outline:none;font-size:15px;width:100%}
.mm-search svg{width:16px;height:16px;color:var(--gray-500)}
.mm-pinned .btn{width:100%}
.mm-scroll{overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.mm-sec{border-bottom:1px solid var(--gray-200)}
.mm-sec > button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:19px 18px;font-size:18px;font-weight:700;color:var(--black);text-align:left;
}
.mm-sec > button .sign{font-size:22px;font-weight:400;color:var(--yellow-text);line-height:1}
.mm-sec > button[aria-expanded="true"]{color:var(--blue)}
.mm-panel{display:none;padding:0 0 12px;background:var(--gray-50)}
.mm-sec.is-open .mm-panel{display:block}
.mm-panel a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px 13px 30px;font-size:15.5px;color:var(--gray-900);
  border-top:1px solid var(--gray-150);
}
.mm-panel a:hover{color:var(--blue);text-decoration:none}
.mm-panel a .chev{color:var(--gray-400)}
.mm-panel .is-reserved{display:none}
.mm-region{padding:20px 18px;border-top:1px solid var(--gray-200)}
.mm-region .eyebrow{margin-bottom:10px}
.mm-region a{display:inline-block;margin:0 16px 8px 0;font-size:15px;color:var(--gray-900)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:var(--black);color:#fff;position:relative;overflow:hidden;
  padding:96px 0 92px;
}
.hero::before{
  content:"";position:absolute;top:-30%;right:-8%;width:760px;height:760px;
  background:radial-gradient(circle,rgba(255,213,0,.14) 0%,rgba(255,213,0,0) 62%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--yellow);
}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;max-width:19ch;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .lede{color:#C6C6C1;max-width:64ch}
.hero-eyebrow{color:var(--yellow);font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px}

.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.hero-panel{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:28px 30px;
}
.hero-panel h3{color:#fff;font-size:17px;margin-bottom:16px}
.hero-panel .verb-row{
  display:flex;align-items:flex-start;gap:14px;padding:13px 0;
  border-top:1px solid rgba(255,255,255,.11);
}
.hero-panel .verb-row:first-of-type{border-top:0}
.hero-panel .verb-name{
  flex:0 0 92px;font-weight:800;color:var(--yellow);font-size:14px;
  text-transform:uppercase;letter-spacing:.07em;padding-top:1px;
}
.hero-panel .verb-desc{font-size:14px;color:#BEBEB9;line-height:1.5}

/* page hero (interior) */
.page-hero{background:var(--black);color:#fff;padding:66px 0 60px;position:relative}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--yellow)}
.page-hero h1{color:#fff;margin-bottom:18px;max-width:22ch}
.page-hero .lede{color:#C0C0BB;max-width:78ch}
.page-hero .eyebrow{color:var(--yellow)}

.crumbs{font-size:13px;color:var(--gray-400);margin-bottom:16px}
.crumbs a{color:var(--gray-300)}
.crumbs a:hover{color:var(--yellow);text-decoration:none}
.crumbs span{margin:0 8px;opacity:.5}

/* ---------- Chain nav (SOURCE › CONNECT › SUPPORT › REPAIR) ---------- */
.chain{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-top:26px;
}
.chain a{color:rgba(255,255,255,.55)}
.chain a:hover{color:var(--yellow);text-decoration:none}
.chain .sep{opacity:.4;margin:0 3px}
.chain .is-active{color:var(--yellow)}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
.card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:28px 26px;transition:.18s var(--ease);display:flex;flex-direction:column;
}
a.card{color:inherit}
a.card:hover{
  text-decoration:none;border-color:var(--gray-300);
  box-shadow:var(--shadow-md);transform:translateY(-3px);
}
.card h3{font-size:19px;margin-bottom:10px}
.card .col-rule{width:34px;height:3px;background:var(--yellow);margin-bottom:14px;border-radius:2px}
.card p{font-size:14.5px;color:var(--gray-600);line-height:1.55}
.card .link-arrow{margin-top:auto;padding-top:16px}
.card-num{
  font-size:12px;font-weight:800;color:var(--yellow-text);letter-spacing:.1em;margin-bottom:10px;
}
.card-dark{background:var(--black);border-color:var(--black);color:#C8C8C3}
.card-dark .card-num{color:var(--yellow)}
.card-dark h3{color:#fff}
.card-dark p{color:#B4B4AF}
.card-tint{background:var(--yellow-tint);border-color:#EDE7D2}

.card-icon{
  width:44px;height:44px;border-radius:var(--radius);background:var(--yellow);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex:0 0 auto;
}
.card-icon svg{width:22px;height:22px;color:var(--black)}
.card-dark .card-icon{background:var(--yellow)}

/* verb cards (Source / Connect / Support / Repair) */
.verb-card{
  background:var(--black);border-radius:var(--radius-lg);padding:26px 24px 24px;
  color:#C4C4BF;position:relative;overflow:hidden;transition:.18s var(--ease);
  display:flex;flex-direction:column;border:1px solid var(--black);
}
a.verb-card:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.verb-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--yellow)}
.verb-card .step{font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--yellow);margin-bottom:12px}
.verb-card h3{color:#fff;font-size:22px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.02em}
.verb-card p{font-size:14px;color:#B0B0AB;line-height:1.55}
.verb-card .link-arrow{margin-top:auto;padding-top:18px;color:var(--yellow)}

/* stat tiles */
.stats{display:grid;gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden}
.stats.s-3{grid-template-columns:repeat(3,1fr)}
.stats.s-4{grid-template-columns:repeat(4,1fr)}
/* El separador de 1px es el HUECO de la rejilla, con el fondo gris del
   contenedor asomando por el. A 1x, si el borde de la celda cae en una
   fraccion de pixel, ese hueco se reparte entre dos pixeles de pantalla a
   media opacidad y se ve gris clarito o no se ve: por eso salia una sola
   linea de las tres, y cual sobrevivia dependia de la fraccion de cada
   columna. La sombra anade una segunda capa del MISMO gris en la MISMA banda
   de 1px (el hueco), asi que las opacidades parciales se suman y la linea se
   ve siempre. A 2x no cambia nada: cae justo donde ya estaba el hueco. */
.stat{background:#fff;padding:30px 26px;box-shadow:0 0 0 1px var(--gray-200)}
.stat .num{font-size:clamp(30px,3.2vw,40px);font-weight:800;color:var(--black);letter-spacing:-.03em;line-height:1.05}
.stat .num em{font-style:normal;color:var(--yellow-text)}
.stat .lbl{font-size:14px;color:var(--gray-600);margin-top:9px;line-height:1.45}
.section-dark .stats{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.section-dark .stat{background:var(--black);box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.section-dark .stat .num{color:var(--yellow)}
.section-dark .stat .lbl{color:#A9A9A4}
.section-dark .stat .num em{color:var(--yellow)}

/* proof / quote */
.proof-card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:28px 26px;display:flex;flex-direction:column;
}
.proof-card .meta{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.proof-card .big{font-size:44px;font-weight:800;color:var(--black);letter-spacing:-.035em;line-height:1}
.proof-card .desc{font-size:14.5px;color:var(--gray-600);margin-top:12px;line-height:1.55}
.proof-card .quote{
  margin-top:auto;padding-top:18px;font-size:15.5px;font-weight:700;color:var(--black);
  font-style:italic;border-top:1px solid var(--gray-150);margin-top:20px;
}

/* list with yellow ticks */
.ticks li{position:relative;padding:0 0 11px 27px;font-size:15.5px;line-height:1.5;color:var(--gray-900)}
.ticks li::before{
  content:"";position:absolute;left:0;top:8px;width:13px;height:8px;
  border-left:2.5px solid var(--yellow-deep);border-bottom:2.5px solid var(--yellow-deep);
  transform:rotate(-45deg);
}
.section-dark .ticks li{color:#C6C6C1}
.arrows li{position:relative;padding:0 0 11px 24px;font-size:15.5px;line-height:1.5;color:var(--gray-900)}
.arrows li::before{content:"▸";position:absolute;left:0;top:0;color:var(--yellow-deep);font-size:15px}
.section-dark .arrows li{color:#C6C6C1}
.dots li{position:relative;padding:0 0 10px 17px;font-size:14.5px;line-height:1.5;color:var(--gray-700)}
.dots li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--yellow-deep)}
.section-dark .dots li{color:#B4B4AF}

/* offer rows (WHAT WE PROVIDE) */
.offer{padding:20px 0;border-top:1px solid var(--gray-200)}
.offer:first-child{border-top:0;padding-top:0}
.offer h4{font-size:16.5px;margin-bottom:5px}
.offer p{font-size:14.5px;color:var(--gray-600);margin:0}

/* partner rows */
.partner{
  display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--gray-200);align-items:flex-start;
}
.partner:first-child{border-top:0}
.partner .pname{flex:0 0 210px;font-weight:800;font-size:16px;color:var(--black)}
.partner .pdesc{font-size:14.5px;color:var(--gray-600);line-height:1.55}
/* Logos de aliado. Cada uno en una CAJA FIJA con object-fit:contain, no
   escalados por altura: vienen en proporciones que no se parecen en nada
   (Fortinet es 8,6:1; el de HP es un circulo; el de Toshiba es mas alto que
   ancho), y ajustar solo la altura deja unos enormes al lado de otros
   diminutos. La caja iguala el tamano OPTICO.
   En gris, y a color al pasar por la fila: un muro de logos a todo color
   compite con el texto y parece una feria. */
.partner .plogos{flex:0 0 210px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.partner .plogos img{width:auto;max-width:118px;height:auto;max-height:38px;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .25s var(--ease),opacity .25s var(--ease)}
.partner:hover .plogos img{filter:none;opacity:1}
/* El ancho maximo se reparte entre los logos de la fila, descontando el hueco
   entre ellos: 210px de celda, 18px de separacion. Si no, dos marcas anchas
   piden el maximo cada una, no caben y se apilan. */
.partner .plogos.n-2 img{max-width:88px}
.partner .plogos.n-3 img{max-width:56px}
/* Con CUATRO se pasa a una rejilla 2x2 EXPLICITA. Cabrian los cuatro en una
   linea, pero a 40px de ancho una marca apaisada como Lenovo (3:1) queda en
   13px de alto al lado de dos circulos de 37: se lee como un descuido. Y
   dejarlo al flujo tampoco vale — con flex-wrap salian tres arriba y uno
   suelto abajo, porque cada logo ocupa lo que su proporcion le pide. La
   rejilla es lo unico que garantiza dos y dos. */
.partner .plogos.n-4{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-items:center;justify-items:start}
.partner .plogos.n-4 img{max-width:86px}
@media (prefers-reduced-motion:reduce){.partner .plogos img{transition:none}}

/* callout band */
.band{
  background:var(--yellow-tint);border-left:5px solid var(--yellow);
  padding:32px 36px;border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
.band h3{font-size:22px;margin-bottom:10px}
.band p{font-size:16px;color:var(--gray-700);margin:0}
.band-dark{background:var(--black);border-left-color:var(--yellow);color:#C0C0BB}
.band-dark h3{color:#fff}
.band-dark p{color:#B4B4AF}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split-center{align-items:center}
.split-40{grid-template-columns:.9fr 1.1fr}

/* CTA strip */
.cta-strip{background:var(--yellow);padding:52px 0}
.cta-strip .inner{display:flex;align-items:center;justify-content:space-between;gap:38px;flex-wrap:wrap}
.cta-strip h2{font-size:clamp(24px,2.6vw,32px);color:var(--black);max-width:24ch;margin-bottom:6px}
.cta-strip p{color:#4A4633;font-size:16px;margin:0;max-width:56ch}

/* reserved marker */
.is-reserved{display:none}
.reserved-note{font-size:12px;color:var(--gray-400);margin-top:22px;font-style:italic}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--gray-200);vertical-align:top}
.tbl thead th{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
  border-bottom:2px solid var(--gray-200);
}
.tbl tbody tr:hover{background:var(--gray-50)}
.tbl td:first-child{font-weight:700;color:var(--black);width:200px}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:700;color:var(--black)}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--gray-300);
  border-radius:var(--radius);background:#fff;color:var(--ink);
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,102,153,.13)}
.form-note{font-size:12.5px;color:var(--gray-500);margin-top:14px}
.form-consent{font-size:12.5px;color:var(--gray-500);margin-top:10px}
.form-consent a{color:var(--blue);text-decoration:underline}
.cf-turnstile{min-height:65px}

/* locations */
.loc{padding:22px 0;border-top:1px solid var(--gray-200);display:grid;grid-template-columns:200px 1fr;gap:24px}
.loc:first-child{border-top:0}
.loc h4{font-size:17px;margin-bottom:3px}
.loc .role{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.loc p{font-size:14.5px;color:var(--gray-600);margin:0}

/* insights placeholder */
.soon{
  border:1px dashed var(--gray-300);border-radius:var(--radius-lg);padding:34px 30px;
  background:var(--gray-50);text-align:center;
}
.soon h3{font-size:19px;margin-bottom:8px}
.soon p{font-size:14.5px;color:var(--gray-600);max-width:60ch;margin:0 auto}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--black);color:#A8A8A3;padding:64px 0 28px;font-size:14.5px}
.footer a{color:#C6C6C1}
.footer a:hover{color:var(--yellow);text-decoration:none}
/* Un boton dentro del pie NO es un enlace del pie. `.footer a` (0,1,1)
   le gana a `.btn-primary` (0,1,0), asi que el boton heredaba el gris
   del pie: #C6C6C1 sobre amarillo = 1.21:1, ilegible; y al pasar el
   raton, amarillo sobre amarillo = 1.00:1, invisible. Se le devuelve su
   propio color, que da 11.87:1. */
.footer a.btn-primary,
.footer a.btn-primary:hover{color:var(--black)}
.footer-top{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:36px}
.footer-brand img{height:38px;margin-bottom:22px}
.footer-brand .tag{color:#fff;font-weight:700;font-size:16px;line-height:1.4;margin-bottom:20px;max-width:30ch}
.footer-brand address{font-style:normal;font-size:14px;line-height:1.6;color:#9C9C97;margin-bottom:24px}
.footer-brand .btn{margin-bottom:20px}
.footer .footer-col-title{
  color:var(--yellow);font-size:12.5px;font-weight:700;letter-spacing:.12em;line-height:1.18;
  text-transform:uppercase;margin:0 0 16px;
}
.footer-col li{margin-bottom:10px;line-height:1.45}
.footer-col a{font-size:14px}
/* El pie lleva cuatro LinkedIn (uno por pais) y dos Instagram. Sin agrupar
   serian seis circulos identicos y el visitante no sabria cual abrir, asi
   que cada plataforma va con su etiqueta y los de LinkedIn con el codigo
   del pais dentro. Colombia no tiene cuentas y por eso no aparece. */
.social-block{margin-top:22px}
.social-title{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#9C9C97;margin:0 0 8px;font-weight:700}
.social-block .social{margin-bottom:16px;flex-wrap:wrap}
.social-block .social:last-child{margin-bottom:0}
/* Una @ no cabe en un circulo de 32px: las cuentas van como pastilla. */
.social a.social-handle{width:auto;border-radius:16px;padding:0 14px;
  font-size:12px;letter-spacing:.01em}
.social{display:flex;gap:10px}
.social a{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;
}
.social a:hover{background:var(--yellow);color:var(--black)}
.footer-bottom{
  margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:#87877F;
}
.footer-bottom a{font-size:13px}
.footer-bottom .sep{margin:0 10px;opacity:.5}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .nav-link{padding:0 12px;font-size:15px}
  .search-box{width:112px}
  .footer-top{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:1024px){
  :root{--header-h:66px}
  .nav,.header-tools .search-box,.header-tools .region-btn,.header-tools .btn{display:none}
  .burger{display:flex}
  .mega,.region-panel{display:none}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .split{grid-template-columns:1fr;gap:36px}
  .g-4,.g-5,.g-6{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .stats.s-4{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .section{padding:52px 0}
  .section-lg{padding:64px 0}
  .hero{padding:60px 0 56px}
  .page-hero{padding:44px 0 40px}
  .g-2,.g-3,.g-4,.g-5,.g-6{grid-template-columns:1fr}
  .stats.s-3,.stats.s-4{grid-template-columns:1fr}
  .cta-strip .inner{flex-direction:column;align-items:flex-start;gap:22px}
  .partner{flex-direction:column;gap:6px}
  .partner .pname{flex:none}
  /* En columna, los 210px de base dejan la fila de logos estrecha y los deja
     apretados unos contra otros: aqui ocupan el ancho disponible. */
  /* `width:100%` no es decorativo: en columna el contenedor se encoge a lo
     que ocupa su contenido, y la rejilla 2x2 de cuatro logos colapsaba a
     columnas de 38px — Lenovo volvia a salir ilegible. */
  .partner .plogos{flex:none;gap:22px;margin-bottom:2px;width:100%}
  .loc{grid-template-columns:1fr;gap:8px}
  .band{padding:24px 22px}
  .tbl td:first-child{width:auto}
  .tbl,.tbl thead,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border-bottom:1px solid var(--gray-200);padding:8px 0}
  .tbl td{border:0;padding:5px 0}
  .footer-top{grid-template-columns:1fr 1fr}
}

/* print */
@media print{
  .header,.footer,.mega,.region-panel,.mobile-menu,.overlay,.cta-strip,.hv-explore,.hv-cta{display:none!important}
  body{font-size:12px}
}

/* ==========================================================================
   HOME — Prototype v11
   ========================================================================== */
.hv-dark{
  background:linear-gradient(118deg,var(--teal-deep) 0%,var(--teal-mid) 52%,var(--teal-bright) 100%);
  color:#DDE7EC;position:relative;overflow:hidden;
}
.hv-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);
  background-size:22px 22px;
}
.hv-dark > .wrap{position:relative;z-index:2}
.hv-dark h1,.hv-dark h2,.hv-dark h3,.hv-dark h4{color:#fff}

.hv-kick{font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow-text);margin:0 0 15px}
.hv-dark .hv-kick,.hv-kick.on-dark{color:var(--yellow)}
.hv-center{text-align:center}
.hv-head{max-width:940px;margin:0 auto 46px}
.hv-head h2{font-size:clamp(28px,3.4vw,40px);color:#0F3049;line-height:1.16}
.hv-dark .hv-head h2{color:#fff}
.hv-head .hv-sub{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--gray-700);margin-top:16px;max-width:78ch;margin-left:auto;margin-right:auto}
.hv-dark .hv-head .hv-sub{color:#B9CCD6}
.btn-pill{border-radius:999px;padding:16px 34px;font-size:15.5px}
.hv-alink{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--sky-text)}
.hv-alink::after{content:"→";transition:transform .16s var(--ease)}
.hv-alink:hover{text-decoration:none}.hv-alink:hover::after{transform:translateX(4px)}
.hv-alink.y{color:var(--yellow-text)}
.hv-dark .hv-alink,.hv-alink.on-dark{color:var(--yellow)}

/* photo placeholder (prototype uses labelled slots; final Redsis imagery replaces these) */
.ph{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(135deg,#0b3446 0%,#0f4a63 55%,#136981 100%);}
/* Un hueco de foto puede ser un <div> (sin fotografia todavia) o un <img>
   (ya con ella). El <img> hereda .ph, y sin object-fit el navegador ESTIRA
   la imagen hasta llenar la caja en vez de recortarla. Medido en produccion
   el 2026-09-23: la foto de Miramar salia COMPRIMIDA un 12,6% en horizontal
   — 1.778 de la imagen contra 1.554 de su caja — y el edificio se veia mas
   estrecho de lo que es. Las otras ocho coincidian exactas y por eso no se
   notaba; cualquier retoque del CSS habria deformado otra en silencio.
   `cover` recorta, que es lo que una foto debe hacer. */
img.ph{object-fit:cover}
.ph::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);background-size:16px 16px}
.ph::after{content:attr(data-ph);position:absolute;left:18px;bottom:15px;right:18px;
  font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ---- Hero ---- */
.hv-hero{padding:84px 0 0}
.hv-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding-bottom:70px}
.hv-hero-eyebrow{color:var(--yellow);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.hv-hero h1{color:#fff;font-size:clamp(36px,4.7vw,58px);line-height:1.08;letter-spacing:-.02em;margin-bottom:22px;max-width:15ch}
.hv-hero .hv-lede{color:#BCD0DB;font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:52ch;margin-bottom:32px}
.hv-hero-media{aspect-ratio:5/4;box-shadow:var(--shadow-lg)}
.hv-proof{border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.16)}
/* Seis tarjetas desde que las dos cifras de clientes sustituyeron a la de
   piezas enviadas. En los saltos de abajo 6 encaja mejor que 5: a tres
   columnas son dos filas exactas, y a dos columnas, tres. */
.hv-proof-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.hv-proof-item{padding:30px 26px;border-left:1px solid rgba(255,255,255,.10)}
.hv-proof-item:first-child{border-left:0;padding-left:0}
.hv-proof-ic{width:26px;height:26px;color:var(--yellow);margin-bottom:14px}
.hv-proof-big{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1}
.hv-proof-lbl{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--sky);margin:6px 0 8px}
.hv-proof-desc{font-size:13px;line-height:1.45;color:#9FB6C1}

/* ---- What Redsis Does ---- */
.hv-does{background:#fff}
.hv-docard{background:#fff;border:1px solid var(--gray-200);border-radius:14px;box-shadow:var(--shadow-md);
  padding:40px 44px 34px;text-align:center;margin-bottom:30px}
.hv-docard h3{font-size:clamp(21px,2vw,26px);color:#0F3049;margin-bottom:12px}
.hv-docard > p{font-size:15.5px;color:var(--gray-700);max-width:74ch;margin:0 auto 8px;line-height:1.6}
.hv-docard .hv-mini-kick{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--sky-text);margin:20px 0 6px}
.hv-flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin:30px 0 8px;align-items:start}
.hv-node{padding:0 18px;position:relative}
.hv-node-ic{width:64px;height:64px;border-radius:50%;background:#EAF4FA;border:1px solid #CDE6F3;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--sky)}
.hv-node-ic svg{width:28px;height:28px}
.hv-node h4{font-size:17px;color:#0F3049;margin-bottom:8px}
.hv-node p{font-size:13.5px;color:var(--gray-600);line-height:1.5;margin:0}
/* Conectores: van de icono a icono, NO por debajo de ellos.
   El pseudo-elemento se ancla a la caja del nodo, asi que left:-50% + width:100%
   lo lleva del centro del circulo anterior al centro del siguiente — y como es
   un elemento posicionado, se pinta ENCIMA del icono, que no lo esta. Por eso
   se recorta 42px a cada lado: los 32px del radio del circulo mas 10px de aire.
   El circulo ademas se sube de capa, para que ningun redondeo lo vuelva a tapar. */
.hv-node-ic{position:relative;z-index:1}
/* connector: breadth bar (continuous) */
.hv-flow.breadth .hv-node:not(:first-child)::before{content:"";position:absolute;left:calc(-50% + 42px);top:31px;width:calc(100% - 84px);height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--sky),var(--yellow))}
.hv-flow.breadth .hv-node:nth-child(2)::before{background:linear-gradient(90deg,var(--blue-dark),var(--sky))}
/* connector: stepped line (progression, dotted with chevrons) */
.hv-flow.steps{grid-template-columns:repeat(4,1fr)}
.hv-flow.steps .hv-node:not(:first-child)::before{content:"";position:absolute;left:calc(-50% + 42px);top:29px;width:calc(100% - 84px);height:0;
  border-top:3px dotted #BFDCEA}
.hv-flow.steps .hv-node:not(:first-child)::after{content:"›";position:absolute;left:-3px;top:19px;color:var(--sky);font-size:22px;font-weight:800}
.hv-node .hv-verb{color:var(--sky-text);text-transform:uppercase;letter-spacing:.08em;font-size:15px;font-weight:800}

/* ---- The Difference ---- */
.hv-diff{background:var(--sky-soft)}
.hv-diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.hv-diff-card{background:#fff;border-radius:12px;padding:34px 26px;text-align:center;box-shadow:var(--shadow-sm)}
.hv-diff-ic{width:58px;height:58px;border-radius:50%;background:var(--sky);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.hv-diff-ic svg{width:26px;height:26px;color:#fff}
.hv-diff-card h3{font-size:18px;color:#0F3049;margin-bottom:12px;line-height:1.25}
.hv-diff-card p{font-size:14px;color:var(--gray-600);line-height:1.55;margin:0}

/* ---- Explorer (interactive Solutions / Services) ---- */
.hv-explore{padding:84px 0}
.hv-toggle{display:inline-flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:6px;margin:0 auto 40px;position:relative;z-index:2}
.hv-toggle-wrap{text-align:center}
.hv-toggle button{padding:15px 40px;border-radius:999px;font-size:15.5px;font-weight:800;color:#B9CCD6;letter-spacing:.01em}
.hv-toggle button[aria-selected="true"]{background:var(--yellow);color:var(--black);box-shadow:0 6px 22px rgba(255,213,0,.28)}
.hv-mode{display:none}
.hv-mode.is-active{display:block}
.hv-mode .hv-kick{text-align:left}
.hv-mode > h2{color:#fff;font-size:clamp(26px,3vw,36px);line-height:1.16;max-width:20ch;margin-bottom:16px}
.hv-mode > .hv-lede{color:#B9CCD6;font-size:17px;line-height:1.6;max-width:70ch;margin-bottom:34px}
.hv-exp-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:26px;align-items:start}
.hv-exp-list{display:flex;flex-direction:column;gap:12px}
.hv-exp-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:12px;
  padding:18px 20px;color:#DCE7EC;font-weight:700;font-size:16.5px;transition:.16s var(--ease)}
.hv-exp-row .exp-ic{width:24px;height:24px;color:var(--sky);flex:0 0 auto}
.hv-exp-row .exp-arr{margin-left:auto;opacity:.5;transition:.16s var(--ease)}
.hv-exp-row:hover{border-color:rgba(255,213,0,.5);background:rgba(255,255,255,.07)}
.hv-exp-row[aria-selected="true"]{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.hv-exp-row[aria-selected="true"] .exp-ic{color:var(--black)}
.hv-exp-row[aria-selected="true"] .exp-arr{opacity:1}
.hv-exp-detail{display:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:14px;overflow:hidden}
.hv-exp-detail.is-active{display:block}
.hv-exp-detail .ph{border-radius:0;aspect-ratio:16/6}
.hv-exp-body{padding:28px 30px 30px}
.hv-exp-body h3{color:#fff;font-size:23px;margin-bottom:10px}
.hv-exp-body .tag{color:#CFE0EA;font-size:16px;line-height:1.5;margin-bottom:14px;font-weight:600}
.hv-exp-body p{color:#A9C0CC;font-size:14.5px;line-height:1.6;margin-bottom:20px}
.hv-exp-body .feat-kick{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:12px}
.hv-pills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.hv-pill{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:8px 15px;font-size:13px;font-weight:700;color:#E7EFF3}
.hv-support{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:38px}
.hv-support-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hv-support-card{display:flex;gap:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);border-radius:12px;padding:24px 26px}
.hv-support-ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--sky)}
.hv-support-ic svg{width:22px;height:22px}
.hv-support-card h4{color:#fff;font-size:17px;margin-bottom:8px}
.hv-support-card p{color:#A9C0CC;font-size:14px;line-height:1.55;margin:0}
.hv-explore .hv-cta-row{text-align:center;margin-top:40px}

/* ---- What You Gain ---- */
.hv-gain{background:#fff}
.hv-gain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1120px;margin:0 auto}
.hv-gain-card{background:#fff;border:1px solid var(--gray-150);border-radius:12px;padding:34px 30px;text-align:center}
.hv-gain-ic{width:56px;height:56px;border-radius:50%;background:var(--yellow-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.hv-gain-ic svg{width:25px;height:25px;color:var(--yellow-deep)}
.hv-gain-card h3{font-size:18px;color:#0F3049;margin-bottom:12px;line-height:1.25}
.hv-gain-card p{font-size:14px;color:var(--gray-600);line-height:1.55;margin:0}

/* ---- Industries carousel ---- */
.hv-ind-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.hv-ind-nav{display:flex;gap:12px}
.hv-ind-nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  color:#fff;display:flex;align-items:center;justify-content:center;transition:.16s var(--ease)}
.hv-ind-nav button:hover{border-color:var(--yellow);color:var(--yellow)}
.hv-ind-nav button svg{width:20px;height:20px}
.hv-ind-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(340px,1fr);gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
  scrollbar-width:none}
@media (prefers-reduced-motion:no-preference){.hv-ind-track{scroll-behavior:smooth}}
.hv-ind-track::-webkit-scrollbar{display:none}
.hv-ind-card{scroll-snap-align:start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.hv-ind-card .ph{border-radius:0;aspect-ratio:16/8}
.hv-ind-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.hv-ind-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--sky);margin-bottom:12px}
.hv-ind-body h3{color:#fff;font-size:20px;line-height:1.2;margin-bottom:12px}
.hv-ind-body p{color:#AEC4CF;font-size:14px;line-height:1.55;margin-bottom:20px}
.hv-ind-body .hv-alink{margin-top:auto}

/* ---- Across the Americas ---- */
.hv-amer{background:#fff}
.hv-amer-top{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-bottom:46px}
.hv-amer-top h2{font-size:clamp(28px,3.2vw,40px);color:#0F3049;line-height:1.14;margin-bottom:18px;max-width:16ch}
.hv-amer-top p{font-size:16px;color:var(--gray-700);line-height:1.65}
.hv-map{width:100%;height:auto}
.hv-map .land{fill:#DCEAF3}
.hv-map .land.hot{fill:#F6E7A8}
.hv-map .line{fill:none;stroke:var(--sky);stroke-width:2;opacity:.75}
.hv-map .pin{fill:var(--sky);stroke:#fff;stroke-width:2}
.hv-map .hub{fill:var(--yellow);stroke:#fff;stroke-width:2.5}
.hv-map .hub-ring{fill:none;stroke:var(--yellow);stroke-width:2;opacity:.5;animation:hvpulse 2.6s var(--ease) infinite}
@keyframes hvpulse{0%{r:9;opacity:.55}70%{r:26;opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hv-map .hub-ring{animation:none}}
.hv-ctabs{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.hv-ctab{text-align:left;background:#fff;border:1px solid var(--gray-200);border-radius:10px;padding:16px 18px;transition:.15s var(--ease)}
.hv-ctab .flag{font-size:20px;line-height:1;margin-bottom:10px;display:block}
.hv-ctab .cn{display:block;font-weight:800;color:#0F3049;font-size:16px;line-height:1.2}
.hv-ctab .cc{display:block;font-size:13px;color:var(--yellow-text);font-weight:700;margin-top:3px}
.hv-ctab:hover{border-color:var(--gray-300)}
.hv-ctab[aria-selected="true"]{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
.hv-cdetail{display:none;background:#fff;border:1px solid var(--gray-200);border-radius:14px;box-shadow:var(--shadow-sm);padding:30px 34px}
.hv-cdetail.is-active{display:block}
.hv-cdetail-h{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hv-cdetail-h .flag{font-size:30px;line-height:1}
.hv-cdetail-h h3{color:#0F3049;font-size:22px;line-height:1.1}
.hv-cdetail-h .city{color:var(--yellow-text);font-weight:700;font-size:14px}
.hv-cdetail-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-bottom:20px}
.hv-cdetail-cols h4{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-text);margin-bottom:8px}
.hv-cdetail-cols p{font-size:14.5px;color:var(--gray-600);line-height:1.55;margin:0}
.hv-model{margin-top:56px}
.hv-model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.hv-model-card{background:#fff;border:1px solid var(--gray-150);border-radius:12px;padding:30px 28px;box-shadow:var(--shadow-sm)}
.hv-model-ic{width:52px;height:52px;border-radius:50%;background:#EAF4FA;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--sky)}
.hv-model-ic svg{width:24px;height:24px}
.hv-model-card h3{font-size:19px;color:#0F3049;margin-bottom:12px}
.hv-model-card p{font-size:14.5px;color:var(--gray-600);line-height:1.6;margin:0}
.hv-feat{margin-top:34px;display:grid;grid-template-columns:.9fr 1.1fr;background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.hv-feat .ph{border-radius:0;min-height:340px}
.hv-feat-body{padding:36px 40px}
.hv-feat-body h3{font-size:clamp(22px,2.2vw,28px);color:#0F3049;line-height:1.18;margin:8px 0 6px}
.hv-feat-city{color:var(--yellow-text);font-weight:700;font-size:14px;margin-bottom:16px}
.hv-feat-body > p{font-size:15px;color:var(--gray-700);line-height:1.6;margin-bottom:20px}
.hv-feat-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-bottom:22px}
.hv-feat-checks li{position:relative;padding-left:20px;font-size:14.5px;color:#0F3049;font-weight:600}
.hv-feat-checks li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--yellow-deep)}

/* ---- CTA band ---- */
.hv-cta{padding:78px 0;text-align:center}
.hv-cta h2{color:#fff;font-size:clamp(28px,3.4vw,42px);margin-bottom:18px}
.hv-cta p{color:#BCD0DB;font-size:17px;line-height:1.6;max-width:66ch;margin:0 auto 30px}

/* ---- FAQ ---- */
.hv-faq{background:var(--sky-softer)}
.hv-faq-list{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.hv-faq-item{background:#fff;border:1px solid var(--gray-200);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden}
.hv-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 28px;font-size:18px;font-weight:700;color:#0F3049}
.hv-faq-item summary::-webkit-details-marker{display:none}
.hv-faq-item summary .chev{width:20px;height:20px;color:var(--sky);flex:0 0 auto;transition:transform .2s var(--ease)}
.hv-faq-item[open] summary .chev{transform:rotate(180deg)}
.hv-faq-a{padding:0 28px 26px}
.hv-faq-a p{font-size:15.5px;color:var(--gray-700);line-height:1.65;margin:0 0 12px}
.hv-faq-links{font-size:14px;font-weight:700;color:var(--sky-text);margin-top:6px}
.hv-faq-links a{color:var(--sky-text)}.hv-faq-links .sep{color:var(--gray-300);margin:0 8px}

/* ---- Home responsive ---- */
@media (max-width:1024px){
  .hv-hero-grid{grid-template-columns:1fr;gap:36px}
  .hv-hero-media{max-width:560px}
  .hv-proof-grid{grid-template-columns:repeat(3,1fr)}
  .hv-proof-item:nth-child(1),.hv-proof-item:nth-child(4){border-left:0}
  .hv-diff-grid,.hv-gain-grid{grid-template-columns:repeat(2,1fr)}
  .hv-exp-grid{grid-template-columns:1fr}
  .hv-support-grid,.hv-amer-top,.hv-model-grid,.hv-feat{grid-template-columns:1fr}
  .hv-ctabs{grid-template-columns:repeat(3,1fr)}
  .hv-feat .ph{min-height:220px}
}
@media (max-width:720px){
  .hv-hero{padding:52px 0 0}
  .hv-proof-grid{grid-template-columns:1fr 1fr}
  .hv-proof-item{border-left:0!important;padding:22px 8px}
  .hv-does .hv-docard{padding:28px 22px}
  .hv-flow,.hv-flow.steps{grid-template-columns:1fr;gap:26px}
  .hv-flow.breadth .hv-node::before,.hv-flow.steps .hv-node::before,.hv-flow.steps .hv-node::after{display:none}
  .hv-diff-grid,.hv-gain-grid,.hv-model-grid,.hv-cdetail-cols,.hv-feat-checks{grid-template-columns:1fr}
  .hv-ctabs{grid-template-columns:1fr 1fr}
  .hv-toggle button{padding:13px 24px;font-size:14px}
  .hv-ind-track{grid-auto-columns:82%}
}

/* ------------------------------------------------------------------ legal --
   Paginas legales (src/pages_legal.py). Texto largo que la gente lee de
   verdad cuando tiene un problema: linea mas ancha, jerarquia clara entre el
   titulo de la seccion y su parrafo, y el bloque de paises como fichas para
   que cada uno encuentre el suyo sin leerse los otros cuatro. */
.legal-h{font-size:19px;color:#0F3049;margin:34px 0 10px;line-height:1.35}
.legal-h:first-of-type{margin-top:4px}
.legal-pending{background:#FFF8E1;border:1px solid var(--yellow);border-radius:8px;
  padding:14px 16px;margin:0 0 30px;font-size:14.5px;line-height:1.6;color:#4A3A00}
.legal-countries{display:grid;gap:14px;margin-top:6px}
.legal-country{border:1px solid var(--gray-200);border-left:3px solid var(--sky);
  border-radius:8px;padding:16px 18px;background:#FBFCFD}
.legal-country h4{font-size:16px;color:#0F3049;margin:0 0 8px}
.legal-country p{margin:0 0 8px;font-size:14px;line-height:1.6}
.legal-country p:last-child{margin-bottom:0}
.legal-country strong{color:#0F3049}
@media (min-width:900px){.legal-countries{grid-template-columns:1fr 1fr}}