/* ============================================================
   FYF FACTORY — PLANO MAESTRO (F&F FACTORY S.A.C.)
   Dossier técnico sobre negro, iluminado con luz de arco.
   Negro #0C0C0D · Oro #F0A500 · Plata #9AA0A6
   Montserrat (titulares) · Inter (texto y anotación técnica)

   Reglas duras respetadas en toda la hoja:
   · Cero fotografías y cero background-image con fotos.
   · Cero bordes punteados o discontinuos (solo trazos sólidos).
   · Animación continua solo con transform / opacity / clip-path /
     stroke-dashoffset. Nunca filter, width, top ni background-position
     en bucle.
   · prefers-reduced-motion apaga todo y deja el estado final.
   ============================================================ */

:root {
  --negro: #0C0C0D;
  --panel: #141416;
  --panel2: #17171A;
  --pie: #0A0A0B;

  --oro: #F0A500;
  --oro-1: #FFCE55;
  --oro-2: #FFD98A;
  --oro-3: #FFE7A6;
  --oro-oscuro: #5A3A00;
  --oro-suave: rgba(240, 165, 0, 0.14);

  --plata: #9AA0A6;
  --plata-2: #AEB4BC;
  --blanco: #FFFFFF;
  --texto: #D6D8DB;

  --borde: rgba(255, 255, 255, 0.10);
  --borde-oro: rgba(240, 165, 0, 0.35);
  --hairline: rgba(240, 165, 0, 0.14);
  --sobre-oro: #151004;

  --f-head: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --f-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --header-h: 72px;
  --radius: 14px;
  --radius-s: 10px;
  --ancho: min(1160px, 92%);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-sweep: cubic-bezier(0.5, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-width: thin;
  scrollbar-color: #26262B #0A0A0B;
}

body {
  font-family: var(--f-body);
  color: var(--texto);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background-color: var(--negro);
  /* Retícula de plano: estática, sin background-attachment fixed
     (cero repaint durante el scroll). */
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.020) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.020) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.045) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 96px);
}

img { max-width: 100%; display: block; }
a { color: var(--oro); text-decoration: none; }
svg { display: block; }

.container { width: var(--ancho); margin: 0 auto; position: relative; z-index: 2; }

.num, .cota-num, .caj-val, .alc-cod, .rot-fila dd.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salto-contenido {
  position: absolute; top: -60px; left: 12px; z-index: 500;
  background: var(--oro); color: var(--sobre-oro);
  font-family: var(--f-head); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 20px; border-radius: 999px;
  transition: top 0.25s var(--ease);
}
.salto-contenido:focus { top: 12px; }

/* Foco visible de marca */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(240, 165, 0, 0.30); color: var(--blanco); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #0A0A0B; }
::-webkit-scrollbar-thumb { background: #26262B; border-radius: 8px; border: 2px solid #0A0A0B; }
::-webkit-scrollbar-thumb:hover { background: rgba(240, 165, 0, 0.6); }

/* ============================================================
   TIPOGRAFÍA DEL SISTEMA
   ============================================================ */
.kicker {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 16px;
}
.kicker.plata { color: var(--plata); }

.titulo {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.9vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--blanco);
  text-wrap: balance;
}
.titulo.grande { font-size: clamp(2.2rem, 6vw, 4.4rem); }

.gold { color: var(--oro); }

.regla {
  width: 62px; height: 3px;
  background: linear-gradient(90deg, var(--oro), rgba(240, 165, 0, 0.15));
  margin-top: 22px;
  transform-origin: 0 50%;
}
.regla.centro { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, rgba(240,165,0,.15), var(--oro), rgba(240,165,0,.15)); }
.regla.plata { background: linear-gradient(90deg, var(--plata), rgba(154, 160, 166, 0.12)); }

.lam-intro {
  margin-top: 22px;
  max-width: 660px;
  color: var(--plata);
  font-size: 0.97rem;
}
.lam-head { margin-bottom: 52px; }
.lam-head-centro { text-align: center; }
.lam-head-centro .lam-intro { margin-left: auto; margin-right: auto; }

.rotulo-tit, .panel-tit {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 18px;
}

.nota-pie {
  margin-top: 34px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--plata);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.79rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn-oro { background: var(--oro); color: var(--sobre-oro); }
.btn-oro:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(240, 165, 0, 0.30); }
.btn-linea {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--blanco);
  background: rgba(255, 255, 255, 0.035);
}
.btn-linea:hover { border-color: var(--oro); color: var(--oro); transform: translateY(-2px); }
.btn-nav { padding: 11px 22px; font-size: 0.72rem; }
.btn-bloque { width: 100%; }

/* ============================================================
   CABECERA
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(12, 12, 13, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header.scrolled {
  background: rgba(12, 12, 13, 0.90);
  border-bottom-color: var(--borde);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.header-inner {
  width: min(1300px, 94%);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-logo { width: 46px; height: auto; }
.brand-name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--blanco);
}
.brand-name em { font-style: normal; color: var(--oro); }

.main-nav { display: flex; align-items: center; gap: 26px; }
.nav-acciones { display: flex; align-items: center; gap: 10px; }
.nav-link {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto);
  position: relative;
  padding: 6px 0;
  transition: color 0.25s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--oro);
  transition: right 0.3s var(--ease);
}
.nav-link:hover, .nav-link.activo { color: var(--blanco); }
.nav-link:hover::after, .nav-link.activo::after { right: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--blanco); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   RIEL — ÍNDICE DE LÁMINAS (solo pantallas anchas)
   ============================================================ */
.riel {
  display: none;
  position: fixed;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  flex-direction: column;
  gap: 12px;
  width: 48px;
}
.riel-tick {
  display: flex; align-items: center; gap: 13px;
  height: 14px;
  color: var(--plata);
}
.riel-tick i {
  display: block;
  width: 14px; height: 1px;
  background: rgba(255, 255, 255, 0.28);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), height 0.2s var(--ease);
}
.riel-tick b {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  opacity: 0.42;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.riel-tick:hover i { background: rgba(240, 165, 0, 0.7); }
.riel-tick:hover b { opacity: 1; }
.riel-tick.activo i { background: var(--oro); height: 3px; transform: scaleX(1.45); }
.riel-tick.activo b { opacity: 1; color: var(--oro); }

@media (min-width: 1200px) { .riel { display: flex; } }

/* ============================================================
   CAJETÍN DE PLANO (HUD de rótulo)
   ============================================================ */
.cajetin {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 95;
  display: flex;
  align-items: stretch;
  background: rgba(10, 10, 11, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--borde);
  border-radius: 4px;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
  pointer-events: none;
}
.cajetin.replegado { transform: translate3d(0, 160%, 0); opacity: 0; }
.caj-cell {
  padding: 9px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.caj-cell:first-child { border-left: none; }
.caj-lab {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.53rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plata);
  opacity: 0.7;
  line-height: 1;
}
.caj-val {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanco);
  line-height: 1.25;
  display: flex;
  align-items: baseline;
}
.caj-contenido .caj-val {
  max-width: 190px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
  color: var(--oro);
}
.caj-roll {
  display: inline-block;
  height: 1.25em;
  overflow: hidden;
  position: relative;
  vertical-align: bottom;
}
.caj-roll span { display: block; height: 1.25em; line-height: 1.25em; }
.caj-roll.rodando { transform: translateY(-1.25em); transition: transform 0.2s var(--ease); }
.caj-roll.sin-anim { transition: none; }
.caj-tot { color: var(--plata); opacity: 0.7; }
.caj-barra {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--oro-oscuro) 0%, var(--oro) 55%, var(--oro-3) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ============================================================
   LÁMINAS — marco, fundidos, cabecera de lámina
   ============================================================ */
