/* =============================================================
   GCLP · Consultoría en Ingeniería Geológica y Geología Aplicada
   Azul noche + rojo + blanco
   1 Tokens · 2 Reset · 3 Cursor y cargador · 4 Nav · 5 Hero
   6 Cifras · 7 Tira · 8 Secciones · 9 Nosotros · 10 Servicios
   11 Proyectos · 12 Por qué · 13 Equipo · 14 Contacto · 15 Pie
   16 SplitText · 17 Responsive · 18 Motion
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  --bg:        #080D18;
  --bg-2:      #0B1220;
  --card:      #111A2B;
  --card-2:    #16203A;

  --paper:     #FFFFFF;
  --paper-2:   #DCE3EC;
  --paper-3:   #9FABBB;

  --accent:    #FF3030;
  --accent-2:  #D91F26;
  --accent-3:  #FF3030;

  --line:      rgba(255, 255, 255, .12);
  --line-soft: rgba(255, 255, 255, .07);

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif:   "Cinzel", "Trajan Pro", Georgia, serif;
  --sans:    "Montserrat", "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "Montserrat", "Lato", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 72px;
  --r: 18px;
}

/* =============================================================
   2. RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px; font-weight: 400; line-height: 1.7;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 3px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 10001;
  padding: .6rem 1rem; background: var(--paper); color: var(--bg); font-weight: 500; border-radius: 8px;
}
.skip-link:focus { top: 1rem; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Grano muy tenue sobre todo el sitio */
.grano::after {
  content: ""; position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 190px 190px;
}

/* =============================================================
   3. CURSOR Y CARGADOR
   ============================================================= */
.cursor-punto, .cursor-aro {
  position: fixed; top: 0; left: 0; z-index: 10000;
  pointer-events: none; border-radius: 50%; mix-blend-mode: difference;
  opacity: 0; transition: opacity .3s var(--ease-out);
}
html.cursor-activo .cursor-punto, html.cursor-activo .cursor-aro { opacity: 1; }
.cursor-punto { width: 6px; height: 6px; background: #fff; margin: -3px 0 0 -3px; }
.cursor-aro {
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1px solid rgba(255,255,255,.7);
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              margin .35s var(--ease-out), opacity .3s var(--ease-out), border-color .35s var(--ease-out);
}
.cursor-aro.activo { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--accent-3); }
.cursor-aro.arrastre { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
@media (pointer: coarse), (hover: none) { .cursor-punto, .cursor-aro { display: none; } }
@media (hover: hover) and (pointer: fine) {
  html.cursor-activo, html.cursor-activo a, html.cursor-activo button { cursor: none; }
}

.cargador {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg); display: grid; place-items: center;
  transition: clip-path 1s var(--ease-out), opacity .5s var(--ease-out) .45s;
  animation: cargadorSeguro .01s 5s forwards;
}
.cargador.fuera { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }
@keyframes cargadorSeguro { to { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; } }
.cargador-inner { display: grid; justify-items: center; gap: 1.3rem; width: min(300px, 70vw); }
.cargador-marca { font-family: var(--display); font-weight: 700; font-size: 1.7rem; letter-spacing: .26em; padding-left: .26em; }
.cargador-barra { display: block; width: 100%; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.cargador-barra i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .35s var(--ease-out); }
.cargador-num { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: var(--paper-3); }

/* =============================================================
   4. NAV
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  transition: background-color .45s var(--ease-out), backdrop-filter .45s var(--ease-out), border-color .45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.compacta {
  background: rgba(8, 13, 24, .86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.compacta { background: rgba(8, 13, 24, .97); }
}
/* Tres columnas iguales a los lados: el menú queda centrado de verdad
   respecto a la página, no solo entre el logo y el botón. */
.nav-inner {
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1rem;
}
.marca { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: .55rem; }
.nav-menu { grid-column: 2; justify-self: center; }
.btn-nav, .burger { grid-column: 3; justify-self: end; }
.marca-mono { width: 40px; height: 29px; flex: none; }
.marca-mono svg, .marca-mono img { width: 100%; height: 100%; object-fit: contain; }
.marca-texto {
  font-family: var(--display); font-weight: 700; font-size: 1.22rem;
  letter-spacing: -0.02em; color: var(--paper);
  display: inline-flex; align-items: flex-start;
}
.marca-texto i { font-style: normal; font-size: .42em; margin-top: .1em; color: var(--accent); }

.nav-menu { display: none; align-items: center; gap: clamp(.1rem, .5vw, .35rem); }
.nav-link {
  position: relative; padding: .48rem .8rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: .88rem; font-weight: 500; letter-spacing: .01em;
  color: rgba(255, 255, 255, .72);
  transition: color .3s var(--ease-out);
  isolation: isolate;
}
/* Píldora tenue que aparece bajo el texto */
.nav-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, .07);
  opacity: 0; transform: scale(.88);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.nav-link:hover::before, .nav-link:focus-visible::before { opacity: 1; transform: scale(1); }
/* Subrayado rojo que crece desde el centro */
.nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: .08rem;
  width: 14px; height: 2px; margin-left: -7px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0);
  transition: transform .4s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:hover { color: var(--paper); }
.nav-link.activo { color: var(--paper); font-weight: 600; }
.nav-link.activo::after { transform: scaleX(1); width: 20px; margin-left: -10px; }

.burger {
  width: 44px; height: 44px; display: grid; place-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 12px;
}
.burger span { display: block; width: 18px; height: 1.6px; background: var(--paper); transition: transform .4s var(--ease-soft); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.8px) rotate(-45deg); }

.menu-movil {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(8, 13, 24, .98);
  display: grid; place-content: center; gap: 2.2rem; text-align: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-out);
}
.menu-movil[aria-hidden="false"] { clip-path: inset(0); }
.menu-movil nav { display: grid; gap: .9rem; }
.menu-movil a {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 7.5vw, 2.3rem); letter-spacing: -0.02em;
  transition: color .3s var(--ease-out);
}
.menu-movil a:hover { color: var(--accent-3); }
.menu-movil-pie { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--paper-3); }

