/* ════════════════════════════════════════════════
       VARIABLES GLOBALES
    ════════════════════════════════════════════════ */
    :root {
      --orange:       #F5A623;
      --orange-dim:   rgba(245,166,35,.12);
      --orange-glow:  rgba(245,166,35,.07);
      --gold:         #C8903A;
      --bg:           #0B0C10;       /* antracita profundo — no negro puro */
      --bg-surface:   #101114;       /* superficie de sección */
      --white:        #F2F1EE;       /* blanco cálido, no frío */
      --muted:        #A0A0A0;       /* gris neutro para subtexto */
      --line:         rgba(255,255,255,.07);
      --line2:        rgba(255,255,255,.12);
      --green:        #5BA85A;
      --blue:         #2AACE2;

      /* Escala tipográfica */
      --font-display: 'Montserrat', sans-serif;
      --font-serif:   'Cormorant Garamond', Georgia, serif;
      --font-body:    'Inter', sans-serif;
    }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

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

/* ════════════════════════════════════════════════
       NAV — ultra-minimalista, transparente, tipografía fina
       CAMBIO: eliminado fondo opaco, borde inferior sutil,
       fuente ligera y espacio entre letras amplío.
    ════════════════════════════════════════════════ */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 56px;
      height: 72px;
      /* Fondo con blur muy sutil — integrado, no cortado */
      background: linear-gradient(180deg, rgba(11,12,16,.85) 0%, rgba(11,12,16,0) 100%);
      backdrop-filter: blur(0px);
      transition: background .4s, backdrop-filter .4s;
    }

.nav.scrolled {
      background: rgba(11,12,16,.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }

/* Logotipo GSM — discreto y reconocible */
    .logo {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-display);
    }

.logo-mark {
      width: 32px; height: 32px;
      border: 1px solid var(--orange);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; letter-spacing: 0;
      color: var(--orange);
    }

.logo-text strong {
      font-size: 14px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: var(--white);
    }

.logo-text span {
      display: block;
      font-size: 9px; font-weight: 300; letter-spacing: 3px;
      text-transform: uppercase; color: var(--muted);
    }

/* Links de navegación — peso 300, espacio amplío */
    .nav-links {
      display: flex; align-items: center; gap: 36px;
      list-style: none;
    }

.nav-links a {
      font-family: var(--font-display);
      font-size: 11px; font-weight: 400; letter-spacing: 2px;
      text-transform: uppercase; color: rgba(255,255,255,.45);
      transition: color .25s;
    }

.nav-links a:hover { color: var(--white); }

.nav-cta {
      font-family: var(--font-display);
      font-size: 10px; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--orange);
      border: 1px solid rgba(245,166,35,.35);
      padding: 9px 20px;
      transition: background .25s, color .25s;
    }

.nav-cta:hover {
      background: var(--orange);
      color: #000;
    }

/* Hamburger mobile */
    .ham {
      display: none; flex-direction: column; gap: 5px;
      background: none; border: none; cursor: pointer; padding: 4px;
    }

.ham span {
      display: block; width: 22px; height: 1px;
      background: var(--white); transition: .3s;
    }

/* ════════════════════════════════════════════════
       HERO — INMERSIVO FULL-BLEED
       Imagen ocupa 100vw × 100vh, texto superpuesto
    ════════════════════════════════════════════════ */
    .s-hero {
      position: relative;
      min-height: 100vh;
      display: block;
      overflow: hidden;
      background: var(--bg);
    }

/* ── FONDO: Resplandor ambiental cálido detrás del titular ──
       CAMBIO: eliminada la retícula de grid estilo código.
       Sustituida por un glow radial orgánico con gradiente dorado/naranja.
    ── */
    .s-hero::before {
      content: '';
      position: absolute;
      /* Centrado en la zona del titular — zona izquierda alta */
      width: 800px; height: 800px;
      border-radius: 50%;
      background: radial-gradient(
        circle at center,
        rgba(245,166,35,.09) 0%,
        rgba(200,120,40,.04) 40%,
        transparent 70%
      );
      top: -180px; left: -120px;
      pointer-events: none;
      z-index: 0;
      /* Movimiento muy lento — atmosférico, no tecnológico */
      animation: ambientGlow 20s ease-in-out infinite;
    }

