/* ═══════════════════════════════════════════════════════════
   EHG — Entertainment Holding Group · 2026 — "PLATINO"
   Identidad de marca: el logo. Negro profundo + escalera de metal.
   Sin color de acento: todo el brillo del sitio sale de la plata,
   igual que la bola de espejos del isotipo.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* fondos */
  --void:      #050506;   /* negro absoluto, el del logo */
  --midnight:  #0C0C0F;   /* superficie elevada */
  --midnight-2:#141419;
  --midnight-3:#08080A;

  /* superficies vidrio */
  --glass:     rgba(255,255,255,.035);
  --glass-2:   rgba(255,255,255,.06);
  --glass-hi:  rgba(201,206,214,.07);

  /* ── la escalera de metal: la unica familia de color del sitio ──
     De la luz especular al grafito de sombra. Los cuatro peldanos
     centrales son las cuatro "llaves" que distinguen tarjetas,
     columnas y timelines sin recurrir a ningun tinte. */
  --platinum-hi: #F2F4F7;   /* especular */
  --platinum:    #C9CED6;   /* plata base — acento principal */
  --titanium:    #A6ADB8;
  --steel:       #8A9099;
  --graphite:    #4A4F57;
  --graphite-d:  #2A2D33;

  /* triples crudos, para componer rgba() sin repetir el hex */
  --platinum-rgb:    201,206,214;
  --platinum-hi-rgb: 242,244,247;
  --steel-rgb:       138,144,153;

  --red:       #E5484D;   /* reservado: solo estados de error */

  /* líneas + texto */
  --line:      rgba(255,255,255,.11);
  --line-l:    rgba(255,255,255,.14);
  --line-e:    rgba(var(--platinum-rgb),.30);
  --txt:       rgba(240,236,232,.90);
  --txt-soft:  rgba(226,218,210,.58);
  --txt-l:     rgba(248,245,242,.94);
  --txt-lsoft: rgba(230,222,214,.62);
  --white:     #FFFFFF;

  --disp:'Geist',ui-sans-serif,system-ui,sans-serif;
  --body:'Geist',ui-sans-serif,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  --max: 1240px;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.9,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;background:var(--void);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body{
  font-family:var(--body);
  color:var(--txt);
  /* transparente: el negro vive en <html> para que la galaxia (z-index:-2) se vea */
  background:transparent;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
::selection{background:var(--platinum);color:var(--void)}
img{max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* ═══════════ GALAXIA GLOBAL ═══════════ */
.galaxy{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-2;pointer-events:none;display:block;
}
.galaxy__veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 42%, rgba(5,5,6,.42) 100%),
    radial-gradient(90% 60% at 50% 100%, rgba(5,5,6,.5), transparent 70%);
}

/* ─── reveal on scroll ─── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.42s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important}
}

/* ─── kicker (etiqueta de sección, sin chrome) ─── */
.kicker{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--platinum);
  display:inline-flex;align-items:center;gap:14px;
}
/* regla técnica en lugar del punto: marca el inicio de la sección */
.kicker::before{
  content:"";width:26px;height:1px;flex:none;
  background:currentColor;opacity:.55;
}
.kicker--light{color:var(--platinum-hi)}

/* ─── buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.08em;
  padding:15px 28px;border-radius:12px;transition:all .3s var(--ease);
  border:1px solid transparent;position:relative;
}
/* El boton solido es una placa de metal: plata pulida, texto negro.
   El degradado va de especular a plata para que lea como chapa, no como relleno. */
.btn--solid{
  background:linear-gradient(100deg,var(--platinum-hi),var(--platinum) 62%,var(--titanium));
  color:var(--void);font-weight:600;
  box-shadow:0 8px 30px rgba(var(--platinum-rgb),.14), 0 1px 0 rgba(255,255,255,.5) inset;
}
.btn--solid:hover{
  transform:translateY(-2px);
  background:linear-gradient(100deg,#fff,var(--platinum-hi) 62%,var(--platinum));
  box-shadow:0 16px 42px rgba(var(--platinum-rgb),.24), 0 1px 0 rgba(255,255,255,.7) inset;
}
.btn--ghost{color:var(--txt-l);border-color:var(--line-l)}
.btn--ghost:hover{border-color:var(--platinum);color:#fff;transform:translateY(-2px);background:rgba(var(--platinum-rgb),.08)}
.btn--big{font-size:15px;padding:19px 40px}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:32px;
  padding:14px var(--pad);
  transition:background .4s,box-shadow .4s, padding .4s;
}
.nav.scrolled{
  background:rgba(8,8,10,.74);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 1px 0 rgba(var(--platinum-rgb),.24);
  padding:10px var(--pad);
}
.nav__brand{display:flex;align-items:center;gap:12px;margin-right:auto}
/* El isotipo real, no una imitacion en CSS.
   El PNG es aditivo (blanco + alfa = luminancia): compone exacto sobre negro. */
.nav__orb{
  width:32px;height:32px;flex:none;
  background:url("assets/ehg-mark-128.png") center/contain no-repeat;
  filter:drop-shadow(0 2px 12px rgba(var(--platinum-rgb),.22));
}
.nav__word{
  font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.14em;color:#fff;
}
.nav__sub{
  font-family:var(--mono);font-size:8.5px;line-height:1.35;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt-lsoft);
  border-left:1px solid var(--line-l);padding-left:12px;
}
.nav__links{display:flex;gap:26px}
.nav__links a{
  font-size:14px;font-weight:500;color:var(--txt-lsoft);
  transition:color .25s;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:var(--platinum);border-radius:2px;
  transition:width .3s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}