/* =============================================================
   BOTONES Y ENLACES
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  transition: background-color .35s var(--ease-out), transform .3s var(--ease-out), color .35s var(--ease-out);
}
.btn .ico { width: 17px; height: 17px; }
.btn-rojo { background: var(--accent); color: #fff; box-shadow: 0 10px 26px -12px rgba(230,57,70,.9); }

.btn-rojo:active { transform: scale(.96); }
.btn-linea { border: 1px solid var(--line); color: var(--paper); }

.btn-linea:active { transform: scale(.96); }
.btn-nav {
  display: none;
  font-family: var(--display); font-weight: 500; font-size: .88rem; letter-spacing: .01em;
  padding: .72rem 1.35rem;
  /* No se desplaza al pasar el cursor: solo cambia de tono y gana un halo.
     Por eso tampoco lleva efecto magnético en el HTML. */
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
  overflow: hidden; isolation: isolate;
}


/* Sin brillo ni escalado: el botón solo cambia de tono. */
.btn-grande { padding: .55rem .6rem .55rem 1.5rem; gap: .9rem; font-size: .95rem; }
.btn-ancho { width: 100%; }
.btn-circulo {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: rgba(0,0,0,.22); display: grid; place-items: center;
  transition: transform .4s var(--ease-out);
}
.btn-grande:hover .btn-circulo { transform: translateX(3px); }
.btn-circulo svg { width: 16px; height: 16px; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .92rem; font-weight: 500; color: var(--paper-2);
  transition: color .3s var(--ease-out), gap .3s var(--ease-out);
}
.enlace-flecha svg { width: 15px; height: 15px; color: var(--accent); transition: transform .35s var(--ease-out); }
.enlace-flecha:hover { color: var(--paper); gap: .8rem; }
.enlace-flecha:hover svg { transform: translateX(2px); }

.mandos { display: flex; gap: .5rem; }
.mando {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--paper);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), transform .25s var(--ease-out);
}
.mando svg { width: 18px; height: 18px; }

.mando:active { transform: scale(.94); }
.mando[disabled] { opacity: .32; pointer-events: none; }

/* =============================================================
   5. HERO
   ============================================================= */
.hero {
  position: relative;
  /* Altura contenida: ya no ocupa toda la pantalla */
  min-height: clamp(620px, 90svh, 860px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: clamp(1.1rem, 2.4vh, 1.6rem);
  margin-bottom: clamp(.6rem, 1.4vw, 1.2rem);
}
/* La imagen se recorta con el borde inferior redondeado, como en la referencia */
.hero-fondo { border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.hero-fondo { position: absolute; inset: 0; z-index: 0; }
.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.5s var(--ease-soft), visibility 0s linear 1.5s;
}
.slide.activa { opacity: 1; visibility: visible; transition-delay: 0s; }
.slide-fondo { position: absolute; inset: 0; will-change: transform; }
.slide-fondo::before {
  content: ""; position: absolute; inset: -8%;
  background-image: var(--img);
  background-size: cover; background-position: 72% center;
  animation: travelling 30s ease-in-out infinite alternate;
}
@keyframes travelling { from { transform: scale(1.04); } to { transform: scale(1.14); } }
.slide:not(.activa) .slide-fondo::before { animation-play-state: paused; }

.hero-velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,13,24,.96) 0%, rgba(8,13,24,.82) 34%, rgba(8,13,24,.28) 62%, rgba(8,13,24,.5) 100%),
    linear-gradient(180deg, rgba(8,13,24,.9) 0%, rgba(8,13,24,.15) 26%, rgba(8,13,24,.55) 78%, var(--bg) 100%);
}

.hero-inner { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 2rem; padding-bottom: 1rem; }
.hero-txt { max-width: 42rem; }

.kicker {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 1rem;
}
.kicker-raya { display: flex; align-items: center; gap: .8rem; color: var(--paper-2); }
.kicker-raya::before { content: ""; width: 34px; height: 3px; background: var(--accent); border-radius: 2px; flex: none; }
.hero-titulo {
  position: relative; display: inline-block;
  font-size: clamp(3.6rem, 10.5vw, 8.4rem);
  font-weight: 700; line-height: .9; letter-spacing: -0.045em;
  margin-bottom: .6rem;
}
.hero-asterisco {
  position: absolute; top: .04em; right: -.28em;
  font-size: .26em; font-weight: 700; color: var(--accent); line-height: 1;
}
.hero-lema {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1.14; letter-spacing: -0.03em;
  margin-bottom: .9rem;
}
.hero-lema em { font-style: normal; color: var(--accent); }
.hero-lead {
  max-width: 34rem; color: var(--paper-2);
  font-size: clamp(.97rem, 1.15vw, 1.05rem); line-height: 1.62;
  text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none;
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

.hero-pin {
  display: none; align-items: flex-start; gap: .55rem;
  font-size: .84rem; font-weight: 500; color: var(--paper); line-height: 1.35;
  margin-bottom: 1.5rem;
}
.hero-pin svg { width: 20px; height: 20px; color: var(--accent); flex: none; }

/* =============================================================
   6. CIFRAS
   ============================================================= */
.cifras {
  position: relative; z-index: 1;
  margin-top: 1.2rem;
  background: rgba(17, 26, 43, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  overflow: hidden;
}

.cifra {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.2rem;
  position: relative;
}
.cifra:nth-child(odd)::before { display: none; }
.cifra + .cifra::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: var(--line-soft);
}
.cifra-ico {
  position: relative;
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  border: 1px solid rgba(120,170,255,.35); display: grid; place-items: center; color: var(--paper-2);
  background: rgba(255,255,255,.03);
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out),
              background-color .45s var(--ease-out), transform .45s var(--ease-out);
}
/* Al pasar por cualquier parte del dato, su icono cobra vida */
.cifra:hover .cifra-ico {
  color: var(--accent);
  border-color: rgba(230, 57, 70, .6);
  background: rgba(230, 57, 70, .1);
  transform: translateY(-3px);
}
.cifra:hover .cifra-txt b { color: var(--paper); }
.cifra-txt b { transition: color .45s var(--ease-out); }

/* Anillo que se expande una vez */
.cifra-ico::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0; pointer-events: none;
}
.cifra:hover .cifra-ico::after { animation: anilloCifra 1.1s var(--ease-out); }
@keyframes anilloCifra {
  0%   { opacity: .75; transform: scale(.86); }
  70%  { opacity: 0;   transform: scale(1.55); }
  100% { opacity: 0;   transform: scale(1.55); }
}

/* Cada icono se mueve según lo que representa */
@keyframes saltoIcono { 0%, 100% { transform: translateY(0); } 42% { transform: translateY(-4px); } }
@keyframes giroAguja  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes trazoCheck { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }

.cifra:hover .cifra-ico svg { animation: saltoIcono .65s var(--ease-out); }

