/* ============================================================
   MUFAH SOLUTIONS — Hoja de estilos principal
   Paleta, tipografía y componentes del sitio.
   Edita las variables de :root para cambiar colores globales.
   ============================================================ */

/* ---------- Tipografía (autoalojada) ----------
   Archivo variable con sus dos ejes: peso (100–900) y anchura (62–125%),
   que es la que hace funcionar .condensed. Son EXACTAMENTE los mismos
   archivos que servía Google Fonts, con los mismos unicode-range: el
   navegador solo descarga el subconjunto que necesita (para español,
   'latin'). Autoalojarlos quita la dependencia externa y una conexión
   a otro dominio, sin cambiar un solo píxel del render.
   Licencia SIL OFL 1.1 en assets/fonts/OFL.txt                          */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/Archivo-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/Archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/Archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colores de marca */
  --navy:        #081A31;  /* fondo principal */
  --navy-deep:   #04101F;  /* fondo más oscuro (footer, franjas) */
  --navy-mid:    #0C2340;  /* azul marino medio */
  --navy-card:   #0A1E3A;  /* tarjetas oscuras */
  --blue:        #2E6FD8;  /* azul de acento */
  --blue-hover:  #4A83E0;  /* azul hover */
  --blue-light:  #5B8FE3;
  --blue-soft:   #7FA7E8;
  --light:       #F2F3F5;  /* secciones claras */
  --white:       #FFFFFF;
  --gray:        #6B7686;
  --gray-dark:   #3A4150;
  --err:         #E08A8A;

  /* Tonos para TEXTO CHICO (menos de 18 px).
     El gris y el azul de marca solo pasan contraste AA en texto grande
     —lo dice la propia matriz del kit: gris sobre niebla 4.15, azul sobre
     navy 3.29, y el mínimo legible es 4.5—. Estos tres son escalones del
     MISMO kit (gris-600, gris-400 y azul-400), así que el sitio se ve
     igual y las etiquetas de 11 y 12 px por fin se leen. Los títulos y
     todo lo grande siguen usando --gray y --blue. */
  --gray-fuerte:   #5A6371;  /* gris-600 · texto chico sobre fondo claro  */
  --gray-suave:    #979FAA;  /* gris-400 · texto chico sobre fondo oscuro */
  --blue-legible:  #6D9AE4;  /* azul-400 · texto chico sobre fondo oscuro */

  --maxw: 1240px;
  --font: 'Archivo', Helvetica, Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--navy);
  font-family: var(--font);
  color: var(--light);
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
::selection { background: var(--blue); color: var(--white); }
a { color: var(--blue); text-decoration: none; transition: color 200ms ease; }
a:hover { color: var(--blue-light); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px;
}
input::placeholder, textarea::placeholder { color: var(--gray); opacity: 0.75; }
h1, h2, h3, p { margin: 0; }

/* Utilidad tipográfica: título condensado (usa el eje de anchura de Archivo) */
.condensed { font-weight: 800; font-stretch: 62%; text-transform: uppercase; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Etiqueta de sección (punto + texto en versalitas) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase;
}
.eyebrow .dot { width: 7px; height: 7px; background: var(--blue); border-radius: 50%; }
.eyebrow.on-dark  { color: var(--blue-legible); }
.eyebrow.on-light { color: var(--gray-fuerte); }