/* Segundo resplandor: más cálido y bajo, da profundidad */
    .s-hero::after {
      content: '';
      position: absolute;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(
        circle at center,
        rgba(245,166,35,.05) 0%,
        transparent 65%
      );
      bottom: -100px; left: 20%;
      pointer-events: none;
      z-index: 0;
      animation: ambientGlow 28s ease-in-out infinite reverse;
    }

@keyframes ambientGlow {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%       { transform: translate(40px, 30px) scale(1.05); }
      66%       { transform: translate(-20px, 50px) scale(.97); }
    }

/* Línea de acento horizontal — borde superior muy fino */
    .hero-topline {
      position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 10;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(245,166,35,.5) 25%,
        rgba(245,166,35,.2) 60%,
        transparent 100%
      );
      transform: scaleX(0); transform-origin: left;
      animation: lineReveal 1.8s cubic-bezier(.22,1,.36,1) .2s forwards;
    }

@keyframes lineReveal { to { transform: scaleX(1); } }

/* Watermark GSM — muy tenue, apenas perceptible */
    .s-hero-watermark {
      position: absolute;
      right: -40px; bottom: -60px;
      font-family: var(--font-display);
      font-size: clamp(180px, 22vw, 340px);
      font-weight: 900; letter-spacing: -16px;
      color: rgba(255,255,255,.013);
      line-height: 1; user-select: none; pointer-events: none;
      z-index: 0;
    }

/* ════ TEXTO SUPERPUESTO — izquierda, sobre la imagen ════ */
    .hero-left {
      position: absolute;
      top: 0; left: 0; bottom: 0;
      z-index: 2;
      width: clamp(520px, 52%, 780px);
      display: flex; flex-direction: column; justify-content: center;
      padding: 60px 64px 160px 72px; /* top reducido: sin nav superior */
    }

/* Eyebrow — etiqueta geográfica discreta */
    .hero-eyebrow {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 48px;
      /* Sin pill/badge — línea editorial pura */
    }

.hero-eyebrow-line {
      width: 32px; height: 1px; background: var(--orange); flex-shrink: 0;
    }

.hero-eyebrow-text {
      font-family: var(--font-display);
      font-size: 10px; font-weight: 500; letter-spacing: 3.5px;
      text-transform: uppercase; color: var(--orange);
    }

/* ── TITULAR PRINCIPAL — Hero typography editorial ──
       CAMBIO TIPOGRÁFICO: 
       · Sans-serif (Montserrat 800) como base de la frase
       · Serif italic (Cormorant Garamond) para la palabra de énfasis
       · Tamaño drásticamente mayor — ocupa el espacio con autoridad
    ── */
    .hero-h1 {
      font-family: var(--font-display);
      font-size: clamp(48px, 5.5vw, 88px);
      font-weight: 800;
      line-height: .94;
      letter-spacing: -3px;
      color: var(--white);
      margin-bottom: 0;
      /* Sin text-clip ni gradient — la tipografía habla sola */
    }

/* Línea ligera / secundaria — peso 300 */
    .hero-h1 .ht-light {
      display: block;
      font-weight: 300;
      color: rgba(242,241,238,.30);
      letter-spacing: -2px;
    }

/* Énfasis serif italic — el toque editorial que diferencia */
    .hero-h1 .ht-serif {
      display: block;
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 600;
      font-size: 1.08em; /* ligeramente mayor — la serif necesita escala */
      letter-spacing: -1px;
      /* Color: un matiz dorado más cálido que el naranja puro */
      color: #D4943A;
      line-height: .96;
    }

/* Tercera línea — bold sans, anclaje */
    .hero-h1 .ht-bold {
      display: block;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -3px;
    }

/* Divisor minimal — línea + número de sección */
    .hero-rule {
      display: flex; align-items: center; gap: 20px;
      margin: 44px 0 36px;
    }

