/* =============================================================
   VISIÓN MARKETING — sistema visual
   1. Tokens  2. Reset  3. Utilidades  4. Tipografía  5. Nav
   6. Componentes  7. Secciones  8. Mapa  9. Efectos
   10. Responsive  11. Reduced-motion
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
@property --mesh-angle { syntax: "<angle>";      inherits: false; initial-value: 0deg; }
@property --mesh-x     { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --mesh-y     { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

:root {
  /* Paleta de marca — tomada del PDF institucional (grafito + azul VISIÓN) */
  --navy-950: #1C1C1C;
  --navy-900: #242424;
  --navy-850: #2E2E2E;
  --navy-800: #333333;   /* brief */
  --navy-600: #4D4D4D;   /* brief */
  --slate:    #6E6E6E;   /* brief */
  --gray-300: #C9C9C9;   /* brief */
  --gray-100: #EFEFEF;   /* brief */
  --white:    #FFFFFF;

  /* Señal — único acento. Cambiando esta variable cambia todo el sitio. */
  --signal:      #7BA2C7;
  --signal-soft: rgba(123, 162, 199, .16);
  --signal-line: rgba(123, 162, 199, .32);

  /* Semánticos — tema oscuro (por defecto) */
  --bg:        var(--navy-900);
  --bg-2:      var(--navy-850);
  --bg-3:      #333333;
  --ink:       #F2F2F2;
  --ink-2:     #B0B0B0;
  --ink-3:     #8A8A8A;
  --line:      rgba(242, 242, 242, .11);
  --line-2:    rgba(242, 242, 242, .18);

  /* Tipografía */
  /* Una sola familia, como en el PDF institucional: grotesca en varios anchos.
     Archivo es variable (wdth 75-125, wght 400-900) y tiene itálica real,
     así que cubre desde el cuerpo hasta los títulos condensados del PDF. */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Ritmo */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1440px;
  --maxw-narrow: 1180px;
  --sec-y: clamp(5rem, 11vw, 10.5rem);
  --radius: 4px;

  /* Easings */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Secciones claras */
.is-light {
  /* En fondo claro el azul institucional se oscurece para mantener contraste */
  --signal:      #3F6E96;
  --signal-soft: rgba(63, 110, 150, .14);
  --signal-line: rgba(63, 110, 150, .30);
  --bg:     var(--gray-100);
  --bg-2:   var(--white);
  --bg-3:   var(--white);
  --ink:    var(--navy-800);
  --ink-2:  var(--slate);
  --ink-3:  #8A8A8A;
  --line:   rgba(51, 51, 51, .12);
  --line-2: rgba(51, 51, 51, .20);
}

/* =============================================================
   2. RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.02; letter-spacing: -0.028em; font-family: var(--display); font-weight: 700; }
ul { list-style: none; padding: 0; }
::selection { background: var(--signal); color: var(--white); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--white); color: var(--navy-900);
  border-radius: var(--radius); font-weight: 700;
}
.skip-link:focus { top: 1rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--gutter) * 2, var(--maxw-narrow)); margin-inline: auto; }
.section { position: relative; padding-block: var(--sec-y); background: var(--bg); color: var(--ink); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
.kicker {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: .8rem;
}
.kicker::before {
  content: ""; width: clamp(20px, 4vw, 46px); height: 1px;
  background: var(--signal); flex: none;
}
.kicker--plain::before { display: none; }

.sec-head { display: grid; gap: 1.4rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-num {
  font-family: var(--mono);
  font-size: clamp(3.4rem, 9vw, 7rem);
  line-height: .8;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  letter-spacing: -.04em;
  user-select: none;
}
.sec-title { font-size: clamp(2rem, 5.2vw, 4rem); }
.sec-title em { font-style: normal; color: var(--signal); }
.sec-lead {
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  color: var(--ink-2);
  max-width: 60ch;
  line-height: 1.6;
}
.sec-head--split {
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 960px) {
  .sec-head--split { grid-template-columns: 1.25fr .9fr; gap: 3rem; }
}

.mono-label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}

/* =============================================================
   5. NAVEGACIÓN
   ============================================================= */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 300;
  background: linear-gradient(90deg, var(--signal), #C3D6E8);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  transition: background-color .45s var(--ease-out), backdrop-filter .45s var(--ease-out),
              box-shadow .45s var(--ease-out), padding .45s var(--ease-out);
  padding-block: 1.15rem;
}
.nav.is-scrolled {
  background: rgba(28, 28, 28, .82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 -1px 0 rgba(242,242,242,.10);
  padding-block: .7rem;
}
@supports not (backdrop-filter: blur(2px)) {
  .nav.is-scrolled { background: rgba(28, 28, 28, .97); }
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.brand { display: flex; align-items: center; flex: none; }
.brand-logo {
  width: clamp(170px, 22vw, 215px); height: auto;
  transition: transform .45s var(--ease-out);
}
.brand:hover .brand-logo { transform: scale(1.03); }
.nav.is-scrolled .brand-logo { width: clamp(155px, 19vw, 190px); }
.footer .brand-logo { width: 220px; }

.nav-links { display: none; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
@media (min-width: 1100px) { .nav-links { display: flex; } }
.nav-link {
  position: relative; font-size: .875rem; font-weight: 600; color: var(--ink-2);
  padding: .3rem 0; transition: color .35s var(--ease-out);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.nav-link:hover { color: var(--white); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { color: var(--white); }
.nav-link.is-active::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: .7rem; }
.nav-cta { display: none; }
@media (min-width: 720px) { .nav-cta { display: inline-flex; } }

.burger {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.burger:hover { border-color: var(--signal); background: var(--signal-soft); }
@media (min-width: 1100px) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--white); transition: transform .4s var(--ease-out), opacity .3s; }
.burger span + span { margin-top: 4px; }
.burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 190;
  background: var(--navy-950);
  display: grid; align-content: center;
  padding: 6rem var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-out);
  overflow-y: auto;
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu-list { display: grid; gap: .2rem; }
.menu-list a {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 3.2rem); letter-spacing: -.03em;
  color: var(--ink-2); padding: .35rem 0;
  display: flex; align-items: baseline; gap: 1rem;
  border-bottom: 1px solid var(--line);
  transition: color .35s var(--ease-out), padding-left .45s var(--ease-out);
}
.menu-list a:hover { color: var(--white); padding-left: .8rem; }
.menu-list .m-num { font-family: var(--mono); font-size: .7rem; font-weight: 400; color: var(--signal); letter-spacing: .1em; }
.menu-foot { margin-top: 2.5rem; display: grid; gap: .5rem; font-size: .9rem; color: var(--ink-2); }
.menu-foot a:hover { color: var(--signal); }

/* =============================================================
   6. COMPONENTES
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .92rem 1.6rem;
  font-family: var(--sans); font-weight: 700; font-size: .875rem;
  letter-spacing: .01em; border-radius: var(--radius);
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft),
              color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .45s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  background: var(--signal); color: #151515;
  box-shadow: 0 4px 16px rgba(123,162,199,.22);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white);
  transform: translateY(101%); transition: transform .5s var(--ease-soft);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(123,162,199,.30); color: var(--navy-900); }
.btn-primary:hover::before { transform: translateY(0); }

.btn-ghost {
  border: 1px solid var(--line-2); color: var(--ink);
}
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: translateY(101%); transition: transform .5s var(--ease-soft);
}
.btn-ghost:hover { color: var(--bg); border-color: var(--ink); transform: translateY(-3px); }
.btn-ghost:hover::before { transform: translateY(0); }

.btn-wa { background: #25D366; color: #08331a; }
.btn-wa:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(37,211,102,.28); }

.btn-lg { padding: 1.1rem 2rem; font-size: .95rem; }
.btn:active { transform: translateY(-1px); transition-duration: .12s; }

/* Link con flecha */
.arrow-link {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--signal);
  padding-bottom: .3rem; position: relative;
}
.arrow-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-soft);
}
.arrow-link:hover::after { transform: scaleX(1); transform-origin: left; }
.arrow-link svg { width: 13px; height: 13px; transition: transform .45s var(--ease-out); }
.arrow-link:hover svg { transform: translateX(4px); }