/* ---------- Animaciones ---------- */
@keyframes letterUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes diamondIn { from { opacity: 0; transform: rotate(45deg) scale(0); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Rombos 3D del hero: giro sobre su eje, flotación, charco de luz y destello */
@keyframes romboGira { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes romboFlota { from { transform: translateY(-9%) rotateX(7deg); } to { transform: translateY(9%) rotateX(-5deg); } }
@keyframes romboDestello { 0%, 100% { background-position: 160% 50%; } 55% { background-position: -60% 50%; } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 70px rgba(46,111,216,0.4), 0 0 24px rgba(46,111,216,0.5) inset; } 50% { box-shadow: 0 0 130px rgba(46,111,216,0.75), 0 0 44px rgba(46,111,216,0.75) inset; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes twinkle { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes scanY { from { transform: translateY(-160px); } to { transform: translateY(105vh); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes diamondPulse { 0%,100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.35); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Rombo (diamante) reutilizable */
.diamond { display: inline-block; background: var(--blue); border-radius: 1.5px; transform: rotate(45deg); }

/* ============================================================
   CURSOR, BARRA DE PROGRESO, PRELOADER
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 2000; pointer-events: none; display: none;
}
.cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--blue); border-radius: 2px; transform: rotate(45deg); }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(46,111,216,0.65); border-radius: 50%; }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } }

.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--blue); z-index: 1500; pointer-events: none;
}

.preloader {
  position: fixed; inset: 0; z-index: 1600; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.55s cubic-bezier(0.7,0,0.3,1);
}
.preloader.hide { transform: translateY(-100%); }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.preloader__word { display: flex; align-items: center; gap: 12px; }
.preloader__word span.letter { font-weight: 800; font-size: 72px; letter-spacing: 0.01em; color: var(--white); }
.preloader__word .letter:nth-child(1) { animation: letterUp 0.5s ease-out 0.05s both; }
.preloader__word .letter:nth-child(2) { animation: letterUp 0.5s ease-out 0.14s both; }
.preloader__word .letter:nth-child(3) { animation: letterUp 0.5s ease-out 0.23s both; }
.preloader__word .letter:nth-child(4) { animation: letterUp 0.5s ease-out 0.32s both; }
.preloader__word .letter:nth-child(5) { animation: letterUp 0.5s ease-out 0.41s both; }
.preloader__word .gem { width: 20px; height: 20px; background: var(--blue); border-radius: 3px; animation: diamondIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.72s both; }
.preloader__tag { font-weight: 600; font-size: 13px; letter-spacing: 0.52em; text-indent: 0.52em; color: rgba(255,255,255,0.5); animation: fadeIn 0.5s ease-out 0.9s both; }
.preloader__track { width: 180px; height: 1px; background: rgba(255,255,255,0.12); position: relative; overflow: hidden; animation: fadeIn 0.4s ease-out 0.3s both; }
.preloader__fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--blue); }
.preloader__pct { font-size: 12px; font-weight: 600; letter-spacing: 0.24em; color: var(--gray-suave); animation: fadeIn 0.4s ease-out 0.3s both; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 20px; left: 50%; transform: translate(-50%,0);
  z-index: 1200; display: flex; align-items: center; gap: 26px;
  padding: 10px 12px 10px 22px; border-radius: 999px;
  background: rgba(8,26,49,0.55); border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  max-width: calc(100vw - 32px); transition: transform 0.35s ease;
}
.navbar__brand { display: flex; align-items: center; gap: 8px; color: var(--white); }
.navbar__brand .name { font-weight: 800; font-size: 17px; letter-spacing: 0.03em; color: var(--white); }
.navbar__brand .diamond { width: 8px; height: 8px; }
.navbar__links { display: flex; align-items: center; gap: 2px; }
.navbar__links a {
  padding: 8px 13px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.navbar__links a:hover { color: var(--white); }
.navbar__links a.active { color: var(--white); }
.navbar__cta {
  display: inline-block; padding: 11px 24px; background: var(--blue); color: var(--white);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 999px; transition: background 200ms ease;
}
.navbar__cta:hover { background: var(--blue-hover); color: var(--white); }
.navbar__cta:active { background: #2559B4; }
.navbar__burger {
  width: 44px; height: 44px; border: none; background: transparent; cursor: pointer;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 999px;
}
.navbar__burger span { display: block; width: 20px; height: 2px; background: var(--white); border-radius: 2px; }

/* Drawer móvil */
.drawer {
  position: fixed; inset: 0; z-index: 1300; background: var(--navy);
  display: none; flex-direction: column; padding: 24px; animation: fadeIn 0.3s ease-out both;
}
.drawer.open { display: flex; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; }
.drawer__brand { display: flex; align-items: center; gap: 8px; }
.drawer__brand .name { font-weight: 800; font-size: 17px; color: var(--white); }
.drawer__brand .diamond { width: 8px; height: 8px; }
.drawer__close { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: var(--white); font-size: 20px; cursor: pointer; border-radius: 999px; }
.drawer__links { display: flex; flex-direction: column; gap: 4px; margin-top: 56px; }
.drawer__links a { font-size: 44px; font-weight: 800; font-stretch: 62%; text-transform: uppercase; color: var(--white); padding: 8px 0; }
.drawer__links a.cta { display: inline-flex; margin-top: 28px; padding: 16px 32px; background: var(--blue); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; border-radius: 999px; align-self: flex-start; }

@media (max-width: 879px) {
  .navbar__links, .navbar__cta { display: none; }
  .navbar__burger { display: flex; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-block; padding: 16px 34px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; border-radius: 999px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease; cursor: pointer;
  border: none; font-family: var(--font);
}
.btn--light { background: var(--light); color: var(--navy-mid); }
.btn--light:hover { background: var(--white); color: var(--navy-mid); }
.btn--light:active { background: #DDE0E5; }
.btn--ghost { background: rgba(46,111,216,0.12); border: 1px solid rgba(46,111,216,0.5); color: var(--white); }
.btn--ghost:hover { background: rgba(46,111,216,0.28); border-color: var(--blue); color: var(--white); }
.btn--blue { background: var(--blue); color: var(--white); }
.btn--blue:hover { background: var(--blue-hover); color: var(--white); }
.btn--blue:active { background: #2559B4; }
.btn--outline-dark { border: 1.5px solid var(--navy-mid); color: var(--navy-mid); background: transparent; }
.btn--outline-dark:hover { background: var(--navy-mid); color: var(--white); }

/* ============================================================
   HERO (Inicio)
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; overflow: hidden; padding: 150px 24px 0;
  background: radial-gradient(ellipse 130% 100% at 50% 30%, #0C2340 0%, #081A31 55%, #04101F 100%);
}
.grid-lines { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4,1fr); pointer-events: none; }
.grid-lines > div { border-right: 1px solid rgba(255,255,255,0.06); }
.grid-lines > div:last-child { border-right: none; }
.hero__glow {
  position: absolute; top: 44%; left: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px;
  background: radial-gradient(circle, rgba(46,111,216,0.2) 0%, rgba(46,111,216,0.07) 38%, rgba(46,111,216,0) 68%);
  pointer-events: none;
}
/* Franja que baja: la usa la portada de Nosotros */
.hero__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 140px; pointer-events: none;
  background: linear-gradient(180deg, rgba(46,111,216,0) 0%, rgba(46,111,216,0.05) 40%, rgba(46,111,216,0.13) 50%, rgba(46,111,216,0) 100%);
  animation: scanY 9s linear infinite;
}

/* ---------- Campo de puntos con olas ----------
   Los puntos los dibuja main.js en este lienzo, uno por uno, porque cada
   punto necesita su propio brillo según qué tan cerca le pasa la ola.
   Eso con CSS no se puede: ahí todos los puntos son el mismo dibujo
   repetido y no se les puede cambiar el brillo por separado.           */
/* El width/height al 100% es obligatorio: un <canvas> no se estira solo
   con inset:0 como haría un div, se queda de su tamaño interno. */
.hero__campo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* ---------- Rombos 3D flotantes ----------
   Cada rombo es el isotipo MUFAH con volumen real: una cara al frente y
   otra al dorso, separadas por el canto (las rebanadas que inserta
   main.js), todo girando sobre su propio eje vertical.
   El componente .rombo nunca se toca: el tamaño, los colores, la
   velocidad y el sentido del giro se ajustan con variables en cada
   .tile--*, así que agregar un rombo nuevo es copiar un bloque.        */
.tile { position: absolute; }

/* Halo suave detrás, solo para despegarlo de los puntos del fondo */
.tile::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 240%; height: 240%;
  transform: translate(-50%,-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(46,111,216,var(--halo,0.16)) 0%, rgba(46,111,216,0) 62%);
}

.rombo {
  position: relative; width: var(--tam); height: var(--tam);
  --grosor: calc(var(--tam) * 0.34);
  perspective: 800px;
}
.rombo__flota, .rombo__giro { position: absolute; inset: 0; transform-style: preserve-3d; }
.rombo__flota { animation: romboFlota var(--flota,6.5s) ease-in-out infinite alternate; }
.rombo__giro  { animation: romboGira var(--giro,15s) linear infinite var(--sentido,normal); }

/* Caras: cuadrado a 45°, o sea el rombo del isotipo */
.rombo__cara {
  position: absolute; inset: 0; border-radius: 5%;
  display: grid; place-items: center; backface-visibility: hidden; overflow: hidden;
  background: linear-gradient(135deg, var(--cara-a) 0%, var(--cara-b) 78%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 26px rgba(255,255,255,0.09), 0 0 var(--brillo,30px) rgba(46,111,216,0.35);
}
.rombo__cara--frente { transform: translateZ(calc(var(--grosor) / 2)) rotate(45deg); }
.rombo__cara--dorso  { transform: rotateY(180deg) translateZ(calc(var(--grosor) / 2)) rotate(45deg); }
/* Destello que barre la cara, como un reflejo sobre cristal */
.rombo__cara::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 34%, rgba(255,255,255,0.32) 48%, rgba(255,255,255,0) 62%);
  background-size: 300% 300%;
  animation: romboDestello 6s ease-in-out infinite;
}
/* La cara va a 45°, así que el texto se endereza con -45° */
.rombo__texto {
  transform: rotate(-45deg); font-size: var(--fuente); font-weight: 800; font-stretch: 62%;
  letter-spacing: 0.08em; color: var(--white); text-shadow: 0 2px 12px rgba(4,16,31,0.6);
}
/* Canto: los 4 muros que unen la cara de frente con la del dorso y le dan
   grosor de verdad. Cada uno se para sobre un lado del rombo (--lado va de
   0 a 3) y mira hacia afuera; los inserta main.js. */
.rombo__muro {
  position: absolute; top: 4%; left: 50%; height: 92%; width: var(--grosor);
  margin-left: calc(var(--grosor) / -2); backface-visibility: hidden;
  transform: rotate(calc(45deg + var(--lado) * 90deg)) translateX(calc(var(--tam) / 2)) rotateY(90deg);
  /* La franja clara de arriba hace que el canto brille cuando el rombo
     queda de perfil, en vez de desaparecer contra el fondo. */
  background:
    linear-gradient(90deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,0.3) 100%),
    linear-gradient(180deg, var(--canto-a,#35659F) 0%, var(--canto-b,#0C2444) 100%);
  box-shadow: inset 2px 0 0 rgba(255,255,255,0.16), inset -2px 0 0 rgba(0,0,0,0.3);
}

/* ---------- Dónde va cada rombo ----------
   Tres por columna, repartidos a tresbolillo: ninguno queda a la misma
   altura que el de enfrente ni pegado al de arriba. El título ocupa la
   franja central completa, así que las dos columnas laterales son el
   único sitio donde caben sin que las letras se les encimen — y por eso
   los tamaños bajan de grande (arriba) a mediano (abajo), para que la
   columna se lea como una sola pieza y no como tres cosas sueltas.
   Las alturas van en % del alto de la portada: así el reparto se
   mantiene igual en una pantalla de 700 px que en una de 1200.       */
.tile--ia  { top: 9%;  left: 3%;    --tam: clamp(42px,4.6vw,62px);  --fuente: clamp(13px,1.4vw,18px);  --giro: 11s; --flota: 5.4s; --sentido: reverse; --cara-a: #4C8BEE; --cara-b: #1D4C9C; --canto-a: #74A6F2; --canto-b: #1B4489; --halo: 0.3; --brillo: 52px; }
.tile--web { top: 36%; left: 6%;    --tam: clamp(62px,7.4vw,98px);  --fuente: clamp(16px,1.85vw,25px); --giro: 15s; --flota: 6.4s; --cara-a: #1E4680; --cara-b: #0B2141; --canto-a: #3D71AD; --canto-b: #0B2140; --halo: 0.16; }
.tile--ux  { top: 66%; left: 3%;    --tam: clamp(54px,6.2vw,84px);  --fuente: clamp(15px,1.75vw,23px); --giro: 18s; --flota: 7.2s; --sentido: reverse; --cara-a: #16305A; --cara-b: #0A1C36; --canto-a: #2F5C92; --canto-b: #081C36; --halo: 0.12; }
.tile--ads { top: 14%; right: 3%;   --tam: clamp(64px,7.6vw,102px); --fuente: clamp(17px,1.95vw,26px); --giro: 13s; --flota: 6s;   --cara-a: #1E4680; --cara-b: #0B2141; --canto-a: #3D71AD; --canto-b: #0B2140; --halo: 0.16; }
.tile--gem { top: 44%; right: 8%;   --tam: clamp(32px,3.6vw,48px);  --giro: 9s;  --flota: 5s;   --cara-a: #5B93EC; --cara-b: #2154AE; --canto-a: #8FB9F6; --canto-b: #245BB0; --halo: 0.38; --brillo: 60px; }
.tile--bot { top: 70%; right: 3.5%; --tam: clamp(56px,6.4vw,88px);  --fuente: clamp(15px,1.75vw,23px); --giro: 17s; --flota: 6.8s; --sentido: reverse; --cara-a: #16305A; --cara-b: #0A1C36; --canto-a: #2F5C92; --canto-b: #081C36; --halo: 0.12; }

/* Fuera de pantalla no gastan batería (main.js pone .fuera al hero) */
.hero.fuera .rombo__flota, .hero.fuera .rombo__giro,
.hero.fuera .rombo__cara::after { animation-play-state: paused; }

/* En teléfono no caben los seis rombos sin taparle la cara al título,
   pero tampoco tienen por qué desaparecer: se quedan dos, chicos, sobre
   el anillo de abajo —que es la única zona del hero sin texto—, girando
   igual que en escritorio. Los otros cuatro se retiran. */
@media (max-width: 700px) {
  .tile--web, .tile--ux, .tile--ads, .tile--bot { display: none; }
  .tile--ia  { top: auto; bottom: 8%;  left: 6%;  --tam: 44px; --fuente: 14px; --halo: 0.26; --brillo: 34px; }
  .tile--gem { top: auto; bottom: 11%; right: 9%; --tam: 30px; --halo: 0.34; --brillo: 40px; }
}
@media (max-width: 420px) {
  .tile--ia  { --tam: 38px; --fuente: 12px; }
  .tile--gem { --tam: 26px; }
}

.hero__title {
  position: relative; z-index: 2; text-align: center; font-weight: 800; font-stretch: 62%;
  text-transform: uppercase; font-size: clamp(58px,11vw,168px); line-height: 0.92;
  letter-spacing: 0.005em; color: var(--white);
}
.hero__title .accent { color: var(--blue); }
.hero__title .gem-inline { display: inline-block; width: 0.14em; height: 0.14em; background: var(--blue); border-radius: 12%; transform: rotate(45deg) translateY(-0.28em); margin-left: 0.12em; box-shadow: 0 0 40px rgba(46,111,216,0.7); }
.line-mask { display: block; overflow: hidden; padding: 0.04em 0; }
.line-mask > span { display: block; }

.hero__sub { position: relative; z-index: 2; margin-top: 32px; max-width: 480px; text-align: center; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.7); }
.hero__actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }

.podium { position: relative; z-index: 1; width: min(880px,92vw); height: 200px; margin-top: 60px; pointer-events: none; }
.podium__ring { position: absolute; left: 50%; top: 40px; width: 100%; height: 190px; transform: translateX(-50%); border-radius: 50%; border: 2px solid rgba(46,111,216,0.8); background: radial-gradient(ellipse at 50% 30%, rgba(46,111,216,0.28) 0%, rgba(12,35,64,0.4) 60%, rgba(8,26,49,0) 75%); animation: pulseGlow 4s ease-in-out infinite; }
.podium__ring2 { position: absolute; left: 50%; top: 84px; width: 66%; height: 110px; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: radial-gradient(ellipse at 50% 40%, rgba(242,243,245,0.1) 0%, rgba(8,26,49,0) 70%); }
.podium__fade { position: absolute; left: 50%; bottom: -80px; width: 140%; height: 200px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(8,26,49,0) 0%, #04101F 55%); }

/* ============================================================
   SECCIONES CLARAS (fondo con líneas)
   ============================================================ */
.section-light {
  background: var(--light);
  background-image: repeating-linear-gradient(180deg, rgba(12,35,64,0) 0px, rgba(12,35,64,0) 33px, rgba(12,35,64,0.06) 33px, rgba(12,35,64,0.06) 34px);
}
.section-dark { background: var(--navy); }
.pad-y { padding: 110px 24px; }

/* Bloque de estadísticas */
.stats { display: grid; grid-template-columns: minmax(300px,1.25fr) minmax(300px,1fr); gap: 56px; align-items: end; }
.stats__head h2 { margin-top: 24px; font-size: clamp(44px,6.4vw,96px); line-height: 0.94; color: var(--navy-mid); }
.stats__head h2 .accent { color: var(--blue); }
.stats__head p { margin-top: 32px; max-width: 420px; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.9; color: var(--gray-fuerte); }
.stats__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.stat { position: relative; min-width: 0; border-radius: 18px; padding: 26px 24px; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; }
.stat .corner { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.stat .corner.tl { top: 10px; left: 10px; border-top: 1.5px solid; border-left: 1.5px solid; }
.stat .corner.br { bottom: 10px; right: 10px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
.stat__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.stat__label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.7; }
.stat__icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat__icon .diamond { width: 8px; height: 8px; }
.stat__num { font-weight: 800; font-stretch: 62%; font-size: 64px; line-height: 1; }
.stat--navy  { background: var(--navy-mid); }
.stat--navy .corner { border-color: rgba(46,111,216,0.7); }
.stat--navy .stat__label { color: rgba(255,255,255,0.6); }
.stat--navy .stat__icon { background: rgba(255,255,255,0.1); }
.stat--navy .stat__num { color: var(--white); }
.stat--blue  { background: var(--blue); }
.stat--blue .corner { border-color: rgba(255,255,255,0.55); }
.stat--blue .stat__label { color: rgba(255,255,255,0.75); }
.stat--blue .stat__icon { background: rgba(255,255,255,0.18); }
.stat--blue .stat__icon .diamond { background: var(--white); }
.stat--blue .stat__num { color: var(--white); }
.stat--white { background: var(--white); border: 1px solid rgba(12,35,64,0.12); box-shadow: 0 10px 30px rgba(12,35,64,0.08); }
.stat--white .corner { border-color: rgba(12,35,64,0.3); }
.stat--white .stat__label { color: var(--gray-fuerte); }
.stat--white .stat__icon { background: rgba(46,111,216,0.1); }
.stat--white .stat__num { color: var(--navy-mid); }
.stat--slate { background: var(--gray-dark); }
.stat--slate .corner { border-color: rgba(46,111,216,0.7); }
.stat--slate .stat__label { color: rgba(255,255,255,0.65); }
.stat--slate .stat__icon { background: rgba(255,255,255,0.12); }
.stat--slate .stat__num { color: var(--white); }

/* Marquee */
.marquee { background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 26px 0; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: 44px; padding-right: 44px; }
.marquee__item { font-weight: 800; font-stretch: 62%; font-size: 26px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
.marquee__item.dim { color: rgba(255,255,255,0.35); }
.marquee__sep { width: 10px; height: 10px; background: var(--blue); border-radius: 2px; transform: rotate(45deg); flex-shrink: 0; }

/* ============================================================
   CARRUSEL DE SERVICIOS (Inicio)
   ============================================================ */
.services { background: var(--navy); padding: 110px 0 100px; overflow: hidden; }
.services__head { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; text-align: center; }
.services__head h2 { margin-top: 22px; font-size: clamp(40px,6vw,88px); line-height: 0.94; color: var(--white); }
.services__head h2 .accent { color: var(--blue); }
.services__head p { margin: 24px auto 0; max-width: 520px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.65); }
.carousel {
  display: flex; gap: 18px; padding: 56px max(24px, calc(50vw - 620px)) 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; user-select: none;
}
.carousel::-webkit-scrollbar { display: none; }
.svc-card {
  flex: 0 0 min(360px,82vw); scroll-snap-align: start;
  background: linear-gradient(165deg,#10284A 0%,#0A1E3A 100%);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 22px; padding: 34px 30px 38px;
  display: flex; flex-direction: column; gap: 18px; min-height: 340px;
  transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
.svc-card:hover { transform: translateY(-8px); border-color: rgba(46,111,216,0.6); box-shadow: 0 24px 60px rgba(4,16,31,0.7), 0 0 40px rgba(46,111,216,0.12); }
.svc-card__top { display: flex; justify-content: space-between; align-items: center; }
.svc-card__num { font-weight: 800; font-stretch: 62%; font-size: 54px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(46,111,216,0.75); }
.svc-card__tag { padding: 6px 12px; background: rgba(46,111,216,0.14); border: 1px solid rgba(46,111,216,0.4); color: var(--blue-soft); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 999px; }
.svc-card h3 { margin-top: 10px; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--white); }
.svc-card p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.65); flex: 1; }
.svc-card a { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-legible); }
.svc-card a:hover { color: var(--blue-soft); }
.carousel__nav { max-width: var(--maxw); margin: 8px auto 0; padding: 0 24px; display: flex; gap: 10px; justify-content: flex-end; }
.round-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--white); font-size: 18px; cursor: pointer; transition: background 200ms ease, border-color 200ms ease; }
.round-btn:hover { background: rgba(46,111,216,0.2); border-color: var(--blue); }

/* ============================================================
   CASOS (lista en Inicio)
   ============================================================ */
.cases__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.cases__head h2 { margin-top: 22px; font-size: clamp(40px,6vw,88px); line-height: 0.94; color: var(--navy-mid); }
.cases__head h2 .accent { color: var(--blue); }
.cases__list { margin-top: 56px; display: flex; flex-direction: column; }
.case-row {
  display: grid; grid-template-columns: minmax(90px,150px) 2fr minmax(140px,1fr) 40px; gap: 24px;
  align-items: center; padding: 34px 20px; border-top: 1px solid rgba(12,35,64,0.15);
  color: var(--navy-mid); transition: background 250ms ease, padding-left 250ms ease;
}
.case-row:hover { background: rgba(255,255,255,0.85); padding-left: 34px; color: var(--navy-mid); }
.case-row .rubro { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-suave); }
.case-row .nombre { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(24px,3.2vw,44px); line-height: 1; color: var(--navy-mid); }
.case-row .metrica { font-weight: 800; font-stretch: 62%; font-size: clamp(28px,3.6vw,52px); line-height: 1; color: var(--blue); text-align: right; }
.case-row .arrow { font-size: 22px; color: var(--blue); text-align: right; }
.cases__list .end { border-top: 1px solid rgba(12,35,64,0.15); }
@media (max-width: 720px) {
  .case-row { grid-template-columns: 1fr auto; grid-template-areas: "rubro metrica" "nombre metrica"; gap: 6px 16px; }
  .case-row .rubro { grid-area: rubro; }
  .case-row .nombre { grid-area: nombre; }
  .case-row .metrica { grid-area: metrica; align-self: center; }
  .case-row .arrow { display: none; }
}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testimonials { background: var(--navy-mid); position: relative; overflow: hidden; }
.mosaic { position: absolute; top: 0; right: 0; display: grid; grid-template-columns: repeat(8, clamp(20px,3.4vw,44px)); pointer-events: none; }
.mosaic > div { width: clamp(20px,3.4vw,44px); height: clamp(20px,3.4vw,44px); }
.testimonials__inner { max-width: var(--maxw); margin: 0 auto; padding: 96px 24px 72px; position: relative; }
.testimonial { margin-top: 44px; display: flex; flex-direction: column; gap: 28px; }
.testimonial__who { display: flex; align-items: center; gap: 20px; }
.testimonial__avatar { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(145deg,#2E6FD8,#1D4C9C); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; color: var(--white); flex-shrink: 0; }
.testimonial__name { font-weight: 700; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.testimonial__role { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-suave); }
.testimonial__quote { margin: 0; max-width: 880px; font-size: clamp(22px,3vw,34px); font-weight: 500; line-height: 1.35; color: rgba(255,255,255,0.9); }
.testimonial__quote .mark { color: var(--blue); font-weight: 800; }
.testimonials__nav { margin-top: 40px; display: flex; align-items: center; gap: 10px; }
.testimonials__pos { margin-left: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; color: var(--gray-suave); }

/* ============================================================
   ENCABEZADOS DE PÁGINA INTERNA
   ============================================================ */
.page-hero {
  background: radial-gradient(ellipse 120% 100% at 50% 0%, #0C2340 0%, #081A31 70%);
  padding: 190px 24px 90px; position: relative; overflow: hidden;
}
.page-hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; }
.page-hero h1 { margin-top: 24px; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(52px,9vw,140px); line-height: 0.92; color: var(--white); }
.page-hero h1 .accent { color: var(--blue); }
.page-hero p { margin-top: 28px; max-width: 620px; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.7); }

/* Servicios — detalle */
.svc-detail { display: grid; grid-template-columns: minmax(120px,220px) 1fr; gap: clamp(20px,4vw,64px); padding: 56px 0; border-top: 1px solid rgba(12,35,64,0.15); align-items: start; }
.svc-detail__num { font-weight: 800; font-stretch: 62%; font-size: clamp(64px,9vw,140px); line-height: 0.8; color: transparent; -webkit-text-stroke: 2px rgba(46,111,216,0.55); }
.svc-detail__body { display: flex; flex-direction: column; gap: 18px; }
.svc-detail__body h2 { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(30px,4vw,54px); line-height: 0.96; color: var(--navy-mid); }
.svc-detail__body p { max-width: 640px; font-size: 16px; line-height: 1.65; color: var(--gray-dark); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { padding: 8px 15px; background: var(--white); border: 1px solid rgba(12,35,64,0.15); color: var(--gray-dark); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 999px; }
.center-cta { border-top: 1px solid rgba(12,35,64,0.15); padding-top: 56px; text-align: center; }
@media (max-width: 640px) { .svc-detail { grid-template-columns: 1fr; gap: 12px; } }

/* Casos — detalle */
.case-detail { background: var(--white); border: 1px solid rgba(12,35,64,0.1); border-radius: 24px; padding: clamp(28px,4vw,52px); box-shadow: 0 14px 44px rgba(12,35,64,0.08); display: grid; grid-template-columns: 1.6fr minmax(240px,1fr); gap: clamp(24px,4vw,56px); align-items: center; }
.case-detail__body { display: flex; flex-direction: column; gap: 18px; }
.case-detail__meta { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-suave); }
.case-detail__body h2 { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(28px,3.6vw,48px); line-height: 0.96; color: var(--navy-mid); }
.case-detail__body p { font-size: 15px; line-height: 1.65; color: var(--gray-dark); }
.case-detail__body p strong { color: var(--navy-mid); }
.case-detail__metric { position: relative; background: var(--navy-mid); border-radius: 20px; padding: 44px 30px; text-align: center; overflow: hidden; }
.case-detail__metric .glow { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 220px; height: 160px; background: radial-gradient(circle, rgba(46,111,216,0.4) 0%, rgba(46,111,216,0) 70%); }
.case-detail__metric .num { position: relative; font-weight: 800; font-stretch: 62%; font-size: clamp(52px,6vw,84px); line-height: 1; color: var(--white); }
.case-detail__metric .label { position: relative; margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.8; color: rgba(255,255,255,0.65); }
@media (max-width: 720px) { .case-detail { grid-template-columns: 1fr; } }

/* Nosotros — capacidades */
.section-deep { background: var(--navy-deep); padding: 100px 24px; position: relative; overflow: hidden; }
.caps { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 14px; }
/* Las dos rejillas que usan .caps traen SEIS fichas: las capacidades de
   Nosotros y los demos de Demos. Con el ancho libre caben cuatro, así que
   la segunda fila quedaba coja —dos fichas y dos huecos— y en Demos el
   hueco se tragaba justo la ficha azul, que es la que vende. Tres por fila
   las cuadra en dos filas parejas y la azul cierra la rejilla. */
@media (min-width: 980px) { .caps { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.cap { position: relative; background: var(--navy-card); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; transition: border-color 250ms ease, transform 250ms ease; }
.cap:hover { border-color: rgba(46,111,216,0.55); transform: translateY(-4px); }
.cap .corner { position: absolute; width: 13px; height: 13px; pointer-events: none; }
.cap .corner.tl { top: 9px; left: 9px; border-top: 1.5px solid rgba(46,111,216,0.65); border-left: 1.5px solid rgba(46,111,216,0.65); }
.cap .corner.br { bottom: 9px; right: 9px; border-bottom: 1.5px solid rgba(46,111,216,0.65); border-right: 1.5px solid rgba(46,111,216,0.65); }
.cap__top { display: flex; justify-content: space-between; align-items: center; }
.cap__code { font-size: 10px; font-weight: 600; letter-spacing: 0.26em; color: var(--gray-suave); }
.cap__live { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; animation: blink 2.4s ease-in-out infinite; }
.cap h3 { margin-top: 6px; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 24px; color: var(--white); }
.cap p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.6); }
.caps-heading h2 { margin-top: 22px; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(36px,5vw,76px); line-height: 0.94; color: var(--white); }
.caps-heading h2 .accent { color: var(--blue); }

/* Nosotros — valores */
.values { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; }
.value { border-radius: 22px; padding: 44px 34px; display: flex; flex-direction: column; gap: 16px; min-height: 300px; }
.value h3 { margin-top: 14px; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 34px; }
.value .mark { width: 16px; height: 16px; border-radius: 2.5px; transform: rotate(45deg); margin: 4px; }
.value--navy { background: var(--navy-mid); }
.value--navy .mark { background: var(--blue); box-shadow: 0 0 24px rgba(46,111,216,0.6); }
.value--navy h3 { color: var(--white); }
.value--navy p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.7); }
.value--white { background: var(--white); border: 1px solid rgba(12,35,64,0.12); box-shadow: 0 10px 30px rgba(12,35,64,0.07); }
.value--white .mark { border: 2.5px solid var(--blue); }
.value--white h3 { color: var(--navy-mid); }
.value--white p { font-size: 14px; line-height: 1.7; color: var(--gray-dark); }
.value--blue { background: var(--blue); }
.value--blue .mark { background: var(--white); }
.value--blue h3 { color: var(--white); }
.value--blue p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.85); }

/* Nosotros — proceso + trayectoria */
.process { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 32px; }
.step { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 22px; }
.step__num { font-weight: 800; font-stretch: 62%; font-size: 52px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(46,111,216,0.8); }
.step h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); }
.step p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.65); }
.timeline { position: relative; margin-top: 48px; }
.timeline__line { position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(46,111,216,0.75) 0%, rgba(46,111,216,0.12) 100%); }
.timeline__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 32px; }
.milestone { display: flex; flex-direction: column; gap: 14px; }
.milestone .node { width: 11px; height: 11px; background: var(--navy-mid); border: 2px solid var(--blue); border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 18px rgba(46,111,216,0.55); flex-shrink: 0; }
.milestone .anio { font-weight: 800; font-stretch: 62%; font-size: 38px; line-height: 1; color: var(--white); }
.milestone p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.65); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-hero { background: radial-gradient(ellipse 120% 100% at 50% 0%, #0C2340 0%, #081A31 70%); padding: 190px 24px 120px; position: relative; overflow: hidden; min-height: 100vh; }
.contact-hero__glow { position: absolute; top: -220px; left: 50%; transform: translateX(-50%); width: 900px; height: 700px; background: radial-gradient(circle, rgba(46,111,216,0.25) 0%, rgba(46,111,216,0) 70%); pointer-events: none; }
.contact-grid { position: relative; max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px,1fr) minmax(320px,1.15fr); gap: clamp(32px,5vw,72px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 26px; }
.contact-info h1 { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(48px,6.5vw,96px); line-height: 0.92; color: var(--white); }
.contact-info h1 .accent { color: var(--blue); }
.contact-info p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.7); max-width: 400px; }
.wa-link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 15px 30px; border: 1px solid rgba(255,255,255,0.25); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 999px; transition: border-color 200ms ease, background 200ms ease; }
.wa-link:hover { border-color: var(--blue); background: rgba(46,111,216,0.15); color: var(--white); }
.wa-link .diamond { width: 8px; height: 8px; }
.contact-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); line-height: 2.2; }
.contact-meta a { color: rgba(255,255,255,0.55); }
.contact-meta a:hover { color: var(--white); }