.nav__cta{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#fff;
  border:1px solid var(--line-e);padding:9px 20px;border-radius:10px;
  transition:all .3s var(--ease);
}
.nav__cta:hover{background:var(--platinum);border-color:var(--platinum);color:var(--void);box-shadow:0 0 26px rgba(var(--platinum-rgb),.20)}
.nav__burger{display:none}

/* ═══════════ HERO — NEGRO + LUZ DE METAL ═══════════
   Sin tinte: el fondo sube de grafito a negro y la unica luz son
   dos focos frios, como los que rebotan en la bola del logo. */
.hero{
  position:relative;
  min-height:100vh;          /* fallback iOS < 15.4 */
  min-height:100svh;
  background:
    radial-gradient(1100px 720px at 78% 24%, rgba(var(--platinum-rgb),.09), transparent 60%),
    radial-gradient(1200px 780px at 24% 34%, rgba(var(--steel-rgb),.10), transparent 62%),
    radial-gradient(900px 620px at 62% 84%, rgba(var(--steel-rgb),.05), transparent 62%),
    linear-gradient(180deg,
      #17181C 0%,
      #121317 24%,
      #0C0C10 56%,
      rgba(7,7,9,.90) 84%,
      rgba(5,5,6,0) 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:140px var(--pad) 0;
  overflow:hidden;
  isolation:isolate;
}
/* aurora lenta */
.hero__aurora{
  position:absolute;inset:-20% -10% 0 -10%;pointer-events:none;
  background:
    radial-gradient(45% 32% at 22% 32%, rgba(var(--steel-rgb),.12), transparent 70%),
    radial-gradient(40% 30% at 78% 52%, rgba(var(--platinum-rgb),.08), transparent 70%),
    radial-gradient(34% 26% at 55% 14%, rgba(var(--platinum-hi-rgb),.05), transparent 70%);
  filter:blur(30px);
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%  {transform:translate3d(-2%, 0, 0) scale(1)}
  50% {transform:translate3d(3%, -2%, 0) scale(1.08)}
  100%{transform:translate3d(-1%, 2%, 0) scale(1.03)}
}
.hero__particles{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
/* El isotipo real preside el hero: el globo de espejos gira sobre su
   eje una vuelta cada 72 s, reconstruido espejo a espejo en canvas
   (app.js · 6). El PNG queda de reserva para quien no tenga JS. */
.hero__mark{
  position:absolute;top:50%;right:-4vw;transform:translateY(-54%);
  width:min(56vw,760px);height:auto;aspect-ratio:1/1;
  opacity:.92;pointer-events:none;z-index:1;user-select:none;
  animation:markFloat 14s ease-in-out infinite alternate;
}
/* el halo del canvas se pinta dentro; el PNG lo necesita en CSS */
img.hero__mark{filter:drop-shadow(0 0 90px rgba(var(--platinum-rgb),.14))}
.hero__mark--live{display:none}
.hero__mark--live.is-live{display:block}
@keyframes markFloat{
  from{transform:translateY(-56%)}
  to  {transform:translateY(-51%)}
}
/* rejilla futurista en perspectiva */
.hero__grid{
  position:absolute;left:-25%;right:-25%;bottom:-6%;height:52%;
  pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(var(--platinum-rgb),.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--platinum-rgb),.10) 1px, transparent 1px);
  background-size:70px 70px;
  transform:perspective(420px) rotateX(72deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 78%);
  mask-image:linear-gradient(to top, #000 0%, transparent 78%);
  opacity:.5;
}
.hero__fade{
  position:absolute;left:0;right:0;bottom:0;height:26vh;pointer-events:none;z-index:1;
  background:linear-gradient(180deg, transparent, rgba(5,5,6,.65) 60%, var(--void) 100%);
}
.hero__grain,.finale__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:overlay;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}
.hero__inner{position:relative;z-index:3;max-width:var(--max);width:100%;margin:0 auto}
.hero__title{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(44px, 7.2vw, 104px);
  line-height:1.0;letter-spacing:-.038em;color:#fff;
  margin:0 0 26px;
  text-shadow:0 0 60px rgba(var(--steel-rgb),.18);
}
.hero__title em{
  font-style:normal;
  background:linear-gradient(92deg,#FFFFFF,var(--platinum) 46%,var(--steel) 78%,var(--platinum-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lede{
  max-width:520px;font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:var(--txt-lsoft);
}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.hero__stats{
  position:relative;z-index:3;
  max-width:var(--max);width:100%;margin:auto auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-l);
  padding:26px 0 34px;gap:18px;
}
.stat strong{
  display:block;font-family:var(--disp);font-weight:700;
  font-size:clamp(26px,3vw,42px);color:#fff;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(var(--platinum-rgb),.20);
}
.stat span{
  display:block;margin-top:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-lsoft);
}

