/* ============================================================
   GRUPO DIONYS — Portada
   Estilos propios de index.html. Los tokens viven en tokens.css.
   Prefijos: gh- (portada) y mu- (primitivas de movimiento portadas
   de Magic UI a CSS puro, sin Tailwind ni motion/react).
   ============================================================ */

html { scroll-behavior: smooth; scrollbar-color: var(--slate-400) var(--slate-100); }
body { overflow-x: hidden; caret-color: var(--gd-red); }
#root { overflow-x: clip; }
section[id] { scroll-margin-top: 76px; }

.gh-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 32px); }
.gh-sec { padding-block: clamp(72px, 9vw, 128px); }

/* ---------- barra de progreso de lectura ---------- */
.gh-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .gh-progress {
    display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
    background: var(--gd-gold); transform-origin: 0 50%; transform: scaleX(0);
    animation: ghScroll linear both; animation-timeline: scroll(root);
  }
  .gh-still .gh-progress { display: none; }
}
@keyframes ghScroll { to { transform: scaleX(1); } }

/* ---------- tipografía ---------- */
.gh-label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font: 700 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gd-red);
}
.gh-label::before { content: ""; width: 26px; height: 2.5px; border-radius: 2px; background: var(--gd-gold); }
.gh-label--light { color: var(--gd-gold); }
.gh-h2 {
  margin: 0; color: var(--fg1); text-wrap: balance;
  font: 800 clamp(1.875rem, 3.6vw, 2.875rem)/1.1 var(--font-display); letter-spacing: -.022em;
}
.gh-lead {
  margin: 20px 0 0; max-width: 56ch; color: var(--fg2);
  font: 300 clamp(1rem, 1.35vw, 1.1875rem)/1.65 var(--font-body);
}
.gh-head--center { text-align: center; }
.gh-head--center .gh-lead { margin-inline: auto; }

/* ---------- botones ---------- */
.gh-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px; border: 0; border-radius: var(--radius-pill);
  font: 700 1rem/1 var(--font-display); white-space: nowrap; cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.gh-btn:active { transform: scale(.97); }
.gh-btn svg { flex-shrink: 0; }
.gh-arrow { display: inline-flex; transition: transform var(--dur) var(--ease-out); }
.gh-btn:hover .gh-arrow { transform: translateX(4px); }

.gh-btn--primary { background: var(--gd-red); color: #fff; box-shadow: 0 10px 24px -8px rgba(192, 0, 0, .55); }
.gh-btn--primary:hover { background: var(--gd-red-600); transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(192, 0, 0, .6); }
/* brillo que cruza el botón primario al pasar el cursor (adaptado de shimmer-button) */
.gh-btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
  transform: translateX(-120%);
}
.gh-btn--primary:hover::after { transform: translateX(120%); transition: transform .9s var(--ease-out); }

