/* ============================================================ */
/*  CONSULTORÍA CHÁVEZ CARMONA · Sitio v8 "Cinematic"           */
/*  Dark cinematográfico on-brand · grafito + azul + esmeralda  */
/*  Paleta/tipografía: 08-Marketing/CCC-Matriz-Branding/snippets */
/* ============================================================ */

:root {
  /* ── Primarios de marca (heredados del logo, NO negociables) ── */
  --azul-ccc:        #1FA3DA;
  --azul-hondo:      #1689B8;
  --verde-lima:      #8DC63F;
  --verde-esmeralda: #2DAA3E;
  --esmeralda-claro: #3ED155;

  /* ── Neutros. Grafito es el ÚNICO fondo oscuro permitido ── */
  --grafito:         #1F2937;
  --grafito-hondo:   #151b24;   /* derivada más profunda p/ hero — NO negro puro */
  --grafito-noche:   #10151c;   /* fondo base del sitio dark */
  --gris-medio:      #6B7280;
  --gris-claro:      #E5E7EB;
  --fondo-crema:     #F9FAFB;
  --blanco:          #FFFFFF;

  /* ── Alias sobre fondo oscuro ── */
  --texto-alto:      #F4F7FA;             /* titulares sobre oscuro */
  --texto-medio:     rgba(244,247,250,0.72);
  --texto-suave:     rgba(244,247,250,0.66);
  --linea:           rgba(244,247,250,0.10);
  --linea-fuerte:    rgba(244,247,250,0.18);
  --superficie:      #1a222d;             /* cards sobre el fondo noche */
  --superficie-alta: #212c39;

  /* ── Tipografía ── */
  --f-display: 'Space Grotesk', 'SF Pro Display', 'Segoe UI', Arial, sans-serif;
  --f-body:    'Inter', 'SF Pro Display', 'Segoe UI', Arial, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  /* ── Ritmo y easing ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0.05, 0.36, 1);
  --wrap:     1200px;
  --gutter:   clamp(20px, 5vw, 64px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  font-family: var(--f-body);
  background: var(--grafito-noche);
  color: var(--texto-medio);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--verde-esmeralda); color: var(--blanco); }

/* ============================================================ */
/*  LAYOUT                                                       */
/* ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: clamp(80px, 12vw, 160px); }
.section--tight { padding-block: clamp(56px, 8vw, 100px); }

/* ============================================================ */
/*  TIPOGRAFÍA                                                   */
/* ============================================================ */
.eyebrow {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul-ccc);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow--muted { color: var(--texto-suave); }
.eyebrow .idx { color: var(--verde-lima); }

h1, h2, h3, h4 { font-family: var(--f-display); color: var(--texto-alto); line-height: 1.08; font-weight: 600; }

.display {
  font-weight: 700;
  font-size: clamp(48px, 9.5vw, 148px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.h-sec {
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.02em;
}
.h-sub {
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.01em;
}
.lede {
  font-family: var(--f-body);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--texto-medio);
  max-width: 62ch;
}
.muted { color: var(--texto-suave); }

/* gradiente de marca sobre texto (azul→esmeralda, como el hero "al primer kWh") */
.grad {
  background: linear-gradient(105deg, var(--azul-ccc) 0%, var(--verde-lima) 55%, var(--verde-esmeralda) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================ */
/*  BOTONES                                                      */
/* ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-body); font-weight: 600;
  font-size: clamp(15px, 1.1vw, 16px);
  padding: 15px 26px; border-radius: 999px;
  transition: transform .35s var(--ease-out), background .3s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.btn svg { transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary {
  background: var(--verde-esmeralda); color: var(--blanco);
  box-shadow: 0 8px 30px -8px rgba(45,170,62,0.55);
}
.btn--primary:hover { transform: translateY(-2px); background: var(--esmeralda-claro); box-shadow: 0 14px 40px -10px rgba(45,170,62,0.7); }
.btn--ghost {
  background: transparent; color: var(--texto-alto);
  border: 1px solid var(--linea-fuerte);
}
.btn--ghost:hover { border-color: var(--azul-ccc); color: var(--blanco); transform: translateY(-2px); }

/* ============================================================ */
/*  NAV                                                          */
/* ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 18px;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(16,21,28,0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--linea);
  padding-block: 12px;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--f-display); font-weight: 600; font-size: 16px;
  letter-spacing: 0.01em; color: var(--texto-alto);
}
.brand__sub {
  font-family: var(--f-mono); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-suave);
  margin-top: 3px;
}

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links > a, .nav-item > .nav-top {
  font-size: 15px; font-weight: 500; color: var(--texto-medio);
  position: relative; padding-block: 4px; transition: color .25s ease;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; font-family: inherit;
}
.nav-links > a::after, .nav-item > .nav-top::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--verde-lima); transition: width .3s var(--ease-out);
}
.nav-links > a:hover, .nav-item:hover > .nav-top, .nav-item:focus-within > .nav-top { color: var(--texto-alto); }
.nav-links > a:hover::after { width: 100%; }
.nav-top .chev { width: 10px; height: 10px; transition: transform .3s var(--ease-out); }
.nav-item:hover .nav-top .chev, .nav-item:focus-within .nav-top .chev { transform: rotate(180deg); }

/* dropdown mega-menu */
.nav-item { position: relative; }
.nav-drop {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 300px; padding: 10px; border-radius: 16px;
  background: rgba(20,27,36,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--linea-fuerte); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s;
  display: grid; gap: 2px;
}
.nav-drop.wide { min-width: 380px; grid-template-columns: 1fr 1fr; }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* puente hover */
.nav-drop a { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 10px; transition: background .2s ease; }
.nav-drop a:hover { background: rgba(31,163,218,0.10); }
.nav-drop .di-t { font-size: 14.5px; font-weight: 500; color: var(--texto-alto); }
.nav-drop .di-s { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--texto-suave); }
.nav-drop .di-all { grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid var(--linea); border-radius: 0 0 10px 10px; }
.nav-drop .di-all .di-t { color: var(--verde-lima); }

/* submenús en el menú móvil */
.mm-group { margin-block: 4px; }
.mm-group > .mm-h { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); padding: 6px 0; }
.mobile-menu .mm-sub { font-size: clamp(18px,4.5vw,24px) !important; font-weight: 500 !important; padding-block: 5px !important; color: var(--texto-medio) !important; }

.nav-cta { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14.5px; color: var(--blanco);
  background: var(--verde-esmeralda); padding: 10px 20px; border-radius: 999px;
  transition: transform .3s var(--ease-out), background .3s ease; }
.nav-cta:hover { transform: translateY(-2px); background: var(--esmeralda-claro); }
.nav-cta svg { transition: transform .3s var(--ease-out); }
.nav-cta:hover svg { transform: translateX(3px); }

.hamburger { display: none; width: 40px; height: 40px; position: relative; }
.hamburger span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--texto-alto); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s ease; }
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 20px; }
.hamburger span:nth-child(3) { top: 26px; }
body.menu-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* menú móvil */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(16,21,28,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: var(--gutter);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--f-display); font-size: clamp(30px, 8vw, 48px); font-weight: 600;
  color: var(--texto-alto); padding-block: 8px; opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .2s ease;
}
body.menu-open .mobile-menu a { opacity: 1; transform: none; }
.mobile-menu a:hover { color: var(--verde-lima); }
.mobile-menu a:nth-child(1){transition-delay:.06s}.mobile-menu a:nth-child(2){transition-delay:.1s}
.mobile-menu a:nth-child(3){transition-delay:.14s}.mobile-menu a:nth-child(4){transition-delay:.18s}
.mobile-menu a:nth-child(5){transition-delay:.22s}.mobile-menu a:nth-child(6){transition-delay:.26s}
.mobile-menu .mm-cta { color: var(--esmeralda-claro); }