/* ═══════════ CHAPTERS (sobre galaxia) ═══════════ */
.chapter{
  padding:clamp(90px,11vw,150px) var(--pad);
  position:relative;background:transparent;
}
.chapter--paper{background:transparent}
.chapter--tint{
  background:linear-gradient(180deg, rgba(var(--platinum-rgb),.045), rgba(var(--steel-rgb),.03) 55%, transparent);
}
.chapter::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--platinum-rgb),.40), transparent);
}
.chapter__head{max-width:var(--max);margin:0 auto clamp(48px,6vw,80px)}
.chapter__head--dark{position:relative;z-index:2}
.chapter__title{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(32px,4.6vw,62px);line-height:1.05;letter-spacing:-.032em;
  margin-top:24px;color:#fff;
}
.chapter__title em{
  font-style:normal;color:var(--platinum);
}
.chapter__lede{max-width:640px;margin-top:22px;font-size:17px;line-height:1.65;color:var(--txt-soft)}
.chapter__note{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-soft)}

/* tarjeta de vidrio — base compartida */
.pillar,.unit,.metrics li,.brands__grid li{
  background:var(--glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* ═══════════ TIMELINE ═══════════ */
/* Registro vertical: marcador, espina continua con nodos en rombo, y el
   contenido repartido en dos columnas para ocupar el ancho de la pagina.
   Sin scroll lateral, sin arrastre y sin JS. */
.tline{
  list-style:none;max-width:var(--max);margin:0 auto;
  border-top:1px solid var(--line);
}
.tline__i{
  position:relative;
  display:grid;align-items:baseline;
  grid-template-columns:112px 34px minmax(190px,.85fr) minmax(280px,1.35fr);
  gap:0 clamp(16px,2.4vw,38px);
  padding:26px 0 28px;
  border-bottom:1px solid var(--line);
  transition:background .3s;
}
.tline__i:hover{background:rgba(255,255,255,.022)}
/* la espina: cada fila aporta su tramo, juntos forman una linea continua */
.tline__i::before{
  content:"";position:absolute;left:129px;top:0;bottom:0;width:1px;
  background:var(--line-l);
}
.tline__i:first-child::before{top:50%}
.tline__i:last-child::before{bottom:50%}
/* el nodo */
.tline__i::after{
  content:"";position:absolute;left:125px;top:50%;
  width:9px;height:9px;margin-top:-4.5px;
  background:var(--void);border:1px solid var(--nc,var(--platinum));
  transform:rotate(45deg);
  transition:background .3s,box-shadow .3s;
}
.tline__i[data-k="ember"]{--nc:var(--platinum-hi)}
.tline__i[data-k="amber"]{--nc:var(--platinum)}
.tline__i[data-k="teal"]{--nc:var(--titanium)}
.tline__i[data-k="green"]{--nc:var(--steel)}
.tline__i:hover::after{background:var(--nc,var(--platinum));box-shadow:0 0 12px var(--nc,var(--platinum))}
.tline__n{
  grid-column:1;text-align:right;
  font-family:var(--mono);font-size:clamp(20px,2.4vw,30px);font-weight:500;
  letter-spacing:.04em;color:var(--nc,var(--platinum));opacity:.85;
}
.tline__t{
  grid-column:3;
  font-family:var(--disp);font-size:clamp(18px,2vw,23px);font-weight:600;color:#fff;
  line-height:1.25;
}
.tline__d{
  grid-column:4;
  font-size:14.5px;line-height:1.62;color:var(--txt-soft);
}
/* el ultimo movimiento pesa mas: es el estado actual */
.tline__i--now{border-bottom:0;padding-bottom:0}
.tline__i--now .tline__n{opacity:1;font-weight:600}
.tline__i--now .tline__t{font-size:clamp(21px,2.6vw,30px)}
.tline__i--now::after{background:var(--platinum);box-shadow:0 0 14px var(--platinum)}

@media (max-width:900px){
  .tline__i{
    grid-template-columns:66px 26px 1fr;
    gap:4px clamp(12px,3vw,20px);
    padding:22px 0 24px;
  }
  .tline__i::before{left:79px}
  .tline__i::after{left:75px}
  .tline__n{font-size:17px}
  .tline__t{grid-column:3}
  .tline__d{grid-column:3;margin-top:7px}
}


/* ═══════════ PILLARS ═══════════ */
.pillars{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
.pillar{
  padding:34px 28px 40px;position:relative;
  transition:background .35s;
}
.pillar:hover{background:var(--glass-hi)}
.pillar::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--platinum),var(--platinum-hi));
  transition:width .45s var(--ease);
}
.pillar:hover::after{width:100%}
.pillar__index{
  font-family:var(--disp);font-size:15px;font-weight:600;color:var(--platinum);
  letter-spacing:.1em;
}
.pillar h3{font-family:var(--disp);font-size:24px;font-weight:700;margin:16px 0 12px;color:#fff}
.pillar p{font-size:14.5px;line-height:1.62;color:var(--txt-soft)}

.conclusion{
  max-width:var(--max);margin:26px auto 0;
  background:linear-gradient(100deg, rgba(var(--platinum-rgb),.07), rgba(var(--steel-rgb),.10));
  border:1px solid var(--line-e);
  color:var(--txt-l);border-radius:16px;
  padding:22px 30px;font-size:16.5px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.conclusion > span:first-child{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--platinum-hi);flex:none;
}
.conclusion__text{flex:1;min-width:240px}
.conclusion strong{color:#fff}

/* ─── mercado ─── */
.market{
  max-width:var(--max);margin:clamp(56px,7vw,96px) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);
}
.market__h{
  font-family:var(--disp);font-size:21px;font-weight:700;color:#fff;
  padding-bottom:14px;margin-bottom:8px;border-bottom:2px solid var(--platinum);
  text-transform:uppercase;letter-spacing:.02em;
}
.market__col--answer .market__h{border-color:var(--titanium);color:var(--titanium)}
.market__col li{
  padding:18px 0;border-bottom:1px solid var(--line);
  display:grid;gap:5px;
}
.market__col li strong{font-size:16px;color:#fff}
.market__col li span{font-size:14.5px;line-height:1.55;color:var(--txt-soft)}
.market__col--answer li strong::before{
  content:"✓";color:var(--titanium);margin-right:10px;font-weight:700;
}

/* ═══════════ EMPRESAS DEL GRUPO ═══════════ */
.matrix{max-width:var(--max);margin:0 auto;text-align:center}
.matrix__hq{
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  background:linear-gradient(160deg, rgba(30,14,50,.95), rgba(10,6,16,.96));
  border:1px solid var(--line-e);
  color:#fff;border-radius:20px;
  padding:26px 54px;position:relative;
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 70px rgba(var(--platinum-rgb),.09);
}
.matrix__tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--platinum);
}
.matrix__hq strong{font-family:var(--disp);font-size:38px;font-weight:700;letter-spacing:.06em}
.matrix__hq p{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--txt-lsoft)}
.matrix__stem{width:1px;height:44px;margin:0 auto;background:linear-gradient(var(--platinum),transparent)}
.units{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left;
}
.unit{
  border:1px solid var(--line);border-radius:16px;padding:24px 22px;
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s;
}
.unit::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--uc,var(--platinum));
  box-shadow:0 0 20px var(--uc,var(--platinum));
}
.unit:hover{transform:translateY(-4px);background:var(--glass-2);box-shadow:0 18px 46px rgba(0,0,0,.5)}
.unit[data-c="blue"]{--uc:var(--platinum-hi)}
.unit[data-c="teal"]{--uc:var(--platinum)}
.unit[data-c="green"]{--uc:var(--titanium)}
.unit[data-c="orange"]{--uc:var(--steel)}
.unit[data-c="violet"]{--uc:var(--graphite)}
.unit h3{font-family:var(--disp);font-size:19px;font-weight:700;color:#fff}
.unit p{margin:8px 0 14px;font-size:14px;line-height:1.55;color:var(--txt-soft)}
/* Misma regla tecnica que usa .kicker, en lugar de una pildora. */
.unit__type{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--uc,var(--platinum));
  display:inline-flex;align-items:center;gap:8px;
}
.unit__type::before{
  content:"";width:16px;height:1px;background:currentColor;opacity:.75;flex:none;
}

