/* Xpand — dirección 1b "Corporativo retícula" */
:root {
  --marino: #0E2136;
  --marino-2: #16304C;
  --texto: #45596E;
  --texto-suave: #5D7288;
  --gris-num: #8496A8;
  --fondo: #FBFCFD;
  --fondo-alt: #EDF1F5;
  --linea: rgba(12, 31, 58, 0.16);
  --verde: #00E39A;
  --azul: #16A5F0;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: Lato, Helvetica, Arial, sans-serif;
  --gutter: 48px;
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--marino);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.envoltura { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.etiqueta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marino-2);
}
.etiqueta.suave { color: var(--texto-suave); letter-spacing: 0.18em; }
.parrafo { font-size: 16px; line-height: 1.6; color: var(--texto); margin: 0; }

/* ---------- Encabezado ---------- */
.franja { height: 3px; background: linear-gradient(90deg, var(--verde) 0%, var(--azul) 100%); }
.encabezado { background: var(--marino); color: var(--fondo); position: sticky; top: 0; z-index: 20; }
.encabezado .envoltura { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.encabezado .logo img { height: 30px; width: auto; }
.menu { display: flex; gap: 32px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.menu a { color: rgba(252, 252, 251, 0.7); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.menu a:hover { color: var(--fondo); }
.menu a[aria-current="page"] { color: var(--fondo); border-bottom-color: var(--azul); }
.boton-menu { display: none; background: none; border: 0; color: var(--fondo); padding: 8px; cursor: pointer; }
.boton-menu svg { width: 26px; height: 26px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block;
  padding: 15px 24px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--marino-2);
  transition: background .2s, color .2s;
  cursor: pointer;
  font-family: var(--sans);
}
.boton.lleno { background: var(--marino-2); color: var(--fondo); }
.boton.lleno:hover { background: var(--marino); }
.boton.borde { background: transparent; color: var(--marino-2); }
.boton.borde:hover { background: var(--marino-2); color: var(--fondo); }
.boton.claro { background: var(--fondo); color: var(--marino); border-color: var(--fondo); }
.boton.claro:hover { background: transparent; color: var(--fondo); }

/* ---------- Héroe ---------- */
.heroe { padding: 88px 0 56px; }
.reticula { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.heroe .reticula { align-items: end; }
.heroe-texto { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 24px; }
.heroe-lado { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 22px; }
.heroe-lado .botones { display: flex; flex-direction: column; gap: 10px; }
.titular {
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.titular-2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; margin: 0; text-wrap: balance; }

.foto-grande { padding-bottom: 64px; }
.foto-grande figure { margin: 0; background: #0A1929; aspect-ratio: 1248 / 832; max-height: 720px; width: 100%; overflow: hidden; }
.foto-grande img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Lista de servicios ---------- */
.seccion { padding: 0 0 80px; }
.seccion.alt { background: var(--fondo-alt); padding: 72px 0; }
.seccion.pad { padding: 80px 0; }
.lado-etiqueta { grid-column: 1 / span 3; }
.lado-contenido { grid-column: 4 / span 9; }
.fila-servicio {
  display: grid;
  grid-template-columns: 40px 1fr 1.3fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--linea);
}
.fila-servicio:last-child { border-bottom: 1px solid var(--linea); }
.fila-servicio .num { font-family: var(--mono); font-size: 12px; color: var(--gris-num); padding-top: 4px; }
.fila-servicio h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.fila-servicio p { font-size: 15px; line-height: 1.6; color: var(--texto); margin: 0; }
.fila-servicio ul { margin: 12px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.7; color: var(--texto); }

/* ---------- Proyectos ---------- */
.encabezado-seccion { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.proyectos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.proyecto { display: flex; flex-direction: column; gap: 14px; }
.proyecto figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.proyecto img { width: 100%; height: 100%; object-fit: contain; }
.proyecto h3 { font-size: 17px; font-weight: 700; margin: 0; }
.proyecto p { font-size: 14px; color: var(--texto-suave); margin: 0; }

/* ---------- Llamado final ---------- */
.llamado { background: var(--marino); color: var(--fondo); padding: 64px 0; }
.llamado .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.llamado h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; max-width: 24ch; margin: 0; }
.llamado .acciones { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.llamado .correo { font-family: var(--mono); font-size: 13px; color: rgba(252, 252, 251, 0.75); }
.llamado .correo:hover { color: var(--fondo); }

/* ---------- Pie ---------- */
.pie { background: #0A1929; color: rgba(252, 252, 251, 0.6); padding: 40px 0; font-size: 13px; }
.pie .envoltura { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.pie img { height: 24px; width: auto; }
.pie nav { display: flex; gap: 24px; }
.pie a:hover { color: var(--fondo); }

/* ---------- Nosotros ---------- */
.dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.dos-col figure { margin: 0; aspect-ratio: 1; overflow: hidden; background: #0A1929; }
.dos-col figure img { width: 100%; height: 100%; object-fit: cover; }
.principios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.principio { background: var(--fondo); padding: 36px 32px; display: flex; flex-direction: column; gap: 12px; }
.principio .num { font-family: var(--mono); font-size: 11px; color: var(--azul); letter-spacing: 0.14em; }
.principio h3 { font-size: 19px; margin: 0; }
.principio p { font-size: 15px; line-height: 1.6; color: var(--texto); margin: 0; }
.pasos { counter-reset: paso; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.paso { border-top: 2px solid var(--marino-2); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.paso .num { font-family: var(--mono); font-size: 12px; color: var(--gris-num); }
.paso h3 { font-size: 18px; margin: 0; }
.paso p { font-size: 14px; line-height: 1.6; color: var(--texto); margin: 0; }

/* ---------- Contacto ---------- */
.contacto-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.datos { display: flex; flex-direction: column; gap: 28px; }
.dato .etiqueta { margin-bottom: 8px; display: block; }
.dato a, .dato span { font-size: 18px; color: var(--marino); }
.dato a:hover { color: var(--azul); }
.formulario { background: var(--fondo-alt); padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo.completo { grid-column: 1 / -1; }
.campo label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  font: inherit;
  font-size: 16px;
  color: var(--marino);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 0;
  padding: 13px 14px;
  width: 100%;
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.opciones { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.opciones input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.campo { min-width: 0; }
.opciones label {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--marino-2); padding: 11px 16px; cursor: pointer; color: var(--marino-2);
}
.opciones input:checked + label { background: var(--marino-2); color: var(--fondo); }
.opciones input:focus-visible + label { outline: 2px solid var(--azul); outline-offset: 2px; }
.formulario .boton { grid-column: 1 / -1; justify-self: start; }
.nota { grid-column: 1 / -1; font-size: 13px; color: var(--texto-suave); margin: 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .heroe { padding: 56px 0 40px; }
  .heroe-texto, .heroe-lado, .lado-etiqueta, .lado-contenido { grid-column: 1 / -1; }
  .lado-etiqueta { margin-bottom: 8px; }
  .principios { grid-template-columns: 1fr; }
  .heroe-lado .botones { flex-direction: row; flex-wrap: wrap; }
  .heroe-lado .boton { flex: 0 1 260px; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-col, .contacto-grid { grid-template-columns: 1fr; gap: 40px; }
  .llamado .envoltura { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .boton-menu { display: block; }
  .menu {
    display: none;
    position: absolute; top: 79px; left: 0; right: 0;
    background: var(--marino);
    flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 20px;
    border-top: 1px solid rgba(252, 252, 251, 0.12);
  }
  .menu.abierto { display: flex; }
  .menu a { padding: 14px 0; border-bottom: 1px solid rgba(252, 252, 251, 0.08); }
  .menu a[aria-current="page"] { border-bottom-color: var(--azul); }
  .fila-servicio { grid-template-columns: 32px 1fr; }
  .fila-servicio > :nth-child(n+3) { grid-column: 1 / -1; }
  .fila-servicio { row-gap: 14px; }
  .servicio-foto { margin-top: 18px; }
  .pasos { grid-template-columns: 1fr; }
  .proyectos { grid-template-columns: 1fr; }
  .heroe-lado .boton { flex: 1 1 100%; }
  .formulario { grid-template-columns: 1fr; padding: 24px; }
  .encabezado-seccion { flex-direction: column; align-items: flex-start; }
}

/* ---------- Proyectos (página) ---------- */
.lista-proyectos { display: flex; flex-direction: column; gap: 96px; }
.ficha { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.ficha.invertida .ficha-foto { order: 2; }
.ficha-foto { margin: 0; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0A1929; }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-foto figcaption {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(10, 25, 41, 0.7); color: rgba(252, 252, 251, 0.85); padding: 5px 8px;
}
.ficha-texto { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.ficha-logo { width: 180px; aspect-ratio: 16 / 9; overflow: hidden; }
.ficha-logo img { width: 100%; height: 100%; object-fit: contain; }
.ficha-datos { margin: 0; width: 100%; border-top: 1px solid var(--linea); }
.ficha-datos div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.ficha-datos dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); padding-top: 3px; }
.ficha-datos dd { margin: 0; font-size: 15px; color: var(--marino); }

/* ---------- Servicios con imagen ---------- */
.servicio-foto { margin: 16px 0 0; aspect-ratio: 16 / 9; overflow: hidden; background: #0A1929; }
.servicio-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Tarjetas de proyecto enlazadas ---------- */
a.proyecto figure { transition: transform .35s ease; }
a.proyecto:hover figure { transform: translateY(-4px); }
a.proyecto:hover h3 { color: var(--azul); }

/* ---------- 404 ---------- */
.no-encontrado { min-height: 60vh; display: flex; align-items: center; }

@media (max-width: 960px) {
  .ficha { grid-template-columns: 1fr; gap: 28px; }
  .ficha.invertida .ficha-foto { order: 0; }
  .lista-proyectos { gap: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a.proyecto figure { transition: none; }
}
.foto-grande.panoramica figure { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .foto-grande.panoramica figure { aspect-ratio: 4 / 3; } }

/* ---------- Transiciones de imagen ---------- */
/* Revelado al entrar en pantalla: cortina de abajo hacia arriba + leve zoom de salida */
.js .revelar { clip-path: inset(100% 0 0 0); }
.js .revelar img { transform: scale(1.12); }
.js .revelar.visible { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1); }
.js .revelar.visible img { transform: scale(1); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1); }
/* Texto: aparece subiendo */
.js .aparecer { opacity: 0; transform: translateY(24px); }
.js .aparecer.visible { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1); }

/* Acercamiento al pasar el cursor (solo con mouse) */
@media (hover: hover) {
  .servicio-foto img, .ficha-foto img, .dos-col figure img, .proyecto figure img {
    transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  }
  .js .revelar.visible:hover img, .servicio-foto:hover img, .ficha-foto:hover img, .proyecto:hover figure img {
    transform: scale(1.05);
  }
}

/* Carrusel de la portada: fundido cruzado con zoom lento (Ken Burns) */
.carrusel { position: relative; }
.carrusel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.carrusel img.activa { opacity: 1; animation: kenburns 7s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.carrusel-puntos { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 2; }
.carrusel-puntos span { width: 28px; height: 3px; background: rgba(252, 252, 251, 0.4); transition: background .4s; }
.carrusel-puntos span.activo { background: linear-gradient(90deg, var(--verde), var(--azul)); }

@media (prefers-reduced-motion: reduce) {
  .js .revelar, .js .revelar img, .js .aparecer { clip-path: none; transform: none; opacity: 1; transition: none; }
  .carrusel img { transition: none; }
  .carrusel img.activa { animation: none; }
}

/* =========================================================
   Vida: portada a pantalla completa, banda con paralaje, acentos
   ========================================================= */
.degradado {
  background: linear-gradient(90deg, var(--verde) 0%, var(--azul) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Menú transparente sobre la portada, sólido al bajar */
.con-portada .franja { position: fixed; top: 0; left: 0; right: 0; z-index: 21; }
.con-portada .encabezado { position: fixed; top: 3px; left: 0; right: 0; background: transparent; transition: background .4s ease, box-shadow .4s ease; }
.con-portada .encabezado.solido { background: rgba(14, 33, 54, 0.96); box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); backdrop-filter: blur(8px); }

/* Portada */
.portada { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #0A1929; color: var(--fondo); }
.portada .carrusel { position: absolute; inset: 0; }
.portada-velo { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(10,25,41,.55) 0%, rgba(10,25,41,.05) 35%, rgba(10,25,41,.35) 60%, rgba(10,25,41,.92) 100%),
  linear-gradient(90deg, rgba(10,25,41,.55) 0%, rgba(10,25,41,0) 60%); }
.portada-contenido { position: relative; z-index: 2; width: 100%; padding-top: 140px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.portada .etiqueta { color: #7FE8C4; }
.portada .titular { color: var(--fondo); font-size: clamp(44px, 7vw, 96px); max-width: 12ch; }
.portada .parrafo { color: rgba(252,252,251,.82); font-size: 18px; max-width: 46ch; }
.portada .botones { display: flex; gap: 12px; flex-wrap: wrap; }
.portada .carrusel-puntos { right: var(--gutter); bottom: 40px; z-index: 3; }
.titular .linea { display: block; overflow: hidden; padding-bottom: .06em; }
.titular .linea > span { display: inline-block; }

/* Entrada de la portada: el título sube línea por línea */
.js .portada .linea > span { transform: translateY(105%); animation: subir 1s cubic-bezier(.22,1,.36,1) forwards; }
.js .portada .linea:nth-child(2) > span { animation-delay: .12s; }
.js .portada .linea:nth-child(3) > span { animation-delay: .24s; }
.js .portada .etiqueta, .js .portada .parrafo, .js .portada .botones { opacity: 0; animation: aparecer .9s ease forwards; }
.js .portada .etiqueta { animation-delay: .05s; }
.js .portada .parrafo { animation-delay: .45s; }
.js .portada .botones { animation-delay: .6s; }
@keyframes subir { to { transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Indicador para bajar */
.bajar { position: absolute; left: 50%; bottom: 28px; z-index: 3; width: 24px; height: 40px; margin-left: -12px; border: 1.5px solid rgba(252,252,251,.5); border-radius: 12px; }
.bajar span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--verde); animation: rueda 1.8s ease-in-out infinite; }
@keyframes rueda { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* Botones nuevos */
.boton.acento { background: linear-gradient(90deg, var(--verde), var(--azul)); color: var(--marino); border-color: transparent; font-weight: 700; background-size: 150% 100%; transition: background-position .5s ease, transform .3s ease; }
.boton.acento:hover { background-position: 100% 0; transform: translateY(-2px); }
.boton.fantasma { background: transparent; color: var(--fondo); border-color: rgba(252,252,251,.55); }
.boton.fantasma:hover { background: var(--fondo); color: var(--marino); border-color: var(--fondo); }
.boton { transition: background .25s, color .25s, border-color .25s, transform .3s; }
.boton.lleno:hover, .boton.borde:hover, .boton.claro:hover { transform: translateY(-2px); }

/* Filas de servicio: barra de color y desplazamiento al pasar */
.fila-servicio { position: relative; transition: padding-left .45s cubic-bezier(.22,1,.36,1); }
.fila-servicio::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: linear-gradient(90deg, var(--verde), var(--azul)); transition: width .6s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) {
  .fila-servicio:hover { padding-left: 14px; }
  .fila-servicio:hover::before { width: 100%; }
  .fila-servicio:hover .num { color: var(--azul); }
}

/* Banda con paralaje */
.banda { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; background: #0A1929; color: var(--fondo); }
.banda-foto { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; will-change: transform; }
.banda-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,25,41,.85) 0%, rgba(10,25,41,.35) 70%, rgba(10,25,41,.2) 100%); }
.banda-texto { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.banda .etiqueta { color: #7FE8C4; }
.banda-frase { margin: 0; font-size: clamp(38px, 6vw, 80px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 300; }

/* Cabeceras interiores: línea de marca animada bajo la etiqueta */
.heroe .etiqueta::after { content: ""; display: block; width: 0; height: 2px; margin-top: 12px; background: linear-gradient(90deg, var(--verde), var(--azul)); }
.heroe-texto.visible .etiqueta::after, html:not(.js) .heroe .etiqueta::after { width: 56px; transition: width .9s .3s cubic-bezier(.22,1,.36,1); }

@media (max-width: 760px) {
  .portada-contenido { padding-bottom: 88px; }
  .portada .parrafo { font-size: 16px; }
  .portada .botones { width: 100%; }
  .portada .botones .boton { flex: 1 1 100%; }
  .portada .carrusel-puntos { left: var(--gutter); right: auto; bottom: 36px; }
  .bajar { display: none; }
  .banda { min-height: 64vh; }
}
@media (prefers-reduced-motion: reduce) {
  .js .portada .linea > span, .js .portada .etiqueta, .js .portada .parrafo, .js .portada .botones { animation: none; transform: none; opacity: 1; }
  .bajar span { animation: none; }
  .banda-foto { transform: none !important; }
}
.banda-texto, .portada-contenido { width: 100%; }

/* ---------- Datos de contacto con íconos ---------- */
.datos { gap: 14px; }
a.dato { display: flex; gap: 18px; align-items: flex-start; padding: 18px; margin: 0 -18px; border: 1px solid transparent; transition: background .3s, border-color .3s, transform .3s; }
a.dato:hover { background: var(--fondo-alt); border-color: var(--linea); transform: translateX(4px); }
.dato-icono { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; color: var(--fondo);
  background: linear-gradient(135deg, var(--verde), var(--azul)); }
.dato-icono svg { width: 22px; height: 22px; }
.dato-texto { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.dato-texto .etiqueta { margin: 0; }
.dato-valor { font-size: 18px; line-height: 1.45; color: var(--marino); }
.dato-mapa { font-size: 13px; letter-spacing: .06em; color: var(--marino-2); border-bottom: 1px solid var(--linea); align-self: flex-start; margin-top: 4px; }
a.dato:hover .dato-valor, a.dato:hover .dato-mapa { color: var(--azul); }
@media (max-width: 760px) { a.dato { margin: 0; padding: 14px 0; } .dato-valor { font-size: 16px; } a.dato:hover { transform: none; background: none; border-color: transparent; } }
a.dato .dato-texto .etiqueta { font-size: 11px; color: var(--texto-suave); } a.dato .dato-mapa { font-size: 13px; }
a.dato .dato-icono { color: #FFFFFF; }

/* ---------- Ficha ampliada (La Jolla Heights): cifras + video ---------- */
.ficha-ampliada { row-gap: 48px; }
.ficha-cifras { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.ficha-cifras div { padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--linea); }
.ficha-cifras div:first-child { border-left: 0; padding-left: 0; }
.ficha-cifras strong { font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; letter-spacing: -0.02em; color: var(--marino); line-height: 1; }
.ficha-cifras span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.ficha-video { grid-column: 1 / -1; }
.video-marco { position: relative; aspect-ratio: 16 / 9; background: #C8C3BB; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(14, 33, 54, .55); }
.video-marco video { width: 100%; height: 100%; display: block; object-fit: cover; background: #C8C3BB; }
.video-play { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-start;
  background: linear-gradient(0deg, rgba(14,33,54,.55) 0%, rgba(14,33,54,0) 45%); transition: background .4s; }
.video-play:hover { background: linear-gradient(0deg, rgba(14,33,54,.7) 0%, rgba(14,33,54,.05) 55%); }
.video-play-icono { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; display: grid; place-items: center;
  color: var(--marino); background: linear-gradient(135deg, var(--verde), var(--azul)); box-shadow: 0 0 0 0 rgba(22,165,240,.45); animation: latido 2.4s ease-out infinite; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.video-play-icono svg { width: 32px; height: 32px; margin-left: 4px; }
.video-play:hover .video-play-icono { transform: scale(1.08); }
.video-play-texto { margin: 0 0 24px 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--fondo); }
.video-play-texto em { font-style: normal; color: rgba(252,252,251,.65); }
.video-marco.reproduciendo .video-play { opacity: 0; pointer-events: none; transition: opacity .3s; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(22,165,240,.45); } 70% { box-shadow: 0 0 0 22px rgba(22,165,240,0); } 100% { box-shadow: 0 0 0 0 rgba(22,165,240,0); } }
@media (max-width: 960px) { .ficha-ampliada { row-gap: 32px; } }
@media (max-width: 760px) {
  .ficha-cifras { grid-template-columns: repeat(2, 1fr); }
  .ficha-cifras div { padding: 20px 16px; }
  .ficha-cifras div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ficha-cifras div:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .video-play-icono { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  .video-play-texto { margin: 0 0 16px 16px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .video-play-icono { animation: none; } }

/* ---------- Galería de proyecto (Las Águilas) ---------- */
.ficha-galeria { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ficha-galeria figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #0A1929; }
.ficha-galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .ficha-galeria figure:hover img { transform: scale(1.05); } }
@media (max-width: 760px) {
  .ficha-galeria { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ficha-galeria figure:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}
/* ficha ampliada invertida: la foto va a la derecha solo en escritorio */
.ficha-ampliada.invertida .ficha-foto { order: 2; }
.ficha-ampliada.invertida .ficha-texto { order: 1; }
.ficha-ampliada .ficha-cifras, .ficha-ampliada .ficha-video, .ficha-ampliada .ficha-galeria { order: 3; }
@media (max-width: 960px) { .ficha-ampliada.invertida .ficha-foto, .ficha-ampliada.invertida .ficha-texto { order: 0; } }

/* =========================================================
   Cómo funciona: integradora (portada)
   ========================================================= */
.integra { padding: 112px 0 96px; background: var(--fondo); }
.integra-cabeza { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; margin-bottom: 72px; }
.integra-texto { display: flex; flex-direction: column; gap: 22px; }
.integra-texto .titular-2 { font-size: clamp(32px, 4vw, 52px); }
.integra-texto .parrafo { font-size: 17px; max-width: 52ch; }
.integra-diagrama svg { width: 100%; max-width: 440px; display: block; margin: 0 auto; overflow: visible; }
.pieza circle { fill: rgba(22, 165, 240, .07); stroke: url(#gx); stroke-width: 1.5; }
.pieza text { font-family: var(--mono); font-size: 13px; letter-spacing: .2em; fill: var(--marino); text-anchor: middle; }
.centro .onda { fill: none; stroke: #16A5F0; stroke-width: 1.5; transform-origin: 200px 198px; animation: onda 2.8s ease-out infinite; }
@keyframes onda { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

/* Entrada: las tres piezas llegan desde fuera y se unen; el centro aparece al final */
.js .integra-diagrama .pieza { transition: transform 1.1s cubic-bezier(.22,1,.36,1), opacity .8s ease; opacity: 0; }
.js .integra-diagrama .p1 { transform: translate(0, -60px); }
.js .integra-diagrama .p2 { transform: translate(-60px, 40px); }
.js .integra-diagrama .p3 { transform: translate(60px, 40px); }
.js .integra-diagrama .centro { transform-origin: 200px 198px; transform: scale(.3); opacity: 0; transition: transform .7s .9s cubic-bezier(.34,1.56,.64,1), opacity .4s .9s; }
.js .integra-diagrama.visible .pieza { transform: none; opacity: 1; }
.js .integra-diagrama.visible .p2 { transition-delay: .12s; }
.js .integra-diagrama.visible .p3 { transition-delay: .24s; }
.js .integra-diagrama.visible .centro { transform: none; opacity: 1; }
/* el contenedor no se desvanece, solo sus piezas */
.js .integra-diagrama.aparecer { opacity: 1; transform: none; }

/* Tres caminos */
.caminos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.camino { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 36px 32px 32px; background: var(--fondo-alt); border: 1px solid transparent; overflow: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .45s, background .45s; }
.camino::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--verde), var(--azul)); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.camino-icono { width: 52px; height: 52px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--verde), var(--azul)); margin-bottom: 10px; }
.camino-icono svg { width: 26px; height: 26px; }
.camino .etiqueta { margin: 0; }
.camino h3 { margin: 0; font-size: 24px; letter-spacing: -0.01em; color: var(--marino); }
.camino p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--texto); flex: 1; }
.camino-accion { margin-top: 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--marino-2); font-weight: 700; }
@media (hover: hover) {
  .camino:hover { transform: translateY(-6px); background: #fff; border-color: var(--linea); box-shadow: 0 30px 60px -40px rgba(14,33,54,.45); }
  .camino:hover::before { transform: scaleX(1); }
  .camino:hover .camino-accion { color: var(--azul); }
}

@media (max-width: 960px) {
  .integra { padding: 80px 0 72px; }
  .integra-cabeza { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .caminos { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 760px) { .camino { padding: 28px 22px 24px; } .integra-diagrama svg { max-width: 340px; } }
@media (prefers-reduced-motion: reduce) {
  .centro .onda { animation: none; opacity: 0; }
  .js .integra-diagrama .pieza, .js .integra-diagrama .centro { transform: none; opacity: 1; transition: none; }
}

/* Botón de video en la esquina inferior para no tapar el logo de la portada */
.video-play { align-items: flex-end; padding: 0 0 28px 28px; gap: 16px; }
.video-play-icono { position: relative; left: auto; top: auto; margin: 0; width: 64px; height: 64px; flex: 0 0 64px; }
.video-play-icono svg { width: 24px; height: 24px; margin-left: 3px; }
.video-play-texto { margin: 0 0 20px 0; }
.video-play { flex-direction: row; justify-content: flex-start; }
@media (max-width: 760px) {
  .video-play { padding: 0 0 14px 14px; gap: 12px; }
  .video-play-icono { width: 48px; height: 48px; flex-basis: 48px; margin: 0; }
  .video-play-icono svg { width: 18px; height: 18px; }
  .video-play-texto { margin-bottom: 14px; }
}
/* columna de etiquetas de la ficha más ancha (INFRAESTRUCTURA) */
.ficha-datos div { grid-template-columns: 136px 1fr; }
@media (max-width: 760px) { .ficha-datos div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Sorpresa escondida ---------- */
.sorpresa { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(120% 90% at 50% 30%, rgba(22,48,76,.96) 0%, rgba(10,25,41,.98) 70%);
  opacity: 0; transition: opacity .45s ease; }
.sorpresa.abierta { opacity: 1; }
.sorpresa-confeti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sorpresa-tarjeta { position: relative; z-index: 1; width: min(440px, 100%); text-align: center; color: var(--fondo);
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 28px 32px;
  transform: translateY(30px) scale(.94); transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.sorpresa.abierta .sorpresa-tarjeta { transform: none; }
.sorpresa-foto { width: 184px; height: 184px; border-radius: 50%; padding: 5px; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--verde), var(--azul)); box-shadow: 0 0 0 0 rgba(0,227,154,.4); animation: latido 2.6s ease-out infinite; }
.sorpresa-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 4px solid #0A1929; }
.sorpresa .etiqueta { color: #7FE8C4; }
.sorpresa-nombre { margin: 0; font-size: clamp(38px, 9vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.sorpresa-apodo { margin: 0; font-size: clamp(26px, 6vw, 34px); font-weight: 300; font-style: italic; letter-spacing: -0.01em; }
.sorpresa-mensaje { margin: 6px 0 0; font-size: 17px; line-height: 1.6; color: rgba(252,252,251,.82); }
.sorpresa-firma { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(252,252,251,.5); }
.sorpresa-cerrar { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 1px solid rgba(252,252,251,.25); background: transparent;
  color: var(--fondo); font-size: 26px; line-height: 1; cursor: pointer; transition: background .25s, color .25s; }
.sorpresa-cerrar:hover { background: var(--fondo); color: var(--marino); }
@media (prefers-reduced-motion: reduce) { .sorpresa-foto { animation: none; } .sorpresa-tarjeta { transition: none; transform: none; } }

/* Sorpresa: lluvia Matrix + foto que se arma */
.sorpresa { background: #0A1929; }
.sorpresa-lluvia { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; transition: opacity 1.2s ease; }
.sorpresa.armada .sorpresa-lluvia { opacity: .35; }
.sorpresa-foto { width: 260px; height: 260px; position: relative; animation: none; }
.sorpresa-foto canvas { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); border-radius: 50%; display: block; }
.sorpresa-foto img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); opacity: 0; transition: opacity 1s ease; }
.sorpresa.armada .sorpresa-foto img { opacity: 1; }
.sorpresa.armada .sorpresa-foto { animation: latido 2.6s ease-out infinite; }
.sorpresa-tarjeta > .etiqueta, .sorpresa-nombre, .sorpresa-apodo, .sorpresa-mensaje, .sorpresa-firma {
  opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.sorpresa.armada .sorpresa-tarjeta > .etiqueta { opacity: 1; transform: none; transition-delay: .1s; }
.sorpresa.armada .sorpresa-nombre { opacity: 1; transform: none; transition-delay: .25s; }
.sorpresa.armada .sorpresa-apodo { opacity: 1; transform: none; transition-delay: .45s; }
.sorpresa.armada .sorpresa-mensaje { opacity: 1; transform: none; transition-delay: .65s; }
.sorpresa.armada .sorpresa-firma { opacity: 1; transform: none; transition-delay: .9s; }
.sorpresa-tarjeta { background: radial-gradient(closest-side, rgba(10,25,41,.92), rgba(10,25,41,.75) 70%, rgba(10,25,41,0)); }
@media (max-width: 760px) { .sorpresa-foto { width: 220px; height: 220px; } }
@media (prefers-reduced-motion: reduce) {
  .sorpresa-tarjeta > .etiqueta, .sorpresa-nombre, .sorpresa-apodo, .sorpresa-mensaje, .sorpresa-firma { transition: none; }
  .sorpresa.armada .sorpresa-foto { animation: none; }
}
.sorpresa-foto { width: 300px; height: 300px; }
@media (max-width: 760px) { .sorpresa-foto { width: 230px; height: 230px; } }
.sorpresa-apodo .degradado { padding-right: .14em; margin-right: -.06em; }
.sorpresa-jugar { margin-top: 8px; opacity: 0; transform: translateY(14px); transition: opacity .7s ease .8s, transform .7s cubic-bezier(.22,1,.36,1) .8s; text-decoration: none; }
.sorpresa.armada .sorpresa-jugar { opacity: 1; transform: none; }

/* Pie siempre al fondo aunque la página sea corta (404) */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.no-encontrado { flex: 1; }
.no-encontrado .envoltura { width: 100%; }
main:has(.no-encontrado) { display: flex; flex-direction: column; } .no-encontrado { padding: 64px 0; }