/* ============================================================ */
/*  HERO                                                         */
/* ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-bottom: clamp(72px, 11vh, 128px);
  overflow: hidden;
}
/* capa de fondo (canvas o video) — FIJA al viewport; el contenido la cubre al scrollear */
.hero__bg {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 70% 10%, #1c2836 0%, var(--grafito-hondo) 45%, var(--grafito-noche) 100%);
}
/* contenido bajo el hero: sube por encima del fondo fijo */
.page-body { position: relative; z-index: 2; background: var(--grafito-noche); }
.hero__bg canvas, .hero__bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__bg video { opacity: 0; transition: opacity 1s ease; }
.hero__bg.has-video video { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--grafito-noche) 2%, transparent 42%),
    linear-gradient(to right, rgba(16,21,28,0.6) 0%, transparent 60%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: clamp(11px,1.1vw,13px); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-medio);
  padding: 8px 16px; border: 1px solid var(--linea-fuerte); border-radius: 999px;
  margin-bottom: 28px; background: rgba(26,34,45,0.4);
}
.hero__eyebrow .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--verde-esmeralda);
  box-shadow: 0 0 0 0 rgba(45,170,62,0.6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(45,170,62,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(45,170,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,170,62,0); }
}
.hero__title { margin-bottom: 30px; }
.hero__title .l1 { display: block; color: var(--texto-alto); }
.hero__title .l2 { display: block; }
.hero__sub { max-width: 54ch; margin-bottom: 40px; }
.hero__sub strong { color: var(--texto-alto); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* tira de credenciales al pie del hero */
.hero__creds {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(28px,3vw,48px); row-gap: 24px;
  margin-top: clamp(48px, 7vh, 84px); padding-top: 28px;
  border-top: 1px solid var(--linea);
}
.cred__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px,3vw,40px); color: var(--texto-alto); line-height: 1; }
.cred__lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); margin-top: 8px; display: block; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--texto-suave); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint .bar { width: 1px; height: 26px; background: linear-gradient(var(--verde-lima), transparent); animation: scrolldown 2s var(--ease-io) infinite; transform-origin: top; }
@keyframes scrolldown { 0%{transform:scaleY(0);opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* ============================================================ */
/*  TIRA ANIMADA DE SERVICIOS / NORMAS (marquee serif)          */
/* ============================================================ */
.marquee { position: relative; z-index: 2; background: var(--grafito-hondo); border-block: 1px solid var(--linea); overflow: hidden; padding: 20px 0; }
.marquee__track { display: flex; align-items: center; width: max-content; animation: marq 68s linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(20px, 2.4vw, 32px); color: var(--texto-alto); white-space: nowrap; }
.marquee__item.accent { font-style: italic; color: var(--verde-lima); }
.marquee__dot { color: var(--verde-esmeralda); padding: 0 clamp(18px,2vw,30px); font-size: 16px; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================ */
/*  CINTA DE FOTOS DE OBRA (marquee horizontal de imágenes)     */
/* ============================================================ */
.cinta { position: relative; z-index: 2; background: var(--grafito-hondo); padding: clamp(56px,7vw,88px) 0; overflow: hidden; border-block: 1px solid var(--linea); }
.cinta__head { margin-bottom: clamp(28px,3.5vw,44px); }
.cinta__track { display: flex; gap: clamp(14px,1.6vw,20px); width: max-content; animation: cinta 70s linear infinite; will-change: transform; }
.cinta:hover .cinta__track { animation-play-state: paused; }
.cinta__card { position: relative; width: clamp(250px,25vw,330px); aspect-ratio: 3/3.7; border-radius: 14px; overflow: hidden; flex: none; border: 1px solid var(--linea); background: var(--superficie); }
.cinta__card img { width: 100%; height: 100%; object-fit: cover; }
.cinta__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,21,28,.96) 0%, rgba(16,21,28,.2) 42%, transparent 62%); }
.cinta__tag { position: absolute; left: 14px; top: 14px; z-index: 2; font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-alto); background: rgba(16,21,28,.72); padding: 6px 11px; border-radius: 8px; border: 1px solid var(--linea-fuerte); backdrop-filter: blur(4px); }
.cinta__cap { position: absolute; left: 16px; right: 16px; bottom: 15px; z-index: 2; }
.cinta__cap .t { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--texto-alto); line-height: 1.2; }
.cinta__cap .s { font-size: 12.5px; color: var(--texto-medio); margin-top: 3px; }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track, .cinta__track { animation: none; } .cinta__track { flex-wrap: nowrap; overflow-x: auto; } }
/* tarjeta de VIDEO dentro de la cinta */
.cinta__card--video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cinta__card--video .vbadge { position: absolute; right: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-alto); background: rgba(45,170,62,.85); padding: 5px 9px; border-radius: 8px; }
.cinta__card--video .vbadge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* cinta de CASOS anonimizados (ticker de texto) */
.marquee--cases { background: var(--grafito-noche); padding: 18px 0; margin-top: clamp(24px,4vw,48px); }
.marquee--cases .marquee__item { font-family: var(--f-body); font-weight: 500; font-size: clamp(15px,1.6vw,20px); color: var(--texto-medio); font-style: normal; }
.marquee--cases .marquee__item b { color: var(--texto-alto); font-weight: 600; }
.marquee--cases .marquee__dot { color: var(--verde-lima); font-size: 13px; }
.marquee--cases .marquee__track { animation-duration: 55s; }
.manifiesto__title .muted { color: rgba(244,247,250,0.62); }
.kpi-unit { font-size: clamp(20px,2.4vw,34px); color: var(--verde-lima); }
.cred__num--word { font-size: clamp(15px,1.4vw,18px); font-weight: 500; color: var(--texto-medio); }