/* ─── brands / wordmarks ─── */
.brands{max-width:var(--max);margin:clamp(60px,7vw,100px) auto 0;display:grid;gap:44px}
.brands__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-bottom:2px solid var(--platinum);padding-bottom:12px;margin-bottom:6px;flex-wrap:wrap;
}
.brands__head h3{font-family:var(--disp);font-size:22px;font-weight:700;color:#fff;text-transform:uppercase}
.brands__head span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-soft)}
.brands__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.brands__group:last-child .brands__grid{grid-template-columns:repeat(5,1fr)}
.brands__grid li{
  aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s, box-shadow .3s;padding:10px;
}
.brands__grid li:hover{background:var(--glass-hi);box-shadow:inset 0 0 40px rgba(var(--platinum-rgb),.09)}
.wm{color:#fff;font-family:var(--disp);text-align:center;line-height:1.1}
.wm small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.34em;text-transform:uppercase;margin-top:5px;color:var(--txt-soft)}
.wm i{font-style:normal;font-size:11px;vertical-align:top;color:var(--platinum)}
.wm--basel{font-weight:400;letter-spacing:.42em;text-transform:uppercase;font-size:17px}
.wm--circulo{font-weight:600;font-size:16px;font-style:italic}
.wm--fabrica{font-weight:800;text-transform:uppercase;font-size:16px;letter-spacing:.06em}
.wm--belly{font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:14px}
.wm--estacion{font-weight:500;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.wm--sunshine{font-weight:600;font-size:17px;letter-spacing:.16em;text-transform:uppercase}
.wm--inigual{font-weight:700;font-size:18px;letter-spacing:.04em}
.wm--space{font-weight:800;text-transform:uppercase;font-size:17px}
.wm--rebels{font-weight:800;text-transform:uppercase;letter-spacing:.18em;font-size:16px}
.wm--ar{font-weight:300;font-size:26px;letter-spacing:.08em}
.wm--misa{font-weight:400;letter-spacing:.5em;text-transform:uppercase;font-size:16px}

/* ═══════════ MÉTRICAS ═══════════ */
.metrics{max-width:var(--max);margin:clamp(48px,6vw,72px) auto 0}
.metrics__label{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-soft);margin-bottom:20px;
}
.metrics ul{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.metrics li{padding:22px 20px 26px;transition:background .3s}
.metrics li:hover{background:var(--glass-hi)}
.metrics strong{display:block;font-family:var(--disp);font-size:16.5px;font-weight:700;color:#fff;margin-bottom:8px}
.metrics span{font-size:13px;line-height:1.5;color:var(--txt-soft)}

/* ═══════════ QUÉ HACEMOS · verticales ═══════════ */
.verticals{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.vert{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 30px;min-height:230px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.vert::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 120%, rgba(var(--platinum-rgb),.11), transparent 62%);
  opacity:.6;transition:opacity .4s;
}
.vert[data-v="2"]::after{background:radial-gradient(120% 80% at 50% 120%, rgba(var(--steel-rgb),.13), transparent 62%)}
.vert[data-v="3"]::after{background:radial-gradient(120% 80% at 50% 120%, rgba(var(--platinum-hi-rgb),.09), transparent 62%)}
.vert[data-v="4"]::after{background:radial-gradient(120% 80% at 50% 120%, rgba(var(--platinum-rgb),.08), transparent 62%)}
.vert:hover{transform:translateY(-5px);border-color:var(--line-e);box-shadow:0 22px 54px rgba(0,0,0,.5)}
.vert:hover::after{opacity:1}
.vert__n{
  position:absolute;top:22px;left:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--platinum);
}
.vert h3{position:relative;z-index:1;font-family:var(--disp);font-size:22px;font-weight:700;color:#fff;margin-bottom:10px}
.vert p{position:relative;z-index:1;font-size:14px;line-height:1.55;color:var(--txt-soft)}

/* frase destacada */
.quote{
  max-width:var(--max);margin:clamp(40px,5vw,64px) auto 0;
  border:1px solid var(--line-e);border-radius:18px;
  background:linear-gradient(100deg, rgba(var(--platinum-rgb),.06), rgba(var(--steel-rgb),.07));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:clamp(24px,3vw,34px) clamp(24px,4vw,44px);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  font-family:var(--disp);font-size:clamp(20px,2.6vw,30px);line-height:1.25;letter-spacing:-.018em;
}
.quote span{color:var(--txt-lsoft)}
.quote strong{color:var(--platinum);font-weight:700}
.quote--small{font-size:clamp(17px,2vw,23px)}

/* ═══════════ FLUJO OPERATIVO ═══════════ */
.flow{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  counter-reset:flow;
}
.flow__step{
  position:relative;
  border:1px solid var(--line);border-radius:16px;padding:22px 18px 24px;
  background:var(--glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .35s, background .35s, transform .35s var(--ease);
}
.flow__step:hover{border-color:var(--line-e);background:var(--glass-hi);transform:translateY(-4px)}
.flow__step:not(:last-child)::after{
  content:"→";position:absolute;top:50%;right:-13px;transform:translateY(-50%);
  font-family:var(--mono);font-size:15px;color:var(--platinum);z-index:2;
  text-shadow:0 0 12px rgba(var(--platinum-rgb),.32);
}
.flow__n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--platinum)}
.flow__step h3{font-family:var(--disp);font-size:16px;font-weight:700;color:#fff;margin:10px 0 8px;line-height:1.2}
.flow__step p{font-size:13px;line-height:1.5;color:var(--txt-soft)}

/* ═══════════ EQUIPAMIENTO ═══════════ */
.kit{max-width:var(--max);margin:clamp(44px,5vw,68px) auto 0}
.kit__label{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--platinum);margin-bottom:18px;
}
/* Manifiesto de carga: cuatro grupos, cada uno colgando de su propia regla.
   Al agrupar por familia ninguna columna puede quedar con un item suelto. */
.kit__manifest{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,44px);
  border-top:1px solid var(--line);padding-top:28px;
}
.kit__col{position:relative;padding-left:18px}
.kit__col::before{
  content:"";position:absolute;left:0;top:3px;bottom:26px;width:1px;
  background:linear-gradient(180deg,var(--kc,var(--platinum)),transparent 88%);opacity:.6;
}
.kit__col[data-k="ember"]{--kc:var(--platinum-hi)}
.kit__col[data-k="amber"]{--kc:var(--platinum)}
.kit__col[data-k="teal"]{--kc:var(--titanium)}
.kit__col[data-k="green"]{--kc:var(--steel)}
.kit__cn{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kc,var(--platinum));display:flex;align-items:baseline;gap:10px;margin-bottom:12px;
}
.kit__cn span{opacity:.55}
.kit__col ul{display:block}
.kit__col li{
  font-size:14px;color:var(--txt-l);padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .25s,padding-left .25s var(--ease),border-color .25s;
}
.kit__col li:last-child{border-bottom:0}
.kit__col li:hover{color:#fff;padding-left:7px;border-color:var(--kc,var(--platinum))}
.kit__cc{
  margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt-lsoft);opacity:.7;
}
.kit__note{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--txt-soft)}