/* 2 · reloj: gira la aguja */
.cifra:nth-child(2):hover .cifra-ico svg { animation: none; }
.cifra:nth-child(2):hover .cifra-ico path {
  transform-box: view-box; transform-origin: 12px 12px;
  animation: giroAguja 1s var(--ease-out);
}

/* 4 · escudo: se dibuja la marca de verificación */
.cifra:nth-child(4):hover .cifra-ico path:last-of-type {
  stroke-dasharray: 22;
  animation: trazoCheck .7s var(--ease-out) forwards;
}
.cifra-ico svg { width: 24px; height: 24px; }
.cifra-txt { display: grid; font-size: .88rem; color: var(--paper-2); line-height: 1.35; }
.cifra-txt b {
  font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  color: var(--paper); letter-spacing: -0.03em; line-height: 1.1;
}

/* =============================================================
   7. TIRA DE IMÁGENES
   ============================================================= */
.tira {
  /* En pantallas estrechas la barra de cifras es más alta: la tira baja para
     no pisarla. A partir de 1000 px sube pegada al hero, como en la referencia. */
  margin-top: 1.4rem;
  padding-block: 0 clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}
@media (min-width: 1000px) {
  .tira { margin-top: .6rem; }
}
.marq-fila { overflow: hidden; }
.tira-pista { display: flex; gap: 0; width: max-content; will-change: transform; }

/* Paralelogramos que encajan entre sí: cada pieza se solapa con la siguiente
   exactamente lo que mide su inclinación, así solo queda una línea oscura fina
   entre fotos en lugar de una banda negra. */
.tira-tile {
  --inclinacion: clamp(20px, 2.6vw, 34px);
  --linea: 5px;
  margin: 0 calc(-1 * var(--inclinacion) + var(--linea)) 0 0;
  flex: none;
  width: clamp(150px, 17.5vw, 225px);
  aspect-ratio: 3 / 2.05;
  overflow: hidden;
  clip-path: polygon(var(--inclinacion) 0, 100% 0, calc(100% - var(--inclinacion)) 100%, 0 100%);
}
/* Anchos alternados: las piezas no son todas iguales */
.tira-tile:nth-child(3n+2) { width: clamp(180px, 21vw, 272px); }
.tira-tile:nth-child(3n+3) { width: clamp(138px, 15.5vw, 198px); }

.tira-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.22);
  transition: transform .8s var(--ease-soft), filter .6s var(--ease-out);
  filter: brightness(1.04) saturate(1.04) contrast(1.04);
}
.tira-tile:hover img { transform: scale(1.28); filter: saturate(1.05) contrast(1.08); }
.tira-tile-portada img { object-position: 35% center; transform: scale(1.04); }
.tira-tile-portada:hover img { transform: scale(1.08); }

/* =============================================================
   8. SECCIONES
   ============================================================= */
.seccion { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; }
.titular {
  font-size: clamp(1.5rem, 3.1vw, 2.45rem);
  line-height: 1.18; letter-spacing: -0.03em;
  max-width: 24ch;
  text-wrap: balance;
}
.titular em { font-style: normal; color: var(--accent); }
.titular-sm { font-size: clamp(1.35rem, 2.4vw, 1.95rem); }
.parrafo {
  margin-top: 1.2rem; color: var(--paper-2);
  font-size: 1.04rem; line-height: 1.75; max-width: 54ch;
  text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none;
}
[data-anim] { opacity: 0; }

.cab {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.cab-txt { flex: 1 1 26rem; }
.cab-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }

/* =============================================================
   9. NOSOTROS
   ============================================================= */
.nosotros-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.nosotros-txt .titular { max-width: 23ch; }
.nosotros-txt .btn { margin-top: 1.8rem; }

.nosotros-media { display: grid; gap: .9rem; }
.nosotros-foto {
  position: relative; margin: 0;
  border-radius: var(--r); overflow: hidden;
  aspect-ratio: 4 / 3.1;
  display: flex; align-items: flex-end;
}
.nosotros-foto > img {
  width: 100%; height: 112%; object-fit: cover; position: absolute; inset: 0; top: -6%;
}

