/* ============================================================
   NATG Consultoría — styles.css v2
   Industrial metálico · grafito profundo + acero + slab robusta
   ============================================================ */

:root {
  color-scheme: dark;

  --bg-0:      #0A1424;   /* grafito azulado, más luminoso */
  --bg-1:      #101B31;
  --bg-2:      #16233E;
  --card-a:    #1B2C4D;
  --card-b:    #111D36;

  --text:      #F0F4FA;
  --text-soft: #C5D1E3;
  --text-mute: #8FA2BE;

  --blue:      #4478DB;
  --blue-deep: #2E5CB8;
  --blue-soft: #8FACDD;
  --steel:     #AABDD9;

  --line:      rgba(190,205,225,.18);
  --line-hi:   rgba(225,235,248,.4);

  /* Cobre: el metal de Chile reemplaza al plateado como protagonista */
  --copper:      #D98E4A;
  --copper-deep: #9C5F2E;
  --copper-soft: #E8B98A;
  --metal: linear-gradient(112deg, #F6DDBE 4%, #C77B3F 36%, #EFC79A 58%, #8C5426 88%);
  --sheen: linear-gradient(90deg, transparent, rgba(239,199,154,.45), transparent);
  /* metal sobre FONDO OSCURO: mismo brillo, sin paradas que se hundan */
  --metal-lit: linear-gradient(112deg, #F9E6CE 4%, #E0A468 34%, #F5D5AF 58%, #CE904F 92%);

  --font-display: "Bitter", "Rockwell", Georgia, serif;
  --font-cond:    "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Barlow", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "Consolas", monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 78px;
  --radius: 16px;
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--text);
  background: var(--bg-0);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Grano fino global — textura metálica sutil */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.7'/></svg>");
}

img { max-width: 100%; display: block; }

/* Los saltos a anclas aterrizan bajo la barra fija, no ocultos por ella */
[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--blue); color: #fff; }

/* Foco visible accesible (teclado) en todo lo interactivo */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible,
.nav-cta:focus-visible {
  outline-offset: 4px;
}
summary:focus-visible { outline-offset: -2px; }

/* ---------- Utilities ---------- */
.container {
  width: min(1180px, 92vw);
  margin-inline: auto;
}


.section-title {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: .015em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-top: 1.1rem;
  color: var(--text);
}
.section-title em,
.subhero h1 em,
.hero-title em,
.cta-inner h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--copper-soft);
}
@supports (-webkit-background-clip: text) {
  .section-title em,
  .subhero h1 em,
  .hero-title em,
  .cta-inner h2 em {
    background: var(--metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.lead {
  font-size: 1.07rem;
  color: var(--text-soft);
  max-width: 62ch;
}

/* Reveal on scroll — visible por defecto; se oculta solo con JS activo
   y sin preferencia de movimiento reducido. Red de seguridad a 3.5s. */
.reveal {
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: revealSafety .6s var(--ease-out) .5s forwards;
  }
}
.reveal.is-visible { opacity: 1; transform: none; animation: none; }
@keyframes revealSafety {
  to { opacity: 1; transform: none; }
}
.d1 { transition-delay: .07s; } .d2 { transition-delay: .14s; }
.d3 { transition-delay: .21s; } .d4 { transition-delay: .28s; }

/* Buttons */
/* Botón "placa de acero": esquinas biseladas a 45°, inundación de cobre
   al hover — nada de píldoras genéricas */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .85rem 1.7rem;
  border: 0;
  cursor: pointer;
  overflow: clip;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform .35s var(--ease-out), color .3s, box-shadow .35s;
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { color: #14100A; }
.btn .arr { transition: transform .35s var(--ease-out); }
.btn:hover .arr { transform: translateX(6px); }
.btn-primary {
  background: linear-gradient(150deg, #4B7DDD, #2B54A8);
  color: #fff;
  box-shadow: 0 14px 34px -12px rgba(61,111,208,.65);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(217,142,74,.55);
}
.btn-ghost,
.btn-ghost-dark {
  color: var(--text);
  background: rgba(237,241,247,.06);
  box-shadow: inset 0 0 0 1px rgba(220,230,244,.34);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover,
.btn-ghost-dark:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px transparent, 0 14px 30px -12px rgba(217,142,74,.5);
}

/* ============================================================
   NAV — barra metálica
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(14,24,44,.62), rgba(6,10,19,.42));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .45s, box-shadow .45s;
}
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(190,205,225,.4) 50%, transparent 96%);
  opacity: .55;
  transition: opacity .45s;
}
.nav.is-scrolled {
  background: linear-gradient(180deg, rgba(15,25,45,.95), rgba(7,12,22,.92));
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.7);
}
.nav.is-scrolled::after { opacity: 1; }
.nav-inner {
  width: min(1320px, 94vw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.nav-brand img {
  width: 42px; height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.nav-brand span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.26rem;
  letter-spacing: .14em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.1rem;
}
.nav-links a {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-soft);
  padding: .3rem 0;
  transition: color .3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--steel));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-links a:hover, .nav-links a.is-active { color: #fff; }
.nav-links a:hover::after, .nav-links a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-cta {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text);
  border: 1px solid rgba(220,230,244,.32);
  background: rgba(237,241,247,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  padding: .55rem 1.3rem;
  border-radius: 999px;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.nav-cta:hover {
  background: linear-gradient(150deg, #4B7DDD, #2B54A8);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -10px rgba(61,111,208,.7);
}

/* Burger */
.nav-burger {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.nav-burger span {
  width: 26px; height: 2px;
  background: var(--text);
  transition: transform .35s var(--ease-out), opacity .3s;
}
.nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(6,10,19,.98);
    backdrop-filter: blur(16px);
    padding: 1rem 6vw 2rem;
    border-bottom: 1px solid var(--line);
    transform: translateY(-110%);
    transition: transform .5s var(--ease-out);
  }
  .nav.menu-open .nav-links { transform: translateY(0); }
  .nav-links a {
    width: 100%;
    padding: .9rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(185,198,216,.08);
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: clip;
  background: var(--bg-0);
}
.hero-bg {
  position: absolute;
  inset: -4%;
  z-index: 0;
  will-change: transform;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.08) brightness(.92);
}
.hero-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 85% 65% at 50% 40%, rgba(28,52,98,.26) 0%, rgba(10,20,36,.66) 82%),
    linear-gradient(180deg, rgba(10,20,36,.58) 0%, rgba(13,24,45,.24) 34%, rgba(10,20,36,.4) 68%, var(--bg-0) 100%);
}
.hero-glow {
  position: absolute;
  z-index: 1;
  left: 50%; top: 40%;
  width: 820px; height: 820px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(126,156,206,.24) 0%, rgba(61,111,208,.1) 38%, transparent 64%);
  filter: blur(28px);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: min(880px, 92vw);
  padding-top: calc(var(--nav-h) + 2vh);
  padding-bottom: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-logo {
  width: clamp(150px, 22vw, 236px);
  margin-top: 2.6rem;
  will-change: transform;
  filter: drop-shadow(0 26px 54px rgba(0,0,0,.65)) drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.hero-letters {
  width: clamp(210px, 27vw, 320px);
  margin-top: 2.1rem;
  will-change: transform;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)) drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.hero-title {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.4;
  color: var(--text);
  text-wrap: balance;
  max-width: 36ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.7);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.6rem;
}
/* En móvil los CTA se apilan y ocupan el ancho: nunca se cortan */
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { justify-content: center; width: 100%; }
}
.hero-scroll {
  margin-top: 3.4rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(157,177,209,.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}
.hero-scroll::after {
  content: "";
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--steel), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-logo    { animation: heroRise 1.4s var(--ease-out) .45s backwards; }
  .hero-letters { animation: heroRise 1.4s var(--ease-out) .65s backwards; }
  .hero-title   { animation: heroRise 1.4s var(--ease-out) .85s backwards; }
  .hero-actions { animation: heroRise 1.2s var(--ease-out) 1.05s backwards; }
  .hero-scroll  { animation: heroFade 1.2s var(--ease-out) 1.5s backwards; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(.55); opacity: .5; }
}
@media (max-height: 720px) {
  .hero-scroll { display: none; }
}

/* Sub-hero (páginas interiores) */
.subhero {
  position: relative;
  min-height: 54svh;
  display: flex;
  align-items: flex-end;
  background: var(--bg-0);
  overflow: clip;
  padding-bottom: 3.6rem;
}
.subhero .hero-tint {
  background:
    linear-gradient(180deg, rgba(10,20,36,.66) 0%, rgba(10,20,36,.32) 45%, var(--bg-0) 100%);
}
.subhero-inner {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--nav-h) + 6vh);
}
.subhero h1 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.8vw, 4.4rem);
  line-height: .98;
  color: var(--text);
  letter-spacing: .015em;
  text-transform: uppercase;
  margin-top: 1.1rem;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0,0,0,.6);
}
.subhero p {
  margin-top: 1.2rem;
  max-width: 60ch;
  color: var(--text-soft);
  font-size: 1.05rem;
}

/* ============================================================
   SECCIONES
   ============================================================ */
section { position: relative; }
.sec > .container { position: relative; z-index: 1; }
.split .steps { grid-template-columns: 1fr; border-top: 0; }
/* Centro más claro, bordes más oscuros: la luz guía la mirada */
.sec {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  background:
    radial-gradient(90% 80% at 50% 12%, #162441 0%, transparent 60%),
    radial-gradient(56% 42% at 82% -6%, rgba(68,120,219,.14), transparent 62%),
    var(--bg-0);
}
.sec-paper2 {
  background:
    radial-gradient(85% 75% at 50% 16%, #1B2A4B 0%, transparent 62%),
    radial-gradient(50% 44% at 12% 0%, rgba(143,172,221,.14), transparent 60%),
    var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sec-dark {
  background: var(--bg-0);
  color: var(--text);
}
.sec-dark .sec-texture {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .22;
  pointer-events: none;
}
.sec-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 24% 18%, rgba(68,120,219,.2), transparent 64%),
    radial-gradient(50% 44% at 78% 72%, rgba(214,164,84,.10), transparent 66%),
    linear-gradient(180deg, rgba(10,20,36,.86), rgba(10,20,36,.46) 40%, rgba(10,20,36,.88));
  pointer-events: none;
}
.sec-dark > .container { position: relative; z-index: 2; }

.sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
}
.sec-head.center { align-items: center; text-align: center; }
.sec-head .lead { margin-top: 1.2rem; }

/* Stats — HUD flotante, cifras con orgullo */
.stats {
  position: relative;
  z-index: 5;
  background: transparent;
  padding: 1rem 0 4.4rem;
  margin-top: -56px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
}
.stat {
  display: block;
  text-align: center;
  border-radius: 14px;
  padding: .6rem .4rem;
  transition: background .35s, transform .35s var(--ease-out);
}
a.stat:hover {
  background: rgba(143,172,221,.08);
  box-shadow: inset 0 0 0 1px rgba(143,172,221,.25);
  transform: translateY(-4px);
}
a.stat:hover b {
  filter: drop-shadow(0 10px 30px rgba(68,120,219,.7)) drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
a.stat:hover > span { color: var(--blue-soft); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.8vw, 3.6rem);
  line-height: 1;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 26px rgba(61,111,208,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.stat b i {
  font-style: italic;
  font-size: .42em;
  font-weight: 700;
  -webkit-text-fill-color: var(--blue-soft);
  letter-spacing: .04em;
}
/* línea de energía bajo la cifra */
.stat::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin: .85rem auto .75rem;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-soft), transparent);
  box-shadow: 0 0 14px rgba(126,156,206,.9), 0 0 4px rgba(126,156,206,.9);
}
.stat > span {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat b { font-size: clamp(2.2rem, 9vw, 2.8rem); }
}

/* Split editorial (texto + imagen con bloque superpuesto) */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split.rev { grid-template-columns: .95fr 1.05fr; }
.split-media {
  position: relative;
  border-radius: var(--radius);
  overflow: clip;
  margin-right: 18px;
  margin-bottom: 18px;
  border: 1px solid rgba(185,198,216,.18);
  box-shadow:
    18px 18px 0 -1px #0E1830,
    18px 18px 0 0 rgba(157,177,209,.22),
    0 34px 70px -28px rgba(0,0,0,.8);
}
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.split-media:hover img { transform: scale(1.05); }
.split-media figcaption {
  position: absolute;
  left: 1.1rem; bottom: 1rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: rgba(6,10,19,.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(220,230,244,.18);
  padding: .45rem .85rem;
  border-radius: 999px;
}
.split-body .section-title { margin-bottom: 1.4rem; }
.split-body p + p { margin-top: 1rem; }
.split-body p { color: var(--text-soft); }
@media (max-width: 880px) {
  .split, .split.rev { grid-template-columns: 1fr; }
  .split-media { order: -1; }
}

/* ---------- Retrato "pop-out": tarjeta con la cabeza desbordada ---------- */
.pop-media {
  position: relative;
  margin-right: 18px;
  margin-bottom: 18px;
}
.pop-media .pop-bg {
  position: absolute;
  left: 0; right: 0; top: 74px; bottom: 0;
  background: linear-gradient(165deg, #14213B, #0A1322);
  border: 1px solid rgba(185,198,216,.2);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow:
    18px 18px 0 -1px #0E1830,
    18px 18px 0 0 rgba(157,177,209,.22),
    0 34px 70px -28px rgba(0,0,0,.8);
}
.pop-media .pop-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 58% at 50% 16%, rgba(80,120,190,.34), transparent 70%);
}
.pop-media .pop-bg::after {
  content: "";
  position: absolute;
  right: -8%; top: -6%;
  width: 72%;
  aspect-ratio: 1;
  background: url("assets/img/logo-blanco.webp") center / contain no-repeat;
  opacity: .06;
}
.pop-media .pop-img {
  position: relative;
  z-index: 1;
  width: 76%;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.65));
}
.pop-media figcaption {
  position: absolute;
  z-index: 2;
  left: 1.1rem; bottom: 1rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: rgba(6,10,19,.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(220,230,244,.18);
  padding: .45rem .85rem;
  border-radius: 999px;
}

/* ---------- Retrato libre: PNG grande que escapa de los márgenes ---------- */
.free-media {
  position: relative;
  align-self: end;
}
.free-media::before {
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,120,190,.32) 0%, rgba(80,120,190,.10) 52%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}
.free-media::after {
  content: "";
  position: absolute;
  right: -16%; top: -8%;
  width: 88%;
  aspect-ratio: 1;
  background: url("assets/img/logo-blanco.webp") center / contain no-repeat;
  opacity: .05;
  pointer-events: none;
}
.free-media img {
  position: relative;
  z-index: 1;
  width: 118%;
  max-width: none;
  margin-left: -12%;
  margin-top: -36px;
  filter:
    drop-shadow(0 44px 60px rgba(0,0,0,.75))
    drop-shadow(0 0 44px rgba(61,111,208,.16));
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
.free-media .profile-tag { left: 0; bottom: .6rem; }
@media (max-width: 860px) {
  .free-media img { width: 100%; margin-left: 0; margin-top: -40px; }
  .free-media { max-width: 440px; }
}

/* Checklist compacta */
.ticks { margin-top: 1.6rem; display: grid; gap: .65rem; }
.ticks li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  color: var(--text-soft);
  font-size: .98rem;
}
.ticks li::before {
  content: "—";
  color: var(--blue-soft);
  font-weight: 600;
  flex: 0 0 auto;
}

/* ---------- Cards de servicios (home) ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: linear-gradient(165deg, var(--card-a), var(--card-b));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem 1.8rem;
  overflow: clip;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 44px -26px rgba(0,0,0,.7);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.svc-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--steel), var(--blue-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 46% at 50% -10%, rgba(126,156,206,.16), transparent 68%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.svc-card:hover {
  transform: translateY(-7px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -24px rgba(20,40,90,.85);
  border-color: rgba(126,156,206,.45);
}
.svc-card:hover::before { transform: scaleX(1); }
.svc-card:hover::after { opacity: 1; }
.svc-num {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--text-mute);
}
.svc-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.42rem;
  line-height: 1.18;
  color: var(--text);
  flex: 1;
}
.svc-card p {
  font-size: .95rem;
  color: var(--text-soft);
  flex: 1;
}
.svc-link {
  font-size: .86rem;
  font-weight: 600;
  color: var(--blue-soft);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.svc-link .arr { transition: transform .35s var(--ease-out); }
.svc-card:hover .svc-link .arr { transform: translateX(5px); }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Pasos numerados ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 3.5rem;
  counter-reset: step;
  border-top: 1px solid var(--line);
}
.steps li {
  counter-increment: step;
  display: flex;
  gap: 1.4rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 1rem;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--blue-soft);
  flex: 0 0 2rem;
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Grid de públicos ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
}
.tile {
  position: relative;
  background: linear-gradient(170deg, #14203A, #0E1830);
  padding: 1.5rem 2.4rem 1.5rem 1.4rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: background .35s, color .35s, box-shadow .35s;
}
.tile::after {
  content: "→";
  position: absolute;
  right: 1.1rem;
  bottom: 1.2rem;
  color: var(--blue-soft);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s, transform .35s var(--ease-out);
}
.tile:hover {
  background: linear-gradient(170deg, #1D2E52, #14203A);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(143,172,221,.35), 0 12px 30px -16px rgba(20,50,110,.8);
}
.tile:hover::after { opacity: 1; transform: none; }
.tile i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  color: var(--blue-soft);
}

/* Filas editoriales */
.rows { border-top: 1px solid var(--line); }
.row-item {
  position: relative;
  display: grid;
  grid-template-columns: 90px 300px 1fr;
  gap: 2rem;
  padding: 1.7rem 2.6rem 1.7rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background .3s, padding-left .35s var(--ease-out);
}
.row-item::after {
  content: "→";
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translate(-8px, -50%);
  color: var(--blue-soft);
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity .3s, transform .35s var(--ease-out);
}
.row-item:hover {
  background: linear-gradient(90deg, rgba(143,172,221,.07), transparent 70%);
  padding-left: .8rem;
}
.row-item:hover::after { opacity: 1; transform: translate(0, -50%); }
.row-item i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--blue-soft);
}
.row-item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  color: var(--text);
}
.row-item p { color: var(--text-soft); font-size: .98rem; max-width: 56ch; }
@media (max-width: 820px) {
  .row-item { grid-template-columns: 1fr; gap: .45rem; }
}