.lamina {
  position: relative;
  padding: 104px 0;
  isolation: isolate;
}
.lamina::before, .lamina::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 1;
}
.lamina::before { top: 0;    background: linear-gradient(180deg, var(--negro) 0%, rgba(12, 12, 13, 0) 100%); }
.lamina::after  { bottom: 0; background: linear-gradient(0deg,   var(--negro) 0%, rgba(12, 12, 13, 0) 100%); }

.lam-cab {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: calc((100% - var(--ancho)) / 2);
  pointer-events: none;
}
.lam-cab::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--hairline) 14%, var(--hairline) 86%, transparent 100%);
}
.lam-cod, .lam-nom {
  position: relative;
  transform: translateY(-50%);
  background: var(--negro);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 10px;
}
.lam-cod { color: var(--oro); }
.lam-nom { color: var(--plata); opacity: 0.6; padding-left: 0; }

.marco {
  position: absolute;
  top: 42px; bottom: 42px;
  left: calc((100% - var(--ancho)) / 2 - 26px);
  right: calc((100% - var(--ancho)) / 2 - 26px);
  border-left: 1px solid rgba(240, 165, 0, 0.10);
  border-right: 1px solid rgba(240, 165, 0, 0.10);
  pointer-events: none;
  z-index: 0;
}
.marco::before, .marco::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
}
.marco::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--borde-oro);
  border-left: 1px solid var(--borde-oro);
}
.marco::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--borde-oro);
  border-right: 1px solid var(--borde-oro);
}

/* Haz de luz de arco volumétrico */
.haz {
  position: absolute;
  top: -35%; bottom: -35%;
  width: 46%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  background: linear-gradient(90deg,
    rgba(240, 165, 0, 0) 0%,
    rgba(240, 165, 0, 0.10) 24%,
    rgba(255, 231, 166, 0.22) 50%,
    rgba(240, 165, 0, 0.09) 74%,
    rgba(240, 165, 0, 0) 100%);
  -webkit-mask-image: radial-gradient(58% 54% at 50% 50%, #000 12%, transparent 100%);
  mask-image: radial-gradient(58% 54% at 50% 50%, #000 12%, transparent 100%);
  transform: rotate(-18deg) scaleY(2.4);
  will-change: transform;
}
.haz-a { left: -8%; animation: haz-deriva-a 18s var(--ease) infinite alternate; }
.haz-b { right: -6%; opacity: 0.62; transform: rotate(15deg) scaleY(2.6); animation: haz-deriva-b 24s var(--ease) infinite alternate; }
.haz-linea { left: 4%; width: 54%; opacity: 0.5; animation: haz-deriva-a 22s var(--ease) infinite alternate; }
.haz-linea.espejo { left: auto; right: 4%; transform: rotate(16deg) scaleY(2.4); animation: haz-deriva-b 20s var(--ease) infinite alternate; }

@keyframes haz-deriva-a {
  from { transform: rotate(-18deg) scaleY(2.4) translate3d(-4%, 0, 0); opacity: 0.55; }
  to   { transform: rotate(-18deg) scaleY(2.4) translate3d(4%, 0, 0);  opacity: 0.92; }
}
@keyframes haz-deriva-b {
  from { transform: rotate(15deg) scaleY(2.6) translate3d(3%, 0, 0);  opacity: 0.42; }
  to   { transform: rotate(15deg) scaleY(2.6) translate3d(-4%, 0, 0); opacity: 0.78; }
}

/* Grano sutil sobre los degradados (mata el banding en 8 bits) */
.lamina-hero .haz-a::after,
.lamina-hero .haz-b::after { content: none; }

/* ============================================================
   LÁMINA 00 · PORTADA
   ============================================================ */
.lamina-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 44px) 0 112px;
  overflow: hidden;
}
.hero-inner { text-align: center; width: min(1060px, 92%); }

.particulas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.particulas.encendido { opacity: 1; }

.crosshair { display: none; }
.ch-h, .ch-v, .ch-box { position: absolute; pointer-events: none; }
.ch-h { left: 0; top: 0; width: 100%; height: 1px; background: rgba(240, 165, 0, 0.18); will-change: transform; }
.ch-v { left: 0; top: 0; width: 1px; height: 100%; background: rgba(240, 165, 0, 0.18); will-change: transform; }
.ch-box {
  left: 0; top: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid rgba(240, 165, 0, 0.55);
  will-change: transform;
}

.hero-kicker {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 22px;
  line-height: 1.9;
}
.hero-title {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--blanco);
  margin-bottom: 22px;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(0.96rem, 1.4vw, 1.08rem);
  color: var(--texto);
  max-width: 620px;
  margin: 0 auto 28px;
  text-wrap: pretty;
}