/* Tarjeta que alterna misión y visión: la fotografía no se mueve */
.mision {
  position: relative; z-index: 1;
  margin: clamp(.7rem, 2vw, 1.1rem);
  background: rgba(11, 18, 32, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 1.1rem 1.2rem;
  display: grid;
  width: 100%;
}

/* Las dos fichas comparten celda: la altura la marca la más larga y no hay saltos */
.mision-item {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .85rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s;
}
.mision-item.activa { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mision-ico {
  grid-row: span 2; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(230,57,70,.4); background: rgba(230,57,70,.1);
  display: grid; place-items: center; color: var(--accent);
}
.mision-ico svg { width: 19px; height: 19px; }
.mision p {
  font-size: .82rem; color: var(--paper-2); line-height: 1.62;
  text-align: justify; text-justify: inter-word;
  hyphens: none; -webkit-hyphens: none;
}
.mision b { font-family: var(--display); font-size: .96rem; color: var(--paper); font-weight: 600; }

/* Indicadores debajo de la fotografía */
.mision-puntos { display: flex; gap: .4rem; justify-content: center; }
.mision-puntos button { width: 30px; height: 14px; padding: 5px 0; background: none; border: 0; }
.mision-puntos i {
  display: block; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.24);
  transition: background-color .4s var(--ease-out);
}
.mision-puntos button:hover i { background: rgba(255,255,255,.45); }
.mision-puntos button.activa i { background: var(--accent); }

/* =============================================================
   10. SERVICIOS
   ============================================================= */
.carrusel { position: relative; }
.carrusel-pista {
  display: flex; gap: .8rem; align-items: stretch;
  padding-inline: var(--gutter);
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista.arrastrando { scroll-snap-type: none; cursor: grabbing; }

/* En Servicios, una ficha desplegada crece sin estirar las tarjetas vecinas. */
.servicios .carrusel-pista { align-items: flex-start; }

.serv {
  flex: 0 0 min(80vw, 290px);
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 1.4rem 1.3rem 0;
  display: flex; flex-direction: column; gap: .7rem;
  overflow: hidden;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.serv:hover { background: var(--card-2); border-color: rgba(230,57,70,.4); transform: translateY(-5px); }
.serv-ico {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(230,57,70,.45); background: rgba(230,57,70,.1);
  display: grid; place-items: center; color: var(--accent);
}
.serv-ico svg { width: 22px; height: 22px; }
.serv h3 { font-size: 1.12rem; line-height: 1.28; font-weight: 600; }
.serv p { font-size: .97rem; color: var(--paper-2); line-height: 1.62; }
.serv .enlace-flecha { margin-top: auto; padding-bottom: 1.1rem; }
.serv-mas { border-top: 1px solid var(--line-soft); padding-top: .55rem; }
.serv-mas summary { cursor: pointer; color: var(--accent-3); font-size: .82rem; font-weight: 500; list-style: none; }
.serv-mas summary::-webkit-details-marker { display: none; }
.serv-mas summary::after { content: "+"; float: right; font-family: var(--mono); }
.serv-mas[open] summary::after { content: "−"; }
.serv-mas ul { padding: .45rem 0 0 1.1rem; margin: 0; display: grid; gap: .38rem; }
.serv-mas li {
  font-size: .84rem; line-height: 1.55; color: #edf1f7;
  text-align: justify; text-align-last: left; text-justify: inter-word;
}
.equipo-resumen { max-width: 82ch; margin: 0 0 2rem; color: var(--paper-2); line-height: 1.7; }
.serv-foto {
  margin-inline: -1.3rem; margin-bottom: 0;
  aspect-ratio: 16 / 10; overflow: hidden;
}
.serv-foto img {
  width: 100%; height: 112%; object-fit: cover; margin-top: -6%;
  transition: transform .8s var(--ease-soft);
}
.serv:hover .serv-foto img { transform: scale(1.05); }

/* =============================================================
   11. PROYECTOS
   ============================================================= */
.proyectos-cab { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
.proyectos-txt .btn { margin-top: 1.8rem; }

.destacado {
  position: relative; display: block;
  border-radius: var(--r); overflow: hidden;
  aspect-ratio: 16 / 10;
}
.destacado img {
  width: 100%; height: 112%; object-fit: cover; position: absolute; inset: 0; top: -6%;
  transition: transform .9s var(--ease-soft);
}
.destacado:hover img { transform: scale(1.05); }
.destacado::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,13,24,.1) 40%, rgba(8,13,24,.8) 100%);
}
.destacado-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; color: #fff; z-index: 1;
  transition: transform .4s var(--ease-out), background-color .4s var(--ease-out);
}
.destacado:hover .destacado-play { transform: translate(-50%,-50%) scale(1.1); background: var(--accent); }
.destacado-play svg { width: 26px; height: 26px; }
.destacado-pie {
  position: absolute; left: 1.1rem; bottom: 1rem; z-index: 1;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--paper-2);
}

.proyectos-mandos { display: flex; justify-content: flex-end; margin-block: 1.6rem .9rem; }

.tarjeta-proy {
  flex: 0 0 min(78vw, 275px);
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.tarjeta-proy:hover { background: var(--card-2); border-color: rgba(230,57,70,.4); transform: translateY(-5px); }
.tarjeta-proy-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; flex: none; }
.tarjeta-proy-media img {
  position: absolute; inset: 0; top: -6%;
  width: 100%; height: 112%; object-fit: cover;
  transition: transform .9s var(--ease-soft);
}
.tarjeta-proy:hover .tarjeta-proy-media img { transform: scale(1.05); }
.tarjeta-proy-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(8,13,24,.6) 100%);
}
/* Proyectos sin fotografía propia: no se les pone la de otro proyecto */
.tarjeta-proy-sinfoto {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(230,57,70,.26), transparent 62%),
    linear-gradient(160deg, #16203A 0%, #0D1526 100%);
}
.tarjeta-proy-sinfoto::before {
  content: ""; position: absolute; inset: -20%;
  background-image: repeating-radial-gradient(circle at 76% 84%, transparent 0 15px, rgba(255,90,103,.16) 15px 16px);
  opacity: .55; transition: transform 1.1s var(--ease-soft);
}
.tarjeta-proy:hover .tarjeta-proy-sinfoto::before { transform: scale(1.08); }
.tarjeta-proy-cifra {
  position: relative;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1; letter-spacing: -0.05em;
  color: rgba(255,255,255,.3);
}
@supports ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
  .tarjeta-proy-cifra { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); }
}
.tarjeta-proy.sin-foto:hover .tarjeta-proy-cifra { -webkit-text-stroke-color: var(--accent-3); }

.tarjeta-proy-cuerpo { padding: 1rem 1.1rem 1.3rem; display: grid; gap: .45rem; align-content: start; }
.tarjeta-proy-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper-3);
}
.tarjeta-proy-n { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--accent); letter-spacing: -0.02em; }
.tarjeta-proy h3 {
  font-size: 1.06rem; line-height: 1.32; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-proy-lugar {
  font-size: .89rem; color: var(--paper-2); line-height: 1.52;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =============================================================
   12. POR QUÉ ELEGIRNOS
   ============================================================= */
.porque { padding-block: 0; }
.porque-grid { display: grid; gap: 0; align-items: stretch; }
.porque-foto { margin: 0; position: relative; overflow: hidden; min-height: 260px; }
.porque-foto img { width: 100%; height: 112%; object-fit: cover; position: absolute; inset: 0; top: -6%; }
.porque-panel {
  background: var(--card);
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.3rem, 3vw, 2.6rem);
  display: grid; gap: 2rem; align-content: center;
}
.porque-lista { display: grid; gap: 1.1rem; }
.porque-lista li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.porque-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  border: 1px solid rgba(230,57,70,.45); background: rgba(230,57,70,.1);
  display: grid; place-items: center; color: var(--accent);
}
.porque-ico svg { width: 17px; height: 17px; }
.porque-lista div { display: grid; gap: .25rem; font-size: .9rem; color: var(--paper-2); line-height: 1.55; }
.porque-lista b { font-family: var(--display); font-size: 1.03rem; font-weight: 600; color: var(--paper); }

/* =============================================================
   13. EQUIPO
   ============================================================= */
.equipo-grid { display: grid; gap: 1rem; }
.perfil {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 1.6rem 1.5rem;
  transition: border-color .4s var(--ease-out);
}
.perfil:hover { border-color: rgba(230,57,70,.4); }
.perfil h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.perfil-rol {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); line-height: 1.7;
}
.perfil-certs { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); display: grid; gap: .7rem; }
.perfil-certs li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .8rem; font-size: .94rem; color: var(--paper-2); line-height: 1.6; }
.perfil-certs span { font-family: var(--mono); font-size: .72rem; color: var(--accent); padding-top: .1rem; }
.perfil-certs li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.45rem; padding: .12rem .3rem; box-sizing: border-box;
  color: #fff; background: #e32636; border-radius: 4px;
  font-weight: 700; line-height: 1.2; text-align: center;
}
.equipo-nota {
  margin-top: 1.6rem; padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--accent); background: var(--card);
  border-radius: 0 12px 12px 0;
  color: var(--paper-2); font-size: .95rem; line-height: 1.7; max-width: 78ch;
  text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none;
}