.contact-form { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 26px; padding: clamp(28px,4vw,44px); display: flex; flex-direction: column; gap: 20px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.field input, .field textarea { padding: 15px 17px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 13px; color: var(--white); font-size: 15px; font-family: var(--font); transition: border-color 200ms ease; }
.field textarea { resize: vertical; }
.field.invalid input, .field.invalid textarea { border-color: rgba(224,138,138,0.6); }
.field__error { font-size: 12px; color: var(--err); display: none; }
.field.invalid .field__error { display: block; }
.contact-form button { margin-top: 8px; }
.form-success { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 26px; padding: 72px 44px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; animation: fadeIn 0.4s ease-out both; }
.form-success .gem { width: 22px; height: 22px; background: var(--blue); border-radius: 3px; transform: rotate(45deg); box-shadow: 0 0 32px rgba(46,111,216,0.7); animation: diamondPulse 2s ease-in-out infinite; }
.form-success h2 { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 34px; color: var(--white); }
.form-success p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.75); max-width: 360px; }
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,0.08); padding: 100px 24px 40px; position: relative; overflow: hidden; }
.footer__glow { position: absolute; bottom: -260px; left: 50%; transform: translateX(-50%); width: 1100px; height: 500px; background: radial-gradient(circle, rgba(46,111,216,0.16) 0%, rgba(46,111,216,0) 70%); pointer-events: none; }
.footer__inner { position: relative; max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 64px; }
.footer__brand { display: flex; align-items: baseline; gap: clamp(8px,1.4vw,18px); }
.footer__brand .name { font-weight: 800; font-size: clamp(56px,9vw,130px); line-height: 1; letter-spacing: 0.01em; color: var(--white); }
.footer__brand .gem { display: inline-block; width: clamp(14px,2.2vw,30px); height: clamp(14px,2.2vw,30px); background: var(--blue); border-radius: 12%; transform: rotate(45deg); box-shadow: 0 0 40px rgba(46,111,216,0.55); }
.footer__tag { margin-top: 12px; font-weight: 600; font-size: clamp(11px,1.4vw,16px); letter-spacing: 0.52em; text-indent: 0.1em; color: rgba(255,255,255,0.45); }
.footer__slogan { max-width: 900px; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(26px,3.6vw,48px); line-height: 1.06; }
.footer__slogan .accent { color: var(--blue); }
.footer__cols { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer__group { display: flex; gap: clamp(40px,6vw,96px); flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col.right { text-align: right; }
.footer__col .title { font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gray-suave); }
.footer__col a, .footer__col span.link { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.footer__col a:hover { color: var(--white); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-suave); }
.footer__bottom .online { display: inline-flex; align-items: center; gap: 8px; }
.footer__bottom .online .live { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; animation: blink 2.2s ease-in-out infinite; }

/* ============================================================
   APARICIONES ATADAS AL SCROLL
   El respaldo de siempre: el JS le pone .in y el bloque aparece
   una vez. Debajo, si el navegador lo soporta, se cambia por algo
   mejor: la aparición va pegada a la posición exacta del scroll,
   así que si subes, el bloque se vuelve a guardar. No es un truco
   con JavaScript, lo lleva el navegador en el compositor.
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.65s ease-out, transform 0.65s ease-out; }
[data-reveal].in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

@keyframes aparecer { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      opacity: 1; transform: none; transition: none;
      animation: aparecer linear both;
      animation-timeline: view();
      /* El tramo va de "asoma por abajo" a "ya entró completo" (rango
         `entry`), y NO hasta un punto del recorrido total (`cover`).
         Es la diferencia entre aparecer y quedarse a medias: con
         `cover`, un bloque pegado al final de la página se queda
         congelado a media opacidad porque el scroll se acaba antes de
         llegar a su meta —así estaba el botón de cotizar en Servicios,
         que se veía apagado como si no funcionara—. Con `entry` la
         meta es el propio alto del bloque, así que siempre se cumple. */
      animation-range: entry 4% entry 90%;
    }
  }
}