/* Tarjeta base */
.card {
  position: relative; isolation: isolate;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .5s var(--ease-out), transform .55s var(--ease-soft),
              background-color .5s var(--ease-out);
}
.card::after {
  /* halo que sigue al cursor */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), var(--signal-soft), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.card:hover { border-color: var(--signal-line); }
.card:hover::after { opacity: 1; }

/* WhatsApp flotante */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 180; width: 60px; height: 60px;
  display: grid; place-items: center;
  background: #fff; border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
  transition: transform .45s var(--ease-bounce), box-shadow .45s var(--ease-out);
  animation: waPulse 3.6s ease-out infinite;
}
.wa-float:hover { transform: scale(1.09) translateY(-2px); animation-play-state: paused; box-shadow: 0 14px 32px rgba(37,211,102,.4); }
.wa-float svg { width: 82%; height: 82%; display: block; }
@keyframes waPulse {
  0%   { box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 0 rgba(37,211,102,0); }
}

/* Splash */
.splash {
  position: fixed; inset: 0; z-index: 500;
  background: var(--navy-950);
  display: grid; place-items: center;
  animation: splashSafety .01s 4.5s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-out), opacity .6s .3s; }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-inner { display: grid; justify-items: center; gap: 1.4rem; }
.splash-mark { width: 46px; height: 46px; animation: splashSpin 2.4s var(--ease-soft) infinite; }
@keyframes splashSpin { 0%,100% { opacity: .45; transform: scale(.96);} 50% { opacity: 1; transform: scale(1);} }
.splash-bar { width: 130px; height: 1px; background: var(--line-2); overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 40%; background: var(--signal); animation: splashSlide 1.3s var(--ease-soft) infinite; }
@keyframes splashSlide { 0% { transform: translateX(-100%);} 100% { transform: translateX(350%);} }

/* =============================================================
   7. SECCIONES
   ============================================================= */