.hero-chips {
  list-style: none;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.hero-chips a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 9px 20px;
  background: rgba(20, 20, 22, 0.5);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero-chips a:hover { border-color: var(--borde-oro); color: var(--blanco); transform: translateY(-2px); }
.chip-n { color: var(--oro); font-variant-numeric: tabular-nums; }

.hero-ctas {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-badges {
  list-style: none;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.hero-badges li {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plata);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 7px 16px;
  font-variant-numeric: tabular-nums;
}

.emblema { margin: 30px auto 0; width: clamp(92px, 10vw, 124px); height: auto; }
.emblema-pie { margin: 0 0 18px; width: 96px; }

.hero-baja {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 24px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 13px;
  display: flex; justify-content: center;
}
.hero-baja span {
  width: 3px; height: 8px;
  background: var(--oro);
  border-radius: 3px;
  margin-top: 7px;
  animation: baja-hint 1.9s var(--ease) infinite;
}
@keyframes baja-hint {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(13px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Entrada escalonada del hero (CSS puro, sin loader) */
.hero-kicker, .hero-sub, .hero-chips, .hero-ctas, .hero-badges, .emblema-hero {
  animation: hero-in 0.9s var(--ease) both;
}
.hero-sub    { animation-delay: 0.30s; }
.hero-chips  { animation-delay: 0.42s; }
.hero-ctas   { animation-delay: 0.54s; }
.hero-badges { animation-delay: 0.66s; }
.emblema-hero{ animation-delay: 0.78s; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   REVELADO TIPOGRÁFICO LÍNEA POR LÍNEA
   ============================================================ */
/* padding + margen negativo: la máscara del revelado no recorta los descendentes */
.split .linea-txt { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
html.fx .split .ink { display: block; transform: translate3d(0, 112%, 0); }
html.fx .hero-title .ink { transition: transform 0.9s var(--ease); }
html.fx .hero-title .linea-txt:nth-child(1) .ink { transition-delay: 0.06s; }
html.fx .hero-title .linea-txt:nth-child(2) .ink { transition-delay: 0.15s; }
html.fx .hero-title .linea-txt:nth-child(3) .ink { transition-delay: 0.24s; }
html.fx .split.listo .ink { transform: translate3d(0, 0, 0); }
html.fx .titulo.split .ink { transition: transform 0.85s var(--ease); }
html.fx .titulo.split .linea-txt:nth-child(2) .ink { transition-delay: 0.09s; }

/* Palabra pulida (una sola por titular) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html.fx .lam-head .gold, html.fx .hero-title .gold {
    background: linear-gradient(100deg, var(--oro) 0%, var(--oro) 40%, var(--oro-3) 50%, var(--oro) 60%, var(--oro) 100%);
    background-size: 300% 100%;
    background-position: 104% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  html.fx .lam-head.visible .gold, html.fx .split.listo .gold {
    animation: pulido 1.5s var(--ease) 0.5s forwards;
  }
}
@keyframes pulido { to { background-position: -4% 0; } }

/* ============================================================
   REVEAL EN CASCADA + PLANCHA DE PLOTTER
   ============================================================ */
/* Todo lo que depende del JS para volver a aparecer va detrás del gate
   html.fx. Sin JS (o si el JS falla antes de montar el observer) la página
   se ve completa en su estado final: nunca queda una lámina en negro. */
html.fx .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.fx .reveal.visible { opacity: 1; transform: translateY(0); }

/* La plancha hace el trabajo: el elemento no se desvanece, se descubre */
html.fx .plancha.reveal { opacity: 1; transform: none; }
html.fx .plancha { position: relative; overflow: hidden; }
html.fx .plancha::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(240, 165, 0, 0.95) 0, #FFF6DC 1.5px, rgba(240, 165, 0, 0.95) 3px,
      #131316 3px, #0E0E11 100%);
  transform: translate3d(0, 0, 0);
  transition: transform 1s var(--ease);
  transition-delay: inherit;
}
html.fx .plancha.visible::after { transform: translate3d(103%, 0, 0); }
html.fx .plancha.izq::after {
  background:
    linear-gradient(270deg,
      rgba(240, 165, 0, 0.95) 0, #FFF6DC 1.5px, rgba(240, 165, 0, 0.95) 3px,
      #131316 3px, #0E0E11 100%);
}
html.fx .plancha.izq.visible::after { transform: translate3d(-103%, 0, 0); }

/* ============================================================
   TRAZO DE PLANO (SVG que se dibuja) + cabezal de plotter
   ============================================================ */
/* Los dibujos que ocupan su contenedor. El emblema, la marca de agua y los
   pictogramas llevan su propio ancho (declarado en sus bloques). */
.plano, .curvas { width: 100%; height: auto; }
.emblema, .marca-agua, .tick { height: auto; }

.tr {
  fill: none;
  stroke: var(--plata);
  stroke-opacity: 0.72;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.tr.fino  { stroke-width: 0.8; stroke-opacity: 0.48; }
.tr.tenue { stroke-opacity: 0.30; }
.tr.eje   { stroke-opacity: 0.24; stroke-width: 0.7; }
.tr.oro   { stroke: var(--oro); stroke-opacity: 0.92; }
.tr.cota  { stroke: var(--oro); stroke-opacity: 0.5; stroke-width: 0.8; }

text.rot {
  fill: var(--plata);
  fill-opacity: 0.52;
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.6px;
}
html.fx text.rot { opacity: 0; transition: opacity 0.6s var(--ease) 0.9s; }
text.rot.destacado { fill: var(--oro); fill-opacity: 0.95; font-size: 11px; font-weight: 600; letter-spacing: 2.4px; }
html.fx .dibujado text.rot { opacity: 1; }

/* pathLength="1" normaliza cada trazo a longitud 1. El guion se declara con
   holgura (2) porque `vector-effect: non-scaling-stroke` hace que Chromium
   calcule el patrón en espacio de pantalla: con dasharray 1 el guion se queda
   corto y el último tramo de cada path nunca llega a dibujarse. */
html.fx .plano .tr,
html.fx .emblema .tr,
html.fx .curvas .tr,
html.fx .tick .tr {
  stroke-dasharray: 2;
  stroke-dashoffset: 2;
}
html.fx .dibujado .tr {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms + 140ms);
}
.pulso { animation: none; }
.dibujado .pulso { animation: pulso-emblema 1.6s var(--ease) 1.1s 1; }
@keyframes pulso-emblema {
  0%, 100% { stroke-opacity: 0.92; }
  50%      { stroke-opacity: 0.34; }
}

/* ============================================================
   LÁMINA 01 · CINTA DE CREDENCIALES
   ============================================================ */
.lamina-cinta { padding: 0; }
.lamina-cinta::before, .lamina-cinta::after { display: none; }
.cinta {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.cinta-cell {
  padding: 26px 24px;
  border-left: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cinta-cell:first-child { border-left: none; }
.cinta-lab {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plata);
  opacity: 0.75;
}
.cinta-val {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--blanco);
  line-height: 1.4;
}
.cinta-pie { font-size: 0.78rem; color: var(--plata); }

/* ============================================================
   LÁMINA 02 · LA EMPRESA
   ============================================================ */
.curvas {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: min(46vh, 420px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}
.empresa-grid {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: 46px;
  align-items: start;
}
.empresa-texto p + p { margin-top: 18px; }
.empresa-texto p { text-wrap: pretty; }
.empresa-texto strong { color: var(--blanco); font-weight: 600; }

.chips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 26px;
}
.chips li {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 7px 16px;
}

.panel-oro {
  margin-top: 28px;
  background: var(--panel2);
  border-left: 3px solid var(--oro);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 22px 26px;
}
.panel-oro.ancho { margin-top: 40px; }
.lista-guion { list-style: none; }
.lista-guion li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  color: var(--texto);
  line-height: 1.65;
}
.lista-guion li + li { margin-top: 9px; }
.lista-guion li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 10px; height: 1px;
  background: var(--oro);
}

.ficha-rotulo, .rotulo-final {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--oro);
  border-radius: var(--radius);
  padding: 28px;
}
.rotulo { display: block; }
.rot-fila {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  align-items: baseline;
}
.rot-fila:last-child { border-bottom: none; }
.rot-fila dt {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.61rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  line-height: 1.6;
}
.rot-fila dd {
  color: var(--blanco);
  font-size: 0.92rem;
  line-height: 1.55;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.rot-fila dd small { display: block; width: 100%; color: var(--plata); font-size: 0.75rem; }

.btn-copiar {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 5px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-copiar svg { width: 13px; height: 13px; fill: none; stroke: var(--plata); stroke-width: 1.6; }
.btn-copiar:hover { border-color: var(--borde-oro); background: var(--oro-suave); }
.btn-copiar:hover svg { stroke: var(--oro); }
.btn-copiar.copiado { border-color: var(--oro); background: var(--oro-suave); }
.btn-copiar.copiado svg { stroke: var(--oro); }

/* ============================================================
   LÁMINA 03 · BANDA DE COTAS
   ============================================================ */
.cotas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  padding: 40px 0 34px;
}
.cota { position: relative; padding-top: 22px; }
.cota-fig { position: absolute; top: 0; left: 0; right: 18%; height: 14px; }
.ext {
  position: absolute;
  bottom: 0; width: 1px; height: 14px;
  background: rgba(240, 165, 0, 0.45);
  transform-origin: 50% 100%;
}
html.fx .ext { transform: scaleY(0); transition: transform 0.26s var(--ease); }
.ext-i { left: 0; }
.ext-d { right: 0; }
.cota-lin {
  position: absolute;
  left: 0; right: 0; top: 6px;
  height: 1px;
  background: linear-gradient(90deg, var(--oro), rgba(240, 165, 0, 0.45));
  transform-origin: 0 50%;
}
html.fx .cota-lin { transform: scaleX(0); transition: transform 0.52s var(--ease) 0.18s; }
html.fx .cota.visible .ext { transform: scaleY(1); }
html.fx .cota.visible .cota-lin { transform: scaleX(1); }

.cota-num {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--blanco);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cota-num {
    background: linear-gradient(180deg, #FFFFFF 22%, var(--plata-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.cota-lab {
  display: block;
  margin-top: 10px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plata);
  line-height: 1.7;
}

.reparto { margin-top: 40px; }
.rep-barra { display: flex; height: 6px; gap: 3px; }
.rep-seg {
  flex: var(--peso) 1 0;
  border-radius: 2px;
  transform-origin: 0 50%;
}
html.fx .rep-seg { transform: scaleX(0); transition: transform 0.6s var(--ease); }
.rep-1 { background: var(--oro); }
.rep-2 { background: rgba(240, 165, 0, 0.55); }
.rep-3 { background: rgba(154, 160, 166, 0.55); }
html.fx .reparto.visible .rep-1 { transform: scaleX(1); transition-delay: 0.1s; }
html.fx .reparto.visible .rep-2 { transform: scaleX(1); transition-delay: 0.25s; }
html.fx .reparto.visible .rep-3 { transform: scaleX(1); transition-delay: 0.4s; }
.rep-leyenda {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  margin-top: 16px;
}
.rep-leyenda li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plata);
}
.rep-leyenda b { color: var(--blanco); font-weight: 600; font-variant-numeric: tabular-nums; }
.rep-punto { width: 9px; height: 3px; border-radius: 2px; }
.rep-punto.p1 { background: var(--oro); }
.rep-punto.p2 { background: rgba(240, 165, 0, 0.55); }
.rep-punto.p3 { background: rgba(154, 160, 166, 0.55); }

/* ============================================================
   LÁMINA 04 · LAS TRES LÍNEAS
   ============================================================ */
.lamina-nucleo { padding-bottom: 40px; }
.corte-diagonal {
  --corte: clamp(18px, 2.6vw, 38px);
  clip-path: polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * var(--corte));
  padding-top: calc(104px + var(--corte));
  background: linear-gradient(180deg, #0E0E10 0%, var(--negro) 42%);
}
.corte-diagonal .lam-cab { display: none; }
.filo {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  clip-path: polygon(0 var(--corte), 100% 0, 100% 2px, 0 calc(var(--corte) + 2px));
  background: linear-gradient(90deg,
    rgba(90, 58, 0, 0) 2%,
    rgba(240, 165, 0, 0.7) 28%,
    var(--oro-3) 52%,
    rgba(240, 165, 0, 0.7) 76%,
    rgba(90, 58, 0, 0) 98%);
  opacity: 0.5;
}
.corte-diagonal.encendido .filo { animation: ignicion 2.4s var(--ease-sweep) 1; }
@keyframes ignicion {
  0%   { opacity: 0.15; }
  22%  { opacity: 1; }
  60%  { opacity: 0.9; }
  100% { opacity: 0.5; }
}

.linea {
  position: relative;
  padding: 78px 0;
  overflow: hidden;
}
.linea + .linea { border-top: 1px solid rgba(255, 255, 255, 0.055); }
.linea-inner { position: relative; z-index: 2; }

.linea-head {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 42px;
}
.numeral {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(3.6rem, 11vw, 9rem);
  line-height: 0.84;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.num-out {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(240, 165, 0, 0.32);
}
.num-fill {
  position: absolute;
  left: 0; top: 0;
  display: block;
  color: transparent;
  background: linear-gradient(180deg, var(--oro-3), var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .num-fill { display: none; }
}
.numeral.chico { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; display: block; margin-bottom: 14px; }
.numeral.frio .num-out { -webkit-text-stroke: 1.2px rgba(154, 160, 166, 0.5); }

.linea-tit {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.7vw, 2.05rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--blanco);
  text-wrap: balance;
}
.linea-sub {
  margin-top: 10px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oro);
}

.linea-body { display: block; }

/* ------------------------------------------------------------
   LISTADO DE SERVICIOS · una celda de plano por servicio,
   cada una con su ícono técnico propio (15 en total).
   ------------------------------------------------------------ */
.alcance {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.alcance li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 5px;
  align-content: center;
  align-items: start;
  padding: 18px 18px 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.018);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.alcance li:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--borde-oro);
  transform: translateY(-2px);
}
.alc-cod {
  grid-column: 2;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--oro);
}
.alc-txt {
  grid-column: 2;
  color: var(--texto);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------
   ÍCONOS TÉCNICOS DE SERVICIO
   Un sistema, no dibujos sueltos: mismo lienzo (120 × 120), el mismo
   juego de trazos del resto del sitio (.tr / .tr.fino / .tr.eje) y un
   único acento en oro por ícono.
   ------------------------------------------------------------ */
.svc-ico {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  display: block;
  width: 62px;
  height: 62px;
}
.svc-ico svg { display: block; width: 100%; height: 100%; }
.svc-ico .tr { stroke-width: 1.05; }
.svc-ico .tr.fino { stroke-width: 0.7; stroke-opacity: 0.52; }
.svc-ico .tr.eje { stroke-width: 0.6; }
.alcance li:hover .svc-ico .tr.oro { stroke-opacity: 1; }

/* Entrada sutil: el trazo se dibuja cuando la fila entra en pantalla.
   Se apoya en la clase .visible que ya reciben las filas del listado,
   así que respeta el mismo ritmo que la plancha de plotter. */
html.fx .svc-ico .tr {
  stroke-dasharray: 2;
  stroke-dashoffset: 2;
}
html.fx .alcance li.visible .svc-ico .tr {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.75s var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms + 360ms);
}