/* ============================================================
   CAMBIO DE PÁGINA SIN PARPADEO
   Al pasar de una página a otra ya no hay el destello en blanco
   de toda la vida: el contenido se funde y la barra de arriba y
   el pie se quedan clavados en su lugar, como en una aplicación.
   Los navegadores que no lo entienden simplemente navegan normal.
   ============================================================ */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: salePagina 220ms cubic-bezier(0.4,0,1,1) both; }
  ::view-transition-new(root) { animation: entraPagina 340ms cubic-bezier(0,0,0.2,1) 60ms both; }
  @keyframes salePagina  { to { opacity: 0; transform: translateY(-14px); } }
  @keyframes entraPagina { from { opacity: 0; transform: translateY(22px); } }
}
/* Estos dos no se van con la página: se quedan quietos mientras el
   resto cambia. Por eso la navegación se siente continua.          */
.navbar { view-transition-name: barra; }
.footer { view-transition-name: pie; }

/* ============================================================
   PREGUNTAS FRECUENTES QUE SE ABREN DE VERDAD
   Un <details> siempre se abrió de golpe porque el navegador no
   sabía animar hacia "alto automático". Eso cambió hace poco:
   con interpolate-size ya se puede, sin JavaScript y sin medir
   nada a mano. Donde no exista, se abre de golpe como siempre.
   ============================================================ */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .faq-item::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size 380ms cubic-bezier(0.2,0.8,0.3,1),
                  content-visibility 380ms allow-discrete;
    }
    .faq-item[open]::details-content { block-size: auto; }
    .faq-item[open] .faq-cuerpo { animation: none; }   /* ya no hace falta */
  }
}

/* ============================================================
   SERVICIOS — CATÁLOGO CON FILTROS (página Servicios)
   ============================================================ */
.services-catalog { background: var(--navy); padding: 100px 24px 110px; position: relative; overflow: hidden; }
.svc-intro { text-align: center; max-width: 640px; margin: 0 auto; }
.svc-intro h2 { margin-top: 20px; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(34px, 5vw, 64px); line-height: 0.96; color: #fff; }
.svc-intro h2 .accent { color: var(--blue); }
.svc-intro p { margin-top: 20px; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.65); }