/* ============================================================ */
/*  MANIFIESTO                                                   */
/* ============================================================ */
.manifiesto { border-top: 1px solid var(--linea); }
.manifiesto__title {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(28px, 4.4vw, 60px); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--texto-alto); max-width: 20ch; margin-bottom: 40px;
}
.manifiesto__title .reveal-word { display: inline-block; }
.manifiesto__body { max-width: 60ch; margin-bottom: 24px; }
.manifiesto__author { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--azul-ccc); }

/* ============================================================ */
/*  SERVICIOS — lista editorial                                 */
/* ============================================================ */
.sec-head { max-width: 820px; margin-bottom: clamp(48px, 6vw, 80px); }
.sec-head .h-sec { margin-block: 18px; }

.svc-list { border-top: 1px solid var(--linea); }
.svc {
  display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: clamp(16px,3vw,48px);
  padding-block: clamp(26px, 3.4vw, 42px);
  border-bottom: 1px solid var(--linea);
  position: relative; transition: padding-inline .45s var(--ease-out);
}
.svc__idx { font-family: var(--f-mono); font-size: 13px; color: var(--verde-lima); letter-spacing: 0.05em; }
.svc__main { min-width: 0; }
.svc__name {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 44px);
  letter-spacing: -0.02em; color: var(--texto-alto); line-height: 1.05;
  transition: color .4s var(--ease-out), transform .5s var(--ease-out);
}
.svc__tags { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); margin-top: 12px; display: block; }
.svc__desc {
  font-size: 15.5px; line-height: 1.55; color: var(--texto-medio); max-width: 60ch;
  margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease-out), opacity .4s ease, margin-top .5s var(--ease-out);
}
.svc__arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--linea-fuerte);
  display: grid; place-items: center; color: var(--texto-medio);
  transition: background .4s var(--ease-out), color .4s ease, border-color .4s ease, transform .5s var(--ease-out);
  flex: none;
}
.svc:hover { background: linear-gradient(90deg, rgba(31,163,218,0.05), transparent 60%); }
.svc:hover .svc__name { color: var(--texto-alto); transform: translateX(8px); }
.svc:hover .svc__desc { max-height: 120px; opacity: 1; margin-top: 16px; }
.svc:hover .svc__arrow { background: var(--verde-esmeralda); border-color: var(--verde-esmeralda); color: var(--blanco); transform: rotate(-45deg); }

