/* ============================================================
   GPI SAS · Capa PREMIUM (Dirección "Territorio" elevada)
   Se carga después de site.css y polish.css. Solo realza:
   no rompe el marcado existente. Motivo de marca: marcas de
   registro / coordenadas de levantamiento topográfico.
   ============================================================ */

:root{
  /* Profundidad: sombras en capas (luz cenital suave) */
  --shadow-1:0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(30,39,34,.05);
  --shadow-2:0 2px 4px -2px rgba(30,39,34,.12), 0 8px 18px -10px rgba(30,39,34,.18);
  --shadow-3:0 6px 12px -6px rgba(30,39,34,.16), 0 26px 50px -24px rgba(30,39,34,.30);
  --shadow-4:0 10px 20px -10px rgba(30,39,34,.20), 0 44px 90px -40px rgba(30,39,34,.42);
  /* Acentos / luz */
  --glow-clay:rgba(168,102,63,.16);
  --ring-clay:rgba(168,102,63,.30);
  --hair:rgba(30,39,34,.10);
  --ease:cubic-bezier(.16,.84,.44,1);
  --paper-grad:radial-gradient(1200px 600px at 78% -8%, #FFFDF7 0%, rgba(255,253,247,0) 60%),
               radial-gradient(900px 500px at 0% 12%, #F4EFE2 0%, rgba(244,239,226,0) 55%);
}

/* ============================================================
   SISTEMA TIPOGRÁFICO PREMIUM
   Escala modular fluida + jerarquía + features OpenType.
   Mantiene Spectral (display) · IBM Plex Sans (texto) · Mono (etiquetas).
   ============================================================ */

/* Base: legibilidad y rasgos finos */
body{
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  text-rendering:optimizeLegibility;
  letter-spacing:.001em;
}
h1,h2,h3,h4{font-feature-settings:"kern" 1,"liga" 1,"dlig" 1;font-optical-sizing:auto}

/* Display (titulares): más presencia, tracking negativo, interlínea ceñida */
.hero h1{
  font-weight:600;
  font-size:clamp(46px,6.4vw,90px);
  line-height:.97;
  letter-spacing:-.035em;
}
.hero h1 em{font-weight:600;font-style:italic;letter-spacing:-.025em}  /* itálica real 600 */

.page-hero h1{
  font-weight:600;
  font-size:clamp(40px,5.6vw,72px);
  line-height:1.0;
  letter-spacing:-.032em;
}

.sec-head h2,
section h2{
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.05;
}
.cta-band h2,.contact h2{letter-spacing:-.03em;line-height:1.04}

/* Subtítulos / tarjetas: equilibrio de peso y trazo */
h3{letter-spacing:-.015em;line-height:1.18}
.svc h3,.svc-row h3,.value h3,.step h3,.card h3,.why-item h3{font-weight:600}

/* Balance y "viudas" controladas */
h1,h2,h3{text-wrap:balance}
p,.lead,.hero p.lead,.pbio,.prose p{text-wrap:pretty}

/* Cuerpo: medida y ritmo de lectura */
body{line-height:1.62}
.prose p,.pbio,.sec-head p{line-height:1.66}

/* Lead: voz editorial — ligero, aireado, color suave */
.hero p.lead{
  font-weight:300;
  font-size:clamp(18px,1.55vw,21px);
  line-height:1.5;
  letter-spacing:.002em;
  color:var(--ink-soft);
}
.page-hero p{font-weight:300;line-height:1.5}

/* Etiquetas mono y eyebrows: tracking consistente y jerarquía clara */
.eyebrow{letter-spacing:.2em;font-weight:500}
.mono,.crumbs,.member span,.team-photo figcaption,.foot-col h4,.info dt,.field label,
.card .tag,.profile .pnum,.profile .ptitle,.profile .prole,.step .sn,.info-block .lbl{
  letter-spacing:.14em;
}
.brand small{letter-spacing:.16em}

/* Cifras alineadas (tabular + estilo lining) en datos y numeraciones */
.stat b,.svc .num,.svc-row .rnum,.value .vk,.profile .pnum{
  font-feature-settings:"tnum" 1,"lnum" 1,"kern" 1;
  font-variant-numeric:tabular-nums lining-nums;
}

/* Marca: leve refinamiento del peso óptico */
.brand{font-weight:600;letter-spacing:-.015em}
.foot-brand .fb-name{letter-spacing:-.01em}

/* Puntuación colgante donde el navegador lo soporte */
@supports (hanging-punctuation: first){
  .prose p,.pbio{hanging-punctuation:first last}
}

/* Fondo de papel con luz cálida (muy sutil) */
body{background:var(--paper),var(--paper-grad);background-attachment:fixed}

/* ---------- Grano de papel (textura premium táctil) ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Barra de progreso de scroll ---------- */
.gpi-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--clay),var(--green-2),var(--green));
  box-shadow:0 0 12px var(--glow-clay);transition:width .08s linear;
}