/* ---------- Clientes ---------- */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
}
.client {
  background: linear-gradient(165deg, var(--card-a), var(--card-b));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.4rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .45s var(--ease-out), box-shadow .45s, border-color .4s;
}
.client:hover {
  transform: translateY(-5px);
  border-color: rgba(126,156,206,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 50px -22px rgba(20,40,90,.8);
}
.client img {
  max-height: 74px;
  width: auto;
  max-width: 88%;
  object-fit: contain;
  background: #fff;
  padding: .55rem .9rem;
  border-radius: 10px;
  filter: grayscale(1) opacity(.82);
  transition: filter .45s;
}
.client:hover img { filter: none; }
.client-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .02em;
  color: var(--text-mute);
  text-align: center;
  line-height: 1.2;
  transition: color .4s;
}
.client-word .amp {
  color: inherit;
  transition: color .4s;
}
.client:hover .client-word .amp { color: #C94A3C; }
.client-word small {
  display: block;
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: .35rem;
}
.client:hover .client-word { color: var(--text); }
.client-name {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: center;
}
@media (max-width: 980px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .clients-grid { grid-template-columns: repeat(2, 1fr); } }

.clients-cta {
  text-align: center;
  margin-top: 2.4rem;
}
.clients-cta a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-soft);
  border-bottom: 1px solid rgba(143,172,221,.4);
  padding-bottom: .3rem;
  transition: color .3s, border-color .3s;
}
.clients-cta a:hover { color: #fff; border-color: #fff; }
.clients-cta .arr { transition: transform .35s var(--ease-out); }
.clients-cta a:hover .arr { transform: translateX(5px); }

/* ---------- CTA banda final ---------- */
.cta-band {
  position: relative;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border-top: 1px solid var(--line);
  overflow: clip;
}
.cta-band .halo {
  position: absolute;
  inset: -60% -20%;
  background:
    radial-gradient(46% 42% at 28% 60%, rgba(61,111,208,.42), transparent 70%),
    radial-gradient(40% 40% at 76% 30%, rgba(126,156,206,.24), transparent 72%);
  filter: blur(70px);
  pointer-events: none;
}
.cta-band::before {
  content: "";
  position: absolute;
  right: -70px; bottom: -90px;
  width: 440px; height: 420px;
  background: url("assets/img/logo-blanco.webp") center / contain no-repeat;
  opacity: .05;
  transform: rotate(-8deg);
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: clamp(4.5rem, 9vw, 7rem) 0;
}
.cta-inner h2 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 26ch;
  text-wrap: balance;
}
.cta-inner p { color: var(--text-soft); max-width: 54ch; }

/* ============================================================
   SERVICIOS (página)
   ============================================================ */
.svc-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5.5vw, 5rem);
  align-items: start;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--line);
}
.svc-block:first-of-type { border-top: 0; }
.svc-block.rev .svc-block-media { order: 2; }
.svc-block-media {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  border-radius: var(--radius);
  overflow: clip;
  margin-right: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(185,198,216,.18);
  box-shadow:
    16px 16px 0 -1px #0E1830,
    16px 16px 0 0 rgba(157,177,209,.2),
    0 30px 60px -26px rgba(0,0,0,.8);
}
.svc-block.rev .svc-block-media {
  margin-right: 0;
  margin-left: 16px;
  box-shadow:
    -16px 16px 0 -1px #0E1830,
    -16px 16px 0 0 rgba(157,177,209,.2),
    0 30px 60px -26px rgba(0,0,0,.8);
}
.svc-block-media img {
  width: 100%;
  aspect-ratio: 16 / 10.5;
  object-fit: cover;
}
.svc-block-body h2 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.3vw, 2.8rem);
  line-height: 1.0;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--text);
}
.svc-block-body > p {
  margin-top: 1.1rem;
  color: var(--text-soft);
}
@media (max-width: 880px) {
  .svc-block, .svc-block.rev { grid-template-columns: 1fr; }
  .svc-block.rev .svc-block-media { order: 0; }
  .svc-block-media { position: static; }
}

/* Accordion detalle */
details.acc {
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--card-a), var(--card-b));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  overflow: clip;
}
details.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.4rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--text);
  transition: background .3s;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary:hover { background: rgba(126,156,206,.07); }
details.acc summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--blue-soft);
  transition: transform .4s var(--ease-out);
}
details.acc[open] summary::after { transform: rotate(45deg); }
.acc-body {
  padding: .4rem 1.4rem 1.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem 2rem;
}
.acc-body li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .92rem;
  color: var(--text-soft);
}
.acc-body li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue-soft);
  box-shadow: 0 0 8px rgba(126,156,206,.8);
}
@media (max-width: 640px) { .acc-body { grid-template-columns: 1fr; } }

/* ============================================================
   EXPERIENCIA
   ============================================================ */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.exp-card {
  position: relative;
  display: block;
  background: linear-gradient(165deg, var(--card-a), var(--card-b));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.8rem;
  overflow: clip;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .5s var(--ease-out), box-shadow .5s, border-color .4s;
}
.exp-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--steel), var(--blue-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.exp-card:hover {
  transform: translateY(-5px);
  border-color: rgba(143,172,221,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 26px 52px -24px rgba(25,55,120,.85);
}
.exp-card:hover::before { transform: scaleX(1); }
.exp-card i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  color: var(--blue-soft);
}
.exp-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: .55rem 0 .55rem;
  color: var(--text);
}
.exp-card p { font-size: .95rem; color: var(--text-soft); }
@media (max-width: 720px) { .exp-grid { grid-template-columns: 1fr; } }

/* ============================================================
   NOSOTROS — perfil
   ============================================================ */