/* ============================================================ */
/*  PORTFOLIO — bento con parallax                              */
/* ============================================================ */
.portfolio { background: var(--grafito-hondo); border-block: 1px solid var(--linea); }
.bento {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 220px); gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(40px, 5vw, 64px);
}
.tile {
  position: relative; overflow: hidden; border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--linea);
}
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08); transition: transform 1.2s var(--ease-out);
  will-change: transform;
}
.tile:hover img { transform: scale(1.14); }
.tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,21,28,0.92) 0%, rgba(16,21,28,0.15) 45%, transparent 70%);
}
.tile__meta { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(14px,1.5vw,22px); }
.tile__tag { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-lima); }
.tile__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(15px,1.4vw,19px); color: var(--texto-alto); margin-top: 6px; line-height: 1.15; }
.tile__loc { font-size: 12.5px; color: var(--texto-suave); margin-top: 5px; }

/* spans del bento (12 col) */
.t-a { grid-column: span 5; grid-row: span 2; }
.t-b { grid-column: span 4; grid-row: span 1; }
.t-c { grid-column: span 3; grid-row: span 1; }
.t-d { grid-column: span 4; grid-row: span 2; }
.t-e { grid-column: span 3; grid-row: span 1; }
.t-f { grid-column: span 5; grid-row: span 1; }
.t-g { grid-column: span 3; grid-row: span 1; }
.t-h { grid-column: span 4; grid-row: span 1; }

/* ============================================================ */
/*  PROCESO — pasos pinned                                      */
/* ============================================================ */
.proceso { position: relative; }
.proc-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.proc-sticky { position: sticky; top: 18vh; }
.proc-count { font-family: var(--f-display); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.proc-count .cur { font-size: clamp(80px, 12vw, 180px); color: var(--azul-ccc); }
.proc-count .tot { font-size: clamp(28px, 4vw, 52px); color: var(--texto-suave); }
.proc-progress { height: 2px; background: var(--linea); margin-top: 30px; border-radius: 2px; overflow: hidden; }
.proc-progress i { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--azul-ccc), var(--verde-esmeralda)); transition: width .5s var(--ease-out); }
.proc-steps { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 40px); }
.proc-step {
  padding: clamp(24px,3vw,38px); border-radius: 16px;
  background: var(--superficie); border: 1px solid var(--linea);
  transition: opacity .5s ease, transform .5s var(--ease-out), border-color .4s ease;
  opacity: 0.4; transform: translateY(6px);
}
.proc-step.is-active { opacity: 1; transform: none; border-color: var(--linea-fuerte); }
.proc-step__k { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-lima); }
.proc-step h3 { font-size: clamp(21px,2.4vw,30px); margin-block: 12px 12px; color: var(--texto-alto); }
.proc-step p { font-size: 15.5px; line-height: 1.6; color: var(--texto-medio); }