/* ═══════════ EMPRESAS QUE REPRESENTAMOS ═══════════ */
.represent{
  max-width:var(--max);margin:clamp(48px,6vw,76px) auto 0;text-align:center;
  border-top:1px solid var(--line);padding-top:36px;
}
.represent__label{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--platinum);margin-bottom:24px;
}
.represent ul{display:flex;justify-content:center;gap:clamp(24px,6vw,80px);flex-wrap:wrap}
.represent li{display:grid;gap:8px;justify-items:center}
.represent strong{
  font-family:var(--disp);font-size:clamp(38px,5vw,58px);font-weight:800;letter-spacing:-.028em;color:#fff;
  text-shadow:0 0 40px rgba(var(--platinum-rgb),.16);
}
.represent span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-soft)}
.represent__tag{
  margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--platinum-hi);
}

/* ═══════════ PRINCIPIOS ═══════════ */
.principles{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
.prin{
  background:rgba(255,255,255,.025);padding:28px 26px 32px;
  transition:background .35s;position:relative;
}
.prin:hover{background:var(--glass-hi)}
.prin h3{
  font-family:var(--disp);font-size:19px;font-weight:700;color:#fff;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.prin h3::before{
  content:"✓";font-family:var(--mono);font-size:12px;color:var(--platinum);
  width:22px;height:22px;border-radius:50%;border:1px solid var(--line-e);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.prin p{font-size:14px;line-height:1.6;color:var(--txt-soft)}

/* ═══════════ FINALE ═══════════ */
.finale{
  position:relative;overflow:hidden;text-align:center;
  background:
    radial-gradient(1000px 560px at 50% 112%, rgba(var(--platinum-rgb),.11), transparent 66%),
    radial-gradient(700px 400px at 50% -10%, rgba(var(--steel-rgb),.06), transparent 60%);
  padding:clamp(110px,13vw,180px) var(--pad);
  display:flex;flex-direction:column;align-items:center;
}
.finale::before{
  content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--platinum-rgb),.34),transparent);
}
.finale > *{position:relative;z-index:2}
.finale .kicker{justify-content:center}
/* La firma: el lockup completo cierra la pagina. Es la unica vez que
   aparece entero, asi que se le da aire y nada compite con el. */