.hero-rule-line {
      width: 40px; height: 1px; background: var(--orange); flex-shrink: 0;
    }

.hero-rule-num {
      font-family: var(--font-display);
      font-size: 10px; font-weight: 400; letter-spacing: 3px;
      color: rgba(255,255,255,.2);
      text-transform: uppercase;
    }

/* Subtexto — máx 2 líneas, gris neutro, peso ligero */
    .hero-sub {
      font-family: var(--font-body);
      font-size: clamp(14px, 1.2vw, 16px);
      font-weight: 300;
      color: var(--muted);
      line-height: 1.7;
      max-width: 380px;
      margin-bottom: 52px;
      /* Sin border-left decorativo — minimalismo puro */
    }

/* ── BOTONES CTA — Bordes finos, sobriedad absoluta ──
       CAMBIO: eliminado border-radius generoso.
       Ángulos rectos — vocabulario industrial/arquitectónico.
    ── */
    .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.btn-primary {
      display: inline-flex; align-items: center; gap: 12px;
      font-family: var(--font-display);
      font-size: 11px; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase;
      color: #000;
      background: var(--orange);
      padding: 16px 32px;
      border: 1px solid var(--orange);
      /* Sin border-radius — forma industrial */
      transition: background .25s, color .25s, border-color .25s, transform .25s;
    }

.btn-primary:hover {
      background: transparent;
      color: var(--orange);
      transform: translateY(-1px);
    }

.btn-primary svg { width: 12px; height: 12px; flex-shrink: 0; }

.btn-ghost {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-display);
      font-size: 11px; font-weight: 400; letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,.4);
      background: transparent;
      padding: 15px 28px;
      border: 1px solid rgba(255,255,255,.12);
      transition: color .25s, border-color .25s;
    }

.btn-ghost:hover {
      color: var(--white);
      border-color: rgba(255,255,255,.3);
    }

/* ════ FONDO FULL-BLEED — Imagen ocupa todo el hero ════ */
    .hero-right {
      position: absolute;
      inset: 0;              /* 0 top / right / bottom / left */
      z-index: 0;            /* capa base, detrás de todo */
      overflow: hidden;
    }

/* ── IMAGEN FULL-BLEED ── */
    .hero-visual-ph {
      position: absolute; inset: 0;
      overflow: hidden;
    }

/* La imagen cubre toda la pantalla */
    .hero-visual-ph .hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.78;
      display: block;
    }

/* ── MÁSCARA IZQUIERDA — área de texto legible + velos top/bottom ── */
    .hero-visual-ph::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(
          90deg,
          rgba(11,12,16,1)    0%,
          rgba(11,12,16,.97)  18%,
          rgba(11,12,16,.80)  36%,
          rgba(11,12,16,.42)  55%,
          rgba(11,12,16,.10)  72%,
          rgba(11,12,16,0)    88%
        ),
        linear-gradient(
          180deg,
          rgba(11,12,16,.65)  0%,
          rgba(11,12,16,.18)  14%,
          transparent         32%,
          transparent         68%,
          rgba(11,12,16,.52)  86%,
          rgba(11,12,16,.88) 100%
        );
      pointer-events: none;
      z-index: 1;
    }

/* Elemento decorativo sobre el visual — línea de tensión diagonal */
    .hero-visual-accent {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(180deg,
        transparent 0%,
        rgba(245,166,35,.15) 30%,
        rgba(245,166,35,.3) 55%,
        rgba(245,166,35,.1) 80%,
        transparent 100%
      );
      z-index: 2;
    }

/* Etiqueta descriptiva del visual — integrada en la imagen */
    .hero-visual-label {
      position: absolute;
      bottom: 40px; right: 40px; z-index: 3;
      text-align: right;
    }

.hero-visual-label-text {
      font-family: var(--font-display);
      font-size: 9px; font-weight: 400; letter-spacing: 2.5px;
      text-transform: uppercase; color: rgba(255,255,255,.2);
      display: block;
    }

/* Indicador de placeholder (solo mientras no hay imagen real) */
    .hero-visual-ph-note {
      position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      z-index: 3;
      text-align: center;
      pointer-events: none;
    }