/* --- Hero --- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-items: end;
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  overflow: hidden;
  background: var(--navy-950);
}
.hero-bg { position: absolute; inset: 0; z-index: -3; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-bg picture { display: block; width: 100%; height: 100%; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; z-index: 1;
  transition: opacity 1.2s var(--ease-out);
}
.hero-video.is-playing { opacity: .62; }
.hero-bg::after { z-index: 2; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,28,28,.72) 0%, rgba(28,28,28,.45) 42%, rgba(28,28,28,.94) 100%);
}
.hero-mesh {
  position: absolute; inset: -14%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(52% 46% at var(--mesh-x) var(--mesh-y), rgba(123,162,199,.30), transparent 62%),
    conic-gradient(from var(--mesh-angle), rgba(77,77,77,.28), rgba(123,162,199,.16), rgba(51,51,51,.30), rgba(77,77,77,.28));
  filter: blur(78px) saturate(125%);
  opacity: .8; mix-blend-mode: screen;
  animation: meshShift 26s linear infinite;
}
@keyframes meshShift {
  0%   { --mesh-angle: 0deg;   --mesh-x: 32%; --mesh-y: 38%; }
  50%  { --mesh-angle: 180deg; --mesh-x: 70%; --mesh-y: 58%; }
  100% { --mesh-angle: 360deg; --mesh-x: 32%; --mesh-y: 38%; }
}
.hero-grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(123,162,199,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(123,162,199,.09) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 78%);
}
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 210px 210px;
}

.hero-inner { display: grid; gap: clamp(2rem, 5vh, 3.5rem); }
.hero-top { display: grid; gap: 1.6rem; }
.hero-title {
  font-size: clamp(2.55rem, 7.6vw, 6.6rem);
  font-weight: 800;
  letter-spacing: -.042em;
  line-height: .96;
  color: var(--white);
  max-width: 16ch;
}
.hero-title em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--signal);
  padding-right: .06em;
}
.hero-sub {
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  color: var(--gray-300); max-width: 52ch; line-height: 1.6;
}
.hero-foot {
  display: grid; gap: 2rem;
  padding-top: clamp(1.5rem, 3vh, 2.5rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .hero-foot { grid-template-columns: auto 1fr; align-items: center; gap: 3rem; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1.4rem;
}
@media (min-width: 720px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }
.hero-stat { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.hero-stat b {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem); letter-spacing: -.03em; color: var(--white);
  line-height: 1; display: inline-flex; align-items: baseline; gap: .04em;
}
.hero-stat b span { display: inline-block; }
.hero-stat .suf {
  font-size: .7em; color: var(--signal); font-weight: 700;
}
.hero-stat span.hero-stat-l {
  font-size: .76rem; color: var(--ink-3); line-height: 1.3;
  min-height: 2.4em; max-width: 20ch;
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: .5rem; z-index: 2;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-3);
}
.scroll-hint i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--signal), transparent); }

/* --- Marquee de sectores --- */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line);
  background: var(--navy-950); padding-block: 1.05rem;
}
.marquee-track { display: flex; gap: 3.2rem; width: max-content; animation: marq 44s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.marquee-item {
  display: flex; align-items: center; gap: 3.2rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.marquee-item::after { content: ""; width: 5px; height: 5px; background: var(--signal); border-radius: 50%; opacity: .7; }

/* --- Split imagen + contenido --- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split-media { order: 2; }
  .split--wide-text { grid-template-columns: .9fr 1.1fr; }
}
.split-media { position: relative; }
.split-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.split-media::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(140deg, rgba(123,162,199,.14), transparent 55%);
  pointer-events: none;
}
.split-tag {
  position: absolute; left: 0; bottom: 0; transform: translate(-8%, 34%);
  background: var(--navy-950); border: 1px solid var(--line-2);
  padding: .9rem 1.2rem; border-radius: var(--radius);
  display: grid; gap: .25rem; max-width: 62%;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.split-tag b { font-family: var(--display); font-size: 1.5rem; color: var(--white); letter-spacing: -.03em; }
.split-tag span { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.split-body { display: grid; gap: 1.4rem; }
.split-body p { color: var(--ink-2); font-size: 1.02rem; }
.split-list { display: grid; gap: .7rem; margin-top: .4rem; }
.split-list li {
  display: flex; gap: .8rem; align-items: baseline;
  font-size: .95rem; color: var(--ink-2);
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.split-list li::before {
  content: ""; width: 6px; height: 6px; flex: none; margin-top: .45rem;
  background: var(--signal); transform: rotate(45deg);
}

/* --- Grilla de servicios --- */
.svc-grid { display: grid; gap: clamp(.8rem, 1.6vw, 1.4rem); }
@media (min-width: 700px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .svc-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.svc-grid--4 .svc { min-height: 240px; }
.svc {
  position: relative;
  min-height: 340px;
  perspective: 1600px;
  background: transparent;
}
.svc-grid--4 .svc { min-height: 240px; perspective: 1400px; }

/* Contenedor que rota */
.svc-flip {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc:hover .svc-flip,
.svc:focus-within .svc-flip { transform: rotateY(180deg); }

/* Caras */
.svc-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

/* --- FRENTE: imagen + número grande + título --- */
.svc-front { background: var(--bg); }
.svc-bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5;
  transition: transform 1.4s var(--ease-out);
  transform: scale(1.03);
}
.svc:hover .svc-bg { transform: scale(1.1); }
.svc-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(175deg,
    rgba(36,36,36,.55) 0%,
    rgba(36,36,36,.60) 40%,
    rgba(36,36,36,.90) 100%);
}
.svc-bignum {
  position: absolute; top: clamp(-.5rem, 1vw, .2rem); left: clamp(.6rem, 2vw, 1.4rem);
  z-index: 2;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(6rem, 13vw, 11rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px var(--signal);
  opacity: .9; user-select: none; letter-spacing: -.04em;
}
.svc-front .svc-name {
  position: relative; z-index: 2;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* --- DORSO: texto explicativo --- */
.svc-back {
  transform: rotateY(180deg);
  background: linear-gradient(165deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--signal-line);
  justify-content: flex-start; gap: .85rem;
}
.svc-back .svc-num {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; color: var(--signal);
}
.svc-name-sm { font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--white); }
.svc-claim { font-size: .9rem; color: var(--signal); font-style: italic; }
.svc-desc { font-size: .92rem; color: var(--ink-2); line-height: 1.55; }
.svc-items { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .1rem; }
.svc-items li {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  padding: .3rem .55rem; border: 1px solid var(--line-2);
  color: var(--ink-2); border-radius: 2px;
}
.svc-back .svc-link { margin-top: auto; padding-top: .4rem; }

/* Táctil: sin hover fiable, se muestra el dorso al tocar (toggle por foco) */
@media (hover: none) {
  .svc-flip { transition: transform .6s var(--ease-out); }
}

/* --- Método / timeline --- */
.metodo { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 760px)  { .metodo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .metodo { grid-template-columns: repeat(5, 1fr); } }
.metodo-step {
  background: var(--bg); padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: grid; gap: .8rem; align-content: start;
  transition: background-color .5s var(--ease-out);
}
.metodo-step:hover { background: var(--bg-2); }
.metodo-n {
  font-family: var(--mono); font-size: 2.4rem; font-weight: 300;
  color: transparent; -webkit-text-stroke: 1px var(--signal-line);
  line-height: 1; letter-spacing: -.04em;
  transition: -webkit-text-stroke-color .5s var(--ease-out);
}
.metodo-step:hover .metodo-n { -webkit-text-stroke-color: var(--signal); }
.metodo-n--letter {
  -webkit-text-stroke: 0; color: var(--signal);
  font-weight: 700; font-size: 3rem;
}
.metodo-t { font-size: 1.15rem; color: var(--ink); }
.metodo-d { font-size: .88rem; color: var(--ink-2); }

/* --- Planes --- */
.planes { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 1000px) { .planes { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; max-width: 1040px; } }
.plan {
  position: relative; isolation: isolate;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.7rem, 3vw, 2.4rem);
  display: grid; gap: 1.3rem; align-content: start;
  transition: transform .55s var(--ease-soft), border-color .5s var(--ease-out), box-shadow .55s var(--ease-out);
}
.plan:hover { transform: translateY(-6px); border-color: var(--signal-line); box-shadow: 0 26px 60px rgba(0,0,0,.32); }
.plan--star {
  border-color: var(--signal-line);
  background: linear-gradient(170deg, rgba(123,162,199,.09), var(--bg-2) 46%);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.plan-badge {
  position: absolute; top: -1px; right: 1.4rem;
  background: var(--signal); color: #151515;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600;
  padding: .32rem .7rem; border-radius: 0 0 3px 3px;
}
.plan-kicker { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--signal); }
.plan-name { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--ink); }
.plan-para { font-size: .9rem; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 1.2rem; }
.plan-list { display: grid; gap: .62rem; }
.plan-list li { display: flex; gap: .7rem; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.plan-list svg { width: 15px; height: 15px; flex: none; margin-top: .22rem; color: var(--signal); }
.plan .btn { margin-top: .5rem; width: 100%; }

.tabla-comp { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-comp th, .tabla-comp td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.tabla-comp thead th { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.tabla-comp tbody th { font-weight: 600; color: var(--ink); }
.tabla-comp td { text-align: center; color: var(--ink-2); }
.tabla-comp .yes { color: var(--signal); font-weight: 700; }
.tabla-comp .no  { color: var(--ink-3); opacity: .5; }
.tabla-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }

/* --- Portfolio / casos --- */
.casos { display: grid; gap: 1.4rem; }
@media (min-width: 800px)  { .casos { grid-template-columns: repeat(2, 1fr); } }
.caso { display: grid; align-content: start; }
.caso-media { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); }
.caso-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter .7s var(--ease-out);
}
.caso:hover .caso-media img { transform: scale(1.055); filter: saturate(1.18) brightness(1.06); }
.caso-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,28,28,.92) 0%, rgba(28,28,28,.15) 55%, transparent 100%);
}
.caso-over {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1.2rem, 2.5vw, 1.9rem); display: grid; gap: .5rem;
}
.caso-cliente { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--signal); }
.caso-t { font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--white); }
.caso-body { padding: 1.4rem .2rem 0; display: grid; gap: 1rem; }
.caso-body p { font-size: .92rem; color: var(--ink-2); }
.caso-body p b { color: var(--ink); font-weight: 700; }
.caso-metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.caso-metricas div { display: grid; gap: .2rem; }
.caso-metricas b { font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--signal); letter-spacing: -.03em; }
.caso-metricas span { font-size: .7rem; color: var(--ink-3); line-height: 1.3; }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.filtro {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink-3);
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out), background-color .35s var(--ease-out);
}
.filtro:hover { color: var(--ink); border-color: var(--line-2); }
.filtro.is-active { background: var(--signal); border-color: var(--signal); color: #151515; font-weight: 600; }
.is-hidden { display: none !important; }

/* --- Clientes / logos --- */
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px)  { .logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .logos { grid-template-columns: repeat(4, 1fr); } }
.logo-cell--empty { display: none; }
.logo-cell {
  background: var(--bg); min-height: 130px; display: grid; place-items: center;
  padding: 1.6rem 1.4rem; text-align: center;
  transition: background-color .45s var(--ease-out);
}
.logo-cell:hover { background: var(--bg-2); }
.logo-img {
  max-width: 100%; max-height: 58px; width: auto; height: auto;
  object-fit: contain; opacity: .62;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.logo-cell:hover .logo-img { opacity: 1; transform: scale(1.05); }
.logo-txt {
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  color: var(--ink-3); transition: color .45s var(--ease-out);
}
.logo-cell:hover .logo-txt { color: var(--white); }

/* --- Equipo --- */
.equipo { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px)  { .equipo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .equipo { grid-template-columns: repeat(4, 1fr); } }
.equipo-cell { background: var(--bg); padding: 1.6rem; display: grid; gap: .5rem; align-content: start; transition: background-color .45s var(--ease-out); }
.equipo-cell:hover { background: var(--bg-2); }
.equipo-rol { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: -.02em; }
.equipo-desc { font-size: .84rem; color: var(--ink-2); }
.equipo-cell--cta { background: var(--bg-2); align-content: center; }
.equipo-cell--cta .equipo-rol { color: var(--signal); }

/* --- Blog --- */
.posts { display: grid; gap: 1.5rem; }
@media (min-width: 780px)  { .posts { grid-template-columns: repeat(3, 1fr); } }
.post { display: grid; align-content: start; gap: 1rem; }
.post-media { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); }
.post-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1s var(--ease-out); }
.post:hover .post-media img { transform: scale(1.05); }
.post-meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.post-cat { color: var(--signal); }
.post-t { font-size: 1.18rem; color: var(--ink); transition: color .35s var(--ease-out); }
.post:hover .post-t { color: var(--signal); }
.post-bajada { font-size: .9rem; color: var(--ink-2); }