/* ============================================================ */
/*  KPIs                                                        */
/* ============================================================ */
.kpis { background: var(--grafito-noche); border-block: 1px solid var(--linea); padding-block: clamp(72px,9vw,120px); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,3vw,40px); }
.kpi { border-top: 2px solid var(--linea); padding-top: 24px; }
.kpi__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(48px,7vw,96px); line-height: 1; letter-spacing: -0.03em; color: var(--esmeralda-claro); white-space: nowrap; }
.kpi__num .suf { color: var(--verde-lima); }
.kpi__lbl { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); margin-top: 14px; display: block; }

/* ============================================================ */
/*  SECTORES                                                    */
/* ============================================================ */
.sect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.sect { background: var(--grafito-noche); padding: clamp(24px,3vw,40px); display: flex; align-items: baseline; gap: 16px; transition: background .4s ease; }
.sect:hover { background: var(--superficie); }
.sect span { font-family: var(--f-mono); font-size: 13px; color: var(--verde-lima); }
.sect p { font-family: var(--f-display); font-weight: 500; font-size: clamp(17px,1.8vw,22px); color: var(--texto-alto); }

/* ============================================================ */
/*  COBERTURA                                                   */
/* ============================================================ */
.cob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.5vw,32px); }
.cob {
  padding: clamp(28px,3.5vw,48px); border-radius: 18px;
  background: var(--superficie); border: 1px solid var(--linea); position: relative; overflow: hidden;
}
.cob::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--azul-ccc), var(--verde-esmeralda)); }
.cob__tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde-lima); }
.cob h3 { font-size: clamp(24px,2.8vw,34px); margin-block: 14px 18px; color: var(--texto-alto); }
.cob__addr { font-size: 15px; line-height: 1.6; color: var(--texto-medio); margin-bottom: 16px; }
.cob__cities { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.9; color: var(--texto-suave); }

/* ============================================================ */
/*  MAPA / UBICACIÓN                                            */
/* ============================================================ */
.mapa { margin-top: clamp(28px,3.5vw,44px); border-radius: 18px; overflow: hidden; border: 1px solid var(--linea-fuerte); position: relative; box-shadow: 0 20px 50px -24px rgba(0,0,0,0.6); }
.mapa iframe { width: 100%; height: clamp(300px, 40vw, 440px); border: 0; display: block; filter: grayscale(0.25) contrast(1.02) brightness(0.92); }
.mapa__tag { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-alto); padding: 8px 14px; border-radius: 999px; background: rgba(20,27,36,0.9); border: 1px solid var(--linea-fuerte); backdrop-filter: blur(6px); }
.mapa__tag .pin { width: 12px; height: 12px; color: var(--verde-esmeralda); }
.mapa__link { position: absolute; right: 16px; bottom: 16px; z-index: 2; font-family: var(--f-body); font-weight: 600; font-size: 13px; color: var(--blanco); padding: 9px 16px; border-radius: 999px; background: var(--verde-esmeralda); }
.mapa__link:hover { background: var(--esmeralda-claro); }

/* ============================================================ */
/*  FAQ                                                         */
/* ============================================================ */
.faq-list { border-top: 1px solid var(--linea); max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--linea); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: clamp(20px,2.4vw,28px); text-align: left;
  font-family: var(--f-display); font-weight: 500; font-size: clamp(17px,1.9vw,22px); color: var(--texto-alto);
}
.faq-q .ic { flex: none; width: 30px; height: 30px; position: relative; }
.faq-q .ic::before, .faq-q .ic::after { content: ''; position: absolute; background: var(--azul-ccc); border-radius: 2px; transition: transform .35s var(--ease-out); }
.faq-q .ic::before { top: 14px; left: 6px; right: 6px; height: 2px; }
.faq-q .ic::after { left: 14px; top: 6px; bottom: 6px; width: 2px; }
.faq-item.open .faq-q .ic::after { transform: rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease-io); }
.faq-a p { padding-bottom: clamp(20px,2.4vw,28px); font-size: 15.5px; line-height: 1.65; color: var(--texto-medio); max-width: 70ch; }