.hero-visual-ph-note span {
      font-family: var(--font-display);
      font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
      color: rgba(255,255,255,.1);
      border: 1px dashed rgba(255,255,255,.1);
      padding: 8px 16px; display: block;
    }

/* ════ MÉTRICAS — franja inferior superpuesta sobre imagen ════ */
    .hero-metrics {
      position: absolute;
      bottom: 0; left: 0;
      z-index: 5;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: clamp(520px, 52%, 780px);
      padding: 0 72px 36px;
      border-top: 1px solid rgba(255,255,255,.08);
      gap: 0;
      /* Fondo muy sutil para separar métricas de la imagen */
      background: linear-gradient(180deg, transparent 0%, rgba(11,12,16,.35) 100%);
    }

.hm-item {
      padding: 28px 24px 0 0;
    }

.hm-item + .hm-item {
      padding-left: 24px;
      border-left: 1px solid rgba(255,255,255,.06);
    }

.hm-value {
      font-family: var(--font-display);
      font-size: clamp(20px, 2.2vw, 30px);
      font-weight: 700; letter-spacing: -1px;
      color: var(--white); line-height: 1;
      margin-bottom: 5px;
    }

/* El acento naranja solo en el valor numérico — no en la etiqueta */
    .hm-value mark {
      background: none;
      color: var(--orange);
      font-weight: 700;
    }

.hm-label {
      font-family: var(--font-body);
      font-size: 10px; font-weight: 300;
      letter-spacing: .5px;
      color: rgba(160,160,160,.55);
      line-height: 1.45;
    }

/* ── Scroll indicator lateral ── */
    .scroll-cue {
      position: absolute; bottom: 40px; right: 48px; z-index: 5;
      display: flex; flex-direction: column; align-items: center; gap: 12px;
    }

.scroll-cue-line {
      width: 1px; height: 48px;
      background: linear-gradient(180deg, transparent, rgba(255,255,255,.15));
      overflow: hidden; position: relative;
    }

.scroll-cue-line::after {
      content: ''; position: absolute;
      left: 0; top: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(180deg, transparent, var(--orange));
      animation: scrollRun 2.4s ease-in-out infinite;
    }

@keyframes scrollRun { 0%{top:-100%} 60%{top:120%} 100%{top:120%} }

.scroll-cue-text {
      font-family: var(--font-display);
      font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
      color: rgba(255,255,255,.18);
      writing-mode: vertical-lr;
    }

/* Número de página — esquina superior derecha */
    .hero-page-num {
      position: absolute; top: 88px; right: 48px; z-index: 5;
      font-family: var(--font-display);
      font-size: 10px; font-weight: 300; letter-spacing: 3px;
      color: rgba(255,255,255,.12);
    }

/* ════════════════════════════════════════════════
       ANIMACIONES DE ENTRADA — elegantes, no tecnológicas
    ════════════════════════════════════════════════ */
    .hero-eyebrow,
    .hero-h1,
    .hero-rule,
    .hero-sub,
    .hero-actions {
      opacity: 0;
      transform: translateY(24px);
      animation: editorialReveal 1s cubic-bezier(.22,1,.36,1) forwards;
    }

.hero-eyebrow  { animation-delay: .2s; }

.hero-h1       { animation-delay: .38s; }

.hero-rule     { animation-delay: .54s; }

.hero-sub      { animation-delay: .64s; }

.hero-actions  { animation-delay: .76s; }

@keyframes editorialReveal {
      to { opacity: 1; transform: none; }
    }

.hero-metrics {
      opacity: 0;
      animation: editorialReveal 1s cubic-bezier(.22,1,.36,1) .95s forwards;
    }

/* Visual derecho — entrada diferida desde la derecha */
    .hero-right {
      opacity: 0;
      transform: translateX(20px);
      animation: visualReveal 1.4s cubic-bezier(.22,1,.36,1) .5s forwards;
    }

@keyframes visualReveal {
      to { opacity: 1; transform: none; }
    }