.gh-btn--ghost { background: rgba(15, 20, 30, .28); color: #fff; box-shadow: inset 0 0 0 2px var(--gd-gold); }
.gh-btn--ghost:hover { background: var(--gd-gold); color: var(--gd-carbon); transform: translateY(-2px); }
.gh-btn--outline { background: transparent; color: var(--gd-red); box-shadow: inset 0 0 0 2px var(--gd-red); }
.gh-btn--outline:hover { background: var(--gd-red); color: #fff; transform: translateY(-2px); }
.gh-btn--gold { background: var(--gd-gold); color: var(--gd-carbon); }
.gh-btn--gold:hover { background: var(--gd-gold-600); transform: translateY(-2px); }
.gh-btn--wa { background: linear-gradient(135deg, #128C4B, #0E7F42); color: #fff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.gh-btn--wa:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---------- entradas ---------- */
.gh-rv {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease-out) var(--d, 0ms), transform .9s var(--ease-out) var(--d, 0ms);
}
.gh-rv.is-in { opacity: 1; transform: none; }
.gh-still .gh-rv { opacity: 1; transform: none; transition: none; }

/* titular que sube palabra por palabra */
.gh-word { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .16em; margin: -.12em 0 -.16em; }
.gh-word > span { display: inline-block; transform: translateY(112%) rotate(4deg); transform-origin: 0 100%; }
.gh-word.is-gold > span { color: var(--gd-gold); }
.gh-word > span > i { font-style: normal; color: #fff; }
.is-play .gh-word > span { animation: ghWordUp .95s var(--ease-out) var(--d, 0ms) forwards; }
.gh-still .gh-word > span { transform: none; animation: none; }
@keyframes ghWordUp { to { transform: none; } }

/* ---------- primitivas Magic UI ---------- */
/* haz que recorre el borde (border-beam) */
.mu-beam {
  pointer-events: none; position: absolute; inset: 0; border-radius: inherit; padding: var(--mu-beam-w, 1.5px);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
}
.mu-beam > i {
  position: absolute; aspect-ratio: 1;
  background: linear-gradient(to left, var(--mu-from), var(--mu-to), transparent);
  animation: muBeam linear infinite;
}
@keyframes muBeam { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@supports not (offset-path: rect(0 auto auto 0 round 10px)) { .mu-beam { display: none; } }
.gh-still .mu-beam { display: none; }

/* foco que sigue al cursor (magic-card) */
.mu-spot { position: relative; isolation: isolate; }
.mu-spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--mu-spot, rgba(255, 215, 0, .18)), transparent 70%);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.mu-spot:hover::before { opacity: 1; }
.mu-ticker { font-variant-numeric: tabular-nums; }

/* ============================================================
   HERO
   ============================================================ */
.gh-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; min-height: max(640px, 100svh);
  background: var(--gd-carbon); color: #fff;
}
.gh-hero__media { position: absolute; inset: 0; z-index: -1; }
.gh-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease-out); }
.gh-hero__slide.is-active { opacity: 1; }
.gh-hero__slide img,
.gh-hero__slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gh-hero__slide img { transform: scale(1.07); transition: transform 9s linear; }
.gh-hero__slide.is-active img { transform: scale(1); }
.gh-hero__slide video { opacity: 0; transition: opacity .7s ease; }
.gh-hero__slide video.is-ready { opacity: 1; }
.gh-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 20, 30, .66) 0%, rgba(15, 20, 30, 0) 24%),
    linear-gradient(0deg, rgba(15, 20, 30, .95) 0%, rgba(15, 20, 30, .68) 36%, rgba(15, 20, 30, .14) 70%),
    linear-gradient(90deg, rgba(15, 20, 30, .58) 0%, rgba(15, 20, 30, 0) 62%);
}
.gh-hero__inner { display: flex; flex-direction: column; gap: clamp(32px, 6vh, 60px); padding-top: 116px; padding-bottom: 34px; }
.gh-hero__copy { max-width: 1010px; }
.gh-hero h1 {
  margin: 0; text-wrap: balance;
  font: 800 clamp(2.125rem, 4.4vw, 3.75rem)/1.05 var(--font-display); letter-spacing: -.025em;
}
.gh-hero__sub {
  margin: 22px 0 32px; max-width: 62ch; color: rgba(255, 255, 255, .9);
  font: 300 clamp(1rem, 1.45vw, 1.25rem)/1.55 var(--font-body);
  animation: gdFadeUp .8s var(--ease-out) .42s both;
}
.gh-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; animation: gdFadeUp .8s var(--ease-out) .56s both; }

/* riel: tres pestañas con progreso + controles */
.gh-rail { display: flex; align-items: flex-end; gap: 28px; }
.gh-rail__tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gh-rail__tab {
  display: block; padding: 0 0 2px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.gh-rail__bar { display: block; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .26); }