/* --- Stats banda --- */
.stats-band { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 640px)  { .stats-band { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats-band { grid-template-columns: repeat(4, 1fr); } }
.stat-cell { background: var(--bg); padding: clamp(1.8rem, 4vw, 3rem) clamp(1.2rem, 2.5vw, 2rem); display: grid; gap: .5rem; }
.stat-v { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: -.045em; color: var(--white); line-height: 1; }
.is-light .stat-v { color: var(--navy-800); }
.stat-l { font-size: .82rem; color: var(--ink-3); max-width: 22ch; }

/* --- FAQ --- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; display: flex; gap: 1.5rem; align-items: center;
  justify-content: space-between; padding: 1.4rem 0;
  font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.24rem);
  letter-spacing: -.02em; color: var(--ink);
  transition: color .35s var(--ease-out);
}
.faq-q:hover { color: var(--signal); }
.faq-ico { width: 20px; height: 20px; flex: none; position: relative; }
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor;
  transition: transform .45s var(--ease-out);
}
.faq-ico::after { transform: rotate(90deg); }
.faq-item.is-open .faq-ico::after { transform: rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: 1.5rem; color: var(--ink-2); font-size: .96rem; max-width: 72ch; }

/* --- Formulario --- */
.form { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.field { display: grid; gap: .45rem; }
.field label { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: .85rem 1rem; width: 100%;
  transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select option { background: var(--navy-900); color: var(--ink); }
.is-light .field select option { background: var(--white); color: var(--navy-800); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--signal); background: var(--signal-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: .7; }
.form-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: .4rem; }
.form-note { font-size: .78rem; color: var(--ink-3); }
.form-ok {
  display: none; align-items: center; gap: .7rem;
  padding: 1rem 1.2rem; border: 1px solid var(--signal-line); background: var(--signal-soft);
  border-radius: var(--radius); font-size: .92rem; color: var(--ink);
}
.form-ok.is-visible { display: flex; }
.form-ok svg { width: 20px; height: 20px; color: var(--signal); flex: none; }
.form-ok path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck .8s var(--ease-out) forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* --- Bloques de contacto --- */
.contacto-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 960px) { .contacto-grid { grid-template-columns: 1fr .85fr; } }
.datos { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dato { background: var(--bg-2); padding: 1.3rem 1.4rem; display: grid; gap: .3rem; transition: background-color .4s var(--ease-out); }
.dato:hover { background: var(--bg-3); }
.dato span { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.dato b, .dato a { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: -.02em; }
.dato a:hover { color: var(--signal); }

/* --- CTA banda --- */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-950);
  padding-block: clamp(4rem, 9vw, 7.5rem);
  text-align: center;
}
.cta-band .cta-bg { position: absolute; inset: 0; z-index: -2; }
.cta-band .cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.cta-band .cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,28,28,.72), rgba(28,28,28,.92)); }
.cta-inner { display: grid; gap: 1.6rem; justify-items: center; }
.cta-title { font-size: clamp(2rem, 5.4vw, 4.2rem); color: var(--white); max-width: 18ch; }
.cta-title em { font-style: normal; color: transparent; -webkit-text-stroke: 1.2px var(--signal); }
.cta-sub { color: var(--gray-300); max-width: 54ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: .6rem; }