.profile {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: clamp(2.5rem, 5.5vw, 5rem);
  align-items: start;
}
.profile-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: clip;
  margin-right: 18px;
  margin-bottom: 18px;
  border: 1px solid rgba(185,198,216,.2);
  box-shadow:
    18px 18px 0 -1px #0E1830,
    18px 18px 0 0 rgba(157,177,209,.22),
    0 36px 70px -28px rgba(0,0,0,.85);
}
.profile-photo img { width: 100%; display: block; }
.profile-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(61,111,208,.16), transparent 45%, rgba(6,10,19,.35) 100%);
  pointer-events: none;
}
.profile-tag {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  background: rgba(6,10,19,.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(220,230,244,.2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  border-radius: 999px;
}
.profile-body h2 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.7vw, 3.1rem);
  color: var(--text);
  line-height: 1.0;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.profile-role {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-top: .7rem;
}
.profile-body > p { margin-top: 1.1rem; color: var(--text-soft); }
.profile-body strong { color: var(--text); }
@media (max-width: 860px) {
  .profile { grid-template-columns: 1fr; }
  .profile-photo { max-width: 420px; }
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.form {
  position: relative;
  overflow: clip;
  background: linear-gradient(160deg, #263A63, #16233E);
  border: 1px solid rgba(140,180,240,.42);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 46px -8px rgba(68,120,219,.4),
    0 34px 70px -32px rgba(0,0,0,.8);
}
/* Barrido de luz SOLO en las tarjetas de info (no en el formulario) y
   pasando muy de vez en cuando para no distraer. El form queda quieto. */
.contact-card::before {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(200,222,255,.07), transparent);
  transform: skewX(-18deg);
  animation: diagSweep 16s ease-in-out infinite;
  pointer-events: none;
}
.contact-card:nth-child(2)::before { animation-delay: 8s; }
/* Destellos sutiles y estáticos en las esquinas de las tarjetas de info */
.contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .8;
  background-image:
    radial-gradient(circle 1.5px at 12% 22%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(circle 1px  at 84% 12%, rgba(200,222,255,.75), transparent 70%),
    radial-gradient(circle 1px  at 88% 82%, rgba(255,255,255,.6), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  .contact-card::before { animation: none; }
}
.form > *, .contact-card > * { position: relative; z-index: 1; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--text);
  background: rgba(6,10,19,.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .8rem .95rem;
  transition: border-color .3s, box-shadow .3s, background .3s;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: rgba(6,10,19,.85);
  box-shadow: 0 0 0 3px rgba(61,111,208,.22), 0 0 18px rgba(61,111,208,.18);
}
.form-foot {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.form-note { font-size: .82rem; color: var(--text-mute); }
.form-status {
  flex-basis: 100%;
  margin-top: .4rem;
  font-size: .9rem;
  color: var(--blue-soft);
  opacity: 0;
  transform: translateY(6px);
}
.form-status.is-in {
  animation: formStatusIn .5s var(--ease-out) forwards;
}
.form-status a { color: #fff; text-decoration: underline; }
@keyframes formStatusIn {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .form-status { transition: none; }
  .form-status.is-in { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.contact-card {
  position: relative;
  overflow: clip;
  background: linear-gradient(160deg, #263A63, #16233E);
  border: 1px solid rgba(140,180,240,.42);
  color: var(--text);
  border-radius: var(--radius);
  padding: 1.9rem 1.8rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 40px -8px rgba(68,120,219,.38);
}
.contact-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  margin-bottom: 1.1rem;
  color: var(--text);
}
.contact-card ul { display: grid; gap: .85rem; }
.contact-card a { color: var(--text); }
.contact-line {
  display: flex;
  gap: .85rem;
  align-items: baseline;
  font-size: .96rem;
  color: var(--text-soft);
}
.contact-line b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-soft);
  flex: 0 0 74px;
}
.contact-line a:hover { color: #fff; text-decoration: underline; }
.contact-card.light { background: linear-gradient(160deg, #1F3054, #121E38); }
.motives { display: grid; gap: .5rem; }
.motives li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .9rem;
  color: var(--text-soft);
}
.motives button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .25s, transform .3s var(--ease-out);
}
.motives button::after {
  content: " ↳";
  opacity: 0;
  color: var(--blue-soft);
  transition: opacity .25s;
}
.motives button:hover {
  color: #fff;
  transform: translateX(3px);
}
.motives button:hover::after { opacity: 1; }

/* destello del campo autocompletado */
.field.is-flash select,
.field.is-flash textarea {
  animation: fieldFlash 1.4s var(--ease-out);
}
@keyframes fieldFlash {
  0% {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(61,111,208,.4), 0 0 26px rgba(61,111,208,.5);
  }
  100% {
    border-color: var(--line);
    box-shadow: none;
  }
}
.motives li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue-soft);
  box-shadow: 0 0 8px rgba(126,156,206,.8);
}

/* WhatsApp flotante */
.wa-float {
  position: fixed;
  right: 1.4rem; bottom: 1.4rem;
  z-index: 90;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(160deg, #27C15F, #179142);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -10px rgba(31,175,84,.6);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.wa-float:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 20px 38px -10px rgba(31,175,84,.75);
}
.wa-float svg { width: 27px; height: 27px; fill: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: #04070E;
  color: var(--text-soft);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
  overflow: clip;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 4%; right: 4%;
  height: 1px;
  background: var(--sheen);
  opacity: .5;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 2.6rem;
}
.footer-brand img {
  width: 62px;
  margin-bottom: 1.1rem;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
.footer-brand p { font-size: .92rem; max-width: 34ch; color: var(--text-mute); }
.footer h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1.1rem;
}
.footer ul { display: grid; gap: .55rem; }
.footer ul a, .footer ul li {
  font-size: .92rem;
  color: var(--text-mute);
  transition: color .3s;
}
.footer ul a:hover { color: #fff; }
.footer-bottom {
  margin-top: 3.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(185,198,216,.1);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: rgba(126,144,171,.7);
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   COMPONENTES v3 — luz, profundidad y dinamismo
   ============================================================ */

/* Chips de navegación rápida (servicios) */
.chip-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.8rem;
}
.chip-nav a {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  border: 1px solid rgba(200,215,235,.28);
  background: rgba(240,244,250,.06);
  backdrop-filter: blur(8px);
  padding: .5rem 1rem;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.chip-nav a:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(150deg, #4B7DDD, #2E5CB8);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(68,120,219,.7);
}

/* Tarjeta del diagnóstico: vidrio con barrido de luz */
.diag-card {
  position: relative;
  background: linear-gradient(160deg, rgba(27,44,77,.88), rgba(17,29,54,.92));
  border: 1px solid rgba(214,164,84,.28);
  border-radius: 20px;
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  overflow: clip;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 40px 80px -36px rgba(0,0,0,.8),
    0 0 60px -18px rgba(214,164,84,.25);
}
.diag-card::before {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(235,215,170,.09), transparent);
  transform: skewX(-18deg);
  animation: diagSweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes diagSweep {
  0%, 55%, 100% { left: -70%; }
  25% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
  .diag-card::before { animation: none; }
}
.diag-card .steps { border-top-color: rgba(214,164,84,.22); }
.diag-card .steps li { border-bottom-color: rgba(200,215,235,.12); }
.diag-card .steps li::before { color: #D6A454; }

/* CTA con pulso de luz */
.btn-pulse {
  animation: btnPulse 2.8s ease-in-out infinite;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 34px -12px rgba(68,120,219,.65), 0 0 0 0 rgba(68,120,219,.4); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 34px -12px rgba(68,120,219,.65), 0 0 0 12px rgba(68,120,219,0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-pulse { animation: none; }
}

/* Palabra fantasma gigante detrás de una sección */
.ghost-word {
  position: absolute;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(1rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(170,189,217,.16);
  pointer-events: none;
  user-select: none;
}

/* Imagen que escapa del margen derecho */
.edge-media {
  position: relative;
  align-self: center;
}
.edge-media img {
  width: 116%;
  max-width: none;
  border-radius: var(--radius) 0 0 var(--radius);
  border: 1px solid rgba(200,215,235,.22);
  border-right: 0;
  box-shadow:
    -18px 18px 0 -1px #16233E,
    -18px 18px 0 0 rgba(170,189,217,.24),
    0 34px 70px -28px rgba(0,0,0,.8);
}
@media (max-width: 880px) {
  .edge-media img { width: 100%; border-radius: var(--radius); border-right: 1px solid rgba(200,215,235,.22); }
}

/* Números fantasma en bloques de servicios */
.svc-block { position: relative; }
.svc-block::before {
  content: attr(data-num);
  position: absolute;
  z-index: 0;
  top: clamp(1.4rem, 4vw, 2.6rem);
  right: -1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 13vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(170,189,217,.14);
  pointer-events: none;
  user-select: none;
}
.svc-block.rev::before { right: auto; left: -1rem; }
.svc-block > * { position: relative; z-index: 1; }

/* Maquinaria recortada asomándose por los bordes de sección */
.has-deco { overflow: clip; }
.deco-cut {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.55));
  opacity: .95;
}
.deco-camion-br {
  right: -70px;
  bottom: -34px;
  width: clamp(260px, 30vw, 440px);
}
/* Excavadora fantasma anclada abajo: las orugas quedan bajo el borde */
.deco-excavadora-br {
  right: -120px;
  bottom: -70px;
  width: clamp(380px, 42vw, 660px);
  opacity: .55;
  filter: grayscale(1) brightness(1.1) sepia(1) hue-rotate(185deg) saturate(2) contrast(.95) blur(1px);
  -webkit-mask-image: radial-gradient(135% 135% at 100% 100%, #000 42%, transparent 80%);
  mask-image: radial-gradient(135% 135% at 100% 100%, #000 42%, transparent 80%);
}
/* Cargador fantasma para "Nuestros servicios" del inicio */
.deco-cargador-tr {
  right: -110px;
  top: -30px;
  width: clamp(300px, 34vw, 540px);
  opacity: .45;
  filter: grayscale(1) brightness(1.1) sepia(1) hue-rotate(185deg) saturate(2) contrast(.95) blur(1px);
  -webkit-mask-image: radial-gradient(135% 135% at 100% 0%, #000 40%, transparent 80%);
  mask-image: radial-gradient(135% 135% at 100% 0%, #000 40%, transparent 80%);
}
/* Excavadora a color para la banda CTA de Experiencia */
.deco-excavadora-cta {
  left: -70px;
  bottom: -55px;
  width: clamp(300px, 34vw, 540px);
  scale: -1 1;
}
/* CAT 962 fantasma azul para "Nuestro enfoque" */
.deco-cat962-br {
  right: -90px;
  bottom: -50px;
  width: clamp(320px, 36vw, 560px);
  opacity: .42;
  filter: grayscale(1) brightness(1.1) sepia(1) hue-rotate(185deg) saturate(2) contrast(.95) blur(1px);
  -webkit-mask-image: radial-gradient(135% 135% at 100% 100%, #000 42%, transparent 80%);
  mask-image: radial-gradient(135% 135% at 100% 100%, #000 42%, transparent 80%);
}
/* Doosan a color entrando en la banda CTA final del inicio */
.deco-doosan-bl {
  left: -80px;
  bottom: -50px;
  width: clamp(300px, 34vw, 520px);
}
.deco-cargador-bl {
  left: -60px;
  bottom: -30px;
  width: clamp(280px, 30vw, 470px);
}
.deco-camion-bl {
  left: -80px;
  bottom: -30px;
  width: clamp(240px, 26vw, 400px);
  scale: -1 1;
  opacity: .45;
  filter: grayscale(1) brightness(1.1) sepia(1) hue-rotate(185deg) saturate(2) contrast(.95) blur(1px);
  /* espejada: el fundido debe ir hacia el borde interior (izquierda visual = derecha real) */
  -webkit-mask-image: radial-gradient(130% 130% at 100% 100%, #000 40%, transparent 78%);
  mask-image: radial-gradient(130% 130% at 100% 100%, #000 40%, transparent 78%);
}
@media (max-width: 760px) {
  .deco-cut { display: none; }
}

/* Acordeones compactos para áreas de experiencia */
.acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 2.8rem;
  align-items: start;
}
.acc-grid details.acc {
  margin-top: 0;
  --r: 0deg;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 50px -22px rgba(0,0,0,.75);
  transform: rotate(var(--r));
  transition: box-shadow .4s, border-color .4s, transform .45s var(--ease-out);
}
.acc-grid details.acc:hover {
  border-color: rgba(143,172,221,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -22px rgba(25,55,120,.9);
  transform: rotate(0deg) translateY(-4px);
}
.acc-grid details.acc:nth-child(1) { --r: -.5deg; margin-right: 2.2rem; }
.acc-grid details.acc:nth-child(2) { --r: .6deg;  margin-top: 2.6rem; }
.acc-grid details.acc:nth-child(3) { --r: .4deg;  margin-left: 2.4rem; margin-top: .8rem; }
.acc-grid details.acc:nth-child(4) { --r: -.6deg; margin-top: 2.2rem; margin-right: 1.6rem; }
.acc-grid details.acc:nth-child(5) { --r: .5deg;  margin-left: .8rem; }
.acc-grid details.acc:nth-child(6) { --r: -.4deg; margin-top: 2.4rem; margin-left: 1.8rem; }
.acc-grid details.acc:nth-child(7) { --r: .5deg;  margin-top: 1.4rem; margin-right: 3rem; }
@media (max-width: 760px) {
  .acc-grid details.acc { margin: 0 !important; transform: none; }
}
.acc-grid details.acc summary {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  padding: 1.2rem 1.5rem;
}
.acc-grid details.acc summary i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  color: var(--blue-soft);
  margin-right: .9rem;
}
.acc-grid .acc-body { grid-template-columns: 1fr; padding-top: 0; }
.acc-grid .acc-body p { font-size: .93rem; color: var(--text-soft); }
@media (max-width: 760px) { .acc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   EL SONDAJE — el inicio como perforación geológica
   ============================================================ */

/* Etiqueta de profundidad: el hilo conductor del descenso */
.depth-tag {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .8rem;
}
.depth-tag::before {
  content: "▾";
  font-size: .9em;
  color: var(--copper-soft);
}

/* Bordes de estrato: cortes de roca irregulares entre secciones */
.strata-edge {
  position: relative;
  z-index: 3;
  height: 72px;
  margin-top: -71px;
  pointer-events: none;
}
.strata-edge svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Fondos por estrato: el azul se calienta con cobre al profundizar */
[data-stratum="1"].sec {
  background:
    radial-gradient(80% 70% at 50% 8%, #17293C 0%, transparent 62%),
    #101E2E;
}
[data-stratum="2"].sec {
  background:
    radial-gradient(70% 60% at 82% 4%, rgba(217,142,74,.10), transparent 60%),
    radial-gradient(85% 75% at 30% 20%, #182638 0%, transparent 65%),
    #131F2F;
}
[data-stratum="4"].sec {
  background:
    radial-gradient(60% 55% at 16% 10%, rgba(217,142,74,.13), transparent 58%),
    radial-gradient(80% 70% at 70% 30%, #142031 0%, transparent 66%),
    #0E1926;
}
[data-stratum="5"].sec {
  background:
    radial-gradient(65% 55% at 84% 16%, rgba(217,142,74,.16), transparent 58%),
    #0B1420;
}
[data-stratum="6"].sec {
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(217,142,74,.2), transparent 62%),
    radial-gradient(90% 80% at 50% 90%, #1A1610 0%, transparent 70%),
    #08111B;
}

/* Testigo de sondaje: instrumento fijo de navegación por profundidad */
.rig {
  position: fixed;
  right: 1.3rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.rig.is-on { opacity: 1; pointer-events: auto; }
.rig-meter {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--copper-soft);
  background: rgba(8,17,27,.82);
  border: 1px solid rgba(217,142,74,.35);
  border-radius: 999px;
  padding: .32rem .6rem;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.rig-core {
  position: relative;
  width: 12px;
  height: min(46vh, 380px);
  border-radius: 7px;
  overflow: clip;
  border: 1px solid rgba(200,215,235,.28);
  background: rgba(10,20,32,.7);
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 10px 26px -10px rgba(0,0,0,.75),
    0 0 0 1px rgba(0,0,0,.35);
}
.rig-seg {
  flex: 1;
  display: block;
  /* sombreado cilíndrico: bordes hundidos + brillo desplazado = testigo redondo */
  background-color: var(--c, #1B2C3F);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.16) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.2) 16%,
      rgba(255,255,255,.34) 37%,
      rgba(255,255,255,.1) 52%,
      rgba(0,0,0,.26) 76%,
      rgba(0,0,0,.66) 100%);
  opacity: .62;
  transition: opacity .3s, filter .3s;
}
.rig-seg + .rig-seg { border-top: 1px solid rgba(8,14,22,.85); }
.rig-seg.is-active {
  opacity: 1;
  filter: brightness(1.35);
}
.rig-seg:hover { opacity: 1; }
.rig-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0%;
  pointer-events: none;
  border-bottom: 2px solid var(--copper);
  box-shadow: 0 2px 10px rgba(217,142,74,.9);
}
.rig-tip {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .18em;
  color: var(--text-mute);
  writing-mode: vertical-rl;
}
@media (max-width: 1180px) { .rig { display: none; } }

/* El hero como NIVEL 0 — superficie */
.hero-level {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--copper-soft);
}
.hero-title {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.15;
}
.hero-title em {
  font-family: var(--font-display);
  font-size: .94em;
}

/* ============================================================
   DES-CAJIFICACIÓN — formatos nuevos sin tarjetas
   ============================================================ */

/* El testigo ahora carga TODA la info de profundidad (flyout al hover) */
.rig-seg { position: relative; }
.rig-seg::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--copper-soft);
  background: rgba(8,17,27,.9);
  border: 1px solid rgba(217,142,74,.35);
  padding: .3rem .6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .3s var(--ease-out);
}
.rig-seg:hover::after,
.rig-seg:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ---- Servicios: índice tipográfico con muestra flotante (sin cajas) ---- */
.svc-index { border-top: 1px solid var(--line); }
.svc-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  padding: 1.35rem .2rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left .4s var(--ease-out);
}
.svc-row i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--text-mute);
  transition: color .3s;
}
.svc-row h3 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color .3s, transform .4s var(--ease-out);
}
.svc-row .arr {
  margin-left: auto;
  font-size: 1.4rem;
  color: var(--copper);
  opacity: 0;
  transform: translateX(-10px) rotate(45deg);
  transition: opacity .3s, transform .4s var(--ease-out);
}
.svc-row:hover { padding-left: 1.2rem; }
.svc-row:hover h3 { color: var(--text); }
.svc-row:hover i { color: var(--copper); }
.svc-row:hover .arr { opacity: 1; transform: translateX(0) rotate(45deg); }

/* Muestra flotante que sigue al cursor sobre el índice */
.svc-peek {
  position: fixed;
  z-index: 60;
  width: clamp(220px, 24vw, 340px);
  aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0;
  transform: scale(.92) rotate(-2deg);
  transition: opacity .3s, transform .45s var(--ease-out);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.85);
}
.svc-peek img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s;
}
.svc-peek img.is-show { opacity: 1; }
.svc-peek.is-on { opacity: 1; transform: scale(1) rotate(0deg); }
@media (hover: none), (max-width: 880px) {
  .svc-peek { display: none; }
}

/* ---- A quiénes: marquesina doble contrarrotante (sin tiles) ---- */
.aud-marquee {
  overflow: clip;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.6rem 0;
  display: grid;
  gap: 1.1rem;
}
.aud-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: audL 46s linear infinite;
}
.aud-track.rev { animation: audR 52s linear infinite; }
.aud-marquee:hover .aud-track { animation-play-state: paused; }
.aud-item {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
  padding: 0 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 2.8rem;
  transition: color .3s;
}
.aud-item::after {
  content: "◆";
  font-size: .55em;
  color: var(--copper-deep);
}
.aud-item:hover { color: var(--copper-soft); }
@keyframes audL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes audR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .aud-track, .aud-track.rev { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---- Diagnóstico: línea de perforación con nodos (sin tarjeta) ---- */
.drill-line {
  list-style: none;
  position: relative;
  counter-reset: node;
  max-width: 880px;
  margin-inline: auto;
  padding: 1rem 0 .4rem;
}
.drill-line::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--copper) 12%, var(--copper-deep) 88%, transparent);
  box-shadow: 0 0 16px rgba(217,142,74,.55);
}
.drill-line li {
  counter-increment: node;
  position: relative;
  width: calc(50% - 3rem);
  padding: .45rem 0 1.5rem;
  font-size: 1rem;
  color: var(--text-soft);
}
.drill-line li:nth-child(odd) { margin-left: 0; text-align: right; }
.drill-line li:nth-child(even) { margin-left: calc(50% + 3rem); text-align: left; }
.drill-line li::before {
  content: counter(node, decimal-leading-zero);
  position: absolute;
  top: .35rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--copper-soft);
}
.drill-line li:nth-child(odd)::before { right: -4.3rem; }
.drill-line li:nth-child(even)::before { left: -4.3rem; }
.drill-line li::after {
  content: "";
  position: absolute;
  top: .68rem;
  width: 9px; height: 9px;
  transform: rotate(45deg);
  background: var(--copper);
  box-shadow: 0 0 12px rgba(217,142,74,.9);
}
.drill-line li:nth-child(odd)::after { right: calc(-3rem - 4px); }
.drill-line li:nth-child(even)::after { left: calc(-3rem - 4px); }
@media (max-width: 720px) {
  .drill-line::before { left: 10px; transform: none; }
  .drill-line li,
  .drill-line li:nth-child(odd),
  .drill-line li:nth-child(even) { width: auto; margin-left: 2.6rem; text-align: left; }
  .drill-line li:nth-child(odd)::before { right: auto; left: -2.6rem; top: -0.6rem; }
  .drill-line li:nth-child(even)::before { left: -2.6rem; top: -0.6rem; }
  .drill-line li:nth-child(odd)::after,
  .drill-line li:nth-child(even)::after { left: calc(-2.6rem + 6px); top: .85rem; }
}

/* ---- Clientes: banda registral abierta (sin tarjetas) ---- */
.clients-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.6rem 3.4rem;
  padding: 2.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.clients-band a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  transition: transform .4s var(--ease-out);
}
.clients-band a:hover { transform: translateY(-5px); }
.clients-band img {
  max-height: 56px;
  width: auto;
  background: #fff;
  padding: .45rem .8rem;
  filter: grayscale(1) opacity(.75);
  transition: filter .4s;
}
.clients-band a:hover img { filter: none; }
.clients-band .client-word { font-size: 1.2rem; }
.clients-band .client-name {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ============================================================
   DES-CAJIFICACIÓN INTERIORES · SERVICIOS = REGISTRO DE SONDAJE
   Los 7 servicios = 7 tramos de un mismo pozo que desciende.
   Espina de perforación continua + nodos + muestras (sin cajas).
   ============================================================ */
.svc-log { position: relative; }

/* Índice del subhero como columna de profundidades (mata los chips-píldora) */
.chip-nav.is-log {
  border-top: 1px solid rgba(217,142,74,.25);
  padding-top: 1rem;
  gap: 0;
  flex-wrap: wrap;
}
.chip-nav.is-log a {
  background: none;
  border: 0;
  border-radius: 0;
  padding: .4rem 1.1rem .4rem 0;
  margin: 0 .4rem 0 0;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.chip-nav.is-log a::before { content: "▾ "; color: var(--copper); }
.chip-nav.is-log a:hover {
  color: var(--copper-soft);
  background: none;
  transform: none;
}

/* La columna del registro */
.core-log { list-style: none; position: relative; }
/* Espina de perforación continua (ruler izquierdo) */
.core-log::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 43px;
  width: 2px;
  background: linear-gradient(180deg,
      rgba(217,142,74,0) 0%,
      var(--copper-deep) 3%,
      var(--copper) 50%,
      var(--copper-deep) 97%,
      rgba(217,142,74,0) 100%);
  box-shadow: 0 0 16px rgba(217,142,74,.4);
}

/* Un tramo del sondaje */
.core-run {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
  padding: clamp(3.2rem, 7vw, 5.6rem) 0;
}
.core-run + .core-run { border-top: 1px dashed rgba(200,215,235,.12); }

/* Ruler: nodo rombo cobre + número + profundidad vertical sobre la espina */
.core-ruler { grid-column: 1; grid-row: 1; position: relative; align-self: stretch; }
.core-node {
  position: absolute;
  left: 43px; top: .35rem;
  width: 15px; height: 15px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--copper);
  box-shadow: 0 0 14px rgba(217,142,74,.9);
}
.core-run .core-num {
  position: absolute;
  left: 43px; top: 1.9rem;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .08em;
  color: var(--copper-soft);
}
/* Cuerpo del tramo (con número fantasma detrás) */
.core-body { grid-column: 2; grid-row: 1; position: relative; }
.core-run.rev .core-body { grid-column: 3; }
.core-body::before {
  content: attr(data-num);
  position: absolute; z-index: 0;
  top: -2.6rem; left: -.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217,142,74,.16);
  pointer-events: none; user-select: none;
}
.core-body > * { position: relative; z-index: 1; }
.core-body h2 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.3vw, 2.75rem);
  line-height: 1.0;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--text);
}
.core-body .run-lead { margin-top: 1rem; color: var(--text-soft); }

/* Muestra del tramo = accordion des-cajificado (hairlines cobre, sin fondo) */
.core-sample { margin-top: 1.6rem; }
.core-sample summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: .8rem;
  padding: .72rem 0;
  border-top: 1px solid rgba(217,142,74,.32);
  border-bottom: 1px solid rgba(217,142,74,.14);
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .92rem;
  color: var(--copper-soft);
  transition: color .3s;
}
.core-sample summary::-webkit-details-marker { display: none; }
.core-sample summary::before {
  content: "▾";
  color: var(--copper);
  transition: transform .4s var(--ease-out);
}
.core-sample[open] summary::before { transform: rotate(180deg); }
.core-sample summary:hover { color: var(--copper); }
.core-sample summary .ct {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--text-mute);
}
.sample-body {
  list-style: none;
  padding: 1rem 0 .2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem 2rem;
}
.sample-body li {
  position: relative;
  padding-left: 1.25rem;
  font-size: .9rem;
  color: var(--text-soft);
}
.sample-body li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--copper);
  box-shadow: 0 0 8px rgba(217,142,74,.7);
}

/* Media flotante con bisel (mata la card con sombra offset) */
.core-media {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  filter: saturate(.9) contrast(1.02);
}
.core-run.rev .core-media { grid-column: 2; }
.core-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
/* Filo cobre diagonal — acento, no marco */
.core-media::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 34px;
  border-left: 2px solid var(--copper);
  border-bottom: 2px solid var(--copper);
  filter: drop-shadow(0 0 6px rgba(217,142,74,.6));
  pointer-events: none;
}

@media (max-width: 880px) {
  .core-run, .core-run.rev {
    grid-template-columns: 52px minmax(0,1fr);
  }
  .core-log::before { left: 25px; }
  .core-node { left: 25px; }
  .core-run .core-num { left: 25px; }
  .core-ruler { grid-row: 1 / -1; }
  .core-body, .core-run.rev .core-body { grid-column: 2; grid-row: 1; }
  .core-media, .core-run.rev .core-media {
    grid-column: 2;
    grid-row: 2;
    position: static;
    margin-top: 1.8rem;
  }
  .core-body::before { top: -2rem; font-size: clamp(4rem, 18vw, 6rem); }
  .sample-body { grid-template-columns: 1fr; }
}

/* ============================================================
   DES-CAJIFICACIÓN INTERIORES · patrones compartidos + EXPERIENCIA
   Conjuntos (no secuencias) → SIN numeración de scaffolding.
   Art-direction por sección; todo des-cajificado.
   ============================================================ */

/* Media flotante con bisel — utilidad reusable (ejecutiva/sectores/nosotros) */
.float-bevel {
  position: relative;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  filter: saturate(.9) contrast(1.02);
}
.float-bevel img { display: block; width: 100%; object-fit: cover; }
.float-bevel::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 34px;
  border-left: 2px solid var(--copper);
  border-bottom: 2px solid var(--copper);
  filter: drop-shadow(0 0 6px rgba(217,142,74,.6));
  pointer-events: none;
}

/* A) Índice de estratos expandible (áreas de experiencia — sin cajas, sin números) */
.strata-index { border-top: 1px solid rgba(217,142,74,.24); margin-top: clamp(1.6rem,3vw,2.4rem); }
.strata-index details { border-bottom: 1px solid rgba(200,215,235,.1); }
.strata-index summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(1.1rem,2.2vw,1.6rem) 0;
  transition: padding-left .45s var(--ease-out);
}
.strata-index summary::-webkit-details-marker { display: none; }
.strata-index summary::before {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  transform: rotate(45deg);
  background: var(--copper);
  box-shadow: 0 0 9px rgba(217,142,74,.7);
  transition: transform .45s var(--ease-out);
}
.strata-index details[open] summary::before { transform: rotate(225deg); }
.strata-index summary h3 {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.5vw, 2.05rem);
  letter-spacing: .02em;
  line-height: 1;
  color: var(--text-soft);
  transition: color .3s;
}
.strata-index summary:hover { padding-left: 1rem; }
.strata-index summary:hover h3,
.strata-index details[open] summary h3 { color: var(--text); }
.strata-index summary .si-idx {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--text-mute);
}
.strata-index .si-desc {
  padding: 0 0 1.5rem 2.3rem;
  max-width: 70ch;
  color: var(--text-soft);
}

/* B) Reparto ejecutivo: media flotante + lista de ticks (sin ol numerada boxed) */
.exec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(1.6rem,3vw,2.4rem);
}
.exec-grid .core-media,
.exec-grid .float-bevel { position: sticky; top: calc(var(--nav-h) + 2rem); }
@media (max-width: 880px) {
  .exec-grid { grid-template-columns: 1fr; }
  .exec-grid .float-bevel { position: static; }
}