.gh-rail__bar i { display: block; height: 100%; background: rgba(255, 255, 255, .78); transform: scaleX(0); transform-origin: 0 50%; }
.gh-rail__tab.is-done .gh-rail__bar i { transform: scaleX(1); }
.gh-rail__tab.is-active .gh-rail__bar i { background: var(--gd-gold); animation: ghFill var(--gh-slide, 6.5s) linear forwards; }
.gh-still .gh-rail__tab.is-active .gh-rail__bar i { animation: none; transform: scaleX(1); }
@keyframes ghFill { to { transform: scaleX(1); } }
.gh-rail__label {
  display: block; margin-top: 13px; color: rgba(255, 255, 255, .68);
  font: 700 .78rem/1.3 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  transition: color var(--dur) var(--ease-out);
}
.gh-rail__tab:hover .gh-rail__label,
.gh-rail__tab.is-active .gh-rail__label { color: #fff; }
.gh-rail__now { display: none; }
.gh-rail__ctrl { display: flex; gap: 10px; flex-shrink: 0; }
.gh-rail__ctrl button {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(15, 20, 30, .36); border: 1px solid rgba(255, 255, 255, .34);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gh-rail__ctrl button:hover { background: var(--gd-gold); border-color: var(--gd-gold); color: var(--gd-carbon); }
.gh-rail__ctrl button:active { transform: scale(.94); }

/* ============================================================
   NOSOTROS
   ============================================================ */
.gh-about__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.gh-about__copy .gh-btn { margin-top: 34px; }

.gh-frame { position: relative; isolation: isolate; }
.gh-frame__clip {
  position: relative; overflow: hidden; border-radius: 28px; background: var(--slate-200);
  box-shadow: 0 30px 60px -30px rgba(15, 20, 30, .45);
}
.gh-frame__clip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.6s var(--ease-out) .1s; }
.gh-frame.is-in .gh-frame__clip img { transform: scale(1); }
/* telón rojo que descubre la foto */
.gh-frame__clip::after {
  content: ""; position: absolute; inset: 0; background: var(--gd-red);
  transform-origin: 50% 0; transition: transform 1.05s var(--ease-in-out);
}
.gh-frame.is-in .gh-frame__clip::after { transform: scaleY(0); }
.gh-still .gh-frame__clip::after { display: none; }
.gh-still .gh-frame__clip img { transform: none; transition: none; }
.gh-frame__arc { position: absolute; z-index: -1; width: 62%; aspect-ratio: 1; pointer-events: none; }
.gh-frame__arc circle {
  fill: none; stroke: var(--gd-gold); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out) .5s;
}
.gh-frame.is-in .gh-frame__arc circle { stroke-dashoffset: .5; }
.gh-still .gh-frame__arc circle { stroke-dashoffset: .5; transition: none; }
.gh-frame__badge {
  position: absolute; display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: 16px;
  opacity: 0; transform: translateY(18px) scale(.94);
  transition: opacity .7s var(--ease-out) .85s, transform .8s var(--ease-out) .85s;
}
.gh-frame.is-in .gh-frame__badge { opacity: 1; transform: none; }
.gh-still .gh-frame__badge { opacity: 1; transform: none; transition: none; }

.gh-about .gh-frame { margin-left: auto; max-width: 600px; padding: 0 0 26px 26px; }
.gh-about .gh-frame__clip { aspect-ratio: 5 / 4; }
.gh-about .gh-frame__arc { top: -9%; right: -6%; transform: rotate(-135deg); }
.gh-about .gh-frame__badge { left: 0; bottom: 0; background: var(--gd-red); box-shadow: var(--shadow-red); }
.gh-about .gh-frame__badge b { font: 800 1.1875rem/1.1 var(--font-display); color: var(--gd-gold); }
.gh-about .gh-frame__badge > span { font: 400 .78rem/1.25 var(--font-body); color: #fff; }

.gh-stats {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 96px); border: 1px solid var(--border); border-radius: 24px; background: #fff;
}
.gh-stat { padding: clamp(24px, 3vw, 40px) clamp(16px, 2.4vw, 34px); }
.gh-stat + .gh-stat { border-left: 1px solid var(--border); }
.gh-stat__n {
  display: block; color: var(--gd-red);
  font: 800 clamp(2.25rem, 4.2vw, 3.5rem)/1 var(--font-display); letter-spacing: -.03em;
}
.gh-stat__l { display: block; margin-top: 12px; color: var(--fg2); font: 400 .9375rem/1.4 var(--font-body); }

/* ============================================================
   MARCAS — el grupo y sus seis puertas
   ============================================================ */