/* =============================================================
   14. CONTACTO
   ============================================================= */
.contacto {
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(230,57,70,.12), transparent 62%),
    var(--bg-2);
}
.contacto-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.contacto-datos { margin-top: 2rem; display: grid; gap: 1rem; }
.contacto-datos li { display: flex; align-items: center; gap: .9rem; font-size: .97rem; color: var(--paper-2); }
.contacto-ico {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent);
}
.contacto-ico svg { width: 18px; height: 18px; }
.contacto-datos a { transition: color .3s var(--ease-out); }
.contacto-datos a:hover { color: var(--accent-3); }

.contacto-form-col { position: relative; }
.formulario {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: clamp(1.3rem, 3vw, 2rem);
  display: grid; gap: .9rem;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-soft);
}
.formulario.enviado { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.campo { display: grid; gap: .4rem; }
.campo > span { font-size: .82rem; color: var(--paper-2); }
.campo > span i { font-style: normal; color: var(--accent); }
.campo input, .campo select, .campo textarea {
  width: 100%; background: rgba(8, 13, 24, .6);
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: .8rem .95rem; color: var(--paper);
  font-family: var(--sans); font-size: .96rem;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input::placeholder, .campo textarea::placeholder { color: #5d6a7c; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--accent); background: rgba(8, 13, 24, .85);
}
.campo select option { background: var(--card); color: var(--paper); }
.form-acciones { display: grid; gap: .6rem; margin-top: .4rem; }
.enviar { position: relative; }
.enviar-spinner, .enviar-check { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.formulario.enviando .enviar-txt { opacity: 0; }
.formulario.enviando .enviar-spinner { opacity: 1; }
.enviar-spinner::after {
  content: ""; width: 16px; height: 16px;
  border: 1.6px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: giro .9s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }
.formulario.listo .enviar-txt { opacity: 0; }
.formulario.listo .enviar-check { opacity: 1; }
.enviar-check { width: 22px; height: 22px; margin: auto; }
.enviar-check path { stroke: #fff; stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--ease-out); }
.formulario.listo .enviar-check path { stroke-dashoffset: 0; }
.form-nota { font-size: .86rem; color: var(--paper-3); line-height: 1.62; }

.form-exito {
  position: absolute; left: 50%; top: 50%;
  width: min(92%, 380px); text-align: center;
  transform: translate(-50%, -40%);
  opacity: 0; pointer-events: none;
  transition: opacity .7s var(--ease-out) .2s, transform .8s var(--ease-soft) .2s;
}
.form-exito.visible { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.form-exito h3 { font-size: 1.6rem; margin-bottom: .5rem; }
.form-exito p { color: var(--paper-3); font-size: .9rem; }

/* =============================================================
   15. PIE
   ============================================================= */
.pie { position: relative; background: var(--bg-2); border-top: 1px solid var(--line-soft); overflow: hidden; }
.pie-montana {
  position: absolute; right: 0; bottom: 0; width: min(46%, 420px); height: auto;
  color: rgba(255,255,255,.09); pointer-events: none;
}
.pie-grid {
  position: relative; z-index: 1;
  display: grid; gap: 1.6rem;
  padding-block: clamp(2.2rem, 5vw, 3.4rem);
}
.pie-lema p { font-size: .92rem; color: var(--paper-2); }
.pie-lema-2 { color: var(--paper-3) !important; margin-top: .3rem; max-width: 36ch; font-size: .86rem !important; }
.pie-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.pie-links a { font-size: .92rem; color: var(--paper-2); transition: color .3s var(--ease-out); }
.pie-links a:hover { color: var(--accent-3); }
.pie-base {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem;
  padding-block: 1.1rem; border-top: 1px solid var(--line-soft);
  font-size: .8rem; color: var(--paper-3);
}

/* --- 404 --- */
.error-404 { min-height: 80svh; display: grid; align-content: center; padding-top: calc(var(--nav-h) + 4rem); }
.error-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* =============================================================
   16. SPLITTEXT
   ============================================================= */
[data-splittext] { opacity: 0; }
.pieza { display: inline-block; will-change: transform, opacity; }
.pieza-linea { display: block; }
@media (scripting: none) { [data-splittext] { opacity: 1; } }

/* =============================================================
   17. RESPONSIVE
   ============================================================= */
@media (min-width: 560px) {
  .form-acciones { grid-template-columns: 1fr auto; align-items: center; }
  .btn-ancho { width: auto; }
}

@media (min-width: 760px) {
  .equipo-grid { grid-template-columns: repeat(2, 1fr); }
  .porque-grid { grid-template-columns: .9fr 1.1fr; }
  .pie-grid { grid-template-columns: auto 1fr auto; align-items: center; }
}

@media (min-width: 1000px) {
  .cifra:nth-child(odd)::before { display: block; }
  .cifra:first-child::before { display: none; }
  .nav-menu { display: flex; }
  .btn-nav { display: inline-flex; }
  .burger, .menu-movil { display: none; }

  .hero-pin { display: flex; margin-left: auto; }
  .cifras { grid-template-columns: repeat(4, 1fr); }

  .nosotros-grid { grid-template-columns: 1fr 1fr; }
  .proyectos-cab { grid-template-columns: 1fr 1.15fr; }
  .contacto-grid { grid-template-columns: 1fr 1fr; }
  .porque-panel { padding-block: clamp(2.5rem, 5vw, 4rem); }
}

@media (min-width: 1280px) {
  .serv { flex: 0 0 288px; }
  .tarjeta-proy { flex: 0 0 275px; }
}

/* =============================================================
   18. REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .slide-fondo::before { animation: none; transform: scale(1.06); }
  .cifra:hover .cifra-ico { transform: none; }
  .cifra:hover .cifra-ico svg,
  .cifra:hover .cifra-ico::after,
  .cifra:nth-child(2):hover .cifra-ico path,
  .cifra:nth-child(4):hover .cifra-ico path:last-of-type { animation: none; }
}

/* =============================================================
   19. AJUSTES DE LECTURA
   ============================================================= */
/* Sin justificar en columnas estrechas: en menos de 46 caracteres por línea
   la justificación abre huecos entre palabras y se lee peor. */
@media (max-width: 700px) {
  .parrafo, .hero-lead, .mision p, .equipo-nota { text-align: justify; text-align-last: left; }
}
/* Los textos dentro de tarjetas del carrusel tampoco se justifican:
   la medida es corta y quedan ríos blancos. */
.serv p, .tarjeta-proy-lugar, .porque-lista div { text-align: left; }

/* =============================================================
   20. HERO · FLECHAS E INDICADORES
   ============================================================= */
.hero-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(8,13,24,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; color: #fff;
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), transform .3s var(--ease-out);
}
.hero-flecha svg { width: 20px; height: 20px; }

.hero-flecha:active { transform: translateY(-50%) scale(.93); }
.hero-flecha-izq { left: clamp(.5rem, 1.6vw, 1.4rem); }
.hero-flecha-der { right: clamp(.5rem, 1.6vw, 1.4rem); }
@media (max-width: 700px) { .hero-flecha { display: none; } }

.hero-puntos { display: flex; gap: .45rem; margin-top: 1rem; }
.hero-puntos button { width: 30px; height: 14px; padding: 5px 0; background: none; border: 0; }
.hero-puntos i {
  display: block; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.28);
  transition: background-color .4s var(--ease-out);
}
.hero-puntos button:hover i { background: rgba(255,255,255,.5); }
.hero-puntos button.activa i { background: var(--accent); }

/* Textura de curvas de nivel en el lado oscuro, como en la referencia */
.hero::before {
  content: ""; position: absolute; left: 0; top: 0; width: min(46%, 520px); height: 100%;
  z-index: 1; pointer-events: none; opacity: .5;
  background-image:
    repeating-radial-gradient(circle at -10% 12%, transparent 0 26px, rgba(255,255,255,.05) 26px 27px),
    repeating-radial-gradient(circle at 8% 96%, transparent 0 22px, rgba(255,255,255,.04) 22px 23px);
}

@media (max-width: 559px) {
  .cifra { padding: .85rem .9rem; gap: .7rem; }
  .cifra-ico { width: 40px; height: 40px; }
  .cifra-ico svg { width: 20px; height: 20px; }
  .cifra-txt { font-size: .8rem; }
  .cifra-txt b { font-size: 1.35rem; }
}

/* En pantallas estrechas la ficha no cabe dentro de la fotografía:
   la imagen se muestra completa y la tarjeta pasa a ir debajo. */
@media (max-width: 759px) {
  .nosotros-foto { aspect-ratio: auto; overflow: visible; display: block; border-radius: 0; }
  .nosotros-foto > img {
    position: static; width: 100%; height: auto; top: 0;
    aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r);
  }
  .mision { margin: .8rem 0 0; width: 100%; }
}

/* =============================================================
   21. VIDRIO LÍQUIDO (definido, sin usar por ahora)
   Fondo casi transparente con mezcla por luminosidad, desenfoque
   suave y un filo de luz que recorre el borde: brillante arriba y
   abajo, invisible en el centro. El filo se dibuja con un degradado
   recortado por máscara, no con un borde.
   ============================================================= */
.vidrio-liquido {
  position: relative;
  overflow: hidden;
  border: none;
  background: rgba(255, 255, 255, .012);
  background-blend-mode: luminosity;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1);
}
.vidrio-liquido::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 1.4px; pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.45) 0%,
    rgba(255,255,255,.15) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,.15) 80%,
    rgba(255,255,255,.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
/* Sin soporte de desenfoque hay que devolver un fondo sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio-liquido { background: rgba(11, 18, 32, .92); }
}

/* Titular de Nosotros justificado: cada línea ocupa el ancho completo
   salvo la última. Con el texto partido en líneas hay que justificar
   línea a línea, porque cada una es un bloque independiente. */
.nosotros-txt .titular {
  font-size: clamp(1.3rem, 2.6vw, 2.05rem);
  line-height: 1.22;
  max-width: 26ch;
  text-wrap: initial;
  text-align: justify;
  text-align-last: left;
}
.nosotros-txt .titular .pieza-linea { text-align: justify; text-align-last: justify; }
.nosotros-txt .titular .pieza-linea:last-child { text-align-last: left; }
@media (max-width: 759px) {
  .nosotros-txt .titular,
  .nosotros-txt .titular .pieza-linea { text-align: left; text-align-last: left; }
}

/* =============================================================
   22. BRASAS
   Corriente de chispas encendidas que sube por el hero, como las
   ascuas de la referencia. Va sobre la fotografía y bajo el texto.
   ============================================================= */
.brasas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.brasas-tenue { opacity: .4; }

/* Brasas sobre la fotografía de Nosotros, por debajo de la tarjeta */
.brasas-foto { z-index: 0; }
.nosotros-foto::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(75% 100% at 50% 112%, rgba(255, 122, 42, .28), transparent 64%);
  mix-blend-mode: screen;
}