/* Scroll-cue fade-in tardío */
    .scroll-cue {
      opacity: 0;
      animation: editorialReveal 1s ease 1.4s forwards;
    }

/* ════════════════════════════════════════════════
       SECCIÓN 2 — VIDEO DRON
    ════════════════════════════════════════════════ */
    .s-video-wrap {
      position: relative;
      height: 250vh;
    }

.s-video-sticky {
      position: sticky; top: 0;
      height: 100vh;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }

.video-el {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
    }

.video-placeholder {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, #060e14 0%, #0a1520 50%, #060e14 100%);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 16px;
    }

.video-ph-icon {
      width: 72px; height: 72px;
      border: 1px solid rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: center;
    }

.video-ph-icon svg { width: 28px; height: 28px; color: rgba(255,255,255,.25); }

.video-ph-label {
      font-family: var(--font-display);
      font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
      color: rgba(255,255,255,.18); font-weight: 400;
    }

.video-placeholder::after {
      content: '[ VIDEO DRON — sustituir por <video> o embed Vimeo/YouTube ]';
      position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
      font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
      color: rgba(255,255,255,.12); font-weight: 400;
      white-space: nowrap; border: 1px dashed rgba(255,255,255,.1);
      padding: 6px 14px;
    }

.video-overlay {
      position: absolute; inset: 0; background: rgba(0,0,0,.5);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 40px; text-align: center;
    }

.video-title {
      font-family: var(--font-display);
      font-size: clamp(32px, 5vw, 72px);
      font-weight: 800; letter-spacing: -2px; line-height: 1;
      color: var(--white); margin-bottom: 16px;
      transition: opacity .5s, transform .5s;
    }

.video-sub {
      font-family: var(--font-body);
      font-size: clamp(14px, 1.5vw, 18px); font-weight: 300;
      color: rgba(255,255,255,.5); max-width: 500px;
      transition: opacity .5s, transform .5s;
    }

.video-cta-redirect {
      position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(16px);
      text-align: center; opacity: 0; pointer-events: none;
      transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
    }

.video-cta-redirect.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

.video-cta-redirect p {
      font-family: var(--font-display);
      font-size: 11px; color: rgba(255,255,255,.35);
      letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px;
    }

.vcta-btn {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--green); color: #fff;
      font-family: var(--font-display);
      font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
      padding: 16px 32px; border: none; cursor: pointer;
      transition: opacity .2s, transform .2s;
    }

.vcta-btn:hover { opacity: .88; transform: translateY(-1px); }

.vcta-btn svg { width: 12px; height: 12px; }

.video-progress {
      position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
      background: rgba(255,255,255,.08);
    }

.video-progress-bar { height: 100%; background: var(--orange); width: 0%; transition: width .1s linear; }

.video-scroll-hint {
      position: absolute; bottom: 20px; right: 40px;
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-display);
      font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
      color: rgba(255,255,255,.18);
    }

.scroll-line { width: 36px; height: 1px; background: rgba(255,255,255,.12); }

/* ════════════════════════════════════════════════
       SECCIÓN 3 — STATS
    ════════════════════════════════════════════════ */
    .s-stats {
      background: var(--bg-surface);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

.stats-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      max-width: 1400px; margin: 0 auto;
    }

.stat-cell {
      padding: 56px 44px;
      border-right: 1px solid var(--line);
      position: relative;
      transition: background .3s;
    }

.stat-cell:last-child { border-right: none; }

.stat-cell::before {
      content: '';
      position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px;
      background: var(--orange);
      transform: scaleY(0); transform-origin: bottom;
      transition: transform .35s cubic-bezier(.22,1,.36,1);
    }

.stat-cell:hover::before { transform: scaleY(1); }

.stat-cell:hover { background: rgba(245,166,35,.02); }

.stat-n {
      font-family: var(--font-display);
      font-size: clamp(44px, 5vw, 64px);
      font-weight: 900; letter-spacing: -2.5px; line-height: 1;
      color: var(--white); margin-bottom: 10px;
    }

.stat-n mark { background: none; color: var(--orange); }