/* --- Page header (páginas internas) --- */
.phead {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-950);
  padding-top: clamp(8rem, 16vh, 12rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.phead-grid {
  position: absolute; inset: 0; z-index: -2; opacity: .45;
  background-image:
    linear-gradient(to right, rgba(123,162,199,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(123,162,199,.09) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(110% 100% at 20% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(110% 100% at 20% 0%, #000 10%, transparent 72%);
}
.phead-glow {
  position: absolute; inset: -20% 30% 30% -10%; z-index: -2; pointer-events: none;
  background: radial-gradient(closest-side, rgba(123,162,199,.24), transparent);
  filter: blur(60px);
}
.phead-inner { display: grid; gap: 1.3rem; }
.phead-title { font-size: clamp(2.4rem, 6.6vw, 5.2rem); color: var(--white); max-width: 18ch; }
.phead-title em { font-style: normal; color: transparent; -webkit-text-stroke: 1.2px var(--signal); }
.phead-lead { font-size: clamp(1rem, 1.7vw, 1.22rem); color: var(--gray-300); max-width: 58ch; }
.crumbs { display: flex; gap: .5rem; align-items: center; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a:hover { color: var(--signal); }

/* --- Footer --- */
.footer { background: var(--navy-950); color: var(--gray-300); padding-top: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--line); }
.footer-top { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } }
.footer h4 { font-family: var(--mono); font-weight: 500; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.1rem; }
.footer-links { display: grid; gap: .55rem; }
.footer-links a { font-size: .9rem; color: var(--gray-300); transition: color .3s var(--ease-out), padding-left .35s var(--ease-out); }
.footer-links a:hover { color: var(--white); padding-left: .28rem; }
.footer-brand p { font-size: .92rem; color: var(--ink-3); max-width: 42ch; margin-top: 1rem; }
.footer-bottom {
  border-top: 1px solid var(--line); padding-block: 1.6rem;
  display: grid; gap: .8rem; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .1em; color: var(--ink-3);
}
@media (min-width: 760px) { .footer-bottom { grid-template-columns: 1fr auto; align-items: center; } }
.footer-social { display: flex; gap: 1rem; }
.footer-social a:hover { color: var(--signal); }

/* =============================================================
   8. MAPA INDUSTRIAL
   ============================================================= */
.mapa-shell {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--navy-950);
}
.mapa-toolbar {
  display: grid; gap: 1rem; padding: 1.2rem;
  border-bottom: 1px solid var(--line); background: var(--bg-2);
}
@media (min-width: 900px) { .mapa-toolbar { grid-template-columns: 1fr auto; align-items: center; } }
.mapa-filtros { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.mapa-count { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.mapa-count b { color: var(--signal); }

#mapa { height: clamp(420px, 62vh, 660px); width: 100%; background: var(--navy-900); }
.mapa-fallback {
  padding: 2.5rem 1.5rem; text-align: center; color: var(--ink-3); font-size: .92rem;
}
/* Tiles en clave navy corporativa */
.leaflet-tile-pane {
  filter: grayscale(1) invert(1) brightness(.82) contrast(1.18) sepia(.55) hue-rotate(178deg) saturate(2.6);
}
.leaflet-container { background: #1F1F1F !important; font-family: var(--sans) !important; outline: none; }
.leaflet-control-attribution {
  background: rgba(28,28,28,.75) !important; color: #8A8A8A !important;
  font-size: 9px !important; padding: 2px 6px !important;
}
.leaflet-control-attribution a { color: #A9C1D8 !important; }
.leaflet-bar a {
  background: rgba(46,46,46,.94) !important; color: #F2F2F2 !important;
  border-color: rgba(242,242,242,.16) !important;
}
.leaflet-bar a:hover { background: #4D4D4D !important; }

.pin { position: relative; width: 16px; height: 16px; }
.pin i {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--signal); border: 2px solid #1F1F1F;
  box-shadow: 0 0 0 1px rgba(123,162,199,.55), 0 4px 12px rgba(0,0,0,.5);
}
.pin::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--signal); opacity: 0;
  animation: pinPulse 3s var(--ease-out) infinite;
}
@keyframes pinPulse {
  0%   { transform: scale(.55); opacity: .75; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.leaflet-popup-content-wrapper {
  background: #262626 !important; color: #F2F2F2 !important;
  border: 1px solid rgba(123,162,199,.32) !important; border-radius: 4px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.55) !important;
}
.leaflet-popup-tip { background: #262626 !important; border: 1px solid rgba(123,162,199,.32) !important; }
.leaflet-popup-content { margin: .9rem 1.1rem !important; line-height: 1.5 !important; }
.leaflet-popup-close-button { color: #8A8A8A !important; }
.pop-n { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; display: block; }
.pop-m { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #7BA2C7; display: block; margin-top: .25rem; }
.pop-d { font-size: .8rem; color: #B0B0B0; margin-top: .5rem; display: block; }

.mapa-lista { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 1.5rem; }
@media (min-width: 640px)  { .mapa-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mapa-lista { grid-template-columns: repeat(4, 1fr); } }
.mapa-cli { background: var(--bg); padding: 1.1rem 1.2rem; display: grid; gap: .28rem; text-align: left; width: 100%; transition: background-color .4s var(--ease-out); }
.mapa-cli:hover { background: var(--bg-2); }
.mapa-cli b { font-family: var(--display); font-size: .95rem; color: var(--ink); letter-spacing: -.02em; }
.mapa-cli span { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mapa-cli em { font-style: normal; font-size: .78rem; color: var(--signal); }

/* =============================================================
   9. EFECTOS
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .09s; }
[data-reveal][data-delay="2"] { transition-delay: .18s; }
[data-reveal][data-delay="3"] { transition-delay: .27s; }
[data-reveal][data-delay="4"] { transition-delay: .36s; }
[data-reveal][data-delay="5"] { transition-delay: .45s; }
.no-js [data-reveal] { opacity: 1; transform: none; }

.split-word, .split-char { display: inline-block; will-change: transform; }

.has-tilt {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
}

/* =============================================================
   10. RESPONSIVE
   ============================================================= */
@media (max-width: 719px) {
  .split-tag { position: static; transform: none; max-width: 100%; margin-top: -1.5rem; }
  .hero { min-height: auto; padding-top: 8rem; padding-bottom: 4rem; }
  .scroll-hint { display: none; }
}

/* =============================================================
   11. REDUCED MOTION — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-duration: 130s; }
  .wa-float { animation: none; }
  .pin::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* Print */
@media print {
  .nav, .menu, .wa-float, .splash, .progress, .scroll-hint, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =============================================================
   12. BLOQUES HORIZONTALES (quiénes somos / nosotros)
   ============================================================= */
.section--tight { padding-block: clamp(2.6rem, 5vw, 4.2rem); }

/* Declaración horizontal, ancho completo, sin imagen */
.manifiesto {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 3.05rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--ink);
  max-width: 22ch;
  max-width: min(100%, 30ch);
  margin-top: 1.1rem;
}
@media (min-width: 900px) { .manifiesto { max-width: none; } }
.manifiesto em { font-style: normal; color: var(--signal); }

.manifiesto-row, .mv-row {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  margin-top: clamp(2rem, 4vw, 3.2rem);
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line-2);
}
@media (min-width: 780px) { .manifiesto-row, .mv-row { grid-template-columns: repeat(3, 1fr); } }
.manifiesto-row > div, .mv-row > div { display: grid; gap: .45rem; align-content: start; }
.manifiesto-row b, .mv-row b {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--ink); letter-spacing: -.02em;
}
.manifiesto-row span, .mv-row span { font-size: .9rem; color: var(--ink-2); line-height: 1.55; }

/* Texto corrido en dos columnas (horizontal, sin imagen) */
.prose-cols { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
@media (min-width: 860px) { .prose-cols { grid-template-columns: 1fr 1fr; gap: 2.6rem; } }
.prose-cols p { color: var(--ink-2); font-size: 1rem; line-height: 1.7; }

/* Valores en versión mínima */
.valores-mini { display: grid; gap: 1.1rem; }
.valores-mini ul { list-style: none; padding: 0; display: grid; gap: .9rem 2rem; }
@media (min-width: 700px)  { .valores-mini ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .valores-mini ul { grid-template-columns: repeat(4, 1fr); } }
.valores-mini li { display: grid; gap: .2rem; border-left: 2px solid var(--signal-line); padding-left: .8rem; }
.valores-mini b {
  font-family: var(--display); font-weight: 700; font-size: .86rem;
  color: var(--ink); letter-spacing: -.01em;
}
.valores-mini span { font-size: .78rem; color: var(--ink-2); line-height: 1.5; }

/* Equipo: cuadro simétrico 3×3 */
.equipo--sim { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .equipo--sim { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .equipo--sim { grid-template-columns: repeat(3, 1fr); } }
.equipo--sim .equipo-cell {
  min-height: 168px;
  align-content: start;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
}

/* Títulos sin acento de color: todo en tinta */
.sec-title--plain,
.sec-title--plain em { color: var(--ink); font-style: normal; }

/* =============================================================
   13. TIPOGRAFÍA SEGÚN EL PDF INSTITUCIONAL
   Titulares condensados y pesados; itálica oblicua para el énfasis.
   ============================================================= */
h1, h2, h3,
.phead-title, .sec-title, .manifiesto, .plan-name, .hero-title {
  font-stretch: 88%;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.phead-title em, .sec-title em, .hero-title em, .plan-name em {
  font-style: italic;
  font-stretch: 85%;
}
/* Los kickers dejan de ser monoespaciados: grotesca angosta con tracking */
.kicker, .crumbs, .stat-l, .split-tag span, .svc-num, .plan-kicker {
  font-stretch: 92%;
  font-weight: 600;
}
/* Cuerpo: ancho normal, sin condensar */
body, p, li, .sec-lead, .plan-para, .prose-cols p { font-stretch: 100%; }

/* Manifiesto en un solo color (sin acento) */
.manifiesto--plain, .manifiesto--plain em { color: var(--ink); font-style: normal; }

/* =============================================================
   14. PLANES: dos tarjetas idénticas
   ============================================================= */
/* Columna flexible para que el botón caiga siempre al pie */
.plan {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.plan-list { flex: 1 1 auto; align-content: start; }
.plan .btn { margin-top: auto; }

/* El plan destacado deja de tener fondo, borde y sombra propios:
   mismo cuadro y mismo hover que el otro. */
.plan--star {
  border-color: var(--line);
  background: var(--bg-2);
  box-shadow: none;
}
.plan--star:hover { border-color: var(--signal-line); box-shadow: 0 26px 60px rgba(0,0,0,.32); }

/* =============================================================
   15. HERO: titular íntegro en blanco
   ============================================================= */
.hero-title em {
  color: var(--white);
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

/* =============================================================
   16. HERO: fondo limpio (estilo Induscom) + rendimiento
   Se quitan la cuadrícula, el degradado cónico animado y el grano.
   El conic-gradient con blur(78px) se repintaba en cada frame de
   forma indefinida: era el mayor costo de render de la página.
   ============================================================= */
.hero-mesh, .hero-grid { display: none !important; }
.hero::before { display: none !important; }

/* Overlay plano, solo para legibilidad del titular */
.hero-bg::after {
  background: linear-gradient(180deg,
    rgba(28,28,28,.70) 0%,
    rgba(28,28,28,.52) 45%,
    rgba(28,28,28,.92) 100%);
}

/* El video en su propia capa de composición: el navegador no
   tiene que repintar el resto del hero en cada frame de video. */
.hero-video {
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}
.hero-bg { contain: paint; }

/* Clientes y mapa como un mismo bloque: sin corte entre ambos */
.section--linked { padding-top: 0; }

/* =============================================================
   17. HERO: sin doble capa
   La imagen de fondo quedaba visible DEBAJO del video traslúcido,
   así que se veía un cuadro congelado mezclado con el movimiento
   (el "fantasma" de la amoladora). Cuando el video arranca, la
   imagen se apaga y el video pasa a opacidad plena.
   ============================================================= */
.hero-bg img { transition: opacity .8s var(--ease-out); }
.hero-bg:has(.hero-video.is-playing) img { opacity: 0; }
.hero-video.is-playing { opacity: 1; }

/* =============================================================
   18. PLANES: ítems como burbujas reactivas
   Mismo lenguaje de interacción que las tarjetas de Servicios.
   ============================================================= */
.plan-list { display: flex; flex-wrap: wrap; gap: .55rem; }
.plan-list li.plan-pill {
  display: inline-flex; align-items: center;
  padding: .62rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  font-size: .84rem; line-height: 1.35; color: var(--ink-2);
  cursor: default;
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .35s var(--ease-out),
              background-color .35s var(--ease-out),
              color .35s var(--ease-out),
              box-shadow .45s var(--ease-out);
}
.plan-list li.plan-pill:hover {
  transform: translateY(-3px);
  border-color: var(--signal);
  background: var(--signal-soft);
  color: var(--ink);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.plan-list li.plan-pill svg { display: none; }

/* Sin phead, la sección de planes necesita aire arriba */
.plan-page-top { padding-top: clamp(7.5rem, 15vh, 11rem); }

/* =============================================================
   19. PIN DEL MAPA: isotipo de la marca
   ============================================================= */
.pin-marca {
  width: 30px; height: 44px;
  transform-origin: 50% 100%;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), filter .35s var(--ease-out);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
  cursor: pointer;
}
.pin-marca img { width: 100%; height: 100%; display: block; }
.pin-marca:hover { transform: scale(1.18) translateY(-2px); }
.leaflet-marker-icon:focus .pin-marca { transform: scale(1.18) translateY(-2px); }

/* =============================================================
   20. PANTALLA DE CARGA: isotipo de la marca
   ============================================================= */
.splash-logo {
  width: 86px; height: 86px;
  object-fit: contain;
  animation: splashSpin 2.4s var(--ease-soft) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .splash-logo { animation: none; opacity: 1; }
}

/* =============================================================
   21. MÉTODO CRECE: la letra dentro de un cuadrito
   ============================================================= */
.metodo-badge {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--signal);
  color: #FFFFFF;
  font-family: var(--display);
  font-weight: 800; font-size: 1.65rem;
  font-stretch: 88%;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 6px 16px rgba(123,162,199,.24);
  transition: transform .45s cubic-bezier(0.22,1,0.36,1), box-shadow .45s var(--ease-out);
}
.metodo-step:hover .metodo-badge {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 26px rgba(123,162,199,.34);
}
.is-light .metodo-badge { color: #FFFFFF; }

/* =============================================================
   22. CLIENTES: mapa horizontal + carrusel de logos
   ============================================================= */
.cli-mapa {
  position: relative; margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-2);
}
.cli-mapa img {
  width: 100%; display: block;
  aspect-ratio: 21 / 7;          /* más horizontal que el 2:1 anterior */
  object-fit: cover;
}
@media (max-width: 720px) { .cli-mapa img { aspect-ratio: 16 / 10; } }
.cli-mapa-tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--bg); border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  border-radius: 0 var(--radius) 0 0;
  padding: .6rem 1.1rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}
.cli-mapa-cta { margin-top: 1.3rem; }

/* --- Carrusel --- */
.cli-carrusel {
  position: relative;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding: 0 clamp(2.6rem, 5vw, 4rem);
}
.cli-viewport { overflow: hidden; }
.cli-track {
  display: flex;
  transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.cli-slide {
  flex: 0 0 calc(100% / 4);
  display: grid; place-items: center;
  padding: 1.6rem clamp(1rem, 2.2vw, 1.8rem);
  min-height: 160px;
}
@media (max-width: 1100px) { .cli-slide { flex-basis: calc(100% / 3); } }
@media (max-width: 640px)  { .cli-slide { flex-basis: 50%; } }
.cli-slide .logo-img {
  max-width: 100%; max-height: 96px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.85) contrast(.7);
  opacity: .62;
  transition: opacity .45s var(--ease-out), filter .45s var(--ease-out), transform .45s var(--ease-out);
}
.is-light .cli-slide .logo-img { filter: grayscale(1) brightness(.55) contrast(1.1); opacity: .55; }
.cli-slide:hover .logo-img { opacity: 1; filter: grayscale(0); transform: scale(1.06); }

.cli-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg-2); color: var(--ink-2);
  cursor: pointer;
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out),
              background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.cli-nav svg { width: 19px; height: 19px; }
.cli-nav:hover { border-color: var(--signal); color: var(--signal); transform: translateY(-50%) scale(1.08); }
.cli-nav:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.cli-prev { left: 0; }
.cli-next { right: 0; }

.cli-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.4rem; }
.cli-dots button {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--line-2); cursor: pointer;
  transition: background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.cli-dots button.is-on { background: var(--signal); transform: scale(1.35); }

/* =============================================================
   23. NOTA DEL BLOG (página de artículo)
   ============================================================= */
.nota { display: block; }
.nota-wrap { max-width: 780px; }
.nota-head { padding-top: clamp(7rem, 14vh, 10rem); padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.nota-title {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 800; font-stretch: 88%;
  letter-spacing: -.035em; line-height: 1.06;
  color: var(--ink); margin-top: .8rem;
}
.nota-lead {
  margin-top: 1.1rem;
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  color: var(--ink-2); line-height: 1.6;
}
.nota-min {
  margin-top: 1rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}
.nota-media {
  margin-block: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.nota-media img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }

/* Cuerpo del artículo */
.nota-body { padding-bottom: clamp(3rem, 7vw, 5rem); }
.nota-body p {
  font-size: 1.02rem; line-height: 1.75; color: var(--ink-2);
  margin-bottom: 1.15rem;
}
.nota-body h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 800; font-stretch: 88%; letter-spacing: -.03em;
  color: var(--ink);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: .9rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.nota-body h3 {
  font-size: clamp(1.08rem, 1.9vw, 1.28rem);
  font-weight: 700; color: var(--ink);
  margin-top: 2rem; margin-bottom: .7rem;
}
.nota-body ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .7rem; }
.nota-body ul li {
  position: relative; padding-left: 1.5rem;
  font-size: 1rem; line-height: 1.65; color: var(--ink-2);
}
.nota-body ul li::before {
  content: ""; position: absolute; left: .35rem; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
}
.nota-body strong { color: var(--ink); font-weight: 700; }

/* Tarjetas del listado: toda la tarjeta es un enlace */
.post-link { display: block; color: inherit; text-decoration: none; }
.post-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; border-radius: var(--radius); }

/* Bajada debajo del título (no en columna al costado) */
.sec-lead--bajo { margin-top: 1rem; max-width: 62ch; }

/* Portadas del blog: marco más redondeado, acorde a las ilustraciones */
.post-media { border-radius: 20px; overflow: hidden; }
.post-media img { border-radius: 20px; }
.nota-media { border-radius: 26px; }
.nota-media img { border-radius: 26px; }
@media (max-width: 640px) {
  .post-media, .post-media img { border-radius: 16px; }
  .nota-media, .nota-media img { border-radius: 18px; }
}

/* =============================================================
   24. BOTONES REDONDEADOS
   ============================================================= */
.btn, .btn-primary, .btn-ghost, .btn-wa, .btn-lg,
button[type="submit"], .form button, .filtro {
  border-radius: 999px;
}
/* Campos del formulario acompañan, pero con menos curva para no
   perder la lectura de línea en las cajas de texto */
.form input, .form select { border-radius: 14px; }
.form textarea { border-radius: 18px; }

/* =============================================================
   25. BOTÓN HAMBURGUESA — corrección
   Estaba en display:grid, y el grid repartía las tres líneas en
   filas de ~14,7px en lugar de los 5,5px que suponen las
   transformaciones. Resultado: ícono desarmado y, al abrir, una
   flecha en vez de una X. Con flex + gap el espaciado es exacto.
   ============================================================= */
.burger {
  /* Sólo hasta 1099px: de 1100px en adelante manda el display:none de arriba
     y en escritorio se ve el menú horizontal completo. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
@media (max-width: 1099px) { .burger { display: flex; } }
@media (min-width: 1100px) { .burger { display: none !important; } }
.burger span + span { margin-top: 0; }
.burger span { border-radius: 2px; }

/* =============================================================
   26. ÁREA TÁCTIL EN MÓVIL
   Los puntos del carrusel miden 7px: se ven bien pero son casi
   imposibles de tocar. Se agranda el área sensible sin cambiar
   el tamaño visible, usando un pseudo-elemento transparente.
   ============================================================= */
@media (max-width: 900px) {
  .cli-dots { gap: .2rem; }
  .cli-dots button { position: relative; }
  .cli-dots button::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    transform: translate(-50%, -50%);
  }
  /* Enlaces de lista con más alto de toque */
  .footer-links a,
  .menu-foot a { padding-block: .42rem; display: inline-block; }
  .dato a { padding-block: .25rem; display: inline-block; }
  /* Flechas del carrusel, más grandes y sin taparse con los logos */
  .cli-nav { width: 38px; height: 38px; }
  .cli-carrusel { padding-inline: 2.6rem; }
}

/* Aviso del mapa en móvil (arrastre con dos dedos) */
.mapa-aviso {
  position: absolute; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: rgba(28,28,28,.55);
  color: #fff; font-family: var(--sans); font-weight: 700; font-size: .95rem;
  text-align: center; padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease-out);
}
.mapa-aviso.is-on { opacity: 1; }

/* =============================================================
   27. REDES EN EL ENCABEZADO
   ============================================================= */
.nav-social { display: none; align-items: center; gap: .3rem; margin-left: .5rem; }
@media (min-width: 1100px) { .nav-social { display: flex; } }
.nav-social a {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  color: var(--gray-300);
  transition: color .3s var(--ease-out), background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.nav-social svg { width: 27px; height: 27px; }
.nav-social a:hover {
  color: var(--white);
  background: rgba(255,255,255,.09);
  transform: translateY(-2px);
}
.nav-social a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.nav-actions { display: flex; align-items: center; gap: .4rem; }

/* =============================================================
   28. VIDEO VERTICAL EN "NOSOTROS"
   El video es 9:16 nativo. En vez de forzarlo a horizontal
   (que obligaría a recortar la cara de quien habla o a dejar
   barras negras), se lo trata como lo que es: un reproductor
   vertical, con el texto al costado en escritorio.
   ============================================================= */
.vagencia {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .vagencia { grid-template-columns: minmax(280px, 340px) 1fr; }
}

.vagencia-player {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 340px;
  justify-self: center;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.vagencia-player video {
  width: 100%; height: 100%;
  display: block;
  /* contain, no cover: el contenedor ya es 9:16 igual que el video, así que
     no deja barras, y evita el recorte al pasar a pantalla completa. */
  object-fit: contain;
  border-radius: 22px;
  background: #000;
}

/* Pantalla completa: el video se ajusta al alto de la pantalla sin recortar
   y sin heredar el redondeo del marco. */
.vagencia-player video:fullscreen,
.vagencia-player video:-webkit-full-screen {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: #000;
}
.vagencia-player:fullscreen { aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }

/* Botón de play sobre el póster; desaparece al reproducir */
.vagencia-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border: 0; padding: 0;
  background: rgba(28,28,28,.28);
  color: #fff;
  cursor: pointer;
  transition: opacity .3s var(--ease-out), background-color .3s var(--ease-out);
}
.vagencia-play::before {
  content: "";
  position: absolute;
  width: 72px; height: 72px;
  border-radius: 999px;
  background: var(--signal);
  box-shadow: 0 10px 30px rgba(0,0,0,.36);
  transition: transform .4s cubic-bezier(0.22,1,0.36,1);
}
.vagencia-play svg { position: relative; width: 30px; height: 30px; margin-left: 4px; }
.vagencia-play:hover::before { transform: scale(1.08); }
.vagencia-play.is-hidden { opacity: 0; pointer-events: none; }
.vagencia-play:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }

.vagencia-texto p { color: var(--ink-2); line-height: 1.7; margin-top: 1rem; }
.vagencia-lista { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.vagencia-lista li {
  position: relative; padding-left: 1.5rem;
  color: var(--ink-2); font-size: .96rem;
}
.vagencia-lista li::before {
  content: ""; position: absolute; left: .3rem; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal);
}
.vagencia-nota {
  margin-top: 1.4rem !important;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* =============================================================
   29. TARJETAS DE VIDEO (Visión PyMEs)
   ============================================================= */
.post-media { position: relative; }
.post-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff;
  transition: background-color .35s var(--ease-out);
  background: rgba(28,28,28,.16);
}
.post-play::before {
  content: "";
  position: absolute;
  width: 62px; height: 62px;
  border-radius: 999px;
  background: rgba(28,28,28,.62);
  border: 1.5px solid rgba(255,255,255,.7);
  backdrop-filter: blur(2px);
  transition: transform .45s cubic-bezier(0.22,1,0.36,1), background-color .35s var(--ease-out);
}
.post-play svg { position: relative; width: 26px; height: 26px; margin-left: 3px; }
.post:hover .post-play::before { transform: scale(1.1); background: var(--signal); }
.post:hover .post-play { background: rgba(28,28,28,.06); }

.canal-cta { margin-top: clamp(2.4rem, 5vw, 3.4rem); }