/* Resplandor cálido en la base, de donde parecen salir las chispas */
.hero-fondo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  z-index: 1; pointer-events: none;
  background:
    radial-gradient(70% 100% at 62% 108%, rgba(255, 122, 42, .16), transparent 62%),
    radial-gradient(45% 100% at 30% 112%, rgba(230, 57, 70, .12), transparent 60%);
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .hero-fondo::after { opacity: .6; }
}
/* Sin JS no hay chispas: el lienzo queda invisible y solo se ve el resplandor */
@media (scripting: none) {
  .brasas { display: none; }
}
/* Interacción y equipo — revisión septiembre 2026 */
.carousel-counter { min-width:64px; text-align:center; align-self:center; font:12px var(--mono); color:var(--paper-2); }
.mando { width:48px; height:48px; transition:background .2s,transform .2s; }

.mando:disabled { opacity:.3; cursor:not-allowed; }
.serv { transition:transform .3s,border-color .3s,box-shadow .3s; }
.serv:hover,.serv:focus-within { transform:translateY(-7px); border-color:var(--accent); box-shadow:0 12px 28px #0004; }
.carrusel-pista { padding-top:10px; padding-bottom:16px; }
.tarjeta-proy:hover { border-color:var(--accent); }
.equipo { background:linear-gradient(120deg,#0b1220,#101d2b); }
.equipo-grid { align-items:start; gap:1.5rem; }
.perfil { padding:clamp(1.4rem,3vw,2.4rem); background:#111c2c; border-top:2px solid #e63946; }
.profile-heading { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
.profile-monogram { width:64px; height:64px; display:grid; place-items:center; flex-shrink:0; border:1px solid #ee647066; border-radius:50%; font:500 1.4rem var(--display); background:#e6394612; }
.profile-photo { display:block; object-fit:cover; object-position:center; border:1px solid #FF3030; border-radius:50%; }
.profile-photo-juan, .profile-photo-jenny { width:96px; height:96px; flex:0 0 96px; }
.profile-area { font:10px/1.8 var(--mono); letter-spacing:.1em; color:#a9bed4; }
.perfil h3 { font-size:clamp(1.3rem,2vw,1.65rem); }
.perfil-rol { min-height:3.5em; margin-top:.8rem; line-height:1.8; }
.profile-intro { color:var(--paper-2); margin:1.4rem 0; font-size:.98rem; line-height:1.7; }
.profile-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem; }
.profile-tags span { padding:.25rem .65rem; font-size:.75rem; border:1px solid #ffffff24; border-radius:20px; }
.profile-details { border-top:1px solid var(--line); padding-top:1rem; }
.profile-details summary { cursor:pointer; font-size:.9rem; }
.profile-details .perfil-certs { border:0; padding-top:0; }
.profile-contact { display:inline-block; margin-top:1.5rem; color:#FF3030; font-size:.85rem; }
.project-demo { background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.project-demo video { width:100%; aspect-ratio:16/9; object-fit:cover; background:#080d18; }
.demo-caption { padding:1.2rem 1.4rem .5rem; }
.demo-caption span { display:block; color:#FF3030; font:10px var(--mono); letter-spacing:.14em; }
.demo-caption strong { display:block; font:500 1.3rem var(--display); margin:.6rem 0; }
.demo-caption p { color:var(--paper-3); font-size:.8rem; }
.demo-chapters { display:grid; grid-template-columns:repeat(2,1fr); padding:1rem; gap:.5rem; }
.demo-chapters button { padding:.65rem .4rem; border:1px solid #ffffff25; border-radius:6px; font-size:.75rem; text-align:left; }
.demo-chapters button.is-active { background:#e6394626; border-color:var(--accent); }
@media(max-width:700px) { .hero-flecha { display:grid; top:35%; width:36px; height:36px; } .profile-area { letter-spacing:0; } }
@media(prefers-reduced-motion:reduce) { .serv,.mando { transition:none; } .serv:hover { transform:none; } }
.hero .slide-fondo { translate:var(--landscape-x,0px) var(--landscape-y,0px); transition:translate .6s ease-out; }
.volcano-mist { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.volcano-mist i { position:absolute; width:50vw; height:17vw; left:40%; top:18%; border-radius:50%; background:radial-gradient(ellipse,#e4edf24d,transparent 67%); filter:blur(22px); animation:volcano-drift 18s ease-in-out infinite alternate; }
.volcano-mist i:nth-child(2) { top:10%; left:50%; animation-delay:-6s; opacity:.6; }
.volcano-mist i:nth-child(3) { top:45%; left:10%; width:90vw; animation-delay:-12s; opacity:.35; }
@keyframes volcano-drift { from { transform:translate(-8%,-5%) scale(.8); opacity:.2; } to { transform:translate(16%,-22%) scale(1.2); opacity:.7; } }
.hero-motion-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:1rem; font-size:.7rem; }
.hero-motion-controls button { border:1px solid #ffffff55; border-radius:24px; padding:.4rem .8rem; background:#080d1880; }
.hero-motion-controls span { color:var(--paper-3); }
.motion-paused .hero *, .motion-paused .hero *::before,.motion-paused .hero *::after { animation-play-state:paused!important; }
.motion-paused .hero .slide-fondo { translate:0 0; }
@media(hover:none) { .hero-motion-controls span { display:none; } }
@media(prefers-reduced-motion:reduce) { .volcano-mist { display:none; } .hero .slide-fondo { translate:0 0; } }
.motion-paused .hero .brasas { visibility:hidden; }
.hero-velo { z-index:2; }
.hero-flecha { z-index:3; }
/* Movimiento continuo y navegación de retorno */
.carrusel-pista.deslizando { scroll-snap-type:none; scroll-behavior:auto; }
.volver-arriba { position:fixed; right:clamp(18px,3vw,36px); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:90; width:44px; height:44px; border-radius:50%; background:#ed263c; color:#fff; border:1px solid #FF3030; box-shadow:0 7px 26px #e6394659; display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(18px); transition:opacity .3s,transform .3s,background .3s,visibility .3s; }
.volver-arriba.visible { opacity:1; visibility:visible; transform:translateY(0); }

.volver-arriba svg { width:20px; height:20px; }
.hero-contours { position:absolute; right:-4%; bottom:-12%; width:68%; height:100%; z-index:2; pointer-events:none; color:#f5c3be; opacity:.2; stroke-width:1; }
.hero-contours path { stroke-dasharray:1300; stroke-dashoffset:1300; animation:contour-reveal 12s cubic-bezier(.25,.1,.25,1) infinite; }
.hero-contours path:nth-child(2) { animation-delay:1s; }
.hero-contours path:nth-child(3) { animation-delay:2s; }
.hero-contours path:nth-child(4) { animation-delay:3s; }
@keyframes contour-reveal { 0% { stroke-dashoffset:1300; opacity:0; } 15% { opacity:1; } 70% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:-1300; opacity:0; } }
.hero .slide { transition:opacity 1.8s ease-in-out,visibility 0s linear 1.8s; }
.hero .slide.activa { transition-delay:0s; }
.hero .slide.activa .slide-fondo::before { animation:hero-cinema 14s cubic-bezier(.2,.6,.3,1) both; }
@keyframes hero-cinema { from { transform:scale(1.12) translateX(1%); filter:brightness(.8); } to { transform:scale(1.035) translateX(-.5%); filter:brightness(1); } }
@media(max-width:700px) { .hero-contours { width:100%; opacity:.14; } .volver-arriba { width:44px; height:44px; } }
@media(prefers-reduced-motion:reduce) { .hero-contours { display:none; } .hero .slide.activa .slide-fondo::before { animation:none; } .hero .slide,.volver-arriba { transition:none; } }

.carrusel-pista.auto-suave { scroll-snap-type:none; scroll-behavior:auto; }
.contacto-telefonos { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.contacto-telefonos a { white-space:nowrap; }
/* Videos reales; scroll nativo y sin capas de paralaje */
.slide-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.porque-foto video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rain-pause { position:absolute; right:16px; bottom:16px; z-index:2; padding:.45rem .8rem; border:1px solid #ffffff70; background:#080d18b0; border-radius:24px; color:white; font-size:.75rem; }
.cursor-punto,.cursor-aro { display:none!important; }
/* Identidad oficial: versión blanca sobre los fondos oscuros. */
.marca-logo { display:block; width:100px; height:66px; object-fit:contain; mix-blend-mode:screen; }
.hero-titulo.hero-logo { display:block; width:clamp(220px,30vw,380px); margin:0 0 1.2rem; line-height:1; }
.hero-logo img { display:block; width:100%; height:auto; mix-blend-mode:screen; }
.pie .marca-logo { width:168px; height:112px; }
@media(max-width:700px) { .marca-logo { width:88px; height:58px; } .hero-titulo.hero-logo { width:250px; max-width:85%; } }

/* Botones estáticos: color vivo sin atenuación ni movimiento. */
button, .btn, .enlace-flecha,
button *, .btn *, .enlace-flecha *,
button::before, button::after, .btn::before, .btn::after {
  animation: none !important;
  transition: none !important;
}
button:not(.hero-flecha), .btn, .btn:active, .btn:hover,
.btn-circulo, .btn-grande:hover .btn-circulo,
.enlace-flecha svg, .enlace-flecha:hover svg {
  transform: none !important;
}
.hero-flecha, .hero-flecha:active { transform: translateY(-50%) !important; }
.enlace-flecha:hover { gap: .5rem; color: var(--paper-2); }
button:not(:disabled):hover, .btn:hover, .enlace-flecha:hover { opacity: 1; }
.btn-rojo, .btn-rojo:hover, .btn-rojo:focus-visible { box-shadow: none; background: var(--accent); }
.volver-arriba, .volver-arriba:hover { box-shadow: none; background: var(--accent); }

/* Acentos de texto luminosos sobre los fondos oscuros. */
.kicker:not(.kicker-raya), .perfil-rol, .perfil-certs li span,
.profile-contact, .demo-caption span, .tarjeta-proy-n,
.serv-ico, .porque-ico, .enlace-flecha svg { color: var(--accent-3); }
.perfil .perfil-certs li span { color: #fff; }
.perfil-rol, .kicker:not(.kicker-raya) { font-weight: 600; }
.perfil { border-top-color: var(--accent); }
.profile-monogram, .serv-ico, .porque-ico { border-color: #FF3030; }
.btn-rojo:hover, .btn-rojo:focus-visible, .volver-arriba:hover { background: #FF3030; }
.mando:not(:disabled):hover, .hero-flecha:hover { background: var(--accent); border-color: var(--accent); }
.demo-chapters button.is-active { background: #FF303038; border-color: var(--accent-3); }
.demo-chapters button:hover { border-color: var(--accent-3); }

/* Texto pequeño sobre fondos oscuros: priorizar contraste sobre el acento rojo. */
.kicker:not(.kicker-raya), .perfil-rol, .profile-contact,
.demo-caption span, .tarjeta-proy-n, .serv-mas summary, .proy-n {
  color: #fff;
}
.profile-contact {
  display: inline-flex;
  align-items: center;
  padding: .55rem .9rem;
  color: #fff !important;
  background: #e32636;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.profile-contact:hover { background: #c91f2d; transform: translateY(-1px); }

/* Franja de acción de Servicios: blanco sobre rojo para máximo contraste. */
body .serv .serv-mas > summary {
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: .58rem .75rem;
  background: #e32636;
  border-radius: 999px;
  text-shadow: none;
}
body .serv .serv-mas > summary::after {
  float: none;
  margin-left: auto;
  color: #fff;
}
body .serv .serv-mas > summary:hover,
body .serv .serv-mas > summary:focus-visible {
  background: #c91f2d;
  color: #fff !important;
}

/* Lectura justificada también en pantallas pequeñas, sin guionado. */
.parrafo, .hero-lead, .mision p, .equipo-nota, .profile-intro,
.perfil-certs li, .serv > p, .porque-lista div {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
}

/* Titular de Sobre nosotros centrado en todos los tamaños. */
.nosotros-txt .titular,
.nosotros-txt .titular .pieza-linea,
.nosotros-txt .titular .pieza-linea:last-child {
  text-align: center;
  text-align-last: center;
  margin-inline: auto;
}
/* Fisura de lava y corte de estratos: avance vinculado al scroll. */
.geo-rock { stroke:#29181b; stroke-width:12; stroke-linejoin:round; }
.geo-lava-halo,.geo-lava,.geo-core { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--geo-reveal,0)); stroke-linecap:round; stroke-linejoin:round; }
.geo-lava-halo { stroke:#f32822; stroke-width:10; opacity:.2; }
.geo-lava { stroke:#ff3825; stroke-width:3; }
.geo-core { stroke:#ffad52; stroke-width:1; }
.geo-footer { position:relative; height:120px; width:100%; overflow:hidden; background:linear-gradient(180deg,var(--bg-2),#080d18); pointer-events:none; contain:layout paint; }
.geo-footer svg { display:block; width:100%; height:100%; }
.geo-footer .geo-rock { stroke-width:9; }
.geo-footer .geo-lava-halo { stroke-width:16; opacity:.16; }
.geo-footer .geo-lava { stroke-width:4; }
.geo-footer .geo-core { stroke-width:1.2; }
@media(max-width:700px) { .geo-footer { height:85px; } }


/* Estratos ambientales en movimiento, detrás del contenido. */
body { isolation:isolate; }
.geo-background { position:fixed; inset:-8%; z-index:-1; pointer-events:none; opacity:.16; background:radial-gradient(ellipse at 15% 70%,#34495838,transparent 58%),radial-gradient(ellipse at 90% 20%,#ac24192b,transparent 48%); animation:geo-background-drift 34s ease-in-out infinite alternate; }
.geo-background svg { width:100%; height:100%; }
@keyframes geo-background-drift { from { transform:translate3d(-1%,1%,0) scale(1); } to { transform:translate3d(2%,-2%,0) scale(1.04); } }
@media(prefers-reduced-motion:reduce) { .geo-background { animation:none; } }


.geo-background.is-paused { animation-play-state:paused; }