.alc-toggle { display: none; }
.chev {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.3s var(--ease);
}
.alc-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg) translateY(-2px); }

/* ============================================================
   LÁMINA 05 · INTEGRACIÓN
   ============================================================ */
.lamina-respiro { padding: 130px 0; }
.diagrama { margin: 20px auto 54px; max-width: 900px; }
.argumentos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1000px;
  margin: 0 auto;
}
.argumentos li {
  position: relative;
  padding-top: 20px;
  border-top: 1px solid var(--borde-oro);
  font-size: 0.92rem;
  color: var(--texto);
  line-height: 1.7;
  text-wrap: pretty;
}

/* ============================================================
   LÁMINA 06 · MÉTODO
   ============================================================ */
.proceso { list-style: none; position: relative; }
.proceso::before {
  content: "";
  position: absolute;
  left: 27px; top: 20px; bottom: 34px;
  width: 1px;
  background: linear-gradient(180deg, var(--oro), rgba(240, 165, 0, 0.12));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1.4s var(--ease);
}
.proceso.trazada::before { transform: scaleY(1); }
.paso {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
  padding: 22px 8px 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.paso:last-child { border-bottom: none; }
.paso-num {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--oro);
  background: var(--negro);
  position: relative;
  z-index: 2;
  padding: 2px 0;
  line-height: 1.3;
}
.paso-txt h3 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blanco);
  margin-bottom: 7px;
}
.paso-txt p { font-size: 0.91rem; color: var(--plata); line-height: 1.7; }