/* ---------- Header: vidrio refinado ---------- */
header{background:rgba(248,245,237,.72);backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%)}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ring-clay),transparent);opacity:.0;transition:opacity .35s ease}
header.scrolled::after{opacity:1}
header.scrolled{box-shadow:0 18px 50px -34px rgba(30,39,34,.5)}
.brand .mark-img{transition:transform .5s var(--ease)}
.brand:hover .mark-img{transform:rotate(-4deg) scale(1.05)}

/* ---------- Botones premium (relieve + barrido de luz) ---------- */
.btn{position:relative;overflow:hidden;background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.04));
  box-shadow:var(--shadow-2);letter-spacing:.005em}
.btn.ghost{background-image:none;box-shadow:none}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none}
.btn:hover::after{left:130%}
.btn:hover{box-shadow:var(--shadow-3)}
.btn:active{transform:translateY(0) scale(.99)}

/* ---------- Eyebrow con degradado ---------- */
.eyebrow::before{background:linear-gradient(90deg,var(--clay),transparent);width:30px;height:1.5px}

/* ---------- Hero: más profundidad y vida ---------- */
.hero{padding-top:104px}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(760px 420px at 88% 6%, var(--glow-clay), transparent 70%)}
.hero h1 em{background:linear-gradient(120deg,var(--green),var(--green-2) 70%,var(--clay));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .topo{opacity:.42;animation:gpiDrift 26s ease-in-out infinite alternate}
@keyframes gpiDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-26px,-12px,0)}}
.hero-media{box-shadow:var(--shadow-4)}
.hero-media::before{background:linear-gradient(150deg,var(--green),var(--green-2))}
.hero-tag{background:rgba(30,39,34,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(246,242,232,.22);box-shadow:0 8px 24px -12px rgba(0,0,0,.5)}

/* ---------- Marcas de registro (crop marks) cartográficas ----------
   Detalle de marca: esquinas de levantamiento sobre medios enmarcados */
.hero-media,.media-frame,.team-photo{position:relative}
.hero-media::after,.media-frame::after,.team-photo::after,
.hero-media .gpi-tl,.media-frame .gpi-tl,.team-photo .gpi-tl{pointer-events:none}
.media-frame::before{content:"";position:absolute;z-index:3;top:-7px;left:-7px;width:18px;height:18px;
  border-top:1.5px solid var(--clay);border-left:1.5px solid var(--clay);opacity:.85}
.media-frame::after{content:"";position:absolute;z-index:3;bottom:-7px;right:-7px;width:18px;height:18px;
  border-bottom:1.5px solid var(--clay);border-right:1.5px solid var(--clay);opacity:.85}
.team-photo::before{content:"";position:absolute;z-index:3;top:-7px;left:-7px;width:20px;height:20px;
  border-top:1.5px solid var(--clay);border-left:1.5px solid var(--clay);opacity:.8}
.team-photo::after{content:"";position:absolute;z-index:3;bottom:46px;right:-7px;width:20px;height:20px;
  border-bottom:1.5px solid var(--clay);border-right:1.5px solid var(--clay);opacity:.8}

/* ---------- Strip de datos: relieve + número con degradado ---------- */
.strip .wrap{box-shadow:var(--shadow-3);background:linear-gradient(180deg,#F5F0E4,var(--paper-2))}
.stat{transition:background .3s ease}
.stat:hover{background:rgba(168,102,63,.05)}
.stat b{background:linear-gradient(140deg,var(--green),var(--green-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Tarjetas: luz de seguimiento (spotlight) + anillo ----------
   Aplica a servicios, proyectos, valores, pasos y perfiles */
.svc,.card,.value,.step,.profile{position:relative;isolation:isolate;
  background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));
  box-shadow:var(--shadow-1)}
.svc::before,.card::before,.value::before,.step::before,.profile::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(280px 280px at var(--mx,50%) var(--my,0%),var(--glow-clay),transparent 60%)}
.svc:hover::before,.card:hover::before,.value:hover::before,.step:hover::before,.profile:hover::before{opacity:1}
.svc:hover,.card:hover,.value:hover,.step:hover,.profile:hover{box-shadow:var(--shadow-4);border-color:var(--ring-clay)}
.svc .num,.value .vk{transition:transform .4s var(--ease)}
.svc:hover .num{transform:translateY(-2px)}

/* línea superior animada en tarjetas de servicio */
.svc::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--clay),var(--green));transition:width .5s var(--ease)}
.svc:hover::after{width:64px}