.gh-brands { background: var(--bg-soft); }
.gh-hub { position: relative; margin-top: clamp(40px, 5vw, 60px); }
.gh-hub__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gh-hub__path { fill: none; stroke: var(--slate-300); stroke-width: 1.5; transition: stroke var(--dur) var(--ease-out); }
.gh-hub__path.is-hot { stroke: var(--gd-red); }
.gh-hub__pulse {
  fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .2 1; stroke-dashoffset: .2;
  animation: ghPulse 3.8s cubic-bezier(.6, 0, .3, 1) var(--d, 0s) infinite;
}
.gh-still .gh-hub__pulse { display: none; }
@keyframes ghPulse {
  0% { stroke-dashoffset: .2; opacity: 0; }
  10% { opacity: 1; }
  68% { stroke-dashoffset: -1; opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}
.gh-hub__node {
  position: relative; z-index: 1; width: 208px; margin: 0 auto; padding: 14px 24px;
  background: #fff; border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 22px 44px -22px rgba(192, 0, 0, .5);
}
.gh-hub__node img { width: 100%; height: auto; }
.gh-hub__grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px;
  margin-top: clamp(72px, 8vw, 108px);
}
.gh-brand {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; color: var(--fg1); border: 1px solid var(--border); border-radius: 20px;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.gh-brand:hover, .gh-brand:focus-visible {
  transform: translateY(-8px); border-color: rgba(192, 0, 0, .3); box-shadow: 0 26px 44px -24px rgba(15, 20, 30, .4);
}
.gh-hub__cell > .gh-rv { height: 100%; }
.gh-brand__logo { display: flex; flex: none; align-items: center; justify-content: center; height: 136px; padding: 18px; }
.gh-brand__logo img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease-out); }
.gh-brand:hover .gh-brand__logo img { transform: scale(1.07); }
.gh-brand__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex: 1; padding: 14px 14px 16px 16px; border-top: 1px solid var(--border);
}
.gh-brand__name { display: block; font: 700 .875rem/1.25 var(--font-display); text-wrap: balance; }
.gh-brand__sector { display: block; margin-top: 3px; color: var(--fg3); font: 400 .75rem/1.3 var(--font-body); }
.gh-brand__go {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gd-red-50); color: var(--gd-red);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gh-brand:hover .gh-brand__go { background: var(--gd-red); color: #fff; transform: translateX(3px); }
.gh-brands__cta { margin-top: clamp(40px, 5vw, 56px); text-align: center; }

/* ============================================================
   RESPONSABILIDAD SOCIAL
   ============================================================ */
.gh-rsc { position: relative; isolation: isolate; overflow: hidden; background: var(--gd-carbon); color: #fff; }
.gh-rsc__rings {
  position: absolute; z-index: -1; top: -34%; right: -16%; width: min(820px, 78vw); aspect-ratio: 1;
  animation: ghTurn 90s linear infinite;
}
.gh-rsc__rings circle { fill: none; stroke: var(--gd-gold); }
.gh-still .gh-rsc__rings { animation: none; }
@keyframes ghTurn { to { transform: rotate(360deg); } }
.gh-rsc__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.gh-rsc .gh-h2 { color: #fff; }
.gh-rsc .gh-lead { margin-top: 0; color: rgba(255, 255, 255, .8); }
.gh-rsc__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid rgba(255, 255, 255, .16);
}
.gh-prog { --mu-spot: rgba(255, 215, 0, .12); height: 100%; padding: 38px clamp(20px, 2.6vw, 38px) 44px; }
.gh-rsc__grid > * + * { border-left: 1px solid rgba(255, 255, 255, .16); }
.gh-rsc__grid > :first-child .gh-prog { padding-left: 0; }
.gh-prog::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--gd-gold);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out);
}
.gh-prog:hover::after { transform: scaleX(1); }
.gh-prog__icon {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; color: var(--gd-gold);
  background: rgba(255, 215, 0, .1); border: 1px solid rgba(255, 215, 0, .3);
}
/* los íconos se dibujan al entrar */
.gh-prog__icon svg * { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.6s var(--ease-out) calc(var(--d, 0ms) + 200ms); }
.is-in .gh-prog__icon svg *, .gh-still .gh-prog__icon svg * { stroke-dashoffset: 0; }
.gh-prog h3 { margin: 24px 0 0; font: 700 1.25rem/1.25 var(--font-display); }
.gh-prog p { margin: 12px 0 0; max-width: 38ch; color: rgba(255, 255, 255, .76); font: 300 .9688rem/1.65 var(--font-body); }

/* ============================================================
   EMPLEABILIDAD
   ============================================================ */