/* ============================================================
   LÁMINA 07 · SEGURIDAD
   ============================================================ */
.lamina-ssoma {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64'%3E%3Cpath d='M28 8l14 8v16l-14 8-14-8V16z' fill='none' stroke='%23F0A500' stroke-opacity='0.04'/%3E%3C/svg%3E");
}
.marca-agua {
  position: absolute;
  right: 3%; top: 50%;
  transform: translateY(-50%);
  width: min(38vw, 420px);
  height: auto;
  z-index: 0;
  opacity: 0.06;
  pointer-events: none;
}
.marca-agua .ag { fill: none; stroke: var(--plata); stroke-width: 2; }
.marca-agua .ag.oro { stroke: var(--oro); }

.ssoma-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 54px;
  align-items: start;
}
.legal-item + .legal-item { margin-top: 34px; }
.legal-norma {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(240, 165, 0, 0.55);
}
.legal-desc {
  margin-top: 10px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
  line-height: 1.8;
}
.legal-pie { margin-top: 32px; font-size: 0.85rem; color: var(--plata); }

.checklist {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 30px;
}
.ticks { list-style: none; }
.ticks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.92rem;
  color: var(--texto);
  line-height: 1.65;
}
.ticks li:last-child { border-bottom: none; }
.tick { width: 22px; height: 22px; margin-top: 2px; }

/* Sub-bloques de la lámina de seguridad: gestión (IPERC · ATS · SCTR) y EPP.
   Lo procedimental va antes que los accesorios y con el mismo peso tipográfico
   que una tarjeta de servicio. */
.ssoma-bloque { margin-top: 64px; }
.ssoma-cab { margin-bottom: 28px; }
.ssoma-sub {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.62rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--blanco);
  margin-top: 10px;
}
.ssoma-cab .lam-intro { margin-top: 14px; }

.pictos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 22px;
  max-width: 1020px;
}
.picto {
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 22px 18px 18px;
  text-align: center;
}
.picto-svg { width: 88px; margin: 0 auto 12px; }
.picto span {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plata);
}

/* ============================================================
   TARJETAS + BORDE SOPLETE
   ============================================================ */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.tarjeta {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tarjeta:hover { transform: translateY(-5px); border-color: var(--borde-oro); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.tarjeta.alto { padding-bottom: 26px; }
.tarj-num, .tarj-cod {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--oro);
  margin-bottom: 12px;
}
.tarjeta h3 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blanco);
  line-height: 1.35;
  margin-bottom: 10px;
}
.tarjeta p { font-size: 0.88rem; color: var(--plata); line-height: 1.7; }
.tarj-sub { margin-bottom: 16px; }
.lista-cuadro { list-style: none; }
.lista-cuadro li {
  position: relative;
  padding-left: 18px;
  font-size: 0.86rem;
  color: var(--texto);
  line-height: 1.6;
}
.lista-cuadro li + li { margin-top: 8px; }
.lista-cuadro li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  background: var(--oro);
  border-radius: 1px;
}
.tarjeta.frio .lista-cuadro li::before { background: var(--plata); }