/* Barra de filtros */
.svc-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 44px auto 0; max-width: 940px; }
.filter-btn {
  padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
  background: transparent; color: rgba(255,255,255,0.7); font-family: var(--font);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.filter-btn:hover { border-color: var(--blue); color: #fff; }
.filter-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- Rejilla de servicios ----------
   Cada recuadro son dos capas: el filo de luz (.svc-item__led), que vive
   por fuera del recorte, y el cuerpo (.svc-item__cuerpo), que sí recorta
   para que el triángulo diagonal no se salga de las esquinas redondas.
   Por eso el LED no puede ir en el mismo elemento que el fondo.        */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 48px; }
.svc-item {
  position: relative; border-radius: 20px; min-height: 240px; display: flex;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.svc-item:hover, .svc-item:focus-within { transform: translateY(-6px); }
.svc-item__cuerpo {
  position: relative; z-index: 1; flex: 1; overflow: hidden; border-radius: inherit;
  display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 30px;
  background: linear-gradient(165deg, #10284A 0%, #0A1E3A 100%);
  border: 1px solid rgba(255,255,255,0.09);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.svc-item:hover .svc-item__cuerpo, .svc-item:focus-within .svc-item__cuerpo {
  border-color: rgba(46,111,216,0.6);
  box-shadow: 0 24px 60px rgba(4,16,31,0.7), 0 0 40px rgba(46,111,216,0.12);
}
.svc-item[hidden] { display: none; }
.svc-item__cat { align-self: flex-start; padding: 6px 12px; background: rgba(46,111,216,0.14); border: 1px solid rgba(46,111,216,0.4); color: var(--blue-soft); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 999px; }
.svc-item h3 { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 23px; line-height: 1.05; color: #fff; }
.svc-item p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.65); flex: 1; }
.svc-item .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.svc-item .chips .chip { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.svc-empty { grid-column: 1/-1; text-align: center; color: rgba(255,255,255,0.5); font-size: 14px; padding: 40px 0; }

/* El botón de la ficha: se ve como un enlace, pero su zona sensible es
   TODA la tarjeta (el ::after estirado). Así el recuadro completo se
   puede tocar sin sacrificar que un teclado lo alcance con Tab.        */
.svc-item__abrir {
  align-self: flex-start; margin-top: 2px; padding: 0; border: none; background: none;
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue-legible); cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color 250ms ease, letter-spacing 800ms cubic-bezier(0.16,1,0.3,1);
}
.svc-item__abrir::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.svc-item__mas {
  position: relative; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(46,111,216,0.6); flex: none;
  transition: transform 500ms cubic-bezier(0.16,1,0.3,1), background 250ms ease;
}
.svc-item__mas::before, .svc-item__mas::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--blue-light);
  transform: translate(-50%,-50%);
}
.svc-item__mas::before { width: 8px; height: 1.5px; }
.svc-item__mas::after { width: 1.5px; height: 8px; }
.svc-item:hover .svc-item__abrir, .svc-item:focus-within .svc-item__abrir { color: var(--blue-soft); letter-spacing: 0.24em; }
.svc-item:hover .svc-item__mas { transform: rotate(90deg); background: rgba(46,111,216,0.2); }
.svc-item__abrir:focus-visible { outline: none; }
.svc-item:focus-within .svc-item__cuerpo { outline: 2px solid var(--blue); outline-offset: 3px; }
/* La ficha completa vive en el HTML (Google la lee) pero solo se ve
   cuando el recuadro se abre en grande. */
.svc-item__ficha[hidden] { display: none; }

/* Entrada / cambio de filtro (animación) */
@keyframes svcIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.svc-item.enter { animation: svcIn 0.5s cubic-bezier(0.16,1,0.3,1) both; }
@media (prefers-reduced-motion: reduce) { .svc-item.enter { animation: none; } }

/* ============================================================
   CONTACTO — canales directos y preguntas frecuentes
   ============================================================ */
.contact-canales { background: var(--navy); padding: 10px 24px 30px; }
.canales-grid { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.canal-card {
  display: flex; flex-direction: column; gap: 13px; padding: 30px 28px 26px;
  background: linear-gradient(165deg, #10284A 0%, #0A1E3A 100%);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; color: inherit;
  transition: transform 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.canal-card:hover { transform: translateY(-6px); border-color: rgba(46,111,216,0.6); box-shadow: 0 24px 60px rgba(4,16,31,0.7), 0 0 40px rgba(46,111,216,0.12); color: inherit; }
.canal-card h3 { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(19px,2.6vw,25px); line-height: 1.05; color: #fff; overflow-wrap: anywhere; }
.canal-card p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.65); flex: 1; }
.canal-card__accion { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-light); }
.canal-card:hover .canal-card__accion { color: var(--white); }

.faq-seccion { background: var(--navy); padding: 60px 24px 110px; }
.faq-wrap { max-width: 880px; margin: 0 auto; }
.faq-wrap h2 { margin-top: 22px; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(30px,4.6vw,54px); line-height: 0.96; color: var(--white); }
.faq-wrap h2 .accent { color: var(--blue); }
.faq-lista { margin-top: 38px; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--navy-card); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px; transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item[open] { border-color: rgba(46,111,216,0.55); box-shadow: 0 14px 40px rgba(4,16,31,0.5), 0 0 30px rgba(46,111,216,0.1); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; padding: 19px 22px;
  font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--white);
  border-radius: 18px; min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue-soft); }
.faq-icono { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(46,111,216,0.6); transition: transform 0.3s ease, background 0.25s ease; }
.faq-icono::before, .faq-icono::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--blue-light);
  transform: translate(-50%,-50%); transition: background 0.25s ease;
}
.faq-icono::before { width: 10px; height: 1.6px; }
.faq-icono::after { width: 1.6px; height: 10px; }
.faq-item[open] .faq-icono { transform: rotate(45deg); background: rgba(46,111,216,0.18); }
.faq-cuerpo { padding: 0 22px 21px; }
.faq-cuerpo p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.7); }
.faq-cuerpo a { color: var(--blue-light); text-decoration: underline; text-underline-offset: 3px; }
.faq-cuerpo a:hover { color: var(--white); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-item[open] .faq-cuerpo { animation: faqIn 0.3s ease both; }
@media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-cuerpo { animation: none; } }
@media (max-width: 700px) { .canales-grid { grid-template-columns: 1fr; } }

/* ============================================================
   AJUSTES MÓVIL / TABLET
   Corrige textos amontonados y elementos que se salían de la
   pantalla en celulares.
   ============================================================ */
@media (max-width: 780px) {
  /* --- Estadísticas: apilar cabecera y tarjetas (antes se salían) --- */
  .stats { grid-template-columns: 1fr; gap: 36px; }
  .stats__head h2 { font-size: clamp(40px, 11vw, 72px); }
  .stats__head p { max-width: 100%; }
}

@media (max-width: 640px) {
  /* --- Estadísticas: una sola columna de tarjetas en teléfonos --- */
  .stats__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* --- Hero: menos aire arriba --- */
  .hero { padding-top: 120px; }

  /* --- Tarjetas de estadística: número un poco menor para que respire --- */
  .stat { padding: 22px 18px; min-height: 170px; }
  .stat__num { font-size: 54px; }

  /* --- Marquee y títulos: un pelín más compactos --- */
  .marquee__item { font-size: 22px; }
  .services { padding: 80px 0 70px; }
  .pad-y { padding: 80px 24px; }

  /* --- Testimonios: mosaico decorativo más chico para no tapar texto --- */
  .testimonials__inner { padding: 80px 24px 64px; }
  .testimonial__quote { font-size: 22px; }

  /* --- Footer: alinear todo a la izquierda para que no se amontone --- */
  .footer { padding: 72px 24px 32px; }
  .footer__inner { gap: 44px; }
  .footer__cols { gap: 32px; }
  .footer__col.right { text-align: left; }
  .footer__bottom { flex-direction: column; gap: 10px; }
}

@media (max-width: 420px) {
  /* Pantallas muy pequeñas: asegurar que los títulos gigantes no se corten */
  .page-hero h1 { font-size: clamp(38px, 12vw, 88px); }
  .footer__brand .name { font-size: clamp(44px, 15vw, 90px); }
}

/* ============================================================
   MÓVIL Y TABLET — lo nuevo
   Ni una animación menos que en escritorio: lo único que cambia
   es el tamaño y el acomodo. El LED sigue girando, la ficha
   sigue abriéndose y las diagonales siguen ahí.
   ============================================================ */

/* Los títulos de portada están escritos por renglones (.line-mask) y
   cada renglón debe caber en una línea real: si se parte, la máscara
   que los descubre deja de coincidir con el texto. */
@media (max-width: 700px) {
  .hero__title { font-size: clamp(40px, 12.5vw, 74px); }
}

/* Catálogo de servicios */
@media (max-width: 900px) {
  .services-catalog { padding: 76px 24px 90px; }
  .svc-grid { gap: 16px; margin-top: 38px; }
  .svc-filters { gap: 8px; margin-top: 34px; }
  .filter-btn { padding: 10px 16px; font-size: 11.5px; }
}
@media (max-width: 620px) {
  /* Una sola columna: la tarjeta ya no necesita alto mínimo */
  .svc-grid { grid-template-columns: 1fr; }
  .svc-item { min-height: 0; }
  .svc-item__cuerpo { padding: 26px 24px 26px; gap: 12px; }
  .svc-item h3 { font-size: 21px; }
  .svc-cierre { margin-top: 52px; }
  .svc-cierre__acciones .btn { width: 100%; text-align: center; }
}

/* La ficha en grande: pegada a los bordes y con menos aire adentro,
   que en un teléfono el margen se paga en líneas de texto. */
@media (max-width: 640px) {
  .ficha { padding: 14px; }
  .ficha__caja { max-height: 90vh; }
  .ficha__scroll { max-height: 90vh; padding: 34px 24px 28px; }
  .ficha h2 { margin-top: 14px; font-size: clamp(26px, 8vw, 34px); }
  .ficha__cuerpo p, .ficha__cuerpo li { font-size: 14.5px; }
  .ficha__cerrar { top: 12px; right: 12px; width: 38px; height: 38px; }
  .ficha__pie { margin-top: 28px; padding-top: 22px; }
  .ficha__pie .btn { width: 100%; text-align: center; }
}

/* ============================================================
   ============================================================
   SISTEMA DE 45° — el rombo del logo, puesto a trabajar
   ============================================================
   La idea: el isotipo de MUFAH es un rombo, o sea una diagonal
   a 45 grados. Así que TODO lo que se mueve en el sitio se
   mueve en esa diagonal, y no en horizontal como en cualquier
   otra página. Los botones se llenan con un rombo que se abre
   desde el centro; los títulos aparecen barridos en diagonal;
   un rombo le da la vuelta a la tarjeta que estás mirando; el
   indicador del menú viaja en diagonal de un enlace a otro.
   Ninguna de estas cosas se ve hasta que el visitante hace
   algo, así que la página en reposo sigue igual de limpia.
   ============================================================ */

/* ------------------------------------------------------------
   1) BOTONES — el rombo se abre y se traga el botón
   Al pasar el cursor no se pinta el fondo de arriba a abajo:
   se abre un rombo desde el centro hasta desbordar el botón.
   ------------------------------------------------------------ */
/* La curva de todo lo que hace un botón: arranca despacio y llega
   despacio. La anterior (easeOutExpo) salía disparada en el primer
   fotograma y frenaba en seco; se sentía un tirón, no un movimiento.
   Esta entra sola y no se nota dónde termina.                       */