/* ---------- Sección "Por qué" (verde): textura de contornos ---------- */
.why{position:relative;overflow:hidden}
.why::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(700px 360px at 100% 0%, rgba(216,195,168,.10), transparent 60%)}
.why-item{backdrop-filter:blur(2px);transition:background .35s ease,transform .35s var(--ease),border-color .35s ease}
.why-item:hover{transform:translateY(-3px);border-color:rgba(216,195,168,.4)}
.why-item .k{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid rgba(216,195,168,.35);border-radius:50%;padding:0}

/* ---------- Servicios (detalle): numeración + acento ---------- */
.svc-row{position:relative;overflow:hidden}
.svc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(180deg,var(--clay),var(--green));transition:width .45s var(--ease)}
.svc-row:hover::before{width:3px}
.svc-row li::before{box-shadow:0 0 0 4px rgba(51,80,63,.08)}

/* ---------- CTA band: imagen aérea + degradado verde profundo ---------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg, rgba(36,56,43,.94), rgba(33,51,48,.80) 52%, rgba(26,40,33,.96)),
             url("img/aerial-valley.webp");
  background-size:cover;background-position:center 42%}
.cta-band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(620px 320px at 50% -10%, rgba(216,195,168,.22), transparent 60%)}
.cta-band .wrap{position:relative;z-index:2}
.cta-band .btn{box-shadow:0 14px 34px -16px rgba(0,0,0,.6)}

/* ---------- Showcase: banda cinematográfica de territorio ---------- */
.showcase{position:relative;min-height:clamp(360px,52vh,560px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.showcase-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;transform:scale(1.04)}
.showcase::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(20,26,22,.34) 0%, rgba(20,26,22,.04) 34%, rgba(20,26,22,.62) 100%)}
.showcase-inner{position:relative;z-index:2;color:var(--paper);padding-top:84px;padding-bottom:54px}
.showcase .eyebrow{color:#E7D5BD}
.showcase .eyebrow::before{background:linear-gradient(90deg,#E7D5BD,transparent)}
.showcase-line{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.4vw,44px);line-height:1.1;
  letter-spacing:-.02em;max-width:20ch;margin-top:16px;text-wrap:balance;color:var(--paper)}
.showcase-coord{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  color:rgba(246,242,232,.82);border:1px solid rgba(246,242,232,.32);padding:7px 14px;border-radius:100px;
  background:rgba(20,26,22,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* marcas de registro sobre la banda */
.showcase::before{content:"";position:absolute;z-index:2;top:22px;left:22px;width:22px;height:22px;
  border-top:1.5px solid rgba(231,213,189,.85);border-left:1.5px solid rgba(231,213,189,.85)}

/* ---------- Contacto / formulario ---------- */
.contact-page .info-block .lbl{display:inline-flex;align-items:center;gap:8px}
.contact-page .info-block .lbl::before{content:"";width:14px;height:1px;background:var(--clay)}
.field input,.field textarea,.field select{box-shadow:var(--shadow-1)}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:0 0 0 3px rgba(51,80,63,.14),var(--shadow-2)}
.media-frame iframe{filter:saturate(.95) contrast(1.02)}

/* ---------- Footer premium ---------- */
.site-footer{position:relative;background:linear-gradient(180deg,#171d19,var(--ink))}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ring-clay),transparent)}
.foot-col a{position:relative}
.foot-col a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--clay);transition:width .3s var(--ease)}
.foot-col a:hover::after{width:100%}

/* ---------- Scrollbar elegante (escritorio) ---------- */
@media (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:var(--green-2) transparent}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-thumb{background:var(--green-2);border:3px solid var(--paper);border-radius:100px}
  ::-webkit-scrollbar-thumb:hover{background:var(--green)}
}

/* ---------- Accesibilidad / rendimiento ---------- */
@media (prefers-reduced-motion: reduce){
  .hero .topo{animation:none}
  .btn::after{display:none}
  .gpi-progress{transition:none}
}

/* Ajustes finos responsive */
@media(max-width:560px){
  .hero{padding-top:72px}
  body::after{opacity:.04}
  .team-photo::after{bottom:42px}
}