/* C) Lista-traza editorial (experiencia representativa — texto, sin cajas ni números) */
.trace-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2.4rem, 5vw, 4.5rem);
  margin-top: clamp(1.6rem,3vw,2.4rem);
}
.trace-item { padding: clamp(1.4rem,2.6vw,1.9rem) 0; border-top: 1px solid rgba(200,215,235,.12); }
.trace-item h3 {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  letter-spacing: .015em;
  line-height: 1.05;
  color: var(--text);
  display: flex;
  gap: .8rem;
  align-items: baseline;
}
.trace-item h3::before {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  transform: rotate(45deg) translateY(1px);
  background: var(--copper);
  box-shadow: 0 0 8px rgba(217,142,74,.6);
}
.trace-item p { margin-top: .6rem; padding-left: 1.7rem; color: var(--text-soft); font-size: .93rem; }
@media (max-width: 720px) { .trace-list { grid-template-columns: 1fr; } }

/* D) Banda de sectores: filas-enlace tipográficas con barrido cobre (sin cards) */
.sector-reg { border-top: 1px solid rgba(217,142,74,.24); margin-top: clamp(1.4rem,3vw,2.2rem); }
.sector-reg a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.5fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.3rem,2.6vw,2.1rem) 0;
  border-bottom: 1px solid rgba(200,215,235,.1);
  text-decoration: none;
  overflow: clip;
  transition: padding-left .45s var(--ease-out);
}
.sector-reg a h3 {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.7vw, 2.05rem);
  letter-spacing: .02em;
  line-height: 1;
  color: var(--text);
  transition: color .3s;
}
.sector-reg a p { color: var(--text-soft); font-size: .92rem; max-width: 54ch; }
.sector-reg a .arr {
  color: var(--copper);
  font-size: 1.5rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.sector-reg a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 0;
  background: var(--copper);
  box-shadow: 0 0 8px rgba(217,142,74,.7);
  transition: width .55s var(--ease-out);
}
.sector-reg a:hover { padding-left: 1.2rem; }
.sector-reg a:hover h3 { color: var(--copper-soft); }
.sector-reg a:hover .arr { opacity: 1; transform: translateX(0); }
.sector-reg a:hover::after { width: 100%; }
@media (max-width: 720px) {
  .sector-reg a { grid-template-columns: 1fr auto; }
  .sector-reg a p { grid-column: 1 / -1; }
}

/* ============================================================
   TESTIGOS SUSPENDIDOS · motion flotante (interiores)
   Imágenes/muestras que flotan, derivan por profundidad, se
   inclinan hacia el cursor y se materializan al entrar.
   ============================================================ */

/* Materializar al entrar (blur→foco). data-float-in + JS .is-in */
[data-float-in] {
  opacity: 0;
  transform: translateY(26px) scale(.965);
  filter: blur(9px);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out);
  will-change: transform, filter, opacity;
}
[data-float-in].is-in { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  [data-float-in] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Muestra flotante que sigue al cursor (specimen, multi-zona) */
.specimen {
  position: fixed;
  left: 0; top: 0;
  z-index: 70;
  width: clamp(210px, 21vw, 290px);
  aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: 0 30px 62px -22px rgba(0,0,0,.85);
  overflow: hidden;
  will-change: transform;
}
.specimen.is-on { opacity: 1; }
.specimen img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .35s var(--ease-out), transform .6s var(--ease-out);
}
.specimen img.is-show { opacity: 1; transform: scale(1); }
.specimen figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: .55rem .75rem .5rem;
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper-soft);
  background: linear-gradient(0deg, rgba(6,12,20,.92), transparent);
}
.specimen::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 26px; height: 26px; z-index: 3;
  border-left: 2px solid var(--copper);
  border-bottom: 2px solid var(--copper);
  filter: drop-shadow(0 0 5px rgba(217,142,74,.6));
}
@media (hover: none), (max-width: 880px) { .specimen { display: none; } }

/* Áreas: pista mono de la interacción */
.index-hint {
  font-family: var(--font-mono);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
  margin-top: clamp(1.4rem,2.6vw,2rem);
}
.index-hint::before { content: "→ "; color: var(--copper); }
@media (hover: none), (max-width: 880px) { .index-hint { display: none; } }

/* Áreas: pista de que hay muestra (cursor copper sobre el índice) */
.strata-index[data-specimen] summary { cursor: pointer; }
.strata-index[data-specimen] summary h3 { transition: color .3s, letter-spacing .4s var(--ease-out); }
.strata-index[data-specimen] summary:hover h3 { letter-spacing: .06em; }

/* Representativa: thumbnails beveled flotantes + texto (asimétrico, sin cajas) */
.trace-float {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.2rem,4vw,3.4rem) clamp(2.6rem,5vw,4.6rem);
  margin-top: clamp(1.8rem,3.4vw,2.8rem);
}
.tfx { display: flex; gap: clamp(1.1rem,2vw,1.6rem); align-items: flex-start; }
.tfx:nth-child(even) { margin-top: clamp(1.6rem,3vw,3rem); }
.tfx-thumb {
  flex: none;
  width: clamp(96px, 11vw, 148px);
  aspect-ratio: 3 / 4;
}
.tfx-thumb img { aspect-ratio: 3 / 4; }
.tfx-body h3 {
  font-family: var(--font-cond);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem,1.9vw,1.5rem);
  letter-spacing: .015em; line-height: 1.02;
  color: var(--text);
}
.tfx-body p { margin-top: .55rem; color: var(--text-soft); font-size: .9rem; }
@media (max-width: 720px) { .trace-float { grid-template-columns: 1fr; } .tfx:nth-child(even) { margin-top: 0; } }

/* Sectores: plates fotográficas flotantes (image-led, inclinables, clicables) */
.sector-plates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem,2.6vw,2.4rem);
  margin-top: clamp(1.6rem,3vw,2.4rem);
  perspective: 1200px;
}
.plate {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  text-decoration: none;
  overflow: hidden;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  box-shadow: 0 26px 54px -24px rgba(0,0,0,.8);
  transform-style: preserve-3d;
  will-change: transform;
}
.plate:nth-child(3n+2) { margin-top: clamp(1.6rem,3vw,3.2rem); }
.plate:nth-child(3n)   { margin-top: clamp(.8rem,1.6vw,1.6rem); }
.plate img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.85) brightness(.7);
  transition: filter .5s var(--ease-out), transform .6s var(--ease-out);
  transform: scale(1.04);
}
.plate::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(11,20,32,.15) 0%, rgba(8,15,25,.82) 78%);
  transition: background .5s;
}
.plate .plate-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1rem,1.8vw,1.4rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.plate .plate-cap h3 {
  font-family: var(--font-cond);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem,1.9vw,1.5rem);
  letter-spacing: .02em; line-height: .98;
  color: #fff;
}
.plate .plate-cap .arr {
  color: var(--copper);
  font-size: 1.4rem; flex: none;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.plate .plate-num {
  position: absolute; top: clamp(.7rem,1.4vw,1.1rem); left: clamp(.8rem,1.6vw,1.2rem);
  z-index: 2;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em;
  color: var(--copper-soft);
}
.plate::before {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  border: 1px solid rgba(217,142,74,0);
  clip-path: inherit;
  transition: border-color .45s;
  pointer-events: none;
}
.plate:hover img { filter: saturate(1) brightness(.82); transform: scale(1.08); }
.plate:hover::after { background: linear-gradient(160deg, rgba(11,20,32,.05) 0%, rgba(8,15,25,.72) 80%); }
.plate:hover::before { border-color: rgba(217,142,74,.55); }
.plate:hover .plate-cap .arr { opacity: 1; transform: translateX(0); }
@media (max-width: 880px) { .sector-plates { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) {
  .sector-plates { grid-template-columns: 1fr; }
  .plate, .plate:nth-child(3n+2), .plate:nth-child(3n) { margin-top: 0; aspect-ratio: 16/9; }
}

/* ============================================================
   COLUMNA ESTRATIGRÁFICA — áreas de experiencia (rehecha)
   El diagrama de un sondaje: capas de roca que se depositan y,
   al recorrerlas, un panel anclado revela cada área. Sin cursor-chase.
   ============================================================ */
.strat {
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
  gap: clamp(2rem,5vw,4.5rem);
  align-items: stretch;
  margin-top: clamp(1.8rem,3.4vw,2.8rem);
}
.strat-col {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(217,142,74,.3);
  border-radius: 2px;
  overflow: hidden;
  background: #0A1420;
  box-shadow: 0 34px 66px -30px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.03);
  min-height: 460px;
}
.strat-layer {
  position: relative;
  flex: var(--h, 1) 1 0;
  min-height: 52px;
  display: flex; align-items: center; gap: .9rem;
  width: 100%; border: 0; text-align: left; cursor: pointer;
  padding: .7rem 1.1rem .7rem 1.4rem;
  background: var(--tone, #142234);
  color: var(--text-mute);
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; font-size: clamp(.82rem,1.25vw,1.02rem); line-height: 1.05;
  border-bottom: 1px solid rgba(6,11,18,.85);
  transition: color .35s, filter .4s var(--ease-out);
  transform-origin: top;
}
.strat-layer:last-child { border-bottom: 0; }
/* trama de roca por capa */
.strat-layer::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  opacity: .55; pointer-events: none;
  background-image: var(--rock);
  background-size: var(--rock-size, 14px 14px);
}
.strat-layer > * { position: relative; z-index: 1; }
.strat-layer .lyr-dot {
  flex: none; width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--copper); box-shadow: 0 0 8px rgba(217,142,74,.75);
  opacity: 0; transition: opacity .3s, transform .4s var(--ease-out);
}
.strat-layer:hover { color: #e9eef6; filter: brightness(1.14); }
.strat-layer.is-active { color: #fff; filter: brightness(1.2); }
.strat-layer.is-active .lyr-dot { opacity: 1; transform: rotate(135deg); }
.strat-layer.is-active::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  width: 4px; background: var(--copper);
  box-shadow: 0 0 16px rgba(217,142,74,.95);
}
/* Depósito sedimentario al entrar (stagger) */
.strat-col .strat-layer { transform: scaleY(.02); opacity: 0; }
.strat-col.is-set .strat-layer {
  transform: none; opacity: 1;
  transition: transform .6s var(--ease-out), opacity .5s var(--ease-out), color .35s, filter .4s;
}
.strat-col.is-set .strat-layer:nth-child(1){transition-delay:.04s}
.strat-col.is-set .strat-layer:nth-child(2){transition-delay:.10s}
.strat-col.is-set .strat-layer:nth-child(3){transition-delay:.16s}
.strat-col.is-set .strat-layer:nth-child(4){transition-delay:.22s}
.strat-col.is-set .strat-layer:nth-child(5){transition-delay:.28s}
.strat-col.is-set .strat-layer:nth-child(6){transition-delay:.34s}
.strat-col.is-set .strat-layer:nth-child(7){transition-delay:.40s}

/* Panel anclado (no persigue el cursor) */
.strat-panel { display: flex; flex-direction: column; justify-content: center; }
.strat-panel .sp-body { transition: opacity .32s var(--ease-out), transform .42s var(--ease-out); }
.strat-panel.is-swap .sp-body { opacity: 0; transform: translateY(10px); }
.strat-panel .sp-pos {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--copper);
}
.strat-panel h3 {
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.8rem,3.6vw,2.9rem); line-height: 1; letter-spacing: .012em;
  color: var(--text); margin: .7rem 0 1rem;
}
.strat-panel .sp-desc { color: var(--text-soft); max-width: 56ch; }
.strat-panel .sp-hint {
  margin-top: 1.6rem; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
}
.strat-panel .sp-hint::before { content: "↑↓ "; color: var(--copper); }

@media (prefers-reduced-motion: reduce) {
  .strat-col .strat-layer { transform: none; opacity: 1; }
}
@media (max-width: 760px) {
  .strat { grid-template-columns: 1fr; }
  .strat-col { min-height: 0; }
  .strat-panel .sp-hint { display: none; }
}

/* Tramas geológicas (repeating-gradient, sin SVG externo) — azul→cobre por profundidad */
.rock-caliche { --tone:#16273a; --rock: radial-gradient(rgba(232,185,138,.5) 1.1px, transparent 1.3px); --rock-size:11px 11px; }
.rock-oxidos  { --tone:#182634; --rock: repeating-linear-gradient(26deg, rgba(232,185,138,.4) 0 1px, transparent 1px 8px); --rock-size:14px 14px; }
.rock-lutita  { --tone:#141f2e; --rock: repeating-linear-gradient(0deg, rgba(174,192,214,.32) 0 1.5px, transparent 1.5px 8px); --rock-size:100% 9px; }
.rock-brecha  { --tone:#1a2230; --rock:
     linear-gradient(45deg, rgba(217,142,74,.30) 25%, transparent 25%),
     linear-gradient(-45deg, rgba(217,142,74,.30) 25%, transparent 25%); --rock-size:12px 12px; }
.rock-enriq   { --tone:#1d2130; --rock: repeating-linear-gradient(-26deg, rgba(217,142,74,.5) 0 1px, transparent 1px 7px); --rock-size:12px 12px; }
.rock-sulfuro { --tone:#221c1a; --rock:
     repeating-linear-gradient(45deg, rgba(232,185,138,.4) 0 1px, transparent 1px 7px),
     repeating-linear-gradient(-45deg, rgba(232,185,138,.28) 0 1px, transparent 1px 7px); --rock-size:11px 11px; }
.rock-veta    { --tone:#2a1d13; --rock:
     repeating-linear-gradient(90deg, rgba(217,142,74,.6) 0 2px, transparent 2px 10px),
     radial-gradient(rgba(232,185,138,.4) 1px, transparent 1.4px); --rock-size:16px 10px, 9px 9px; }

/* Ejecutiva: partículas que flotan y se alejan del cursor (JS driven) */
[data-repel-item] { will-change: transform; }

/* ============================================================
   FAROS DE SONDAJE — áreas (rehecha 2: lámparas que iluminan)
   Cada faro enciende su bombillo, proyecta un haz y revela la
   foto (única) + info del área. Reusa initStrata (data-strat*).
   ============================================================ */
.faros {
  display: grid;
  grid-template-columns: minmax(250px, 350px) 1fr;
  gap: clamp(2.8rem,6vw,5rem);
  align-items: center;
  margin-top: clamp(1.8rem,3.4vw,2.8rem);
}
/* Sección de áreas compacta (cabe en una pantalla) */
.sec-areas { padding-top: clamp(3.4rem,6vw,5rem); padding-bottom: clamp(3.4rem,6vw,5rem); }
.sec-areas .sec-head { margin-bottom: clamp(1.4rem,2.6vw,2.2rem); }
.faro-rail { display: flex; flex-direction: column; gap: .55rem; }
/* reset de la base .strat-layer dentro de faros */
.faros .strat-layer {
  flex: 0 0 auto; min-height: 0;
  background: rgba(15,25,39,.55);
  border: 1px solid rgba(174,192,214,.14);
  border-radius: 3px;
  border-bottom: 1px solid rgba(174,192,214,.14);
  transform: none; opacity: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(.78rem,1.5vw,1.05rem) 1.15rem clamp(.78rem,1.5vw,1.05rem) 1.25rem;
  color: var(--text-mute);
  overflow: visible;
}
.faros .strat-layer::before, .faros .strat-layer::after { content: none; } /* mata tramas/marker base */
.faro-name { position: relative; z-index: 1; }
.faro-bulb {
  position: relative; z-index: 1; flex: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3c4c60, #16202e);
  box-shadow: inset 0 0 3px rgba(0,0,0,.6);
  transition: background .35s var(--ease-out), box-shadow .45s var(--ease-out);
}
.faros .strat-layer:hover { color: #d6deea; border-color: rgba(217,142,74,.3); }
.faros .strat-layer.is-active {
  color: #fff;
  border-color: rgba(217,142,74,.6);
  background: linear-gradient(90deg, rgba(38,30,20,.7), rgba(20,20,26,.5));
}
.faros .strat-layer.is-active .faro-bulb {
  background: radial-gradient(circle at 38% 32%, #FFEBCB 0%, var(--copper) 55%, var(--copper-deep) 100%);
  box-shadow: 0 0 10px 2px rgba(217,142,74,.95), 0 0 26px 7px rgba(217,142,74,.5);
}
/* haz de luz del faro activo hacia el escenario */
.faros .strat-layer.is-active::before {
  content: ""; position: absolute; right: -6px; top: 50%;
  transform: translateY(-50%);
  width: clamp(2rem, 7vw, 5.5rem); height: 260%;
  background: linear-gradient(90deg, rgba(217,142,74,.5), rgba(217,142,74,0) 85%);
  clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%);
  filter: blur(3px);
  pointer-events: none; z-index: 0;
}
/* Depósito/encendido escalonado al entrar */
.faro-rail .strat-layer { opacity: 0; transform: translateX(-16px); }
.faro-rail.is-set .strat-layer {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .55s var(--ease-out), color .3s, border-color .4s, background-color .4s;
}
.faro-rail.is-set .strat-layer:nth-child(1){transition-delay:.05s}
.faro-rail.is-set .strat-layer:nth-child(2){transition-delay:.11s}
.faro-rail.is-set .strat-layer:nth-child(3){transition-delay:.17s}
.faro-rail.is-set .strat-layer:nth-child(4){transition-delay:.23s}
.faro-rail.is-set .strat-layer:nth-child(5){transition-delay:.29s}
.faro-rail.is-set .strat-layer:nth-child(6){transition-delay:.35s}
.faro-rail.is-set .strat-layer:nth-child(7){transition-delay:.41s}
@media (prefers-reduced-motion: reduce) {
  .faro-rail .strat-layer { opacity: 1; transform: none; }
}

/* Escenario iluminado */
.faro-stage { position: relative; display: flex; flex-direction: column; gap: clamp(1.7rem,3vw,2.4rem); }
.faro-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: clamp(230px, 34vh, 350px);
  overflow: hidden;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.85);
  background: #070d15;
}
.faro-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.9) saturate(1);
  transform: scale(1.04);
  transition: filter .55s var(--ease-out), transform .8s var(--ease-out), opacity .3s;
}
.faro-stage.is-swap .faro-photo img { filter: brightness(.18) saturate(.6); }
/* barrido de luz cálida desde la izquierda (donde entra el haz) */
.faro-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 100% at -6% 50%, rgba(217,142,74,.42), transparent 52%);
}
.faro-photo::after {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 2;
  width: 30px; height: 30px;
  border-left: 2px solid var(--copper); border-bottom: 2px solid var(--copper);
  filter: drop-shadow(0 0 5px rgba(217,142,74,.6)); pointer-events: none;
}
@media (max-width: 760px) {
  .faros { grid-template-columns: 1fr; }
}