.btn, .navbar__cta, .wa-link, .filter-btn, .round-btn {
  --curva-boton: cubic-bezier(0.33, 0.02, 0.18, 1);
  position: relative; z-index: 0; isolation: isolate; overflow: hidden;
  transition: color 560ms ease, border-color 700ms ease,
              transform 900ms var(--curva-boton);
}
.btn::before, .navbar__cta::before, .wa-link::before,
.filter-btn::before, .round-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--llena, var(--blue));
  /* Empieza como un punto en el centro y termina como un rombo
     más grande que el botón. Eso es todo el truco. */
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transition: clip-path 1150ms var(--curva-boton);
}
.btn:hover::before, .navbar__cta:hover::before, .wa-link:hover::before,
.filter-btn:hover::before, .round-btn:hover::before {
  clip-path: polygon(50% -80%, 180% 50%, 50% 180%, -80% 50%);
}
.btn:hover, .wa-link:hover, .filter-btn:hover, .round-btn:hover { transform: translateY(-2px); }
.btn:active, .navbar__cta:active, .wa-link:active,
.filter-btn:active, .round-btn:active { transform: translateY(0); }

/* El relevo de la etiqueta: mientras el rombo se abre, el texto de
   arriba se va por arriba y entra su gemelo desde abajo, ya con el
   color que le toca sobre el rombo. Así la palabra NUNCA queda
   ilegible a media transición, que es lo que arruina este efecto en
   casi todos lados. Los dos gemelos los arma main.js.              */
.btn__txt { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.btn__txt > span { display: block; transition: transform 860ms var(--curva-boton, cubic-bezier(0.33,0.02,0.18,1)) 60ms; }
.btn__txt > span + span { position: absolute; inset: 0; transform: translateY(115%); }
.btn__txt > span + span::before { content: attr(data-eco); }
.btn:hover .btn__txt > span:first-child,
.navbar__cta:hover .btn__txt > span:first-child { transform: translateY(-115%); }
.btn:hover .btn__txt > span + span,
.navbar__cta:hover .btn__txt > span + span { transform: translateY(0); }

/* Cada botón dice de qué color se llena y a qué color se va su texto */
.btn--light  { --llena: var(--navy-mid); }
.btn--light .btn__txt > span + span { color: var(--white); }
.btn--ghost  { --llena: var(--blue); }
.btn--ghost:hover  { background: rgba(46,111,216,0.12); border-color: var(--blue); }
.btn--ghost .btn__txt > span + span { color: var(--white); }
.navbar__cta { --llena: var(--white); }
.navbar__cta .btn__txt > span + span { color: var(--navy-mid); }
.wa-link     { --llena: var(--blue); }
.wa-link:hover { background: transparent; border-color: var(--blue); }
.filter-btn  { --llena: var(--blue); }
.filter-btn:hover { background: transparent; border-color: var(--blue); color: var(--white); }
.filter-btn.active { --llena: transparent; }
.round-btn   { --llena: var(--blue); }
.round-btn:hover { background: transparent; border-color: var(--blue); }

/* ------------------------------------------------------------
   2) TARJETAS — un rombo le da la vuelta a la que estás viendo
   El rombo recorre el contorno exacto de la tarjeta, esquinas
   redondeadas incluidas. Lo hace el navegador siguiendo la
   forma del borde; no hay que dibujar ninguna ruta a mano.
   ------------------------------------------------------------ */
@supports (offset-path: border-box) {
  @media (prefers-reduced-motion: no-preference) {
    .stat, .canal-card { position: relative; }
    .stat::before, .canal-card::before {
      content: ''; position: absolute; width: 9px; height: 9px;
      background: var(--blue); border-radius: 2px; rotate: 45deg;
      box-shadow: 0 0 18px rgba(46,111,216,0.95);
      offset-path: border-box; offset-rotate: 0deg; offset-distance: 0%;
      opacity: 0; transition: opacity 300ms ease; pointer-events: none; z-index: 2;
    }
    .stat:hover::before, .canal-card:hover::before {
      opacity: 1; animation: rondaBorde 4.2s linear infinite;
    }
    .stat--blue::before { background: var(--white); box-shadow: 0 0 18px rgba(255,255,255,0.9); }
    .stat--white::before { background: var(--navy-mid); box-shadow: 0 0 16px rgba(12,35,64,0.5); }
  }
}
@keyframes rondaBorde { to { offset-distance: 100%; } }

/* Las esquinitas de las tarjetas se estiran al pasar el cursor */
.stat .corner, .cap .corner {
  transition: width 420ms cubic-bezier(0.2,0.8,0.3,1),
              height 420ms cubic-bezier(0.2,0.8,0.3,1);
}
.stat:hover .corner, .cap:hover .corner { width: 30px; height: 30px; }

/* El enlace de la tarjeta se subraya solo, de izquierda a derecha */
.svc-card a, .canal-card__accion {
  position: relative; display: inline-block; transition: letter-spacing 320ms ease;
}
.svc-card a::after, .canal-card__accion::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0;
  background: var(--blue); transition: width 460ms cubic-bezier(0.2,0.8,0.3,1);
}
.svc-card:hover a::after, .canal-card:hover .canal-card__accion::after { width: 100%; }
.svc-card:hover a, .canal-card:hover .canal-card__accion { letter-spacing: 0.22em; }

/* ------------------------------------------------------------
   3) TÍTULOS — aparecen barridos en diagonal, no de golpe
   El texto se descubre por una línea a 45°, la misma inclinación
   del rombo, y va atada a tu scroll: si subes, se vuelve a tapar.
   ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stats__head h2, .services__head h2, .caps-heading h2, .svc-intro h2,
    .page-hero h1, .contact-info h1, .footer__slogan, .faq-seccion h2 {
      -webkit-mask-image: linear-gradient(135deg, #000 34%, transparent 66%);
      mask-image: linear-gradient(135deg, #000 34%, transparent 66%);
      -webkit-mask-size: 330% 330%; mask-size: 330% 330%;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      animation: barrido45 linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 36%;
    }
  }
}
@keyframes barrido45 {
  from { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
  to   { -webkit-mask-position: 0% 0%;     mask-position: 0% 0%; }
}

/* ------------------------------------------------------------
   4) EL PUNTITO DE LAS ETIQUETAS ES UN ROMBO QUE GIRA
   ------------------------------------------------------------ */
.eyebrow .dot {
  border-radius: 2px;
  animation: rombitoGira 5s cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes rombitoGira {
  0%, 45%   { rotate: 45deg; }
  55%, 100% { rotate: 135deg; }
}

/* ------------------------------------------------------------
   5) LA BARRA DE SCROLL TERMINA EN UN ROMBO
   ------------------------------------------------------------ */
.progress-bar::after {
  content: ''; position: absolute; right: -4px; top: 50%;
  width: 9px; height: 9px; background: var(--blue);
  border-radius: 2px; transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 16px rgba(46,111,216,1);
}

/* ------------------------------------------------------------
   6) LA CINTA: los rombos separadores giran al pasar
   ------------------------------------------------------------ */
.marquee__sep { transition: rotate 400ms ease; }
.marquee:hover .marquee__sep { rotate: 135deg; }

@media (prefers-reduced-motion: reduce) {
  .eyebrow .dot, .marquee__sep { animation: none; rotate: 45deg; }
}

/* ============================================================
   CADA FAMILIA DE FICHAS TIENE SU PROPIA REACCIÓN
   Todas hablan el idioma de los 45°, pero ninguna hace lo mismo
   que la de al lado. El rombo que le da la vuelta al borde se
   quedó SOLO en dos lugares —las estadísticas de Inicio y los
   canales de Contacto— para que siga siendo un detalle y no un
   tic que se repite en toda la página.
   ============================================================ */

/* ------------------------------------------------------------
   SERVICIOS DE INICIO — el número toma el mando
   El 01, 02, 03 deja de ser un adorno de esquina: crece hasta
   convertirse en la marca de agua de la ficha, y el texto pasa
   al frente. La ficha se reordena sola.
   ------------------------------------------------------------ */
.svc-card__num {
  transition: transform 900ms cubic-bezier(0.16,1,0.3,1),
              -webkit-text-stroke-color 700ms ease;
  transform-origin: left top; will-change: transform;
}
.svc-card:hover .svc-card__num {
  transform: scale(3.1) translate(-3px, 4px);
  -webkit-text-stroke-color: rgba(46,111,216,0.16);
}
.svc-card__tag { transition: opacity 600ms ease, transform 700ms cubic-bezier(0.16,1,0.3,1); }
.svc-card:hover .svc-card__tag { opacity: 0.35; transform: translateX(10px); }
.svc-card h3, .svc-card p, .svc-card a { position: relative; z-index: 1; }
.svc-card__top { position: relative; z-index: 0; }
.svc-card h3 { transition: transform 700ms cubic-bezier(0.16,1,0.3,1); }
.svc-card:hover h3 { transform: translateY(-6px); }

/* ------------------------------------------------------------
   CATÁLOGO DE SERVICIOS — la esquina se abre en diagonal
   Un triángulo azul crece desde la esquina de abajo a la
   izquierda, en la misma diagonal del rombo. Nada gira, nada
   recorre: solo se abre.
   ------------------------------------------------------------ */
.svc-item__cuerpo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(45deg, rgba(46,111,216,0.3) 0%, rgba(46,111,216,0.04) 48%, transparent 62%);
  clip-path: polygon(0 100%, 0 100%, 0 100%);
  transition: clip-path 780ms cubic-bezier(0.16,1,0.3,1);
}
.svc-item:hover .svc-item__cuerpo::after,
.svc-item:focus-within .svc-item__cuerpo::after { clip-path: polygon(0 100%, 0 -30%, 135% 100%); }
.svc-item__cuerpo > * { position: relative; z-index: 1; }
.svc-item__cat { transition: transform 700ms cubic-bezier(0.16,1,0.3,1), border-color 500ms ease; }
.svc-item:hover .svc-item__cat { transform: translateX(6px); border-color: var(--blue); }

/* ------------------------------------------------------------
   CAPACIDADES (Nosotros) — se traza la línea del expediente
   El código [ C-01 ] se separa y una línea fina se dibuja de
   lado a lado, como cuando una terminal termina de leer.
   ------------------------------------------------------------ */
.cap__top { position: relative; }
.cap__top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 1px;
  background: linear-gradient(90deg, var(--blue) 0%, rgba(46,111,216,0.15) 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 850ms cubic-bezier(0.16,1,0.3,1);
}
.cap:hover .cap__top::after { transform: scaleX(1); }
.cap__code { transition: letter-spacing 800ms cubic-bezier(0.16,1,0.3,1), color 500ms ease; }
.cap:hover .cap__code { letter-spacing: 0.42em; color: var(--blue-soft); }
.cap__live { transition: transform 700ms cubic-bezier(0.16,1,0.3,1); }
.cap:hover .cap__live { transform: scale(1.9); }

/* ------------------------------------------------------------
   VALORES (Nosotros) — el rombo del valor da media vuelta
   El rombito de arriba gira 180° y crece, y el texto se recorre
   para dejarle sitio. Es la ficha que más se mueve, porque son
   solo tres y aguantan el protagonismo.
   ------------------------------------------------------------ */