.stat-l {
      font-family: var(--font-body);
      font-size: 12px; font-weight: 300;
      color: rgba(160,160,160,.6); line-height: 1.5;
    }

.stat-cell.counting .stat-n {
      animation: statPop .5s cubic-bezier(.34,1.56,.64,1);
    }

@keyframes statPop {
      0%   { transform: scale(.85); opacity: 0; }
      100% { transform: scale(1);   opacity: 1; }
    }

/* ════════════════════════════════════════════════
       SECCIÓN 4 — DIVISIONES
    ════════════════════════════════════════════════ */
    .s-div {
      padding: 100px 72px;
      max-width: 1400px; margin: 0 auto;
    }

.s-div-header {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 40px; align-items: end;
      margin-bottom: 80px;
    }

.label-line {
      display: flex; align-items: center; gap: 12px;
      font-family: var(--font-display);
      font-size: 10px; font-weight: 500; letter-spacing: 3px;
      text-transform: uppercase; color: var(--orange);
      margin-bottom: 20px;
    }

.s-div-title {
      font-family: var(--font-display);
      font-size: clamp(36px, 4.5vw, 62px);
      font-weight: 800; letter-spacing: -2px; line-height: .95;
      color: var(--white);
    }

.s-div-desc {
      font-family: var(--font-body);
      font-size: 15px; font-weight: 300;
      color: var(--muted); line-height: 1.75; max-width: 380px;
      align-self: end;
    }

.div-layout {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 2px;
    }

.div-right { display: grid; grid-template-rows: repeat(3, 1fr); gap: 2px; }

.dcard {
      position: relative;
      background: rgba(16,17,20,1);
      padding: 40px;
      display: flex; flex-direction: column;
      border: 1px solid var(--line);
      transition: background .3s, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
      overflow: hidden;
    }

.dcard:hover { background: #0e0f12; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.4); }

.dcard::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      transform: scaleX(0); transform-origin: left;
      transition: transform .4s ease;
    }

.dcard:hover::before { transform: scaleX(1); }

.dcard-g::before  { background: var(--green); }

.dcard-o::before  { background: var(--orange); }

.dcard-b::before  { background: var(--blue); }

.dcard-gr::before { background: var(--muted); }

.dcard-index {
      font-family: var(--font-display);
      font-size: 10px; font-weight: 500; letter-spacing: 2px;
      text-transform: uppercase; color: rgba(255,255,255,.2);
      margin-bottom: 40px;
    }

.dcard-icon-ph {
      width: 48px; height: 48px;
      border: 1px dashed rgba(255,255,255,.1);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 24px; flex-shrink: 0;
    }

.dcard.featured .dcard-icon-ph { width: 56px; height: 56px; }

.dcard-icon-ph span {
      font-size: 8px; letter-spacing: 1px; text-transform: uppercase;
      color: rgba(255,255,255,.15); text-align: center; line-height: 1.3;
    }

.dcard-division {
      font-family: var(--font-display);
      font-size: 9px; font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; margin-bottom: 12px;
    }

.dcard-g .dcard-division  { color: var(--green); }

.dcard-o .dcard-division  { color: var(--orange); }

.dcard-b .dcard-division  { color: var(--blue); }

.dcard-gr .dcard-division { color: var(--muted); }

.dcard-title {
      font-family: var(--font-display);
      font-weight: 700; letter-spacing: -.8px; line-height: 1.1;
      color: var(--white); margin-bottom: 14px;
    }

.dcard.featured .dcard-title { font-size: clamp(24px, 2.6vw, 36px); }

.dcard:not(.featured) .dcard-title { font-size: clamp(16px, 1.6vw, 22px); }

.dcard-body {
      font-family: var(--font-body);
      font-size: 14px; font-weight: 300; color: var(--muted);
      line-height: 1.7; margin-bottom: 0;
    }

.dcard.featured .dcard-body { font-size: 15px; max-width: 360px; margin-bottom: 28px; }

.dcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 36px; }

.dcard-tag {
      font-family: var(--font-body);
      font-size: 10px; font-weight: 300; color: rgba(240,240,240,.28);
      border: 1px solid rgba(255,255,255,.08); padding: 4px 10px;
    }