@property --fyf-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.soplete::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: conic-gradient(from 0deg,
    transparent 0deg 286deg,
    rgba(240, 165, 0, 0.95) 320deg,
    var(--oro-3) 340deg,
    rgba(240, 165, 0, 0.95) 352deg,
    transparent 360deg);
  background: conic-gradient(from var(--fyf-ang, 0deg),
    transparent 0deg 286deg,
    rgba(240, 165, 0, 0.95) 320deg,
    var(--oro-3) 340deg,
    rgba(240, 165, 0, 0.95) 352deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.soplete.frio::after {
  background: conic-gradient(from var(--fyf-ang, 0deg),
    transparent 0deg 286deg,
    rgba(154, 160, 166, 0.85) 320deg,
    #E4E7EA 340deg,
    rgba(154, 160, 166, 0.85) 352deg,
    transparent 360deg);
}
/* Ignición one-shot al entrar en viewport: también en móvil y táctil */
.soplete.encendida::after { opacity: 1; animation: soplete-giro 0.9s linear 1; }
@media (hover: hover) and (pointer: fine) {
  .soplete:hover::after { opacity: 1; animation: soplete-giro 3.4s linear infinite; }
  .soplete:hover { box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5), 0 0 42px -10px rgba(240, 165, 0, 0.26); }
  .soplete.frio:hover { box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5), 0 0 42px -10px rgba(154, 160, 166, 0.22); }
}
@keyframes soplete-giro { to { --fyf-ang: 360deg; } }

/* ============================================================
   LÁMINA 10 · LÍNEAS EN DESARROLLO (tratamiento frío)
   ============================================================ */
.lamina-frio .tarjeta { background: var(--panel2); }
.aviso-dev {
  margin-top: 22px;
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plata);
  border: 1px solid rgba(154, 160, 166, 0.34);
  border-radius: 999px;
  padding: 8px 18px;
  line-height: 1.6;
}
.lamina-frio .tarjeta h3 { color: var(--texto); }

/* ============================================================
   LÁMINA 11 · CONTACTO
   ============================================================ */
.canales {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 16px;
  margin-bottom: 46px;
}
.canal {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radius-s);
  padding: 20px 22px;
  color: var(--texto);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), background 0.28s var(--ease);
}
.canal:hover { transform: translateY(-3px); border-color: var(--borde-oro); background: var(--panel2); }
.canal-lab {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plata);
}
.canal-val {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--blanco);
  line-height: 1.35;
}
.canal-pie { font-size: 0.76rem; color: var(--plata); }
.canal-principal { border-color: var(--borde-oro); background: linear-gradient(135deg, rgba(240, 165, 0, 0.09), rgba(20, 20, 22, 0.9)); }
.canal-principal .canal-val { color: var(--oro); }

.contacto-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 40px;
  align-items: start;
}
.acciones-final { margin-top: 26px; }
.sello {
  display: inline-block;
  margin-top: 26px;
  transform: rotate(-8deg);
  border: 1px solid var(--borde-oro);
  border-radius: 3px;
  padding: 7px 14px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oro);
  opacity: 0.85;
}
.rotulo-final.visible .sello { animation: sello-in 0.26s var(--ease) 0.4s both; }
@keyframes sello-in {
  from { opacity: 0; transform: rotate(-8deg) scale(1.08); }
  to   { opacity: 0.85; transform: rotate(-8deg) scale(1); }
}

.formulario {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 32px;
}
.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 8px;
}
.campo input, .campo textarea {
  width: 100%;
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: var(--radius-s);
  color: var(--blanco);
  font-family: var(--f-body);
  font-size: 0.94rem;
  padding: 13px 16px;
  transition: border-color 0.25s var(--ease);
  resize: vertical;
}
.campo input::placeholder, .campo textarea::placeholder { color: rgba(154, 160, 166, 0.55); }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--oro); }
.campo input.error, .campo textarea.error { border-color: #E06A4B; }
.form-pie {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--plata);
  line-height: 1.7;
}
.form-pie strong { color: var(--texto); font-weight: 600; }

/* ============================================================
   PIE
   ============================================================ */
.site-footer {
  position: relative;
  background-color: var(--pie);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64'%3E%3Cpath d='M28 8l14 8v16l-14 8-14-8V16z' fill='none' stroke='%23F0A500' stroke-opacity='0.03'/%3E%3C/svg%3E");
  border-top: 1px solid var(--borde);
  padding: 74px 0 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--negro) 0%, rgba(10, 10, 11, 0) 100%);
  pointer-events: none;
}
.pie-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.25fr;
  gap: 44px;
  padding-bottom: 54px;
}
.pie-bajada {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plata);
  margin-bottom: 8px;
}
.pie-loc {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto);
}
.pie-nav, .pie-contacto { display: flex; flex-direction: column; gap: 10px; }
.pie-nav h3, .pie-contacto h3 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 6px;
}
.pie-nav a, .pie-contacto a {
  color: var(--texto);
  font-size: 0.89rem;
  width: fit-content;
  transition: color 0.25s var(--ease);
}
.pie-nav a:hover, .pie-contacto a:hover { color: var(--oro); }
.pie-contacto p { font-size: 0.86rem; color: var(--plata); }
.pie-legal {
  border-top: 1px solid var(--borde);
  padding: 22px 0 26px;
  text-align: center;
}
.pie-legal p {
  font-size: 0.76rem;
  color: var(--plata);
  line-height: 1.85;
  width: var(--ancho);
  margin: 0 auto;
}
.pie-legal strong { color: var(--texto); font-weight: 600; }

/* ============================================================
   AURA DEL CURSOR (no oculta el cursor nativo)
   ============================================================ */
.cursor-aura {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  will-change: transform;
}
.cursor-aura::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(240, 165, 0, 0.5);
  background: radial-gradient(circle, rgba(240, 165, 0, 0.10) 0%, transparent 65%);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cursor-aura.on { opacity: 1; }