.value .mark { transition: transform 950ms cubic-bezier(0.16,1,0.3,1), box-shadow 700ms ease; }
.value:hover .mark { transform: rotate(225deg) scale(2); }
.value--navy:hover .mark { box-shadow: 0 0 40px rgba(46,111,216,0.9); }
.value h3 { transition: transform 800ms cubic-bezier(0.16,1,0.3,1); }
.value p  { transition: transform 800ms cubic-bezier(0.16,1,0.3,1) 70ms; }
.value:hover h3, .value:hover p { transform: translateX(12px); }

/* ------------------------------------------------------------
   PREGUNTAS FRECUENTES — una barra marca la que estás leyendo
   Crece de arriba hacia abajo por el costado izquierdo, y se
   queda puesta mientras la pregunta esté abierta.
   ------------------------------------------------------------ */
.faq-item { position: relative; }
.faq-item::before {
  content: ''; position: absolute; left: 0; top: 13px; bottom: 13px; width: 2px;
  background: var(--blue); border-radius: 2px; pointer-events: none;
  transform: scaleY(0); transform-origin: top;
  transition: transform 700ms cubic-bezier(0.16,1,0.3,1);
}
.faq-item:hover::before, .faq-item[open]::before { transform: scaleY(1); }

/* ------------------------------------------------------------
   Las esquinitas de las estadísticas y capacidades, más calmadas
   ------------------------------------------------------------ */
.stat .corner, .cap .corner {
  transition: width 850ms cubic-bezier(0.16,1,0.3,1),
              height 850ms cubic-bezier(0.16,1,0.3,1);
}

/* El subrayado de los enlaces de ficha, también más calmado */
.svc-card a::after, .canal-card__accion::after { transition: width 800ms cubic-bezier(0.16,1,0.3,1); }
.svc-card a, .canal-card__accion { transition: letter-spacing 800ms cubic-bezier(0.16,1,0.3,1); }

@media (prefers-reduced-motion: reduce) {
  .svc-card__num, .svc-card__tag, .svc-card h3, .svc-item__cuerpo::after, .svc-item__cat,
  .cap__top::after, .cap__code, .cap__live, .value .mark, .value h3, .value p,
  .faq-item::before { transition: none; }
  .svc-item__cuerpo::after { display: none; }
}

/* ============================================================
   EL FILO DE LUZ AZUL — el "LED" que le da la vuelta
   Un abanico de luz gira alrededor del recuadro y se asoma solo
   por el borde: detrás va el mismo abanico desenfocado, que es
   lo que hace el resplandor sobre el fondo. El color sale tal
   cual del kit de marca: Azul #2E6FD8 con la cresta en Celeste
   #BFD9FF. En la rejilla solo se enciende el recuadro que tocas;
   en la ficha abierta gira todo el tiempo.
   ============================================================ */
@property --led-giro {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes ledGira { to { --led-giro: 360deg; } }

.svc-item__led, .ficha__led, .svc-cierre__led {
  position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--led-giro),
    rgba(46,111,216,0) 0deg,
    rgba(46,111,216,0) 46deg,
    #2E6FD8 76deg,
    #BFD9FF 92deg,
    #2E6FD8 108deg,
    rgba(46,111,216,0) 140deg,
    rgba(46,111,216,0) 360deg);
}
/* El gemelo desenfocado: el resplandor que se derrama al fondo */
.svc-item__led::after, .ficha__led::after, .svc-cierre__led::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: inherit; filter: blur(13px); opacity: 0.75;
}

/* En la rejilla: apagado en reposo, encendido al tocar el recuadro */
.svc-item__led { opacity: 0; transition: opacity 320ms ease; }
.svc-item:hover .svc-item__led, .svc-item:focus-within .svc-item__led {
  opacity: 1; animation: ledGira 3.6s linear infinite;
}
/* En la ficha abierta y en el cierre, siempre encendido */
.ficha__led { inset: -2px; animation: ledGira 5s linear infinite; }
.svc-cierre__led { opacity: 0.85; animation: ledGira 7s linear infinite; }

/* Sin @property el ángulo no se puede animar: en vez de un LED muerto,
   se deja un filo azul fijo, que sigue leyéndose como borde de luz. */
@supports not (background: conic-gradient(from var(--led-giro), red, blue)) {
  .svc-item__led, .ficha__led, .svc-cierre__led {
    background: linear-gradient(135deg, #BFD9FF 0%, #2E6FD8 42%, rgba(46,111,216,0.15) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-item__led, .ficha__led, .svc-cierre__led {
    animation: none;
    background: linear-gradient(135deg, #BFD9FF 0%, #2E6FD8 42%, rgba(46,111,216,0.2) 100%);
  }
}

/* ============================================================
   FICHA DEL SERVICIO EN GRANDE
   El recuadro que tocas crece hasta el centro de la pantalla; lo
   de atrás se oscurece y se desenfoca para que no compita. Se
   cierra con la ✕, con Esc o tocando fuera.
   ============================================================ */
.ficha { position: fixed; inset: 0; z-index: 1700; display: grid; place-items: center; padding: 24px; }
.ficha[hidden] { display: none; }
.ficha__fondo {
  position: absolute; inset: 0; background: rgba(3,10,20,0.82);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  animation: fadeIn 280ms ease-out both;
}
.ficha__caja {
  position: relative; width: min(720px, 100%); max-height: min(86vh, 860px);
  border-radius: 24px; display: flex;
  animation: fichaEntra 460ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes fichaEntra {
  from { opacity: 0; transform: translateY(26px) scale(0.965); }
  to   { opacity: 1; transform: none; }
}
.ficha__panel {
  position: relative; z-index: 1; flex: 1; min-height: 0; border-radius: inherit;
  background: linear-gradient(165deg, #10284A 0%, #081A31 100%);
  border: 1px solid rgba(255,255,255,0.1); overflow: hidden;
}
.ficha__scroll { max-height: min(86vh, 860px); overflow-y: auto; padding: 40px 44px 36px; }
.ficha__scroll::-webkit-scrollbar { width: 10px; }
.ficha__scroll::-webkit-scrollbar-thumb { background: rgba(46,111,216,0.45); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.ficha h2 {
  margin-top: 16px; font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 42px); line-height: 0.98; color: var(--white);
}
.ficha__cerrar {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(8,26,49,0.75); border: 1px solid rgba(255,255,255,0.18);
  transition: background 220ms ease, border-color 220ms ease, transform 400ms cubic-bezier(0.16,1,0.3,1);
}
.ficha__cerrar::before, .ficha__cerrar::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.6px;
  background: var(--white); border-radius: 2px;
}
.ficha__cerrar::before { transform: translate(-50%,-50%) rotate(45deg); }
.ficha__cerrar::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.ficha__cerrar:hover { background: var(--blue); border-color: var(--blue); transform: rotate(90deg); }
.ficha__cuerpo { margin-top: 22px; }
.ficha__cuerpo p { font-size: 15.5px; line-height: 1.72; color: rgba(255,255,255,0.75); }
.ficha__cuerpo h4 {
  margin: 30px 0 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--blue-legible);
}
.ficha__cuerpo ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ficha__cuerpo li {
  position: relative; padding-left: 24px; font-size: 15px; line-height: 1.62; color: rgba(255,255,255,0.72);
}
/* El rombo de la marca haciendo de viñeta */
.ficha__cuerpo li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  background: var(--blue); border-radius: 2px; transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(46,111,216,0.6);
}
.ficha__pie {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 12px;
}
body.ficha-abierta { overflow: hidden; }

/* ============================================================
   CIERRE DEL CATÁLOGO — el bot que arma el número
   ============================================================ */
.svc-cierre { position: relative; margin-top: 72px; border-radius: 26px; }
.svc-cierre__cuerpo {
  position: relative; z-index: 1; border-radius: inherit; overflow: hidden;
  background: linear-gradient(165deg, #10284A 0%, #081A31 100%);
  border: 1px solid rgba(255,255,255,0.1);
  padding: clamp(34px, 5vw, 58px); text-align: center;
}
.svc-cierre h2 {
  margin-top: 20px; font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 52px); line-height: 0.98; color: var(--white);
}
.svc-cierre h2 .accent { color: var(--blue); }
.svc-cierre p { margin: 22px auto 0; max-width: 560px; font-size: 15px; line-height: 1.68; color: rgba(255,255,255,0.68); }
.svc-cierre__acciones { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.svc-cierre .eyebrow { justify-content: center; }

/* ---------- Paquetes armados (servicios.html) ----------
   Mismo lenguaje que las tarjetas del catálogo: gradiente navy, borde
   sutil y el mismo radio. Cambia el ritmo — aquí manda la lista de lo
   que trae cada paquete, no la ficha desplegable.                      */
.packs { margin-top: 96px; }
.packs__intro { text-align: center; max-width: 640px; margin: 0 auto; }
.packs__intro .eyebrow { justify-content: center; }
.packs__intro h2 {
  margin-top: 20px; font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 54px); line-height: 0.98; color: var(--white);
}
.packs__intro h2 .accent { color: var(--blue); }
.packs__intro p { margin-top: 20px; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.65); }

.packs__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px; margin-top: 48px;
}
.pack {
  position: relative; border-radius: 20px; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(165deg, #10284A 0%, #0A1E3A 100%);
  border: 1px solid rgba(255,255,255,0.09);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              border-color 0.25s ease, box-shadow 0.25s ease;
}
.pack:hover {
  transform: translateY(-6px); border-color: rgba(46,111,216,0.6);
  box-shadow: 0 24px 60px rgba(4,16,31,0.7), 0 0 40px rgba(46,111,216,0.12);
}
.pack__num {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--blue-legible); padding: 6px 12px; border-radius: 999px;
  background: rgba(46,111,216,0.14); border: 1px solid rgba(46,111,216,0.4);
}
.pack h3 {
  font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  font-size: 22px; line-height: 1.05; color: var(--white);
}
.pack > p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.65); }
.pack ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.pack li {
  position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.55;
  color: rgba(255,255,255,0.72);
}
/* El rombo de la marca hace de viñeta */
.pack li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 6px; height: 6px; background: var(--blue); transform: rotate(45deg);
}
@media (max-width: 640px) {
  .packs { margin-top: 68px; }
  .pack { padding: 26px 22px; }
}

/* El rombo del título también en las portadas internas */
.page-hero h1 .gem-inline {
  display: inline-block; width: 0.13em; height: 0.13em; background: var(--blue);
  border-radius: 12%; transform: rotate(45deg) translateY(-0.3em); margin-left: 0.14em;
  box-shadow: 0 0 40px rgba(46,111,216,0.7);
}

/* ============================================================
   PORTADA DEL CATÁLOGO (Servicios)
   Dos frases grandes, tres datos que dicen de qué tamaño es el
   catálogo, y el isotipo con volumen girando a la derecha: el
   mismo componente del inicio, sin código nuevo.
   ============================================================ */