.dcard:hover .dcard-tag { border-color: rgba(255,255,255,.14); color: rgba(240,240,240,.45); transition: .3s; }

.dcard-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-display);
      font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
      text-transform: uppercase;
      transition: gap .2s; margin-top: auto;
    }

.dcard-link:hover { gap: 10px; }

.dcard-link svg { width: 11px; height: 11px; }

.dcard-g .dcard-link  { color: var(--green); }

.dcard-o .dcard-link  { color: var(--orange); }

.dcard-b .dcard-link  { color: var(--blue); }

.dcard-gr .dcard-link { color: var(--muted); }

.dcard.featured { min-height: 560px; }

.dcard:not(.featured) { min-height: 180px; }

/* ════════════════════════════════════════════════
       SECCIÓN 5 — CTA
    ════════════════════════════════════════════════ */
    .s-cta {
      background: var(--bg-surface);
      border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
      padding: 100px 72px; text-align: center;
    }

.s-cta-inner { max-width: 760px; margin: 0 auto; }

.s-cta h2 {
      font-family: var(--font-display);
      font-size: clamp(40px, 6vw, 80px);
      font-weight: 800; letter-spacing: -3px; line-height: .95;
      color: var(--white); margin-bottom: 24px;
    }

.s-cta h2 em { font-style: normal; color: var(--orange); }

.s-cta p {
      font-family: var(--font-body);
      font-size: 16px; font-weight: 300; color: var(--muted);
      line-height: 1.7; margin-bottom: 48px;
    }

.s-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Reutilizamos btn-primary y btn-ghost globales */
    .s-cta .btn-primary { font-size: 11px; }

.s-cta .btn-ghost   { font-size: 11px; }

.savings-band {
      display: grid; grid-template-columns: repeat(4, 1fr);
      margin-top: 80px;
      border: 1px solid var(--line);
    }

.sav {
      padding: 36px 24px; text-align: center;
      border-right: 1px solid var(--line);
    }

.sav:last-child { border-right: none; }

.sav-v {
      font-family: var(--font-display);
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 800; letter-spacing: -1.5px;
      color: var(--green); line-height: 1;
    }

.sav-l {
      font-family: var(--font-body);
      font-size: 11px; font-weight: 300; color: var(--muted); margin-top: 6px; line-height: 1.4;
    }

/* ════════════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════════════ */
    footer {
      background: #080910;
      border-top: 1px solid var(--line);
      padding: 80px 72px 40px;
    }

.footer-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 60px; margin-bottom: 60px;
    }

.f-brand p {
      font-family: var(--font-body);
      font-size: 13px; font-weight: 300; color: rgba(160,160,160,.6);
      line-height: 1.7; margin-top: 20px; max-width: 280px;
    }

.f-col h4 {
      font-family: var(--font-display);
      font-size: 9px; font-weight: 600; letter-spacing: 3px;
      text-transform: uppercase; color: rgba(255,255,255,.25);
      margin-bottom: 20px;
    }

.f-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.f-col ul a {
      font-family: var(--font-body);
      font-size: 13px; font-weight: 300; color: rgba(160,160,160,.6);
      transition: color .2s;
      position: relative; display: inline-block;
    }

.f-col ul a::after {
      content: ''; position: absolute; bottom: -1px; left: 0;
      width: 0; height: 1px; background: currentColor;
      transition: width .3s cubic-bezier(.22,1,.36,1);
    }

.f-col ul a:hover::after { width: 100%; }

.f-col ul a:hover { color: var(--white); }

.f-contact {
      font-family: var(--font-body);
      font-size: 13px; font-weight: 300; color: rgba(160,160,160,.6);
      line-height: 1.8;
    }

.f-contact a { color: rgba(160,160,160,.6); transition: color .2s; }

.f-contact a:hover { color: var(--white); }

.footer-bottom {
      display: flex; justify-content: space-between; align-items: center;
      border-top: 1px solid var(--line); padding-top: 28px;
    }