.cursor-aura.grande::before { transform: scale(1.6); border-color: rgba(240, 165, 0, 0.9); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .crosshair { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
}

@media (max-width: 1200px) {
  .canales { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .empresa-grid, .ssoma-grid { grid-template-columns: 1fr; gap: 38px; }
  .alcance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cotas { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .argumentos { grid-template-columns: 1fr; gap: 20px; }
  .grid-3 { grid-template-columns: 1fr; }
  .contacto-grid { grid-template-columns: 1fr; gap: 32px; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
  .marca-agua { width: 60vw; opacity: 0.045; }
  .cursor-aura { display: none; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(12, 12, 13, 0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--borde);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 6% 24px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0.3s;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.abierto { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-link { padding: 15px 4px; border-bottom: 1px solid var(--borde); font-size: 0.88rem; }
  .nav-link::after { display: none; }
  .nav-acciones { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
  .lamina { padding: 78px 0; }
  .lamina-respiro { padding: 96px 0; }
  .corte-diagonal { padding-top: calc(78px + var(--corte)); }
  .cinta { grid-template-columns: 1fr 1fr; }
  .cinta-cell:nth-child(3) { border-left: none; }
  .cinta-cell:nth-child(n+3) { border-top: 1px solid var(--borde); }
  .ssoma-grid { gap: 34px; }
  .marco { display: none; }
  .haz-b { display: none; }
}

@media (max-width: 640px) {
  body { padding-bottom: 58px; }
  .grid-4 { grid-template-columns: 1fr; }
  .cotas { grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 30px 0 26px; }
  .cinta { grid-template-columns: 1fr; }
  .cinta-cell { border-left: none; }
  .cinta-cell + .cinta-cell { border-top: 1px solid var(--borde); }
  .hero-ctas .btn { width: 100%; max-width: 320px; }
  .hero-chips a { font-size: 0.62rem; padding: 8px 15px; }
  .hero-badges li { font-size: 0.57rem; padding: 6px 13px; }
  .hero-kicker { font-size: 0.6rem; letter-spacing: 0.2em; line-height: 1.8; }
  .lamina-hero { padding: calc(var(--header-h) + 34px) 0 96px; }
  .hero-baja { display: none; }
  .brand-name { font-size: 0.9rem; }
  .ficha-rotulo, .rotulo-final, .formulario, .checklist { padding: 22px 18px; }
  .rot-fila { grid-template-columns: 1fr; gap: 4px; padding: 12px 2px; }
  .linea-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .linea { padding: 56px 0; }
  .ssoma-bloque { margin-top: 46px; }
  .pictos { grid-template-columns: 1fr; }
  .picto { display: flex; align-items: center; gap: 18px; text-align: left; }
  .picto-svg { width: 62px; margin: 0; flex-shrink: 0; }
  .pie-grid { grid-template-columns: 1fr; gap: 34px; }
  .canales { grid-template-columns: 1fr; gap: 12px; }
  .paso { grid-template-columns: 44px 1fr; gap: 16px; }
  .proceso::before { left: 21px; }

  /* Listado de servicios en acordeón */
  .alc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 1px solid var(--borde-oro);
    border-radius: 999px;
    color: var(--oro);
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 11px 22px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background 0.25s var(--ease);
  }
  .alc-toggle:hover { background: var(--oro-suave); }
  .alcance {
    grid-template-columns: 1fr;
    gap: 10px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.5s var(--ease), visibility 0.5s, margin-top 0.4s var(--ease);
  }
  .alcance.abierto {
    max-height: 1800px;
    visibility: visible;
    margin-top: 18px;
  }
  .alcance li { padding: 14px 14px 16px; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
  .alcance li:hover { transform: none; }
  .svc-ico { width: 52px; height: 52px; }
  /* Dentro del acordeón la fila ya se descubre sola: el trazo queda puesto,
     sin animación de dibujo, para no cargar el teléfono. */
  html.fx .svc-ico .tr { stroke-dasharray: none; stroke-dashoffset: 0; }
  html.fx .alcance li.plancha::after { display: none; }
  .cajetin { left: 0; right: 0; bottom: 0; border-radius: 0; border-left: none; border-right: none; border-bottom: none; }
  .caj-cell { flex: 1; padding: 8px 12px; }
  .caj-xy { display: none; }
  .caj-contenido .caj-val { max-width: none; }
}

@media (max-width: 380px) {
  .brand-name { display: none; }
  .cotas { grid-template-columns: 1fr; }
}

/* ============================================================
   MOVIMIENTO REDUCIDO — todo apagado, estado final visible
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .particulas, .cursor-aura, .crosshair { display: none !important; }
  .haz { animation: none !important; opacity: 0.5; }
  .hero-baja span { animation: none !important; }
  .tr { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  text.rot { opacity: 1 !important; }
  .ext { transform: scaleY(1) !important; }
  .cota-lin, .rep-seg { transform: scaleX(1) !important; }
  .proceso::before { transform: scaleY(1) !important; }
  .split .ink { transform: none !important; }
  .soplete::after { animation: none !important; }
  .filo { animation: none !important; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   IMPRESIÓN — la web sale como una lámina limpia
   ============================================================ */
@media print {
  html, body {
    background: #FFFFFF !important;
    color: #111111 !important;
  }
  body { background-image: none !important; }
  .site-header, .riel, .cajetin, .particulas, .haz, .crosshair, .cursor-aura,
  .hero-baja, .marca-agua, .curvas, .marco, .salto-contenido, .btn-copiar,
  .formulario, .alc-toggle, .hero-ctas, .acciones-final { display: none !important; }
  .hero-chips a, .hero-badges li, .chips li, .aviso-dev, .sello {
    background: none !important;
    border: 1px solid #BBBBBB !important;
    color: #333333 !important;
  }
  .sello { transform: none !important; opacity: 1 !important; }
  .chip-n { color: #8A6000 !important; }
  .lamina { padding: 18pt 0 !important; page-break-inside: avoid; }
  .lamina::before, .lamina::after, .filo, .site-footer::before { display: none !important; }
  .corte-diagonal { clip-path: none !important; margin-top: 0 !important; padding-top: 18pt !important; background: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  html.fx .plancha::after { display: none !important; }
  /* Los titulares se revelan por scroll: al imprimir tienen que estar puestos
     aunque la lámina nunca haya entrado en pantalla. */
  html.fx .split .ink { transform: none !important; }
  .split .linea-txt { overflow: visible !important; }
  .lam-cod, .lam-nom { background: #FFFFFF !important; }
  .lam-cod { color: #8A6000 !important; }
  .lam-nom { color: #666666 !important; }
  .lam-cab::before { background: #CCCCCC !important; }
  .titulo, .hero-title, .linea-tit, .tarjeta h3, .paso-txt h3, .cinta-val, .canal-val,
  .rot-fila dd, .cota-num, .brand-name, .legal-norma, .ssoma-sub {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    -webkit-text-stroke: 0 !important;
    background: none !important;
  }
  .kicker, .gold, .rot-fila dt, .rotulo-tit, .panel-tit, .alc-cod, .linea-sub,
  .pie-nav h3, .pie-contacto h3 { color: #8A6000 !important; -webkit-text-fill-color: #8A6000 !important; }
  p, li, .cinta-pie, .cota-lab, .lam-intro, .tarjeta p, .paso-txt p { color: #333333 !important; }
  .tr { stroke: #333333 !important; stroke-opacity: 1 !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .tr.oro, .tr.cota { stroke: #8A6000 !important; }
  text.rot { fill: #555555 !important; fill-opacity: 1 !important; opacity: 1 !important; }
  .alcance { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8pt !important; }
  .alcance li { border: 1px solid #BBBBBB !important; background: none !important; page-break-inside: avoid; }
  .tarjeta, .checklist, .ficha-rotulo, .rotulo-final, .canal, .picto, .panel-oro {
    background: none !important;
    border: 1px solid #BBBBBB !important;
    box-shadow: none !important;
  }
  .num-out { -webkit-text-stroke: 1px #8A6000 !important; color: transparent !important; }
  .num-fill { display: none !important; }
  .site-footer { background: none !important; border-top: 1px solid #BBBBBB !important; }
  .lamina-ssoma { background-image: none !important; }
  a { color: #111111 !important; text-decoration: none !important; }
}

/* ============================================================
   TEXTURA DE FONDO — 100 % CSS, CERO RASTER (2026-07-25)
   Regla dura de la marca: ni una sola fotografía en el sitio.
   El aire de las láminas se consigue con degradados radiales
   (luz de arco difusa), nunca con imágenes.
   ============================================================ */
.lamina-hero {
  background-image:
    radial-gradient(58% 46% at 50% 42%, rgba(240, 165, 0, 0.055) 0%, rgba(240, 165, 0, 0) 68%),
    radial-gradient(90% 60% at 50% 108%, rgba(255, 231, 166, 0.05) 0%, rgba(12, 12, 13, 0) 62%);
}
.lamina-respiro {
  background-image:
    radial-gradient(46% 40% at 50% 46%, rgba(240, 165, 0, 0.06) 0%, rgba(240, 165, 0, 0) 70%);
}

/* el contenido siempre por encima de la textura */
.lamina-hero .hero-inner,
.lamina-nucleo .container,
.lamina-respiro .container { position: relative; z-index: 2; }

/* ============================================================
   ARTE ABSTRACTO DE FONDO (2026-07-25)
   No son fotografías: son piezas de arte generadas a medida para la marca.
   Nunca muestran personas, obras ajenas ni objetos identificables, así que
   no comprometen la credibilidad del sitio ante una minera. Van muy
   atenuadas: acompañan a la tipografía, no compiten con ella.
   ============================================================ */
.arte-fondo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:.30; filter:saturate(.85) contrast(1.05);
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
}
.arte-fondo-hero{ background-image:url("assets/arte_hero.png"); opacity:.34; }
.arte-fondo-estructura{ background-image:url("assets/arte_estructura.png"); opacity:.16; background-position:center right; }
.arte-fondo-energia{ background-image:url("assets/arte_energia.png"); opacity:.24; }

/* el contenido siempre por encima del arte */
.lamina-hero .hero-inner,
.lamina-nucleo .container,
.lamina-respiro .container{ position:relative; z-index:2; }

@media (max-width: 780px){
  /* en el celular el arte baja aun mas: manda el texto */
  .arte-fondo{ opacity:.16; }
  .arte-fondo-estructura{ opacity:.10; }
}
@media (prefers-reduced-motion: reduce){
  .arte-fondo{ opacity:.18; }
}


/* ============================================================
   LOGO REAL (2026-07-25) — reemplaza el emblema SVG que se habia
   dibujado a mano y que NO era el logotipo de la empresa.
   ============================================================ */
img.brand-logo{
  height:42px; width:auto; display:block;
  object-fit:contain; filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
img.emblema{ width:auto; object-fit:contain; display:block; margin:0 auto; }
img.emblema-hero{ height:120px; opacity:.96; }
img.emblema-pie{ height:96px; opacity:.92; }
@media (max-width: 780px){
  img.brand-logo{ height:34px; }
  img.emblema-hero{ height:88px; }
  img.emblema-pie{ height:72px; }
}

/* ============================================================
   LÁMINA DE PROPÓSITO — misión, visión y principios (2026-07-25)
   Registro industrial: frases cortas, mucho aire, el oro solo
   para lo que importa. Nada de tarjetas decorativas.
   ============================================================ */
.proposito-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(28px, 5vw, 72px);
  margin-top:clamp(28px, 5vw, 56px);
}
@media (max-width: 880px){ .proposito-grid{ grid-template-columns:1fr; gap:38px; } }

.proposito-eti{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--oro, #F0A500); font-weight:700; margin:0 0 12px;
}
.proposito-frase{
  font-family:Montserrat, system-ui, sans-serif;
  font-size:clamp(1.35rem, 2.6vw, 2rem); font-weight:800; line-height:1.15;
  letter-spacing:-.015em; color:#fff; margin:0 0 16px; text-wrap:balance;
}
.proposito-cuerpo{
  font-size:.98rem; line-height:1.72; color:rgba(255,255,255,.66);
  margin:0; max-width:46ch;
}

.principios{ margin-top:clamp(40px, 6vw, 78px); }
.principios-lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:0;
  border-top:1px solid rgba(255,255,255,.10);
}
@media (max-width: 880px){ .principios-lista{ grid-template-columns:1fr; } }

.principios-lista li{
  padding:22px 26px 22px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; flex-direction:column; gap:5px;
}
.principios-lista li b{
  font-family:Montserrat, system-ui, sans-serif;
  font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-.01em;
}
.principios-lista li span{
  font-size:.9rem; color:rgba(255,255,255,.55); line-height:1.6;
}


/* ============================================================
   SERVICIOS SIEMPRE VISIBLES (2026-07-25)
   Fos: "no quiero tener que desplegar el menú en las tres
   operaciones, que aparezcan sí o sí directamente".
   El acordeón obligaba a un clic para ver qué hace la empresa:
   justo lo que no debe costar en una web comercial.
   ============================================================ */
.alcance{
  display:grid !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.alc-toggle{ display:none !important; }
.alcance[hidden]{ display:grid !important; }

/* parrafo de origen de la lamina de proposito */
.proposito-origen{ margin-top:clamp(22px,4vw,40px); padding-left:clamp(14px,2vw,22px); border-left:3px solid #F0A500; max-width:78ch; }
.proposito-origen .proposito-cuerpo{ color:rgba(255,255,255,.78); font-size:1.02rem; }


/* ============================================================
   LOS SERVICIOS, A LA VISTA (2026-07-25)
   Fos no encontraba los 15 servicios: el encabezado de cada
   línea ocupaba una pantalla entera y había que hacer scroll
   para llegar a ellos. Se compacta el aire de arriba.
   ============================================================ */
.lamina-nucleo .lam-head{ margin-bottom:clamp(14px, 2vw, 24px); }
.lamina-nucleo .lam-intro{ margin-bottom:clamp(10px, 1.6vw, 18px); }
.linea{ padding-block:clamp(26px, 4vw, 52px) !important; min-height:0 !important; }
.linea-head{ margin-bottom:clamp(16px, 2.4vw, 28px) !important; }
.linea-body{ margin-top:0 !important; }
.alcance{ margin-top:clamp(8px, 1.4vw, 16px) !important; }

/* las tarjetas de servicio, un poco más compactas: entran más en pantalla */
.alcance li{ padding:clamp(12px, 1.6vw, 18px) !important; }