.gh-emp__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.gh-emp .gh-frame { max-width: 560px; padding: 0 26px 26px 0; }
.gh-emp .gh-frame__clip { aspect-ratio: 10 / 11; }
.gh-emp .gh-frame__clip img { object-position: 50% 35%; }
.gh-emp .gh-frame__arc { left: -6%; bottom: -2%; transform: rotate(45deg); }
.gh-emp .gh-frame__badge { right: 0; bottom: 0; align-items: center; background: var(--gd-gold); color: var(--gd-carbon); box-shadow: var(--shadow-md); }
.gh-emp .gh-frame__badge b { font: 800 1.625rem/1 var(--font-display); }
.gh-emp .gh-frame__badge > span { font: 600 .66rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.gh-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; margin: 34px 0 38px; padding: 0; list-style: none; }
.gh-benefit { display: flex; gap: 14px; }
.gh-benefit__ic {
  display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
  background: var(--gd-red-50); color: var(--gd-red);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.gh-benefit:hover .gh-benefit__ic { background: var(--gd-red); color: var(--gd-gold); transform: translateY(-3px) rotate(-4deg); }
.gh-benefit h3 { margin: 0; font: 700 .9688rem/1.3 var(--font-display); color: var(--fg1); }
.gh-benefit p { margin: 5px 0 0; font: 300 .8438rem/1.55 var(--font-body); color: var(--fg2); }

/* ============================================================
   SEDES — carrete promocional
   ============================================================ */
.gh-reel { padding-bottom: clamp(72px, 9vw, 128px); }
.gh-reel__grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, clamp(240px, 24vw, 320px)); gap: 18px; }
.gh-tile {
  position: relative; isolation: isolate; overflow: hidden; display: block;
  border-radius: 24px; background: var(--slate-700); color: #fff;
}
.gh-reel__grid > :first-child { grid-row: 1 / span 2; }
.gh-reel__grid > * > .gh-tile { height: 100%; }
.gh-tile__img {
  position: absolute; z-index: -2; inset: -5%; width: 110%; max-width: none; height: 110%; object-fit: cover;
  animation: ghKen 18s ease-in-out var(--d, 0s) infinite alternate;
}
.gh-still .gh-tile__img { animation: none; }
@keyframes ghKen { from { transform: scale(1); } to { transform: scale(1.09) translate(-1.6%, -1.6%); } }
.gh-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(15, 20, 30, .93) 0%, rgba(15, 20, 30, .5) 44%, rgba(15, 20, 30, .06) 76%);
}
/* velo más denso cuando la ficha está desplegada, para leer sobre la foto */
.gh-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s var(--ease-out);
  background: linear-gradient(0deg, rgba(15, 20, 30, .96) 0%, rgba(15, 20, 30, .82) 58%, rgba(15, 20, 30, .2) 92%);
}
.gh-tile.is-on::after { opacity: 1; }
.gh-tile__logo { position: absolute; top: 18px; left: 18px; height: 56px; padding: 7px 12px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.gh-tile__logo img { width: auto; height: 100%; }
.gh-tile__go {
  position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(15, 20, 30, .42); border: 1px solid rgba(255, 255, 255, .45);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.gh-tile:hover .gh-tile__go, .gh-tile:focus-visible .gh-tile__go { background: var(--gd-gold); border-color: var(--gd-gold); color: var(--gd-carbon); transform: rotate(-45deg); }
.gh-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px 28px; }
.gh-tile__sector { display: block; color: var(--gd-gold); font: 700 .75rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.gh-tile__name { display: block; margin-top: 9px; font: 800 clamp(1.25rem, 2.2vw, 1.875rem)/1.1 var(--font-display); letter-spacing: -.015em; }
.gh-tile__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--ease-out); }
.gh-tile__more > span { display: block; overflow: hidden; }
.gh-tile.is-on .gh-tile__more { grid-template-rows: 1fr; }
.gh-tile__place { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: rgba(255, 255, 255, .88); font: 400 .875rem/1.4 var(--font-body); }
.gh-tile__place svg { color: var(--gd-gold); flex-shrink: 0; }
.gh-tile__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; padding: 0; list-style: none; }
.gh-tile__tags > span {
  padding: 8px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .36); background: rgba(15, 20, 30, .46);
  font: 600 .75rem/1 var(--font-display);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.gh-tile.is-on .gh-tile__tags > span { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms + 180ms); }