.footer-bottom p {
      font-family: var(--font-body);
      font-size: 11px; font-weight: 300; color: rgba(160,160,160,.35); letter-spacing: .5px;
    }

.footer-legal {
      display: flex; gap: 28px;
    }

.footer-legal a {
      font-family: var(--font-body);
      font-size: 11px; font-weight: 300; color: rgba(160,160,160,.35);
      letter-spacing: .5px; transition: color .2s;
    }

.footer-legal a:hover { color: var(--muted); }

/* signpost — gestionado por shared.css */


    /* ════════════════════════════════════════════════
       REVEAL BASE
    ════════════════════════════════════════════════ */
    .r {
      opacity: 0; transform: translateY(28px);
      transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
    }

.r.in { opacity: 1; transform: none; }

.d1 { transition-delay: .12s; }

.d2 { transition-delay: .24s; }

.d3 { transition-delay: .36s; }

/* ════════════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════════════ */
    @media (max-width: 1100px) {
      /* En tablet: imagen visible pero texto ocupa más ancho */
      .hero-left { width: 90%; padding: 60px 32px 160px 32px; }
      .hero-metrics { width: 90%; padding: 0 32px 36px; }
      .s-div-header { grid-template-columns: 1fr; }
      .s-div-desc { max-width: 100%; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    }

@media (max-width: 900px) {
      .nav { padding: 0 24px; }
      .nav-links, .nav-cta { display: none; }
      .ham { display: flex; }
      .hero-left { width: 100%; padding: 48px 28px 160px; }
      .hero-metrics { width: 100%; padding: 0 28px 36px; grid-template-columns: repeat(2,1fr); }
      .hm-item:nth-child(odd) { border-left: none; padding-left: 0; }
      .hm-item:nth-child(2), .hm-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,.06); padding-top: 20px; margin-top: 16px; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .stat-cell { border-right: none; border-bottom: 1px solid var(--line); padding: 36px 28px; }
      .stat-cell:nth-child(odd) { border-right: 1px solid var(--line); }
      .stat-cell:nth-child(3), .stat-cell:last-child { border-bottom: none; }
      .s-div { padding: 80px 24px; }
      .div-layout { grid-template-columns: 1fr; }
      .dcard.featured { min-height: auto; }
      .s-cta, .s-div { padding-left: 24px; padding-right: 24px; }
      .savings-band { grid-template-columns: 1fr 1fr; }
      .sav:nth-child(2) { border-right: none; }
      .sav:nth-child(1), .sav:nth-child(2) { border-bottom: 1px solid var(--line); }
      footer { padding: 60px 24px 32px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    }

@media (max-width: 560px) {
      .hero-h1 { letter-spacing: -2px; }
      .hero-metrics { grid-template-columns: 1fr 1fr; }
      .savings-band { grid-template-columns: 1fr; }
      .sav { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
      .sav:last-child { border-bottom: none !important; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
    }

/* ── Reduce motion ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }
    }


/* ══════════════════════════════════════════════════════════
   BLOQUE DE VÍDEO — estado sin vídeo
   AÑADIDO, no forma parte de la maqueta original.

   .video-placeholder y .video-overlay son ambos position:absolute
   inset:0 y ambos centran su contenido con flex. Mientras no haya
   vídeo, el icono y el rótulo del placeholder aterrizan exactamente
   encima del titular "Nuestro trabajo, desde las alturas", con sólo
   un velo negro al 50% entre medias. Se leen los dos a la vez y el
   bloque parece roto.

   Con .no-video el placeholder se queda como lo que es: un fondo.
   Se conserva el degradado y el rótulo punteado de arriba, que es el
   que le dice al cliente que ahí va un vídeo. En cuanto suba uno por
   el panel, la clase desaparece y todo vuelve a su sitio.
══════════════════════════════════════════════════════════ */
.s-video-sticky.no-video .video-ph-icon,
.s-video-sticky.no-video .video-ph-label {
  display: none;
}

/* El velo sobra si debajo sólo hay un degradado: quitarlo devuelve
   contraste al titular. */
.s-video-sticky.no-video .video-overlay {
  background: rgba(0, 0, 0, .18);
}