/* ============================================================ */
/*  CTA FINAL                                                   */
/* ============================================================ */
.cta-final { position: relative; overflow: hidden; text-align: center; }
.cta-final__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 120% at 50% 120%, #1c3628 0%, var(--grafito-hondo) 55%, var(--grafito-noche) 100%); }
.cta-final__bg canvas, .cta-final__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.cta-final__inner { position: relative; z-index: 2; }
.cta-final .h-sec { margin-block: 20px; max-width: 18ch; margin-inline: auto; }
.cta-final .lede { margin-inline: auto; margin-bottom: 40px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================================================ */
/*  FOOTER                                                      */
/* ============================================================ */
.footer { position: relative; z-index: 2; background: var(--grafito-hondo); border-top: 1px solid var(--linea); padding-top: clamp(56px,7vw,88px); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,56px); }
.foot-brand .brand { margin-bottom: 20px; }
.foot-tag { font-size: 14.5px; line-height: 1.6; color: var(--texto-medio); max-width: 34ch; margin-bottom: 18px; }
.foot-promesa { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--azul-ccc); }
.foot-col h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); font-weight: 500; margin-bottom: 18px; }
.foot-col ul { display: flex; flex-direction: column; gap: 12px; }
.foot-col a, .foot-col li { font-size: 14.5px; color: var(--texto-medio); transition: color .25s ease; line-height: 1.5; }
.foot-col a:hover { color: var(--verde-lima); }
.foot-social { display: flex; gap: 10px; margin-top: 20px; }
.foot-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linea-fuerte); display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; color: var(--texto-medio); transition: all .3s ease; }
.foot-social a:hover { border-color: var(--verde-esmeralda); color: var(--verde-esmeralda); transform: translateY(-2px); }
.foot-legal { border-top: 1px solid var(--linea); margin-top: clamp(48px,6vw,72px); padding-block: 26px; }
.foot-legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.foot-legal p, .foot-legal a { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--texto-suave); }
.foot-legal a:hover { color: var(--verde-lima); }

/* WhatsApp flotante */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--verde-esmeralda); color: var(--blanco);
  display: grid; place-items: center;
  box-shadow: 0 12px 34px -8px rgba(45,170,62,0.6);
  transition: transform .3s var(--ease-out);
}
.wa-float:hover { transform: scale(1.08) translateY(-2px); }

/* ============================================================ */
/*  REVEAL (animación de entrada al scroll)                     */
/* ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal-stagger].in > * { opacity: 1; transform: none; }

/* ============================================================ */
/*  PÁGINAS INTERNAS (servicios, portfolio, contacto, blog)     */
/* ============================================================ */
.subhero { padding-top: clamp(130px, 18vh, 200px); padding-bottom: clamp(48px,6vw,80px); position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); }
.subhero__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 120% at 80% -10%, #1c2836, var(--grafito-noche) 60%); }
.subhero .wrap { position: relative; z-index: 1; }
.subhero__title { font-size: clamp(40px, 7vw, 92px); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; margin-block: 20px 24px; color: var(--texto-alt, var(--texto-alto)); }
.breadcrumb { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--texto-suave); }
.breadcrumb a:hover { color: var(--verde-lima); }
.breadcrumb .sep { margin-inline: 8px; color: var(--linea-fuerte); }

/* kicker (eyebrow legacy en páginas internas) */
.kicker { font-family: var(--f-mono); font-size: clamp(11px,1vw,13px); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul-ccc); margin-bottom: 16px; }

/* chips de la subhero */
.page-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--texto-medio); padding: 8px 15px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: rgba(26,34,45,0.5); }

/* content-grid: label a la izquierda, contenido a la derecha (páginas de servicio) */
.content-block { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--linea); }
.content-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px,5vw,72px); align-items: start; }
.content-grid > div:first-child { position: sticky; top: 110px; }
.content-grid h2 { font-size: clamp(24px,3vw,38px); color: var(--texto-alto); margin-bottom: 16px; letter-spacing: -0.01em; }
.content-grid h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(18px,2vw,23px); color: var(--texto-alto); margin-block: 28px 10px; }
.content-grid h3:first-child { margin-top: 0; }
.content-grid p { font-size: 16.5px; line-height: 1.7; color: var(--texto-medio); margin-bottom: 14px; }
.content-grid > div:last-child > ul { display: flex; flex-direction: column; gap: 13px; margin-block: 6px 8px; }
.content-grid > div:last-child > ul > li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.6; color: var(--texto-medio); }
.content-grid > div:last-child > ul > li::before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 4px; background: rgba(45,170,62,0.14); border: 1px solid var(--verde-esmeralda); }
.content-grid > div:last-child > ul > li::after { content: ''; position: absolute; left: 5px; top: 11px; width: 5px; height: 8px; border-right: 2px solid var(--esmeralda-claro); border-bottom: 2px solid var(--esmeralda-claro); transform: rotate(45deg); }
.content-grid strong { color: var(--texto-alto); font-weight: 600; }
.deliverables { margin-top: 28px; padding: 22px 24px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--azul-ccc); }
.deliverables h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde-lima); font-weight: 500; margin-bottom: 10px; }
.deliverables p { font-size: 15px; line-height: 1.6; color: var(--texto-medio); margin: 0; }