.finale__sign{
  width:clamp(150px,17vw,214px);height:auto;margin:0 0 46px;
  opacity:.95;filter:drop-shadow(0 0 60px rgba(var(--platinum-rgb),.16));
}
.finale__title{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(34px,5.4vw,72px);line-height:1.04;letter-spacing:-.036em;
  color:#fff;margin:26px 0 20px;max-width:1000px;
  text-shadow:0 0 70px rgba(var(--platinum-rgb),.15);
}
.finale__sub{font-size:clamp(17px,2vw,22px);color:var(--txt-lsoft);max-width:640px}
/* Riel: los tres terminos cuelgan de una sola linea continua, que es
   justamente lo que afirma la frase. Nodo en rombo, sin pildoras. */
.finale__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  max-width:660px;margin:44px auto 46px;position:relative;
}
.finale__rail::before{
  content:"";position:absolute;left:0;right:0;top:11px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-l) 14%,var(--line-l) 86%,transparent);
}
.finale__rail li{position:relative;padding-top:30px;text-align:center}
.finale__rail li::before{
  content:"";position:absolute;top:6px;left:50%;width:11px;height:11px;margin-left:-5.5px;
  background:var(--void);border:1px solid var(--nc,var(--platinum));transform:rotate(45deg);
}
.finale__rail li::after{
  content:"";position:absolute;top:10px;left:50%;width:3px;height:3px;margin-left:-1.5px;
  background:var(--nc,var(--platinum));box-shadow:0 0 9px var(--nc,var(--platinum));transform:rotate(45deg);
}
.finale__rail li[data-n="ember"]{--nc:var(--platinum-hi)}
.finale__rail li[data-n="amber"]{--nc:var(--platinum)}
.finale__rail li[data-n="green"]{--nc:var(--steel)}
.finale__rail-i{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;
  color:var(--nc,var(--platinum));opacity:.8;margin-bottom:7px;
}
.finale__rail-l{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-l);
}
@media (max-width:640px){
  .finale__rail{grid-auto-flow:row;gap:22px;max-width:300px;justify-items:start}
  .finale__rail::before{
    left:5px;right:auto;top:4px;bottom:4px;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,var(--line-l) 10%,var(--line-l) 90%,transparent);
  }
  .finale__rail li{padding:0 0 0 26px;text-align:left}
  .finale__rail li::before{top:50%;left:5px;margin:-5.5px 0 0 -5.5px}
  .finale__rail li::after{top:50%;left:5px;margin:-1.5px 0 0 -1.5px}
  .finale__rail-i{margin-bottom:4px}
}