/* ============================================================
   CONSTELACIÓN — experiencia ejecutiva (distribución estelar)
   Los 10 ítems dispersos como estrellas (no grid), flotan y
   huyen del cursor (initRepel). Imagen flotante como cuerpo mayor.
   ============================================================ */
/* Sección ejecutiva más compacta para que la constelación entre en pantalla */
.sec-exec { padding-top: clamp(2rem,4vw,3rem); padding-bottom: clamp(2rem,4vw,3rem); }
.sec-exec .sec-head { margin-bottom: 0; }
.sec-exec .sec-head .lead { margin-top: .8rem; }
.constellation {
  position: relative;
  width: 100%;
  min-height: clamp(300px, 33vw, 430px);
  margin-top: clamp(.7rem,1.6vw,1.3rem);
}
.constellation .con-anchor {
  position: absolute;
  width: clamp(200px, 22vw, 300px);
  z-index: 1;
}
.constellation .con-anchor img { aspect-ratio: 16/11; }
.constellation .star span:last-child { line-height: 1.26; }
.star {
  position: absolute;
  left: var(--x); top: var(--y);
  max-width: min(32vw, 250px);
  z-index: 2;
  display: flex; align-items: flex-start; gap: .7rem;
  will-change: transform;
}
.star .star-dot {
  flex: none; margin-top: .34em;
  width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--copper);
  box-shadow: 0 0 9px rgba(217,142,74,.85), 0 0 22px rgba(217,142,74,.35);
}
.star span:last-child {
  color: var(--text-soft);
  font-size: clamp(.82rem, 1.15vw, .96rem);
  line-height: 1.32;
}
.star:hover span:last-child { color: #fff; }
/* fallback móvil: lista simple, sin dispersión absoluta */
@media (max-width: 880px) {
  .constellation { min-height: 0; display: flex; flex-direction: column; gap: 1.4rem; }
  .constellation .con-anchor { position: static; width: 100%; margin-bottom: .6rem; }
  .star { position: static; transform: none; max-width: none; }
}

/* ============================================================
   DES-CAJIFICACIÓN NOSOTROS + CONTACTO
   ============================================================ */
/* Caption del bevel flotante (propuesta) */
.float-bevel figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  margin: 0;
  padding: .5rem .85rem;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--copper-soft);
  background: linear-gradient(0deg, rgba(6,12,20,.85), transparent);
}
/* Retrato libre de Nelson: halo azul → cobre, para identidad */
.free-media::before {
  background: radial-gradient(circle, rgba(217,142,74,.26) 0%, rgba(217,142,74,.09) 52%, transparent 72%);
}
/* Ticks de la propuesta → rombo cobre */
.ticks li::before {
  background: var(--copper) !important;
  box-shadow: 0 0 8px rgba(217,142,74,.6) !important;
}

/* ---- CONTACTO: formulario legible SIN cajas-brillo ---- */
.contact-grid .form {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
/* campos industriales, foco cobre */
.contact-grid .field input,
.contact-grid .field select,
.contact-grid .field textarea {
  border-radius: 3px;
  background: rgba(8,14,22,.72);
  border: 1px solid rgba(174,192,214,.2);
}
.contact-grid .field input:focus,
.contact-grid .field select:focus,
.contact-grid .field textarea:focus {
  border-color: var(--copper);
  background: rgba(8,14,22,.92);
  box-shadow: 0 0 0 3px rgba(217,142,74,.18), 0 0 18px rgba(217,142,74,.16);
}
.contact-grid .field label { color: var(--copper-soft); }
/* Aside: bloques de info des-cajificados (hairline cobre, sin caja) */
.contact-aside .contact-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(217,142,74,.28);
}
.contact-aside .contact-card::before,
.contact-aside .contact-card::after { content: none; }
.contact-aside .contact-card h3 {
  font-family: var(--font-cond);
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  font-size: 1.3rem; color: var(--text);
}
.contact-aside .contact-line b { color: var(--copper-soft); }
/* Motivos frecuentes: lista de acciones des-cajificada, hover cobre */
.contact-aside .motives { display: grid; gap: .1rem; }
.contact-aside .motives li { list-style: none; padding-left: 0; }
.contact-aside .motives li::before,
.contact-aside .motives li::marker { content: none; }
.contact-aside .motives button {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0;
  border-bottom: 1px solid rgba(200,215,235,.1);
  padding: .62rem 0;
  color: var(--text-soft); font-size: .92rem; font-family: var(--font-body);
  display: flex; gap: .7rem; align-items: baseline;
  transition: color .3s, padding-left .4s var(--ease-out);
}
.contact-aside .motives button::before {
  content: ""; flex: none;
  width: 7px; height: 7px; transform: rotate(45deg) translateY(2px);
  background: var(--copper); box-shadow: 0 0 7px rgba(217,142,74,.6);
}
.contact-aside .motives button:hover { color: var(--copper-soft); padding-left: .5rem; }
.field.is-flash input, .field.is-flash select, .field.is-flash textarea { border-color: var(--copper); }