/* CTA band (páginas internas, sin canvas) */
.cta-band { text-align: center; padding-block: clamp(72px,10vw,120px); border-top: 1px solid var(--linea); background: radial-gradient(90% 130% at 50% 130%, rgba(45,170,62,0.10), var(--grafito-noche) 60%); }
.cta-band .cta-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px,4.5vw,52px); color: var(--texto-alto); margin-block: 18px; letter-spacing: -0.02em; }
.cta-band .cta-sub { font-size: clamp(16px,1.5vw,19px); color: var(--texto-medio); margin-bottom: 36px; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (max-width: 880px) {
  .content-grid { grid-template-columns: 1fr; gap: 20px; }
  .content-grid > div:first-child { position: relative; top: 0; }
}

.prose { max-width: 760px; }
.prose h2 { font-size: clamp(26px,3.4vw,40px); margin-block: 48px 20px; color: var(--texto-alto); }
.prose h3 { font-size: clamp(20px,2.4vw,26px); margin-block: 32px 14px; color: var(--texto-alto); }
.prose p { font-size: 16.5px; line-height: 1.7; color: var(--texto-medio); margin-bottom: 18px; }
.prose ul.ticks { display: flex; flex-direction: column; gap: 12px; margin-block: 20px; }
.prose ul.ticks li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.6; color: var(--texto-medio); }
.prose ul.ticks li::before { content: ''; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: rgba(45,170,62,0.15); border: 1px solid var(--verde-esmeralda); }
.prose ul.ticks li::after { content: ''; position: absolute; left: 6px; top: 11px; width: 5px; height: 9px; border-right: 2px solid var(--esmeralda-claro); border-bottom: 2px solid var(--esmeralda-claro); transform: rotate(45deg); }
.prose strong { color: var(--texto-alto); font-weight: 600; }

.svc-layout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(32px,5vw,72px); align-items: start; }
.svc-aside { position: sticky; top: 110px; padding: clamp(24px,3vw,32px); border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea); }
.svc-aside h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); font-weight: 500; margin-bottom: 16px; }
.svc-aside ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.svc-aside li { font-size: 14px; color: var(--texto-medio); display: flex; gap: 8px; }
.svc-aside li b { color: var(--azul-ccc); font-family: var(--f-mono); font-weight: 500; }

.other-svc { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 24px; }
.other-svc a { padding: 20px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linea); transition: border-color .3s ease, transform .3s var(--ease-out); }
.other-svc a:hover { border-color: var(--azul-ccc); transform: translateY(-3px); }
.other-svc .n { font-family: var(--f-mono); font-size: 11px; color: var(--verde-lima); }
.other-svc .t { font-family: var(--f-display); font-weight: 500; font-size: 16px; color: var(--texto-alto); margin-top: 8px; }

/* portfolio (página) */
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,26px); }
.pf-card { border-radius: 16px; overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); transition: border-color .4s ease, transform .5s var(--ease-out); }
.pf-card:hover { border-color: var(--linea-fuerte); transform: translateY(-4px); }
.pf-card__img { aspect-ratio: 4/3; overflow: hidden; }
.pf-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.pf-card:hover .pf-card__img img { transform: scale(1.06); }
.pf-card__body { padding: 20px 22px 24px; }
.pf-card__tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-lima); }
.pf-card__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(17px,1.6vw,20px); color: var(--texto-alto); margin-block: 8px 6px; line-height: 1.2; }
.pf-card__loc { font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; }
@media (max-width: 880px) { .pf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pf-grid { grid-template-columns: 1fr; } }

/* contacto */
.contact-form { min-width: 0; }
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px,5vw,64px); align-items: start; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border-radius: 10px; font: inherit; font-size: 15px;
  background: var(--superficie); border: 1px solid var(--linea-fuerte); color: var(--texto-alto);
  transition: border-color .3s ease; outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--azul-ccc); }
.field textarea { min-height: 130px; resize: vertical; }
.contact-info { padding: clamp(28px,3.5vw,44px); border-radius: 18px; background: var(--superficie); border: 1px solid var(--linea); }
.contact-info .row { padding-block: 18px; border-bottom: 1px solid var(--linea); }
.contact-info .row:last-child { border-bottom: 0; }
.contact-info .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; }
.contact-info .v { font-size: 16px; color: var(--texto-alto); }
.contact-info .v:hover { color: var(--verde-lima); }