/* ═══════════ FOOTER ═══════════ */
.footer{
  position:relative;
  display:block;
  background:rgba(5,5,6,.74);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--txt-lsoft);
  padding:34px var(--pad);
  padding-bottom:calc(34px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-e);
}
.footer__top{
  max-width:var(--max);margin:0 auto;width:100%;
  display:flex;gap:clamp(28px,5vw,80px);flex-wrap:wrap;align-items:flex-start;
}
.footer__brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.footer__brand strong{display:block;font-family:var(--disp);letter-spacing:.12em;color:#fff;font-size:17px}
.footer__brand span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.footer__map{display:flex;gap:clamp(24px,4vw,64px);flex-wrap:wrap}
.footer__col h2{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--platinum);margin-bottom:12px;
}
.footer__col ul{list-style:none;display:grid;gap:8px}
.footer__col a{
  font-size:13px;color:var(--txt-lsoft);text-decoration:none;
  transition:color .25s,padding-left .25s var(--ease);
}
.footer__col a:hover{color:#fff;padding-left:5px}
.footer__bottom{
  max-width:var(--max);margin:0 auto;width:100%;
  display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);margin-top:30px;padding-top:20px;
}
.footer__tag{font-size:12.5px}
.footer__legal{font-family:var(--mono);font-size:11px;letter-spacing:.06em}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .verticals{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(3,1fr)}
  .flow__step:nth-child(3)::after{display:none}
  .principles{grid-template-columns:repeat(2,1fr)}
  .units{grid-template-columns:repeat(2,1fr)}
  .brands__grid{grid-template-columns:repeat(3,1fr)!important}
  .metrics ul{grid-template-columns:repeat(2,1fr)}
  .hero__mark{opacity:.28;right:-26vw;width:104vw}
}
@media (max-width:820px){
  .verticals{grid-template-columns:1fr 1fr}
  .vert{min-height:190px}
  .flow{grid-template-columns:1fr 1fr}
  .flow__step::after{display:none!important}
  .principles{grid-template-columns:1fr}
  .kit__manifest{grid-template-columns:1fr 1fr;gap:26px 34px}
  .nav__links,.nav__cta{display:none}
  .nav__burger{
    display:flex;flex-direction:column;gap:6px;justify-content:center;
    width:44px;height:44px;background:none;border:1px solid var(--line-l);border-radius:12px;
    cursor:pointer;align-items:center;
  }
  .nav__burger span{width:18px;height:2px;background:#fff;transition:transform .3s var(--ease)}
  .nav.menu-open .nav__burger span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav.menu-open .nav__burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav.menu-open .nav__brand,
  .nav.menu-open .nav__burger{position:relative;z-index:2}
  .nav.menu-open .nav__links{
    display:flex;position:fixed;top:0;left:0;right:0;z-index:1;
    height:100vh;height:100dvh;
    background:#08060E;
    flex-direction:column;gap:8px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:calc(76px + env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right))
            calc(40px + env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
  }
  .nav.menu-open .nav__links a{
    font-family:var(--disp);font-size:32px;font-weight:600;color:#fff;
    padding:10px 0;border-bottom:1px solid var(--line-l);
  }
  .hero__stats{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .pillars{grid-template-columns:1fr 1fr}
  .market{grid-template-columns:1fr}
}
@media (max-width:520px){
  .pillars{grid-template-columns:1fr}
  .metrics ul{grid-template-columns:1fr}
  .brands__grid{grid-template-columns:repeat(2,1fr)!important}
  .hero{padding-top:110px}
  .hero__grid{display:none}
  .verticals{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .kit__manifest{grid-template-columns:1fr;gap:24px}
  .quote{flex-direction:column;gap:4px}
  .represent ul{gap:36px}
  .units{grid-template-columns:1fr}       /* evitaba que "Arrendamiento de Activos" se cortara */
  .vert{min-height:0;justify-content:flex-start;padding:22px 22px 26px}
  .vert__n{position:static;display:block;margin-bottom:12px}
}

/* ═══════════ iOS / móvil — rendimiento y notch ═══════════ */
.nav{
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
}
@supports (-webkit-touch-callout: none){
  /* Safari iOS: los blur grandes cuestan caro; se aligeran */
  .hero__aurora{filter:blur(18px)}
  .pillar,.unit,.metrics li,.brands__grid li,
  .vert,.flow__step,.quote,.conclusion,.finale__rail li,.footer{
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .pillar,.unit,.metrics li,.vert,.flow__step{
    background:rgba(20,14,26,.55);
  }
  .brands__grid li{background:rgba(20,14,26,.5)}
  .footer{background:rgba(5,5,6,.94)}
  .nav.scrolled{background:rgba(8,8,10,.94)}
}
/* ═══════════ MENÚ MÓVIL ABIERTO ═══════════
   Mientras el menú está abierto la barra NO puede filtrar el fondo:
   cualquier ancestro con backdrop-filter/filter crea bloque contenedor y el
   panel position:fixed queda encajado dentro de la barra (~64px) en vez de
   cubrir la pantalla; al hacer scroll el fondo desaparecía y los enlaces
   quedaban flotando sobre el sitio. Va con !important y sobre <html> para
   ganarle a .nav.scrolled y al bloque @supports de iOS, sin depender del orden.
   El scroll del documento se bloquea desde JS (body fixed), porque iOS ignora
   overflow:hidden en <body>. */
html.nav-open,
html.nav-open body{overflow:hidden}
html.nav-open .nav{
  background:#08060E!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  filter:none!important;transform:none!important;
  box-shadow:0 1px 0 rgba(var(--platinum-rgb),.24)!important;
}
html.nav-open .nav__links{
  background:#08060E!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

@media (hover:none){
  /* sin estados hover pegados en táctil */
  .unit:hover,.vert:hover,.flow__step:hover{transform:none}
}


/* ═══════════ PÁGINAS INTERNAS ═══════════ */

/* Cabecera de página: la misma jerarquía que .chapter__head, pero con
   migaja y <h1>, para que cada página tenga su propio encabezado real. */
.phead{
  position:relative;z-index:2;
  max-width:var(--max);margin:0 auto;
  padding:clamp(130px,17vh,190px) var(--pad) clamp(30px,5vw,54px);
}
.phead__crumb{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-lsoft);display:flex;align-items:center;gap:10px;margin-bottom:22px;
}
.phead__crumb a{color:var(--txt-lsoft);text-decoration:none;transition:color .25s}
.phead__crumb a:hover{color:var(--platinum)}
.phead__crumb span{color:var(--line-e);opacity:.9}
.phead__title{
  font-family:var(--disp);font-weight:700;letter-spacing:-.025em;line-height:1.04;
  font-size:clamp(38px,6.4vw,76px);color:#fff;margin:14px 0 0;
}
.phead__title em{font-style:normal;color:var(--platinum)}
.phead__lede{
  margin-top:20px;max-width:620px;
  font-size:clamp(15px,1.6vw,18.5px);line-height:1.62;color:var(--txt-lsoft);
}
/* la primera sección de una página interna ya no necesita el aire superior */
.phead + .chapter{padding-top:0}

/* Paginador: dos destinos, no una fila de botones */
.pager{
  position:relative;z-index:2;
  max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) clamp(60px,8vw,110px);
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.pager__i{
  display:grid;gap:7px;text-decoration:none;
  border-top:1px solid var(--line);padding:20px 4px 0;
  transition:border-color .3s,padding .3s var(--ease);
}
.pager__i span{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-lsoft);
}
.pager__i b{
  font-family:var(--disp);font-size:clamp(17px,2.2vw,23px);font-weight:600;color:#fff;
  transition:color .3s;
}
.pager__i--next{text-align:right}
.pager__i:hover{border-color:var(--platinum)}
.pager__i:hover b{color:var(--platinum)}
.pager__i--prev:hover{padding-left:10px}
.pager__i--next:hover{padding-right:10px}

/* Nav: página activa */
.nav__links a.is-active{color:#fff}
.nav__links a.is-active::after{width:100%}
.nav__cta.is-active{background:var(--platinum);border-color:var(--platinum);color:var(--void)}

/* Portada: tarjetas hacia cada página.
   Sin caja flotante: cada una cuelga de su propia regla superior, que se
   enciende al pasar el cursor. Mismo motivo que el riel y el manifiesto. */
.tgrid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-block:1px solid var(--line);
}
/* siete tarjetas: la ultima ocupa la celda que sobra */
.tgrid > :last-child{grid-column:span 2}
.tcard{
  position:relative;display:grid;align-content:start;gap:10px;
  background:var(--void);padding:30px 26px 34px;text-decoration:none;
  transition:background .35s;
}
.tcard::before{
  content:"";position:absolute;top:-1px;left:0;width:0;height:1px;
  background:var(--tc,var(--platinum));transition:width .45s var(--ease);
}
.tcard[data-k="ember"]{--tc:var(--platinum-hi)}
.tcard[data-k="amber"]{--tc:var(--platinum)}
.tcard[data-k="teal"]{--tc:var(--titanium)}
.tcard[data-k="green"]{--tc:var(--steel)}
.tcard:hover{background:rgba(255,255,255,.028)}
.tcard:hover::before{width:100%}
.tcard__n{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--tc,var(--platinum))}
.tcard__t{font-family:var(--disp);font-size:21px;font-weight:600;color:#fff;line-height:1.2}
.tcard__d{font-size:13.5px;line-height:1.6;color:var(--txt-soft)}
.tcard__go{
  margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-lsoft);
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s,transform .3s var(--ease),color .3s;
}
.tcard:hover .tcard__go,.tcard:focus-visible .tcard__go{opacity:1;transform:none;color:var(--tc,var(--platinum))}

/* Contacto */
.contactgrid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);
}
.cbox{position:relative;padding-left:18px}
.cbox::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,var(--platinum),transparent 85%);opacity:.6;
}
.cbox__k{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--platinum);margin-bottom:10px;
}
.cbox__v{font-family:var(--disp);font-size:clamp(19px,2.4vw,26px);font-weight:600;color:#fff}
.cbox__v a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-e);transition:border-color .3s}
.cbox__v a:hover{border-color:var(--platinum)}
.cbox__d{margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--txt-soft)}

@media (max-width:1080px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .contactgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .tgrid{grid-template-columns:1fr}
  .tgrid > :last-child{grid-column:auto}
  .contactgrid{grid-template-columns:1fr;gap:26px}
  .pager{grid-template-columns:1fr;gap:0}
  .pager__i--next{text-align:left}
  .footer__map{gap:26px 34px}
}