/* ---- Lista-foco (propuesta): foco minero al pasar el cursor ---- */
.ticks[data-lamp-list] li {
  position: relative;
  transition: transform .55s var(--ease-out), color .3s;
  will-change: transform;
}
.ticks[data-lamp-list] li::after {
  content: "";
  position: absolute;
  left: -1.3rem; top: 50%;
  width: 118%; height: 300%;
  transform: translateY(-50%) scale(.55);
  background: radial-gradient(closest-side, rgba(217,142,74,.32), rgba(217,142,74,.08) 55%, transparent 74%);
  opacity: 0;
  filter: blur(6px);
  transition: opacity .3s, transform .45s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
  .ticks[data-lamp-list] li:hover {
    color: #fff;
    transform: scale(1.07);
    z-index: 2;
  }
  .ticks[data-lamp-list] li:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .ticks[data-lamp-list] li:hover::before {
    box-shadow: 0 0 15px rgba(217,142,74,.95) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticks[data-lamp-list] li { transition: color .3s; }
  .ticks[data-lamp-list] li:hover { transform: none; }
}

/* ============================================================
   CORRECCIONES FINAS (2026-07-26) — feedback usuario
   ============================================================ */
/* /01 /02 → punto rombo cobre (svc-index del index) */
.svc-row i {
  width: 9px; height: 9px; flex: none;
  transform: rotate(45deg);
  background: var(--copper);
  box-shadow: 0 0 8px rgba(217,142,74,.7);
  font-size: 0; min-width: 9px;
}
/* /01 /02 → punto (principios del index) */
.row-item i {
  display: inline-block;
  width: 9px; height: 9px;
  transform: rotate(45deg);
  background: var(--copper);
  box-shadow: 0 0 8px rgba(217,142,74,.7);
  font-size: 0; line-height: 0;
}
/* Principios (index): al pasar el cursor, además de moverse, crecen un poco.
   Incluye padding-left en la transición (si no, salta = "tosco"). */
.row-item {
  transform-origin: left center;
  transition: background .45s var(--ease-out), padding-left .5s var(--ease-out), transform .5s var(--ease-out);
}
.row-item:hover { transform: translateX(8px) scale(1.02); }

/* Marquesina: NO pausar en hover + hover más brilloso */
.aud-marquee:hover .aud-track { animation-play-state: running; }
.aud-item:hover {
  color: #F3B067;
  text-shadow: 0 0 14px rgba(217,142,74,.75), 0 0 4px rgba(217,142,74,.6);
}

/* Clientes: "&" en rojo al pasar el cursor (selector corregido) */
.clients-band a:hover .amp { color: #C94A3C; }

/* Diagnóstico (drill-line): cada frase flota + brillo azul */
.drill-line li { text-shadow: 0 0 15px rgba(96,150,225,.5); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .drill-line li { animation: drillFloat 5.5s ease-in-out infinite; }
  .drill-line li:nth-child(2n)   { animation-duration: 6.3s; animation-delay: -1.2s; }
  .drill-line li:nth-child(3n)   { animation-duration: 5s;   animation-delay: -2.4s; }
  .drill-line li:nth-child(4n+1) { animation-duration: 6.8s; animation-delay: -.6s; }
}
@keyframes drillFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* Servicios: subhero-note (info secundaria, de-enfatizada, ancha) */
.subhero .subhero-note {
  font-size: .9rem;
  color: var(--text-mute);
  max-width: 74ch;
  margin-top: 1rem;
  line-height: 1.55;
}
/* Servicios: acortar espacio pestañas → primer tramo */
.svc-log { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.svc-log .core-run:first-child { padding-top: clamp(1.1rem, 2.4vw, 2rem); }

/* Faros: alturas reservadas → cambios siempre SMOOTH (sin choque) */
.faro-stage h3 { min-height: 2.1em; }
.faro-stage .sp-desc { min-height: 5.2em; }
.faro-stage .sp-body { transition: opacity .3s var(--ease-out); }
.faro-stage.is-swap .sp-body { opacity: .25; }
/* Faros: marco cobre flotante que se escapa del margen (top-right) */
.faro-stage { position: relative; }
.faro-stage::before {
  content: "";
  position: absolute; z-index: 0;
  right: -16px; top: -16px;
  width: 58%; height: 56%;
  border-top: 1.5px solid rgba(217,142,74,.6);
  border-right: 1.5px solid rgba(217,142,74,.6);
  filter: drop-shadow(0 0 6px rgba(217,142,74,.35));
  pointer-events: none;
}
.faro-photo { z-index: 1; }
@media (max-width: 760px) { .faro-stage::before { right: -8px; top: -8px; } }

/* Nosotros: principios (sector-reg) aparición más SMOOTH (menos brusca).
   OJO: esta regla es más específica que [data-float-in].is-in, así que hay que
   redeclarar el estado final .is-in aquí o el blur NO se limpia (bug borroso). */
.sector-reg a[data-float-in] {
  transform: translateY(16px) scale(.995);
  filter: blur(4px);
  transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out), filter 1s var(--ease-out);
}
.sector-reg a[data-float-in].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Rig (SONDAJE NATG): ancho fijo del medidor para que NO se mueva al pasar de
   999 a 1.036 m (3→4 dígitos cambiaban el ancho y desplazaban el testigo). */
/* El medidor no puede temblar al cambiar de dígitos (0 → 99 → 100 → 1.150).
   Se reserva el ancho del valor más largo ("1.150" = 5 caracteres) DENTRO del
   número y se alinea a la derecha: "PROF." y "m" quedan clavados, los dígitos
   crecen hacia el hueco ya reservado. Cero reflow en todo el recorrido. */
.rig-meter {
  text-align: center;
  box-sizing: border-box;
}
.rig-meter [data-depth] {
  display: inline-block;
  min-width: 3.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rig { align-items: center; }

/* ============================================================
   LUZ DE MINA · el arco de luz superficie → galería
   Arriba: día de rajo (caliche claro). Abajo: túnel entibado,
   roca negra y luz artificial cálida. La luz cuenta el descenso.
   ============================================================ */

/* ---------- Escala de CUEVA ----------
   No hay "día" dentro de la mina: hay roca más alumbrada y roca más cerrada.
   La cámara de entrada recibe luz de boca; al bajar solo quedan los faroles.
   Todo el texto es claro sobre roca: un único esquema, sin volteretas. */
:root {
  --cave-1: #2C3A4C;   /* cámara de entrada, la roca mejor alumbrada */
  --cave-2: #24303F;
  --cave-3: #1B2532;
  --cave-4: #141C26;
  --cave-5: #0E141C;
  --cave-6: #080D14;   /* la veta, el fondo de la labor */
}

/* ---------- HERO: la boca de la mina, único tramo luminoso ---------- */
.hero-bg img {
  filter: saturate(.96) contrast(1.02) brightness(1.09);
}
.hero-tint {
  background:
    radial-gradient(ellipse 64% 50% at 50% 46%, rgba(8,14,26,.62) 0%, transparent 78%),
    linear-gradient(180deg,
      rgba(196,213,229,.4) 0%,
      rgba(184,202,220,.1) 22%,
      rgba(20,30,48,0) 46%,
      rgba(24,32,44,.35) 78%,
      var(--cave-1) 100%);
}
.hero-glow {
  background: radial-gradient(circle, rgba(246,208,150,.22) 0%, rgba(217,142,74,.09) 40%, transparent 64%);
}

/* ---------- Banda de stats: banco de caliche ---------- */
.stats {
  margin-top: 0;
  padding: 3.6rem 0 4.6rem;
  background:
    radial-gradient(78% 120% at 50% -10%, rgba(150,180,214,.16) 0%, transparent 58%),
    linear-gradient(180deg, var(--cave-1), var(--cave-2));
}
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/img/tex-roca-negra.webp") center / 1100px repeat;
  mix-blend-mode: soft-light;
  opacity: .5;
}
.stats-grid { position: relative; z-index: 1; }

/* ---------- Escalera de estratos: de la arena a la roca negra ---------- */
[data-stratum="1"].sec {
  background:
    radial-gradient(72% 62% at 78% -4%, rgba(150,180,214,.14), transparent 56%),
    linear-gradient(180deg, var(--cave-2), var(--cave-3));
}
[data-stratum="2"].sec {
  background:
    radial-gradient(58% 52% at 14% 4%, rgba(217,142,74,.14), transparent 56%),
    linear-gradient(180deg, var(--cave-3) 0%, var(--cave-4) 62%, var(--cave-5) 100%);
}
[data-stratum="1"].sec::before,
[data-stratum="2"].sec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/img/tex-roca-negra.webp") center / 1100px repeat;
  mix-blend-mode: soft-light;
  opacity: .5;
}

/* La bocamina (e3): luz del día cayendo por el pique, madera al fondo */
[data-stratum="3"].sec {
  background:
    radial-gradient(56% 44% at 50% 0%, rgba(232,185,138,.16), transparent 72%),
    linear-gradient(180deg, var(--cave-5) 0%, #0C1119 55%, #0A0E14 100%);
}
.sec-portal .sec-texture {
  opacity: .15;
  background-position: center 32%;
  -webkit-mask-image: radial-gradient(76% 88% at 50% 42%, #000 26%, transparent 76%);
  mask-image: radial-gradient(76% 88% at 50% 42%, #000 26%, transparent 76%);
}
.sec-portal.sec-dark::after {
  background:
    radial-gradient(60% 50% at 24% 18%, rgba(217,142,74,.14), transparent 64%),
    radial-gradient(50% 44% at 78% 72%, rgba(214,164,84,.12), transparent 66%),
    linear-gradient(180deg, rgba(6,9,14,.78), rgba(6,9,14,.4) 40%, rgba(6,9,14,.86));
}
.sec-portal .drill-line li { text-shadow: 0 0 15px rgba(232,185,138,.4); }

[data-stratum="4"].sec {
  background:
    radial-gradient(60% 55% at 16% 10%, rgba(217,142,74,.11), transparent 58%),
    linear-gradient(180deg, #0B131D, #0A111A);
}
[data-stratum="5"].sec {
  background:
    radial-gradient(46% 42% at 82% 20%, rgba(232,185,138,.14), transparent 60%),
    linear-gradient(180deg, #080E16, #070B11);
}
[data-stratum="6"].sec {
  background:
    radial-gradient(70% 55% at 50% 44%, rgba(217,142,74,.17), transparent 62%),
    linear-gradient(180deg, #05090F, #030608);
}
/* roca negra respirando detrás del contenido profundo */
[data-stratum="4"].sec::before,
[data-stratum="5"].sec::before,
[data-stratum="6"].sec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/img/tex-roca-negra.webp") center / 900px repeat;
  mix-blend-mode: soft-light;
  opacity: .55;
}

/* ---------- Guirnalda de faena: ampolletas colgadas del techo ---------- */
.lux-string {
  position: absolute;
  left: 0; right: 0; top: 2px;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.lux-string .wire {
  stroke: rgba(205,175,125,.35);
  stroke-width: 1.6;
}
.lux-string line {
  stroke: rgba(205,175,125,.42);
  stroke-width: 1.4;
}
.lux-string .lb-core { fill: #FFDCA8; }
.lux-string .lb-glow { fill: rgba(255,186,100,.5); filter: blur(7px); }
@keyframes luxFlick {
  0%, 100% { opacity: 1; }
  50%      { opacity: .68; }
}
@media (prefers-reduced-motion: no-preference) {
  .lux-string .lbulb { animation: luxFlick 3.4s ease-in-out infinite; }
  .lux-string .lbulb:nth-of-type(2n) { animation-duration: 4.6s; animation-delay: -1.3s; }
  .lux-string .lbulb:nth-of-type(3n) { animation-duration: 2.9s; animation-delay: -2.1s; }
  .lux-string .lbulb:nth-of-type(5n) { animation-duration: 5.2s; animation-delay: -.7s; }
}

/* ---------- Farol de galería: recorte colgado del estrato ---------- */
.farol {
  position: absolute;
  z-index: 2;
  top: -12px;
  width: clamp(120px, 13vw, 185px);
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 0;
  filter: drop-shadow(0 0 38px rgba(255,190,110,.14));
}
.farol-r { right: 5%; }
.farol-l { left: 4.5%; }
.farol-sm { width: clamp(96px, 9vw, 132px); }
@keyframes farolSway {
  0%, 100% { transform: rotate(1.5deg); }
  50%      { transform: rotate(-1.3deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .farol { animation: farolSway 7.5s ease-in-out infinite; }
  .farol-l { animation-duration: 8.8s; animation-delay: -2.4s; }
}
@media (max-width: 880px) {
  .farol { width: 92px; opacity: .85; }
}

/* ---------- La veta (e6): hilos de cobre atravesando la roca ---------- */
.veta-band {
  position: absolute;
  z-index: 0;
  left: -2%; right: -2%;
  top: 30%;
  height: clamp(130px, 17vw, 230px);
  pointer-events: none;
  background: url("assets/img/veta-cobre.webp") center / cover;
  mix-blend-mode: screen;
  opacity: .33;
  transform: rotate(-2deg);
  -webkit-mask-image: radial-gradient(58% 60% at 50% 50%, #000 34%, transparent 76%);
  mask-image: radial-gradient(58% 60% at 50% 50%, #000 34%, transparent 76%);
}

/* ---------- CTA final: galería habitada, mineros al fondo ---------- */
.cta-mina {
  background: linear-gradient(180deg, #040709, #030507);
  border-top-color: rgba(217,142,74,.2);
}
.cta-mina .halo {
  background:
    radial-gradient(46% 42% at 30% 62%, rgba(217,142,74,.28), transparent 70%),
    radial-gradient(40% 40% at 78% 28%, rgba(232,185,138,.13), transparent 72%);
}
.cta-mina .mineros-band {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -2%;
  transform: translateX(-50%);
  width: min(1150px, 100vw);
  aspect-ratio: 1700 / 795;
  pointer-events: none;
  background: url("assets/img/mineros-frontales.webp") center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: .38;
  -webkit-mask-image: radial-gradient(66% 78% at 50% 58%, #000 28%, transparent 74%);
  mask-image: radial-gradient(66% 78% at 50% 58%, #000 28%, transparent 74%);
}
.cta-mina .farol-l { top: -8px; }

/* ---------- Footer: el fondo de la labor ---------- */
.footer {
  background:
    radial-gradient(46% 120px at 16% 0%, rgba(217,142,74,.10), transparent 100%),
    #020407;
}

/* ---------- Guardas móviles ---------- */
@media (max-width: 640px) {
  .veta-band { opacity: .22; top: 36%; }
  .cta-mina .mineros-band { width: 160vw; opacity: .3; }
  .cta-mina .farol { display: none; } /* en movil chocaria con el titulo centrado */
}

/* ---------- Pulido día: cursivas de cobre BRUÑIDO (contraste en arena) ---------- */
@supports (-webkit-background-clip: text) {
  }
/* stats de dia: cifras en cobre brunido (no lavado) */
.cta-mina { --blue-soft: #D9AE7E; }
/* el italic del hero se despega de la foto clara de dia */
.hero-title em { filter: drop-shadow(0 2px 10px rgba(6,10,18,.85)) drop-shadow(0 1px 3px rgba(6,10,18,.7)); }

/* ---------- Interiores: subhero de DÍA en todas las páginas ---------- */
.subhero .hero-bg img {
  filter: saturate(.96) contrast(1.02) brightness(1.12);
}
.subhero .hero-tint {
  background:
    radial-gradient(96% 88% at 30% 92%, rgba(8,14,26,.7) 0%, rgba(8,14,26,.32) 54%, transparent 80%),
    linear-gradient(180deg,
      rgba(198,214,228,.42) 0%,
      rgba(190,205,220,.14) 26%,
      rgba(10,18,32,.05) 55%,
      rgba(216,203,169,.34) 100%);
}

/* ---------- Servicios: el registro parte como pique de bocamina ---------- */
.svc-log[data-stratum="5"].sec {
  padding-top: clamp(6.5rem, 11vw, 10rem); /* pozo de entrada: luz + guirnalda */
  background:
    linear-gradient(180deg, rgba(203,182,138,.26) 0%, rgba(203,182,138,.07) 110px, transparent 240px),
    radial-gradient(58% 300px at 50% 0%, rgba(232,185,138,.15), transparent 100%),
    linear-gradient(180deg, #0B1119 0%, #0A0F16 40%, #060B11 100%);
}
.svc-log .farol-end {
  top: auto;
  bottom: 3%;
}

/* ---------- Experiencia: áreas = portal de entrada ---------- */
.sec-areas[data-stratum="2"].sec {
  background:
    linear-gradient(180deg, rgba(203,182,138,.22) 0%, rgba(203,182,138,.05) 12%, transparent 24%),
    radial-gradient(54% 42% at 50% 0%, rgba(232,185,138,.13), transparent 70%),
    linear-gradient(180deg, #0B1018, #0D1219 55%, #0B0F16);
}
.sec-exec.sec-dark {
  background: linear-gradient(180deg, #0B131D, #0A111A);
}


/* ---------- Sin eyebrows: los títulos ya no cuelgan de una etiqueta ---------- */
.section-title, .subhero h1 { margin-top: 0; }
.split-body .section-title { margin-bottom: 1.4rem; }
.core-body h2 { margin-top: 0; }

/* ============================================================
   LUZ DE MINA · ronda 2 — correcciones
   ============================================================ */

/* ---------- SUBHEROS: vuelve el azul profundo sobre la foto ----------
   El día quedaba tan claro que el h1 se perdía. La superficie sigue ahí
   (un resto de cielo arriba), pero el peso vuelve al azul de marca: el
   titular manda. */
.subhero .hero-bg img {
  filter: saturate(.78) contrast(1.08) brightness(.72);
}
.subhero .hero-tint {
  background:
    radial-gradient(96% 86% at 24% 90%, rgba(4,8,16,.92) 0%, rgba(6,12,24,.62) 54%, rgba(6,12,22,.28) 86%),
    linear-gradient(180deg,
      rgba(132,160,192,.16) 0%,
      rgba(9,18,32,.66) 26%,
      rgba(8,16,29,.74) 58%,
      rgba(5,10,19,.94) 100%);
}
.subhero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.6); }
.subhero p  { text-shadow: 0 1px 14px rgba(0,0,0,.7); }

/* ---------- SERVICIOS: el registro desciende de verdad ----------
   Arriba (Evaluación ambiental) todavía llega luz del portal; abajo
   (Asesoría senior) ya es roca cerrada. */
.svc-log[data-stratum="5"].sec {
  background:
    linear-gradient(180deg, rgba(203,213,222,.16) 0%, rgba(150,168,188,.05) 5%, transparent 13%),
    radial-gradient(56% 340px at 50% 0%, rgba(232,185,138,.16), transparent 100%),
    linear-gradient(180deg,
      #26313F 0%,
      #1B2534 14%,
      #141C29 34%,
      #0D141E 58%,
      #080D14 80%,
      #05080C 100%);
}
/* la roca de caja se cierra a medida que se baja */
.svc-log[data-stratum="5"].sec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/img/tex-roca-negra.webp") center / 900px repeat;
  mix-blend-mode: soft-light;
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
}

/* ---------- Cristales: cuarzo creciendo en la roca ----------
   Geológicamente honesto: las vetas de cuarzo hospedan el cobre. Aparecen
   sólo en profundidad, nunca en las bandas de día. */
.cristal {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: .5;
  filter: drop-shadow(0 0 26px rgba(170,205,235,.16));
}
.cristal-l { left: -3%; width: clamp(150px, 17vw, 290px); }
.cristal-r { right: -3%; width: clamp(150px, 17vw, 290px); }
.cristal-sm { width: clamp(110px, 11vw, 180px); opacity: .4; }
@keyframes cristalGlint {
  0%, 100% { opacity: .42; }
  50%      { opacity: .62; }
}
@media (prefers-reduced-motion: no-preference) {
  .cristal { animation: cristalGlint 9s ease-in-out infinite; }
  .cristal-r { animation-duration: 11.5s; animation-delay: -3s; }
}
@media (max-width: 880px) {
  .cristal { width: 116px; opacity: .3; }
}

/* veta de cuarzo cruzando la roca (pared cristalina, no un rectángulo) */
.cuarzo-band {
  position: absolute;
  z-index: 0;
  left: -4%; right: -4%;
  pointer-events: none;
  height: clamp(160px, 20vw, 280px);
  background: url("assets/img/tex-cuarzo.webp") center / cover;
  mix-blend-mode: screen;
  opacity: .17;
  transform: rotate(2.4deg);
  -webkit-mask-image: radial-gradient(56% 58% at 50% 50%, #000 28%, transparent 74%);
  mask-image: radial-gradient(56% 58% at 50% 50%, #000 28%, transparent 74%);
}

/* ---------- EXPERIENCIA: descenso real por la página ---------- */
.sec-areas[data-stratum="2"].sec {
  background:
    linear-gradient(180deg, rgba(203,213,222,.14) 0%, rgba(150,168,188,.04) 6%, transparent 16%),
    radial-gradient(54% 300px at 50% 0%, rgba(232,185,138,.14), transparent 100%),
    linear-gradient(180deg, #212C3A, #171F2C 60%, #121924);
}
.sec-exec.sec-dark {
  background: linear-gradient(180deg, #121924, #0D1420);
}
.sec-exec.sec-dark::after {
  background:
    radial-gradient(60% 50% at 24% 18%, rgba(217,142,74,.13), transparent 64%),
    linear-gradient(180deg, rgba(8,13,22,.5), rgba(8,13,22,.24) 40%, rgba(8,13,22,.62));
}
/* la representativa y sectores cierran la bajada */
.sec-repr, .sec-repr.sec {
  background: linear-gradient(180deg, #0D1420, #090F18);
}
/* roca de caja en todo el tramo profundo de experiencia */
.sec-exec.sec-dark::before,
.sec-repr::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/img/tex-roca-negra.webp") center / 900px repeat;
  mix-blend-mode: soft-light;
  opacity: .5;
}

/* ---------- La grúa (y toda media flotante) recupera su marco ----------
   El bisel se conserva; el marco de cobre lo sigue por dentro usando el
   padding del contenedor recortado, porque un border normal no respeta
   el clip-path. */
.float-bevel {
  padding: 2px;
  background: linear-gradient(150deg, rgba(232,185,138,.85), rgba(156,95,46,.7) 46%, rgba(232,185,138,.6));
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.85);
}
.float-bevel img {
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}

/* ---------- NOSOTROS: la página entra a la cueva ---------- */
.nos-1.sec {
  background:
    linear-gradient(180deg, rgba(203,213,222,.14) 0%, rgba(150,168,188,.04) 6%, transparent 16%),
    radial-gradient(54% 300px at 50% 0%, rgba(232,185,138,.13), transparent 100%),
    linear-gradient(180deg, #202B39, #161E2B 62%, #111823);
}
.nos-2.sec {
  background:
    radial-gradient(48% 44% at 84% 18%, rgba(232,185,138,.13), transparent 60%),
    linear-gradient(180deg, #111823, #0C121C);
}
.nos-3.sec {
  background:
    radial-gradient(66% 54% at 50% 42%, rgba(217,142,74,.15), transparent 64%),
    linear-gradient(180deg, #0A0F18, #05080D);
}
.nos-2::before, .nos-3::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/img/tex-roca-negra.webp") center / 900px repeat;
  mix-blend-mode: soft-light;
  opacity: .55;
}
.nos-3 .sec-texture { opacity: .12; }

/* ---------- CONTACTO: el formulario dentro de la galería ---------- */
.contacto-sec.sec {
  background:
    radial-gradient(62% 380px at 50% 0%, rgba(217,142,74,.14), transparent 100%),
    linear-gradient(180deg, #12181F 0%, #0E141C 30%, #0A0F16 62%, #06090E 100%);
}
.contacto-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/img/tex-roca-negra.webp") center / 900px repeat;
  mix-blend-mode: soft-light;
  opacity: .6;
}
/* pared de fondo: la galería real, muy atrás */
.contacto-sec .galeria-wall {
  position: absolute;
  z-index: 0;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  pointer-events: none;
  background: url("assets/img/galeria-wide.webp") center bottom / cover no-repeat;
  opacity: .2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
}
.contacto-sec > .container { position: relative; z-index: 2; }

/* El velo azul heredado de .sec-dark aclaraba el tramo final de nosotros y
   rompía el descenso: abajo tiene que ser lo más hondo de la página. */
.nos-3.sec-dark::after {
  background:
    radial-gradient(58% 48% at 26% 20%, rgba(217,142,74,.16), transparent 64%),
    linear-gradient(180deg, rgba(5,8,14,.9), rgba(6,10,18,.62) 42%, rgba(3,5,9,.94));
}
.nos-3 .cristal { opacity: .55; }

/* ---------- nosotros: pared de galería tras la primera sección ---------- */
.nos-1 .sec-texture {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: .1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 78% at 68% 46%, #000 18%, transparent 76%);
  mask-image: radial-gradient(80% 78% at 68% 46%, #000 18%, transparent 76%);
}
.nos-1 > .container { position: relative; z-index: 2; }

/* ---------- Agua Pura: sin logo, así que la palabra ES el logo ----------
   El degradado metálico aquí SÍ funciona: cobre claro sobre banda oscura. */
.clients-band .client-word.is-metal {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 1.42rem;
  letter-spacing: .005em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 6px 16px rgba(217,142,74,.28));
  transition: filter .4s var(--ease-out);
}
.clients-band a:hover .client-word.is-metal {
  filter: drop-shadow(0 8px 22px rgba(232,185,138,.6)) drop-shadow(0 0 3px rgba(217,142,74,.5));
}

/* Las cursivas sobre fondo oscuro usan el metal encendido; sobre claro ya
   tienen su propia variante bruñida. Así el brillo nunca se apaga a mitad. */
@supports (-webkit-background-clip: text) {
  .subhero h1 em,
  .hero-title em,
  .cta-inner h2 em,
  .section-title em {
    background-image: var(--metal-lit);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  }

/* ============================================================
   RONDA 4 · todo es cueva
   ============================================================ */

/* ---------- COBRE LIMPIO ----------
   El degradado de 4 paradas repartía parches claros y oscuros dentro de una
   misma palabra: eso era lo que se veía "manchado". Sobre roca oscura no hace
   falta degradado — un cobre claro sólido con un halo tenue brilla más y se
   lee limpio. */
.section-title em,
.subhero h1 em,
.hero-title em,
.cta-inner h2 em {
  background-image: none !important;
  -webkit-text-fill-color: #F2CB9E;
  color: #F2CB9E;
  text-shadow: 0 0 26px rgba(232,185,138,.32), 0 1px 2px rgba(0,0,0,.5);
  filter: none;
}

/* ---------- MÉTRICAS: vuelve el metal (sobre roca sí luce) ---------- */
.stat b {
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 26px rgba(217,142,74,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.stat b i { -webkit-text-fill-color: var(--copper-soft); }
.stat::after {
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  box-shadow: 0 0 14px rgba(217,142,74,.75), 0 0 4px rgba(217,142,74,.7);
}
a.stat:hover {
  background: rgba(217,142,74,.07);
  box-shadow: inset 0 0 0 1px rgba(217,142,74,.28);
}
a.stat:hover b {
  filter: drop-shadow(0 12px 30px rgba(232,185,138,.6)) drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
a.stat:hover > span { color: var(--copper-soft); }

/* ---------- La pared de roca pasa a ser el fondo de los servicios ----------
   Suelta era una franja vacía; detrás del contenido trabaja. */
.sec-wall { position: relative; overflow: clip; }
.sec-wall .wall-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url("assets/img/tunel-entibado.webp") center 38% / cover no-repeat;
  opacity: .17;
  -webkit-mask-image: radial-gradient(92% 82% at 50% 46%, #000 20%, transparent 78%);
  mask-image: radial-gradient(92% 82% at 50% 46%, #000 20%, transparent 78%);
}
.sec-wall > .container { position: relative; z-index: 2; }

/* ---------- COSTURAS SUAVES ----------
   El corte de roca dejaba un canto duro entre secciones. Ahora cada sección
   se hunde en la anterior con una sombra interior larga: el límite se lee
   como profundidad, no como recorte. */
.sec, .cta-band, .stats {
  box-shadow:
    inset 0 44px 56px -44px rgba(0,0,0,.62),
    inset 0 -44px 56px -44px rgba(0,0,0,.5);
}
.strata-edge { height: 84px; margin-top: -83px; }
.strata-edge svg { filter: drop-shadow(0 -6px 14px rgba(0,0,0,.45)); }

/* ---------- CONTACTO: las cajas necesitan despegarse del fondo ---------- */
.contact-card {
  box-shadow:
    0 26px 60px -26px rgba(0,0,0,.85),
    0 0 0 1px rgba(217,142,74,.16),
    0 0 46px -12px rgba(217,142,74,.24);
  transition: box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
}
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 32px 70px -26px rgba(0,0,0,.9),
    0 0 0 1px rgba(232,185,138,.34),
    0 0 68px -10px rgba(217,142,74,.42);
}
/* halo cálido detrás de cada caja, como si el farol las alcanzara */
.contact-aside { position: relative; }
.contact-aside::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -8% -12%;
  pointer-events: none;
  background:
    radial-gradient(48% 34% at 50% 22%, rgba(217,142,74,.2), transparent 70%),
    radial-gradient(52% 36% at 50% 78%, rgba(150,180,214,.13), transparent 72%);
  filter: blur(26px);
}
.contact-aside > * { position: relative; z-index: 1; }

/* ---------- Agua Pura: apagada en reposo, cobre al pasar ---------- */
.clients-band .client-word.is-metal {
  background-image: none;
  -webkit-text-fill-color: var(--text-mute);
  color: var(--text-mute);
  filter: none;
  transition: -webkit-text-fill-color .4s var(--ease-out), color .4s var(--ease-out), filter .4s var(--ease-out);
}
@supports (-webkit-background-clip: text) {
  .clients-band a:hover .client-word.is-metal {
    background-image: var(--metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(232,185,138,.5));
  }
}

/* ---------- La imagen de la constelación entra al mismo sistema ----------
   No lleva animación propia: se suma como `data-repel-item` para que flote y
   se aparte del cursor igual que las estrellas de su zona. Una animación CSS
   aquí chocaría con el transform que escribe initRepel cada frame. */
.constellation .con-anchor { will-change: transform; }

/* ---------- Desvanecido en la costura ----------
   El canto de roca se conserva (es la identidad), pero ahora proyecta sombra
   hacia la sección siguiente: el ojo lee profundidad y el corte deja de ser
   una línea seca. */
.strata-edge::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -78px;
  height: 180px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3,6,11,.6) 0%, rgba(3,6,11,.26) 38%, transparent 100%);
}
.strata-edge { position: relative; }

/* ---------- Las interiores comparten la MISMA rampa de cueva ----------
   Antes cada página tenía sus propios grises y los saltos se notaban. */
.svc-log[data-stratum="5"].sec {
  background:
    radial-gradient(58% 320px at 50% 0%, rgba(232,185,138,.16), transparent 100%),
    linear-gradient(180deg,
      var(--cave-2) 0%, var(--cave-3) 22%, var(--cave-4) 48%,
      var(--cave-5) 74%, var(--cave-6) 100%);
}
.sec-areas[data-stratum="2"].sec {
  background:
    radial-gradient(54% 280px at 50% 0%, rgba(232,185,138,.15), transparent 100%),
    linear-gradient(180deg, var(--cave-2), var(--cave-3) 62%, var(--cave-4));
}
.sec-exec.sec-dark { background: linear-gradient(180deg, var(--cave-4), var(--cave-5)); }
.sec-exec.sec-dark::after {
  background:
    radial-gradient(60% 50% at 24% 18%, rgba(217,142,74,.14), transparent 64%),
    linear-gradient(180deg, rgba(8,13,22,.34), rgba(8,13,22,.14) 42%, rgba(8,13,22,.44));
}
.sec-repr, .sec-repr.sec { background: linear-gradient(180deg, var(--cave-5), var(--cave-5)); }
.nos-1.sec {
  background:
    radial-gradient(56% 300px at 50% 0%, rgba(232,185,138,.14), transparent 100%),
    linear-gradient(180deg, var(--cave-2), var(--cave-3) 64%, var(--cave-4));
}
.nos-2.sec {
  background:
    radial-gradient(46% 42% at 84% 18%, rgba(232,185,138,.13), transparent 60%),
    linear-gradient(180deg, var(--cave-4), var(--cave-5));
}
.nos-3.sec {
  background:
    radial-gradient(64% 52% at 50% 42%, rgba(217,142,74,.16), transparent 64%),
    linear-gradient(180deg, var(--cave-5), var(--cave-6));
}
.nos-3.sec-dark::after {
  background:
    radial-gradient(58% 48% at 26% 20%, rgba(217,142,74,.16), transparent 64%),
    linear-gradient(180deg, rgba(6,10,16,.5), rgba(6,10,16,.2) 42%, rgba(4,7,12,.62));
}
.contacto-sec.sec {
  background:
    radial-gradient(60% 340px at 50% 0%, rgba(217,142,74,.15), transparent 100%),
    linear-gradient(180deg, var(--cave-3) 0%, var(--cave-4) 34%, var(--cave-5) 68%, var(--cave-6) 100%);
}

/* ============================================================
   COSTURA SUAVE DEL CANTO (2026-08-07) — el canto era un bloque
   de color plano que cortaba seco contra la sección siguiente
   (medido: salto de luma −21 en el borde inferior). La máscara
   conserva el filo de roca arriba y funde el cuerpo hacia abajo.
   ============================================================ */
.strata-edge svg {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.6) 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.6) 72%, transparent 100%);
}
/* el halo de sombra acompaña la fusión, un poco más largo y suave */
.strata-edge::before {
  bottom: -104px;
  height: 210px;
  background: linear-gradient(180deg, rgba(3,6,11,.55) 0%, rgba(3,6,11,.22) 42%, transparent 100%);
}
/* El canto no puede ser MÁS CLARO que las secciones que une (regla "todo es
   cueva"): medido luma 26 contra 13 arriba y 5 abajo. Se baja su brillo para
   que el filo se lea como roca en penumbra y no como una banda iluminada.
   El drop-shadow se re-declara porque `filter` no se acumula entre reglas. */
.strata-edge svg {
  filter: brightness(.72) drop-shadow(0 -6px 14px rgba(0,0,0,.5));
}

/* Pendiente menor resuelto: con reduced-motion el marquee se vuelve estático y
   `nowrap` truncaba los items largos en móvil. Al no haber desplazamiento, el
   texto puede fluir en varias líneas. */
@media (prefers-reduced-motion: reduce) {
  .aud-item { white-space: normal; text-align: center; }
}
@media (max-width: 560px) {
  .aud-item { font-size: clamp(1.05rem, 5.2vw, 1.5rem); padding: 0 .7rem; gap: 1.2rem; }
}

/* ============================================================
   COSTURAS · desvanecido total (2026-08-07 · feedback "rectángulo negro")
   Dos bordes duros convivían en cada costura:
   1) el `inset 0 44px 56px -44px` de .sec dibujaba una banda oscura de canto
      definido en el tope de cada sección;
   2) el ::before del canto arrancaba en rgba(3,6,11,.55) DE GOLPE en su borde
      superior — un rectángulo negro plano.
   Ahora: la sombra interior es mucho más larga y tenue, y el velo del canto
   entra y sale desde transparente (sube al máximo en el medio).
   ============================================================ */
.sec, .cta-band, .stats {
  box-shadow:
    inset 0 90px 90px -90px rgba(0,0,0,.42),
    inset 0 -90px 90px -90px rgba(0,0,0,.34);
}
.strata-edge::before {
  bottom: -150px;
  height: 300px;
  background: linear-gradient(180deg,
      rgba(3,6,11,0) 0%,
      rgba(3,6,11,.30) 22%,
      rgba(3,6,11,.34) 44%,
      rgba(3,6,11,.14) 72%,
      rgba(3,6,11,0) 100%);
}
/* el canto se funde antes y por más recorrido */
.strata-edge svg {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.5) 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.5) 62%, transparent 100%);
}

/* ============================================================
   CURSIVAS = COBRE METÁLICO (2026-08-07)
   Corrige la ronda anterior: se habían aplanado a #F2CB9E sólido
   ("brillante" pero sin metal). El usuario pide el MISMO lenguaje
   metálico del botón (`--metal`). Se usa `--metal-lit` porque sus
   cuatro paradas son cobre claro-medio (todas R>G>B, ninguna cae a
   marrón oscuro): sobre roca lee metálico y sigue siendo legible,
   sin los parches que ensuciaban las versiones antiguas.
   `background-image` (NO el atajo `background`) para no resetear
   background-clip. `!important` porque la regla anulada lo usaba.
   ============================================================ */
.section-title em,
.subhero h1 em,
.hero-title em,
.cta-inner h2 em,
.split-body h2 em,
.profile-body h2 em {
  background-image: var(--metal-lit) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  /* ⚠️ NADA de `filter` aquí: un filter sobre un inline con background-clip:text
     hace que Chromium NO pinte los glifos (queda invisible). La separación del
     fondo la da el propio metal. */
  filter: none !important;
}

/* ============================================================
   CONTACTO · campos iluminados por lámpara (2026-08-07)
   Antes eran agujeros negros planos sobre la roca. La luz de una
   lámpara minera cae DESDE ARRIBA: el campo se aclara en su borde
   superior y se apaga hacia el fondo. Es iluminación permanente,
   no un estado de hover. Sin glow exterior: eso volvería a ser
   "cajita con brillo".
   ============================================================ */
.contact-grid .field input,
.contact-grid .field select,
.contact-grid .field textarea {
  background-color: rgba(12,18,27,.78);
  background-image: linear-gradient(180deg,
      rgba(240,205,165,.13) 0%,
      rgba(217,142,74,.055) 24%,
      rgba(8,13,20,0) 70%);
  border: 1px solid rgba(217,142,74,.26);
  border-top-color: rgba(240,205,165,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,232,205,.16),
    inset 0 16px 26px -20px rgba(240,205,165,.55);
  color: #F2F6FC;
  transition: border-color .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .35s;
}
/* placeholder legible (no el gris muerto por defecto) */
.contact-grid .field input::placeholder,
.contact-grid .field textarea::placeholder {
  color: #9FB0C6;
  opacity: 1;
}
/* el foco sube la lámpara, no cambia el lenguaje */
.contact-grid .field input:focus,
.contact-grid .field select:focus,
.contact-grid .field textarea:focus {
  outline: none;
  border-color: var(--copper);
  border-top-color: var(--copper-soft);
  background-color: rgba(14,21,31,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,232,205,.24),
    inset 0 18px 30px -20px rgba(240,205,165,.75),
    0 0 0 3px rgba(217,142,74,.16);
}
.contact-grid .field select option { background: #0E141C; color: #F2F6FC; }

/* ============================================================
   FICHA DE DOBLE CARA · Nelson (2026-08-07)
   El retrato ya se leía como dos tarjetas apiladas (.pop-bg tras el
   recorte). Se convierte en ficha girable: terreno ⇄ oficina.
   - En reposo: idéntico a como estaba.
   - Hover/focus: la tarjeta trasera se asoma (indicio de que hay algo
     detrás) y aparece la pista "Girar ficha".
   - Click/Enter/tap: giro 3D real que revela la segunda foto.
   Es un <button>: teclado y táctil funcionan (nada hover-only).
   ============================================================ */
.flipcard {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1400px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.flipcard-inner {
  display: block;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.flipcard.is-flipped .flipcard-inner { transform: rotateY(180deg); }

.flipcard-face { display: block; backface-visibility: hidden; }
.flipcard-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* la cara B usa el mismo lenguaje: tarjeta de roca + bisel + filo cobre */
.flipcard-back .pop-img-b {
  position: relative;
  z-index: 1;
  width: 76%;
  margin: 0 auto;
  display: block;
  align-self: center;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  filter: saturate(.92) contrast(1.03) brightness(.96);
  box-shadow: 0 30px 60px -26px rgba(0,0,0,.85);
}
/* el fondo de la cara B se pinta igual que .pop-bg (hereda la regla) */

/* --- indicio: la tarjeta trasera "quiere salir" --- */
.flipcard .pop-bg {
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s var(--ease-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .flipcard:hover .pop-bg,
  .flipcard:focus-visible .pop-bg {
    transform: translate(14px, -12px) rotate(1.4deg);
    box-shadow:
      26px 26px 0 -1px #0E1830,
      26px 26px 0 0 rgba(217,142,74,.34),
      0 40px 74px -28px rgba(0,0,0,.85);
  }
  .flipcard:hover .pop-img { transform: translate(-6px, 4px) scale(1.012); }
}
.flipcard .pop-img { transition: transform .55s cubic-bezier(.2,.8,.2,1); }

/* pista textual */
.flipcard-hint {
  position: absolute;
  right: 14px; top: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .8rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper-soft);
  background: rgba(8,13,20,.74);
  border: 1px solid rgba(217,142,74,.4);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  pointer-events: none;
}
.flipcard:hover .flipcard-hint,
.flipcard:focus-visible .flipcard-hint { opacity: 1; transform: none; }
.fc-ico {
  width: 11px; height: 11px;
  border: 1.5px solid var(--copper);
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: fcSpin 3.4s linear infinite;
}
@keyframes fcSpin { to { transform: rotate(360deg); } }
/* en táctil la pista se muestra sola: sin hover no habría affordance */
@media (hover: none) {
  .flipcard-hint { opacity: 1; transform: none; }
}
.flipcard:focus-visible { outline: 2px solid var(--copper); outline-offset: 6px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .flipcard-inner { transition: opacity .3s ease; }
  .flipcard.is-flipped .flipcard-inner { transform: none; }
  .flipcard.is-flipped .flipcard-front { opacity: 0; }
  .flipcard.is-flipped .flipcard-back { transform: none; }
  .flipcard-back { transition: opacity .3s ease; }
  .flipcard .pop-bg, .flipcard .pop-img, .fc-ico { transition: none; animation: none; }
}
.pop-media figcaption[data-flip-caption] { transition: opacity .3s var(--ease-out); }

/* ============================================================
   HILADO FINO 2026-08-07
   ============================================================ */
/* (1) Fuera las líneas rectas que cortaban la página: en modo cueva la
   separación la hace el canto de roca, no un borde de 1px. */
.stats { border-top: 0; border-bottom: 0; }
.sec, .cta-band, .stats, .sec-dark { border-top: 0; border-bottom: 0; }

/* (4) Contacto: fuera el marco del bloque de datos. Queda la información
   sobre la roca; lo iluminado son los campos que se rellenan. */
.contact-aside .contact-card,
.contact-grid .contact-card {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  outline: 0 !important;
}
.contact-aside .contact-card::before,
.contact-aside .contact-card::after { content: none !important; }

/* ============================================================
   DOS TARJETAS QUE SE INTERCAMBIAN · Nelson (reemplaza el flip)
   No es una ficha de dos caras: son DOS tarjetas distintas apiladas.
   Al pulsar, la de atrás SALTA al frente y la de adelante pasa atrás.
   La tarjeta A queda en el flujo (define la altura) y la B va absoluta
   encima; al intercambiar solo cambian transform / z-index / brillo,
   así el layout nunca salta.
   ============================================================ */
.stack {
  display: block;
  position: relative;
  width: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stack-card {
  display: block;
  /* el sistema de movimiento vive en un único bloque al final del archivo */
}
.stack-b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stack-b .pop-img-b {
  position: relative;
  z-index: 1;
  width: 76%;
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  filter: saturate(.94) contrast(1.03);
  box-shadow: 0 30px 60px -26px rgba(0,0,0,.85);
}
.stack-a { position: relative; }
.stack:focus-visible { outline: 2px solid var(--copper); outline-offset: 8px; border-radius: 4px; }

/* ============================================================
   CORRECCIÓN · eran 4 tarjetas (2026-08-07)
   El `.pop-bg` traía `box-shadow: 18px 18px 0` = una tarjeta FANTASMA
   dibujada por sombra. Al añadir la segunda tarjeta real, cada una
   arrastraba su fantasma → 4. Ahora la sombra sólida se elimina y la
   segunda tarjeta ocupa exactamente ese lugar: DOS tarjetas, no más.
   ============================================================ */
/* Sin `!important`: gana igual por orden de aparición sobre `.pop-media .pop-bg`
   (misma especificidad, va después) — y con `!important` ninguna animación
   podía tocar la sombra, así que el "respiro" del despegue estaba MUERTO.
   Una declaración !important gana incluso a los keyframes. */
.stack .pop-bg {
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.85);
}
/* (el movimiento del intercambio vive en un único bloque al final del archivo) */

/* ============================================================
   HERO · "proyectos mineros" se perdía sobre el cielo claro.
   Usa `--metal` (con paradas cobre profundas) en vez de `--metal-lit`,
   más una sombra que lo asienta. Sin `filter` (invisibiliza el texto).
   ============================================================ */
.hero-title em {
  background-image: var(--metal) !important;
  text-shadow: 0 3px 14px rgba(4,8,14,.85), 0 1px 3px rgba(4,8,14,.9) !important;
}

/* ============================================================
   ÚLTIMOS AJUSTES 2026-08-07 · v20260763
   ============================================================ */
/* (1) El hero se fue a marrón sucio: `--metal` cae a #8C5426 y sobre el cielo
   claro el texto se apagaba. Gradiente propio: cobre medio-claro en TODAS las
   paradas (la más oscura sigue siendo legible) + sombra que lo asienta. */
.hero-title em {
  background-image: linear-gradient(112deg, #FBE7CD 4%, #DE9F62 34%, #F7D9B2 60%, #C9884A 92%) !important;
  text-shadow: 0 3px 16px rgba(4,8,14,.9), 0 1px 4px rgba(4,8,14,.95) !important;
}

/* (2) Las dos líneas alrededor de las estadísticas: no eran bordes (ya estaban
   en 0) sino el CORTE del fondo de la banda contra sus vecinas. Se difuminan
   los extremos de la banda y de su textura. */
.stats {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  box-shadow: none;
}
.stats::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* (3) La foto formal ahora es un recorte sin fondo: mismo tratamiento que la
   de terreno — grande y saliéndose de los márgenes de la tarjeta. */
.stack-b .pop-img-b {
  width: 92%;
  aspect-ratio: auto;
  object-fit: contain;
  clip-path: none;
  box-shadow: none;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(217,142,74,.14));
  margin-top: -34px;
  align-self: flex-end;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}
.stack-b { align-items: flex-end; }

/* (4) EL FAROL VA ARRIBA, Y VA SÓLIDO (2026-08-07)
   Tenía z-index 2 y los cantos de roca (.strata-edge) tienen 3: por eso
   quedaba DEBAJO de las líneas. Y sobre las fotos se leía "a medias".
   Si va encima, va encima: z-index alto, opacidad total, sin mezcla. */
.farol {
  z-index: 8;
  opacity: 1;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 42px rgba(255,190,110,.22)) drop-shadow(0 18px 26px rgba(0,0,0,.55));
}
/* servicios: sube y se corre al borde para chocar menos con la media */
.svc-log .farol-end {
  top: auto;
  bottom: 14%;
  right: 1.5%;
}
@media (max-width: 880px) { .farol { opacity: 1; } }

/* (el hover del intercambio vive en el bloque único del final del archivo) */

/* HOMBRO IZQUIERDO RECUPERADO (2026-08-07).
   El diagnóstico viejo era EQUIVOCADO: no faltaba encuadre, fallaba el
   recorte. `isnet-general-use` confundía la americana negra con el fondo
   oscuro del salón y se comía el hombro izquierdo de Nelson (lado derecho
   del visor): la máscara moría en x=879/1000 y dejaba 120px transparentes.
   Rehecho con `birefnet-portrait` — llega al borde del encuadre (x=1085/1086)
   y además conserva los mechones del pelo uno a uno.
   Ahora AMBOS hombros salen del cuadro por abajo, como cualquier busto: la
   máscara solo suaviza esos cantos rectos, sin comerse el hombro. */
.stack-b .pop-img-b {
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%),
                      linear-gradient(90deg, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%),
              linear-gradient(90deg, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* "proyectos mineros": el gradiente anterior lo dejó casi negro. Se vuelve al
   metal claro de las demás cursivas, solo un punto más oscuro para que no se
   pierda contra el cielo del hero. */
.hero-title em {
  background-image: linear-gradient(112deg, #EFDAC0 4%, #CF9257 34%, #E4C69F 60%, #B87F45 92%) !important;
  text-shadow: 0 2px 10px rgba(4,8,14,.75) !important;
}

/* ============================================================
   HERO · "proyectos mineros" — SOLUCIÓN DE RAÍZ (2026-08-07)
   El problema NUNCA fue el color del texto: la cursiva va sobre una
   FOTO con zonas claras y oscuras, así que un cobre claro se perdía en
   lo claro y uno oscuro se ensuciaba. Cambiar el tono solo movía el
   fallo de zona. Lo correcto es GARANTIZAR EL FONDO: se asienta una
   penumbra local bajo el bloque del hero, y sobre ese fondo estable el
   cobre metálico luce siempre igual.
   ============================================================ */
.hero-inner { position: relative; }
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 50% at 50% 58%, rgba(3,7,12,.90) 0%, rgba(3,7,12,.74) 42%, rgba(3,7,12,.32) 68%, transparent 82%);
}
/* Sobre esa penumbra el metal cobre se lee siempre: paradas claras y
   saturadas (dorado→cobre), sin ninguna parada apagada. */
.hero-title em {
  background-image: linear-gradient(108deg,
      #FFE9C4 2%,
      #F0B463 26%,
      #FFDCA8 48%,
      #E09A4E 72%,
      #FFE3B8 96%) !important;
  text-shadow: 0 2px 12px rgba(3,7,12,.9), 0 0 30px rgba(224,154,78,.45) !important;
}

/* ============================================================
   CORRECCIONES 2026-08-07 (última tanda)
   ============================================================ */
/* (a) HERO: fuera la penumbra y la sombra recargada. El texto va DORADO
   sólido con una sombra que lo despega de la foto. Nada más. */
.hero-inner::before { content: none !important; }
.hero-title em {
  background-image: none !important;
  -webkit-text-fill-color: #F0B95F !important;
  color: #F0B95F !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.95) !important;
}

/* (b) El farol de servicios bajaba demasiado y chocaba con el TEXTO.
   Puede superponer imágenes, nunca texto: baja al pie del tramo, donde
   solo roza la fotografía. */
.svc-log .farol-end {
  top: auto;
  bottom: 5%;
  right: 1%;
}

/* (c) El farol del inicio quedaba por debajo de las líneas de las filas.
   `has-deco` recorta con overflow, así que el farol se elevaba dentro de
   un contexto que el contenido volvía a tapar: se fuerza por encima. */
#e5.has-deco { overflow: visible; }
#e5 .farol { z-index: 9; }
#e5 > .container { z-index: 1; }

/* ============================================================
   FAROL · el "difuminado raro" era su propio halo (2026-08-07)
   Tenía `drop-shadow(0 0 42px rgba(255,190,110,.22))`: una nube
   semitransparente enorme alrededor. A través de ella se veían las
   líneas de las filas, y por eso parecía que el farol quedaba DEBAJO
   aunque su z-index ya fuera superior. Sombra corta y definida.
   ============================================================ */
.farol {
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.7));
  z-index: 9;
}
/* servicios: sube para tocar apenas la fotografía, sin llegar al texto */
.svc-log .farol-end {
  top: auto;
  bottom: 9.5%;
  right: 1%;
}

/* ============================================================
   LÁMPARAS DE FAENA · Nosotros (2026-08-07)
   La sección del retrato estaba iluminada sin que nada explicara
   de dónde venía la luz. Dos lámparas de trabajo en esquinas
   opuestas la justifican: cada una lanza su haz hacia el centro.
   Mismo lenguaje que el .farol de nos-3 (balanceo lento + parpadeo),
   pero pivotando en la BASE, que es donde pivota una lámpara
   que se apoya en la roca, no una que cuelga del techo.
   ============================================================ */
.lampara {
  --lam-w: 260px;
  --lam-flip: scaleX(1);
  --lam-a: 1deg;
  --lam-b: -.85deg;
  --haz-rot: 118deg;
  --haz-len: 260%;
  position: absolute;
  z-index: 0;                 /* .sec > .container es z-index 1: el texto siempre manda */
  width: var(--lam-w);
  aspect-ratio: 660 / 672;
  pointer-events: none;
  user-select: none;
  /* Pivote arriba y al CENTRO: la cabeza cuelga del brazo que queda fuera de
     cuadro. Tiene que ser 50% en X — con un origen descentrado, el
     `scaleX(-1)` de la lámpara espejada DESPLAZA la caja (0.56·ancho) y el
     `left` deja de significar lo que dice. */
  transform-origin: 50% 8%;
  transform: var(--lam-flip) rotate(var(--lam-a));
}
.lampara img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.72));
}

/* El haz nace en la BOCA de la pantalla: 50% / 85% del recorte de cabeza
   (medido sobre los píxeles claros del webp, no a ojo). El trapecio se abre
   desde ahí y se apaga antes de llegar al texto. */
.lampara-haz {
  position: absolute;
  left: 50%;
  top: 85%;
  z-index: 1;
  width: var(--haz-len);
  aspect-ratio: 1 / 1;
  transform-origin: 0 0;
  transform: rotate(var(--haz-rot)) translateY(-50%);
  background: linear-gradient(90deg,
    rgba(255,203,142,.40) 0%,
    rgba(255,189,118,.19) 24%,
    rgba(255,180,106,.07) 52%,
    rgba(255,176,100,0) 78%);
  clip-path: polygon(0 46%, 100% 1%, 100% 99%, 0 54%);
  filter: blur(var(--haz-blur, 17px));
  opacity: var(--haz-op, 1);
}
/* la ampolleta: el punto caliente sobre la boca */
.lampara::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 85%;
  z-index: 3;
  width: 72%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,228,182,.72) 0%,
    rgba(255,196,126,.30) 34%,
    rgba(255,182,108,0) 70%);
  filter: blur(9px);
  opacity: var(--haz-op, 1);
}

/* (a) esquina superior izquierda · espejada. Entra desde fuera de cuadro y
   baja el haz hacia el retrato: es la que explica la luz que le llega a
   Nelson por el hombro izquierdo del visor. Va MÁS TENUE que la (b) porque
   su haz cae sobre la fotografía, no sobre roca vacía. */
.lampara-a {
  --lam-w: clamp(120px, 14vw, 208px);
  --lam-flip: scaleX(-1);
  --lam-a: 25.4deg;   /* la cabeza se levanta: apunta a través de la zona, no al piso */
  --lam-b: 23.6deg;
  --haz-rot: 125deg;
  --haz-len: 360%;
  --haz-op: .42;
  --haz-blur: 18px;
  left: -6%;   /* la cabeza no puede pasar de x=130px: ahí empieza el título */
  top: -8%;    /* recortada contra el techo: cuelga desde fuera de cuadro */
}
/* (b) esquina superior derecha · orientación natural, más grande.
   Su haz cae sobre la fotografía y la roca, así que puede ser el fuerte. */
.lampara-b {
  --lam-w: clamp(150px, 18vw, 272px);
  --lam-a: 23.6deg;
  --lam-b: 25.4deg;
  --haz-rot: 125deg;
  --haz-len: 380%;
  right: -9%;
  top: -8%;
}

@keyframes lamparaSway {
  0%, 100% { transform: var(--lam-flip) rotate(var(--lam-a)); }
  50%      { transform: var(--lam-flip) rotate(var(--lam-b)); }
}
/* el parpadeo respeta el brillo propio de cada lámpara (--haz-op): si no,
   la animación pisaría el valor y las dos quedarían igual de fuertes */
@keyframes lamparaFlick {
  0%, 100% { opacity: var(--haz-op, 1); }
  38%      { opacity: calc(var(--haz-op, 1) * .8); }
  63%      { opacity: calc(var(--haz-op, 1) * .94); }
}
@media (prefers-reduced-motion: no-preference) {
  .lampara { animation: lamparaSway 8.4s ease-in-out infinite; }
  .lampara-b { animation-duration: 10.6s; animation-delay: -3.1s; }
  .lampara-haz,
  .lampara::before { animation: lamparaFlick 4.3s ease-in-out infinite; }
  .lampara-b .lampara-haz,
  .lampara-b::before { animation-duration: 5.8s; animation-delay: -1.9s; }
}
/* En móvil no hay canaleta lateral: el texto arranca en x=32. La cabeza (a)
   sube por encima del título y se recorta contra el canto de la sección,
   porque si baja se le pone el foco encima a "ASESORÍA". */
@media (max-width: 880px) {
  .lampara-a { --lam-w: 88px; left: -6%; top: -4.5%; --haz-op: .3; --haz-len: 260%; }
  .lampara-b { --lam-w: 96px; right: -6%; top: -4.5%; --haz-len: 300%; }
}

/* ============================================================
   INTERCAMBIO DE TARJETAS · SISTEMA ÚNICO (2026-08-10)
   Reemplaza tres capas de parches que se pisaban entre sí.

   Qué estaba mal, medido por scrubbing con la Web Animations API:
   · easing con OVERSHOOT (`cubic-bezier(.34,1.32,.5,1)`) — el rebote es
     justo lo que hace que una animación se note en vez de sentirse.
   · 780 ms, de los cuales el 90% del recorrido ocurría en los primeros
     173 ms: arrancaba de golpe y luego se arrastraba medio segundo.
   · arco de −132 px con `scale(1.10)`: la tarjeta SE SALÍA del encuadre
     por arriba y se cortaba contra el borde.
   · dos motores peleando (transition + keyframes) parcheados con
     `!important` y con una regla que anulaba el hover a media animación.

   Ahora: una sola fuente de verdad. Las posiciones son variables, así que
   reposo, hover y keyframes no pueden desincronizarse nunca más.
   ============================================================ */
.stack {
  --pos-front: translate(0px, 0px) scale(1) rotate(0deg);
  --pos-back:  translate(22px, 22px) scale(.99) rotate(.6deg);
  --pos-peek:  translate(34px, 27px) scale(1) rotate(1.1deg);
  --pos-nudge: translate(-5px, -4px) scale(1) rotate(0deg);
  --dim-front: saturate(.96) contrast(1.03);
  --dim-back:  brightness(.46) saturate(.7);
  --dim-peek:  brightness(.64) saturate(.86);
  --t-rise: 390ms;   /* la que entra */
  --t-fall: 300ms;   /* la que sale: ~75% de la entrada (las salidas van más rápido) */
  --t-hover: 260ms;  /* respuesta al cursor: 200-300 ms. A 420 se siente perezoso */
  transition: transform .13s var(--ease-out);
}
/* acuse de recibo instantáneo al pulsar: por debajo del umbral de ~80 ms
   el cerebro lo percibe como simultáneo al click */
.stack:active { transform: scale(.988); }

.stack-card {
  transition:
    transform var(--t-hover) var(--ease-out),
    filter    var(--t-rise)  var(--ease-out);
}
/* reposo e intercambiadas: todo sale de las mismas variables */
.stack-a { z-index: 2; transform: var(--pos-front); filter: var(--dim-front); }
.stack-b { z-index: 1; transform: var(--pos-back);  filter: var(--dim-back); }
.stack.is-swapped .stack-a { z-index: 1; transform: var(--pos-back);  filter: var(--dim-back); }
.stack.is-swapped .stack-b { z-index: 2; transform: var(--pos-front); filter: var(--dim-front); }

/* --- EL INTERCAMBIO ---
   La que entra despega, cruza por encima en un arco corto y se asienta.
   La que sale cede el sitio hundiéndose apenas. Es un cambio de peso entre
   dos naipes, no una pirueta. */
/* EL RELEVO DE PROFUNDIDAD.
   Las dos tarjetas se solapan al 95%, así que el cambio de z-index es un
   parpadeo: en un fotograma la de atrás (oscura) aparece entera encima de la
   de delante. Es intrínseco a cualquier intercambio de dos naipes — el arco
   gigante del original existía sólo para taparlo, y por eso se salía del
   encuadre.
   Aquí se resuelve por tiempo, no por distancia: el relevo ocurre al 20%, que
   es el instante de MÁXIMA VELOCIDAD del arco (28 px por fotograma, medido).
   Es donde el ojo peor resuelve un cambio. `steps(1, end)` para que salte
   limpio en ese punto y no a mitad del intervalo. */
.stack-card.is-rising {
  animation:
    cardRise      var(--t-rise) both,
    cardRiseDepth var(--t-rise) steps(1, end) both;
}
@keyframes cardRiseDepth {
  0%   { z-index: 1; }
  20%  { z-index: 5; }
  100% { z-index: 5; }
}
@keyframes cardFallDepth {
  0%   { z-index: 2; }
  20%  { z-index: 1; }
  100% { z-index: 1; }
}
.stack-card.is-falling {
  /* recta y limpia: la que sale no actúa, sólo cede el sitio. Con una parada
     intermedia la x invertía el sentido a mitad de camino y se leía como duda. */
  animation:
    cardFall      var(--t-fall) cubic-bezier(.5, 0, .25, 1) both,
    cardFallDepth var(--t-rise) steps(1, end) both;
}
/* `animation-timing-function` POR PARADA: acelera al despegar y desacelera al
   posarse. Con una sola curva para todo el arco, la mitad buena se pierde.
   La cima va al 40% (no al 52%) y la curva de bajada no tiene una cola infinita:
   con quint-out los últimos 100 ms movían 1 px — tiempo muerto que se percibe
   como lentitud aunque no se vea nada. */
@keyframes cardRise {
  0%   { transform: var(--pos-back);
         animation-timing-function: cubic-bezier(.36, 0, .34, 1); }
  40%  { transform: translate(15px, -54px) scale(1.045) rotate(-1.8deg);
         animation-timing-function: cubic-bezier(.2, .82, .3, 1); }
  100% { transform: var(--pos-front); }
}
@keyframes cardFall {
  0%   { transform: var(--pos-front); }
  100% { transform: var(--pos-back); }
}
/* LA SOMBRA RESPIRA CON EL DESPEGUE — es lo que lo hace leer como peso real.
   Animar `box-shadow` directamente costaba 3 frames largos (el peor, 33 ms):
   una sombra de 100 px de desenfoque sobre una tarjeta de 500×600 se repinta
   entera en cada cuadro. Aquí la sombra profunda vive en una capa propia que
   sólo cambia de OPACIDAD — eso lo resuelve el compositor y sale gratis. */
.stack-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 74px; bottom: 0;     /* la misma caja que .pop-bg */
  z-index: -1;
  border-radius: var(--radius);
  box-shadow: 0 62px 96px -34px rgba(0,0,0,.9);
  opacity: 0;
  pointer-events: none;
}
.stack-card.is-rising::after { animation: cardLift var(--t-rise) both; }
@keyframes cardLift {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}
/* `will-change` sólo mientras se mueve: promoverlo siempre deja dos capas
   compuestas de forma permanente para nada.
   Y durante el intercambio se APAGA la transición de transform: los keyframes
   ganan igual, pero dejarla encendida mantiene un segundo motor corriendo en
   paralelo (se ve en `getAnimations()`: una CSSTransition viva 420 ms sobre la
   misma propiedad). Un motor cada vez. */
.stack.is-animating .stack-card {
  will-change: transform, filter;
  transition: filter var(--t-rise) var(--ease-out);
}
/* cada tarjeta atenúa en SU propio tiempo: la que sale se mueve 300 ms, así que
   seguir oscureciéndose 90 ms después de haberse posado era una cola sin motivo */
.stack.is-animating .stack-card.is-falling { transition-duration: var(--t-fall); }

/* El PRIMER intercambio tras cargar perdía un frame (33 ms) creando la capa de
   la sombra profunda; del segundo en adelante iba limpio. Se promueve cuando el
   usuario muestra intención — al apuntar o al enfocar — no de forma preventiva
   en toda la página. */
@media (hover: hover) and (pointer: fine) {
  .stack:hover .stack-card::after,
  .stack:focus-visible .stack-card::after { will-change: opacity; }
}

/* --- el indicio: la de atrás quiere salir. Se apaga durante el intercambio
       para que el cursor no compita con la animación (antes hacía falta un
       `transform: none` a media animación para taparlo). --- */
@media (hover: hover) and (pointer: fine) {
  .stack:not(.is-animating):not(.is-swapped):hover .stack-b,
  .stack:not(.is-animating).is-swapped:hover .stack-a {
    transform: var(--pos-peek);
    filter: var(--dim-peek);
  }
  .stack:not(.is-animating):not(.is-swapped):hover .stack-a,
  .stack:not(.is-animating).is-swapped:hover .stack-b {
    transform: var(--pos-nudge);
    filter: var(--dim-front);
  }
}

/* --- el pie de foto: fundido corto de salida, cambio de texto al final del
       fundido y entrada con un desplazamiento mínimo. Antes el texto cambiaba
       a los 240 ms de un fundido de 300 ms, así que se veía el salto. --- */
.pop-media figcaption[data-flip-caption] {
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.pop-media figcaption[data-flip-caption].is-changing {
  opacity: 0;
  transform: translateY(5px);
  transition-duration: .15s;
}

@media (prefers-reduced-motion: reduce) {
  .stack { transition: none; }
  .stack:active { transform: none; }
  .stack-card { transition: opacity .22s var(--ease-out); animation: none !important; }
  .stack-card .pop-bg { animation: none !important; }
  .stack-b { opacity: 0; transform: var(--pos-front); filter: var(--dim-front); }
  .stack.is-swapped .stack-a { opacity: 0; transform: var(--pos-front); filter: var(--dim-front); }
  .stack.is-swapped .stack-b { opacity: 1; }
}