/* sección privada / muestra (no listada) */
.priv-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde-lima); padding: 7px 14px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: rgba(141,198,63,0.06); margin-bottom: 22px; }
.priv-badge .lock { width: 12px; height: 12px; }
.vid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,26px); margin-top: clamp(32px,4vw,48px); }
.vid { border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--linea); }
.vid video { width: 100%; height: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.vid__cap { padding: 14px 18px; background: var(--superficie); }
.vid__cap .t { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--texto-alto); }
.vid__cap .s { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-lima); margin-top: 4px; }
@media (max-width: 720px){ .vid-grid { grid-template-columns: 1fr; } }

/* blog placeholder */
.blog-empty { text-align: center; padding-block: clamp(60px,10vw,120px); }
.blog-empty .h-sub { color: var(--texto-alto); margin-block: 16px; }

/* blog: lista de artículos */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,26px); }
.blog-card { display: flex; flex-direction: column; padding: clamp(24px,3vw,32px); border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea); transition: border-color .3s ease, transform .4s var(--ease-out); }
.blog-card:hover { border-color: var(--azul-ccc); transform: translateY(-4px); }
.blog-card .bc-cat { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-lima); }
.blog-card h3 { font-size: clamp(19px,2vw,24px); color: var(--texto-alto); margin-block: 14px 12px; line-height: 1.2; }
.blog-card p { font-size: 15px; line-height: 1.6; color: var(--texto-medio); flex: 1; }
.blog-card .bc-more { margin-top: 18px; font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--azul-ccc); }
.blog-card:hover .bc-more { color: var(--esmeralda-claro); }
@media (max-width:880px){ .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .blog-grid { grid-template-columns: 1fr; } }

/* artículo */
.article-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--texto-suave); margin-top: 18px; }
.article-meta .cat { color: var(--verde-lima); }
.prose .tip { margin: 26px 0; padding: 22px 24px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--verde-esmeralda); }
.prose .tip h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde-lima); font-weight: 500; margin-bottom: 10px; }
.prose .tip p { margin: 0; font-size: 15.5px; }

/* equipo en campo (Nosotros) */
.equipo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,20px); margin-top: clamp(32px,4vw,48px); }
.eq { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3/4; border: 1px solid var(--linea); }
.eq img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.eq:hover img { transform: scale(1.05); }
.eq::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,21,28,0.9), transparent 55%); }
.eq span { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--texto-alto); }
.eq.tall { aspect-ratio: 3/4; }
@media (max-width:720px){ .equipo-grid { grid-template-columns: 1fr 1fr; } }

/* tira de credenciales / confianza */
.trust-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; margin-top: clamp(32px,4vw,44px); }
.trust { background: var(--grafito-noche); padding: clamp(22px,2.6vw,30px); }
.trust .t-h { font-family: var(--f-display); font-weight: 600; font-size: clamp(17px,1.8vw,21px); color: var(--texto-alto); margin-bottom: 8px; }
.trust .t-p { font-size: 13.5px; line-height: 1.55; color: var(--texto-suave); }
@media (max-width:720px){ .trust-band { grid-template-columns: 1fr 1fr; } }

/* 404 */
.err-wrap { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.err-code { font-family: var(--f-display); font-weight: 700; font-size: clamp(100px,26vw,320px); line-height: 0.9; letter-spacing: -0.04em; }

/* ============================================================ */
/*  RESPONSIVE                                                  */
/* ============================================================ */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .proc-wrap { grid-template-columns: 1fr; }
  .proc-sticky { position: relative; top: 0; display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
  .proc-progress { flex: 1; margin-top: 0; }
  .svc-layout { grid-template-columns: 1fr; }
  .svc-aside { position: relative; top: 0; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero__creds { grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: clamp(36px,6vh,84px); }
  .cinta__card { width: clamp(180px,62vw,220px); }
  .cinta__track { animation-duration: 48s; }
  .scroll-hint { display: none; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .sect-grid { grid-template-columns: 1fr 1fr; }
  .cob-grid { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { justify-content: center; }
  .other-svc { grid-template-columns: 1fr; }
  /* bento → apilado uniforme en móvil */
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .t-a,.t-b,.t-c,.t-d,.t-e,.t-f,.t-g,.t-h { grid-column: span 1; grid-row: span 1; }
  .t-a, .t-d { grid-column: span 2; grid-row: span 2; }
  .svc { grid-template-columns: 40px 1fr auto; gap: 14px; }
  .svc__arrow { width: 42px; height: 42px; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-legal .wrap { flex-direction: column; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================ */
/*  ACCESIBILIDAD / REDUCED MOTION                              */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .hero__bg canvas { display: none; }
}
:focus-visible { outline: 2px solid var(--azul-ccc); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--verde-esmeralda); color: #fff; padding: 10px 18px; border-radius: 8px; }
.skip-link:focus { left: 8px; }