.page-hero--catalogo { padding: 178px 24px 96px; }
.page-hero__resplandor {
  position: absolute; top: -240px; right: 4%;
  width: min(920px, 90vw); height: 860px; pointer-events: none;
  background: radial-gradient(circle, rgba(46,111,216,0.2) 0%, rgba(46,111,216,0.06) 40%, rgba(46,111,216,0) 68%);
}
.tile--portada {
  top: 50%; right: 6%; translate: 0 -50%;
  --tam: clamp(118px, 14.5vw, 208px); --giro: 21s; --flota: 8.5s;
  --cara-a: #2A5EA8; --cara-b: #0E2A50; --canto-a: #4C82C4; --canto-b: #0C2444;
  --halo: 0.3; --brillo: 72px;
}
/* Ancho de sobra para las dos frases y ni un píxel de la columna del
   rombo: cada frase tiene que caber en un solo renglón. */
.page-hero--catalogo h1 { max-width: 900px; }

/* Los tres datos: número grande y etiqueta en versalitas, separados
   por una línea fina, como una ficha técnica. */
.portada-datos {
  position: relative; margin: 52px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 20px 0;
}
.portada-datos li { display: flex; align-items: center; gap: 15px; padding-right: 44px; }
.portada-datos li + li { padding-left: 44px; border-left: 1px solid rgba(255,255,255,0.14); }
.portada-datos__num {
  font-weight: 800; font-stretch: 62%; font-size: clamp(38px, 4.4vw, 52px);
  line-height: 1; color: var(--white);
}
.portada-datos__num small { font-size: 0.4em; color: var(--blue-soft); margin-left: 3px; }
.portada-datos__eti {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 1.65; color: var(--gray-suave);
}

@media (max-width: 900px) {
  .page-hero--catalogo { padding: 150px 24px 76px; }
  /* El rombo se sube a la esquina, donde no le estorba al texto */
  .tile--portada { top: 118px; right: 6%; translate: none; --tam: clamp(72px, 12vw, 104px); }
  .page-hero--catalogo h1 { max-width: none; }
  .page-hero--catalogo p { max-width: 34em; }
}
@media (max-width: 700px) {
  /* Tres columnas fijas: en fila se envolvían y el tercer dato quedaba
     abajo con su línea divisoria colgando de la nada. */
  .portada-datos {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 40px; gap: 0;
  }
  .portada-datos li { flex-direction: column; align-items: flex-start; gap: 7px; padding: 0 0 0 14px; }
  .portada-datos li:first-child { padding-left: 0; }
  .portada-datos li + li { border-left: 1px solid rgba(255,255,255,0.14); }
  .portada-datos__num { font-size: clamp(26px, 8vw, 34px); }
  .portada-datos__eti { font-size: 9.5px; letter-spacing: 0.12em; }
  .tile--portada { top: 104px; --tam: 62px; }
}

/* ════════════════════════════════════════════════════════════
   PÁGINA DE DEMOS (demos.html)
   Reusa los componentes del sitio; aquí solo lo propio: las
   tarjetas-enlace del catálogo de demos y los chips de giro.
   ════════════════════════════════════════════════════════════ */
.demos-hero__acciones { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.demos-nota { position: relative; z-index: 2; margin-top: 22px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 9px; }
.demos-nota .gema { width: 8px; height: 8px; background: #C08A2E; border-radius: 2px; transform: rotate(45deg); flex: none; }

a.cap { color: var(--light); }
a.cap h3 { color: var(--white); }
.cap__ir { margin-top: auto; padding-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-legible); }
.cap__ir::after { content: " →"; }
a.cap:hover .cap__ir { color: var(--blue-soft); }
.cap--cta { background: var(--blue); border-color: var(--blue); }
.cap--cta:hover { border-color: var(--white); }
.cap--cta .cap__code { color: rgba(255,255,255,0.75); }
.cap--cta .cap__live { background: var(--white); }
.cap--cta p { color: rgba(255,255,255,0.88); }
.cap--cta .cap__ir { color: var(--white); }

.demo-giros { text-align: center; }
.demo-giros .svc-filters { margin-bottom: 0; }
.demo-giros__nota { margin-top: 26px; font-size: 13px; color: rgba(255,255,255,0.5); }


/* ════════════════════════════════════════════════════════════
   REDES SOCIALES
   Instagram y Facebook: en el pie de todas las páginas y como
   canal propio en Contacto.
   El icono NO es un archivo suelto: va aquí como máscara, así
   toma el color del texto (y el de su hover) sin duplicar SVG
   en ocho páginas y sin agregar piezas gráficas que después se
   separen del kit. Son los glifos de esas plataformas, lo único
   que se puede usar para enlazar un perfil.
   ════════════════════════════════════════════════════════════ */
.redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.footer__col.right .redes { justify-content: flex-end; }

.red {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.red:hover { color: var(--white); border-color: rgba(46,111,216,0.65); background: rgba(46,111,216,0.16); }

.icono-red {
  width: 17px; height: 17px; flex: none; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.icono-red--ig {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.7 0 3.06.01 4.12.06 1.06.05 1.79.22 2.42.46.66.26 1.21.6 1.76 1.15.55.55.89 1.1 1.15 1.76.24.63.41 1.36.46 2.42.05 1.06.06 1.4.06 4.11s-.01 3.06-.06 4.12c-.05 1.06-.22 1.79-.46 2.42a4.9 4.9 0 0 1-1.15 1.76c-.55.55-1.1.89-1.76 1.15-.63.24-1.36.41-2.42.46-1.06.05-1.4.06-4.12.06s-3.06-.01-4.12-.06c-1.06-.05-1.79-.22-2.42-.46a4.9 4.9 0 0 1-1.76-1.15 4.9 4.9 0 0 1-1.15-1.76c-.24-.63-.41-1.36-.46-2.42C2.01 15.06 2 14.71 2 12s.01-3.06.06-4.12c.05-1.06.22-1.79.46-2.42.26-.66.6-1.21 1.15-1.76.55-.55 1.1-.89 1.76-1.15.63-.24 1.36-.41 2.42-.46C8.94 2.01 9.29 2 12 2Zm0 1.8c-2.67 0-2.99.01-4.04.06-.98.04-1.5.2-1.86.34-.46.18-.8.4-1.15.75-.35.35-.57.68-.75 1.15-.14.35-.3.87-.34 1.85-.05 1.05-.06 1.37-.06 4.05s.01 3 .06 4.05c.04.98.2 1.5.34 1.85.18.46.4.8.75 1.15.35.35.68.57 1.15.75.35.14.87.3 1.85.34 1.05.05 1.37.06 4.05.06s3-.01 4.05-.06c.98-.04 1.5-.2 1.85-.34.46-.18.8-.4 1.15-.75.35-.35.57-.68.75-1.15.14-.35.3-.87.34-1.85.05-1.05.06-1.37.06-4.05s-.01-3-.06-4.05c-.04-.98-.2-1.5-.34-1.85a3.1 3.1 0 0 0-.75-1.15 3.1 3.1 0 0 0-1.15-.75c-.35-.14-.87-.3-1.85-.34-1.05-.05-1.37-.06-4.05-.06Zm0 3.07a5.13 5.13 0 1 1 0 10.26 5.13 5.13 0 0 1 0-10.26Zm0 1.8a3.33 3.33 0 1 0 0 6.66 3.33 3.33 0 0 0 0-6.66Zm5.34-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.7 0 3.06.01 4.12.06 1.06.05 1.79.22 2.42.46.66.26 1.21.6 1.76 1.15.55.55.89 1.1 1.15 1.76.24.63.41 1.36.46 2.42.05 1.06.06 1.4.06 4.11s-.01 3.06-.06 4.12c-.05 1.06-.22 1.79-.46 2.42a4.9 4.9 0 0 1-1.15 1.76c-.55.55-1.1.89-1.76 1.15-.63.24-1.36.41-2.42.46-1.06.05-1.4.06-4.12.06s-3.06-.01-4.12-.06c-1.06-.05-1.79-.22-2.42-.46a4.9 4.9 0 0 1-1.76-1.15 4.9 4.9 0 0 1-1.15-1.76c-.24-.63-.41-1.36-.46-2.42C2.01 15.06 2 14.71 2 12s.01-3.06.06-4.12c.05-1.06.22-1.79.46-2.42.26-.66.6-1.21 1.15-1.76.55-.55 1.1-.89 1.76-1.15.63-.24 1.36-.41 2.42-.46C8.94 2.01 9.29 2 12 2Zm0 1.8c-2.67 0-2.99.01-4.04.06-.98.04-1.5.2-1.86.34-.46.18-.8.4-1.15.75-.35.35-.57.68-.75 1.15-.14.35-.3.87-.34 1.85-.05 1.05-.06 1.37-.06 4.05s.01 3 .06 4.05c.04.98.2 1.5.34 1.85.18.46.4.8.75 1.15.35.35.68.57 1.15.75.35.14.87.3 1.85.34 1.05.05 1.37.06 4.05.06s3-.01 4.05-.06c.98-.04 1.5-.2 1.85-.34.46-.18.8-.4 1.15-.75.35-.35.57-.68.75-1.15.14-.35.3-.87.34-1.85.05-1.05.06-1.37.06-4.05s-.01-3-.06-4.05c-.04-.98-.2-1.5-.34-1.85a3.1 3.1 0 0 0-.75-1.15 3.1 3.1 0 0 0-1.15-.75c-.35-.14-.87-.3-1.85-.34-1.05-.05-1.37-.06-4.05-.06Zm0 3.07a5.13 5.13 0 1 1 0 10.26 5.13 5.13 0 0 1 0-10.26Zm0 1.8a3.33 3.33 0 1 0 0 6.66 3.33 3.33 0 0 0 0-6.66Zm5.34-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E");
}
.icono-red--fb {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.9 3.77-3.9 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.9h-2.34V22c4.78-.76 8.44-4.92 8.44-9.94Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.9 3.77-3.9 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.9h-2.34V22c4.78-.76 8.44-4.92 8.44-9.94Z'/%3E%3C/svg%3E");
}

/* En Contacto la red es una tarjeta más, con su glifo grande de marca
   de agua en la esquina: se reconoce antes de leer la etiqueta. */
.canal-card { position: relative; }
.canal-card__glifo {
  position: absolute; top: 28px; right: 26px; width: 30px; height: 30px;
  color: var(--blue-legible); opacity: 0.55;
  transition: opacity 250ms ease, transform 250ms ease;
}
.canal-card:hover .canal-card__glifo { opacity: 1; transform: scale(1.08); }

@media (max-width: 600px) {
  /* En el pie móvil todo se alinea a la izquierda; las redes también. */
  .footer__col.right .redes { justify-content: flex-start; }
}

/* Texto que existe para Google y para los lectores de pantalla, pero que
   no se ve. Se usa donde una sección no lleva título a la vista y sin él
   el documento saltaría de un h1 a un h3, que es como entregarle a Google
   un índice con un nivel arrancado. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}