.gh-tile__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .2); }
.gh-tile__bar i { display: block; height: 100%; background: var(--gd-gold); transform: scaleX(0); transform-origin: 0 50%; }
.gh-tile.is-on .gh-tile__bar i { animation: ghFill 5.2s linear forwards; }
.gh-reel.is-held .gh-tile__bar i { animation-play-state: paused; }
.gh-still .gh-tile__bar { display: none; }

/* ============================================================
   CONTACTO
   ============================================================ */
.gh-contact { position: relative; isolation: isolate; overflow: hidden; background: var(--gd-red); color: #fff; }
.gh-contact__ring {
  position: absolute; z-index: -1; top: -110px; right: -60px; width: 360px; aspect-ratio: 1; border-radius: 50%;
  border: 42px solid rgba(255, 215, 0, .17); animation: ghFloat 11s ease-in-out infinite alternate;
}
.gh-still .gh-contact__ring { animation: none; }
@keyframes ghFloat { to { transform: translate(-26px, 22px) scale(1.06); } }
.gh-contact__inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 40px 56px;
  padding-block: clamp(64px, 8vw, 104px);
}
.gh-contact__copy { max-width: 660px; }
.gh-contact h2 { margin: 0; text-wrap: balance; font: 800 clamp(1.875rem, 3.8vw, 3rem)/1.08 var(--font-display); letter-spacing: -.022em; }
.gh-contact__copy p { margin: 18px 0 0; max-width: 54ch; color: rgba(255, 255, 255, .94); font: 300 clamp(1rem, 1.4vw, 1.1875rem)/1.55 var(--font-body); }
.gh-contact__actions { display: flex; flex-direction: column; gap: 14px; min-width: 280px; }
.gh-contact__actions .gh-btn { min-height: 58px; }
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .gh-hub__svg { display: none; }
  .gh-hub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; }
  /* sin haces: un tallo une el logo del grupo con la rejilla */
  .gh-hub__node::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 56px; background: var(--slate-300); }
}
@media (max-width: 960px) {
  .gh-about__grid, .gh-emp__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .gh-about .gh-frame { margin-inline: 0; max-width: 620px; }
  .gh-emp .gh-frame { max-width: 520px; }
  .gh-rsc__head { grid-template-columns: minmax(0, 1fr); }
  .gh-rsc__grid { grid-template-columns: minmax(0, 1fr); }
  .gh-rsc__grid > * + * { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .gh-prog { padding-inline: 0; }
  .gh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-stat:nth-child(3) { border-left: 0; }
  .gh-stat:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .gh-hero__inner { padding-top: 104px; padding-bottom: 24px; gap: 30px; }
  .gh-hero h1 { font-size: clamp(1.75rem, 7.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.015em; }
  .gh-hero__sub { margin: 16px 0 24px; }
  .gh-hero__ctas .gh-btn { flex: 1 1 100%; }
  .gh-hero__scrim {
    background:
      linear-gradient(180deg, rgba(15, 20, 30, .7) 0%, rgba(15, 20, 30, .12) 26%),
      linear-gradient(0deg, rgba(15, 20, 30, .96) 0%, rgba(15, 20, 30, .8) 46%, rgba(15, 20, 30, .26) 78%);
  }
  .gh-rail { flex-wrap: wrap; align-items: center; gap: 14px 16px; }
  .gh-rail__tabs { flex: 1 0 100%; gap: 8px; }
  .gh-rail__label { display: none; }
  .gh-rail__now { display: block; flex: 1; margin: 0; font: 700 .72rem/1.35 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
  .gh-rail__ctrl button { width: 44px; height: 44px; }
  .gh-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .gh-brand__logo { height: 112px; }
  .gh-brand__meta { align-items: flex-start; }
  .gh-benefits { grid-template-columns: 1fr; }
  .gh-reel__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 300px; }
  .gh-reel__grid > :first-child { grid-row: auto; }
  .gh-contact__actions { flex: 1 1 100%; min-width: 0; }
  .gh-contact__ring { width: 240px; border-width: 30px; top: -90px; right: -90px; }
}
@media (max-width: 340px) {
  .gh-stats { grid-template-columns: minmax(0, 1fr); }
  .gh-stat + .gh-stat { border-left: 0; border-top: 1px solid var(--border); }
}