/* =============================================================
   METAPROTEC · ESTILOS (versión 5 · dirección Fromanother)
   Una forma orgánica difuminada vive fija detrás de toda la página
   y cambia de color con cada escena; encima, titulares grandes y
   centrados, capítulos «01 — Sección», listas tipográficas por
   grupos y un carrusel de proyectos. Paleta y tipografías de
   Metaprotec.
   ============================================================= */

/* ---------- 1. Tipografías ---------- */
@font-face {
  font-family: "Francy";
  src: url("../assets/fonts/francy-regular.woff") format("woff"),
       url("../assets/fonts/francy-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ----------
   Referencias PANTONE confirmadas; los HEX son APROXIMACIONES
   PROVISIONALES para pantalla, pendientes del manual de marca. */
:root {
  --c-7546: #253746;    /* PANTONE 7546 C · base de identidad */
  --c-663: #e5e1e6;     /* PANTONE 663 C · luz y legibilidad */
  --c-7699: #34657f;    /* PANTONE 7699 C · acento interactivo */
  --c-blackc: #2d2926;  /* PANTONE Black C · contraste y profundidad */
  --c-deep: #0c1a26;    /* 7546 C profundo · fondo oscuro de todas las escenas */
  --c-black: #000000;   /* Negro puro · reservado */
  --c-paper: #f5f3f6;   /* 663 C aclarado: el blanco de la marca (fondos claros y texto sobre oscuro) */
  --c-white: #ffffff;   /* Blanco puro: solo hover de botones claros y campos de formulario */

  /* Espaciado entre letras. Francy es una display muy apretada:
     necesita más aire cuanto más pequeña se usa. */
  --tr-display: 0.015em; /* titulares grandes */
  --tr-caps: 0.025em;    /* titulares en mayúsculas */
  --tr-title: 0.02em;    /* títulos medios (≈ 24–60 px) */
  --tr-small: 0.035em;   /* Francy en tamaños pequeños (< 26 px) */
  --tr-body: 0.005em;    /* Raleway en texto corrido */

  --scene-bg: var(--c-deep); /* lo cambia JS según la escena activa */

  --font-sans: "Raleway", "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* respaldo provisional */
  --font-accent: "Francy", "Raleway", Arial, sans-serif;                    /* respaldo provisional */

  --fs-xs: 0.8rem;
  --fs-sm: 0.92rem;
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.1rem, 0.98rem + 0.5vw, 1.36rem);
  --fs-row: clamp(1.45rem, 1.05rem + 1.7vw, 2.6rem);
  --fs-md: clamp(2.1rem, 1.3rem + 3.2vw, 4.2rem);
  --fs-lg: clamp(2.5rem, 1.1rem + 5.6vw, 6.8rem);
  --fs-xl: clamp(2.5rem, 8.6vw, 8.6rem);

  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --max: 1440px;
  --section-y: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  --header-h: 88px;
  --radius: 14px;

  --dur-fast: 180ms;
  --dur-med: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color-scheme: dark;
}

/* Tonos de texto por superficie.
   Contrastes (aprox. provisionales): blanco/7546 profundo 16:1 · texto
   secundario/7546 profundo ≥ 11:1 · Black C/blanco 13:1 · 7699/blanco 5,6:1.
   El 7699 sobre fondos oscuros solo se usa en líneas y superficies. */
.tone-dark {
  --fg: var(--c-paper); --muted: rgba(245, 243, 246, 0.86); --faint: rgba(245, 243, 246, 0.68);
  --line: rgba(245, 243, 246, 0.22); --line-strong: rgba(245, 243, 246, 0.46); --hover: rgba(245, 243, 246, 0.08);
  --btn-bg: var(--c-paper); --btn-fg: var(--c-7546); --btn-hover: var(--c-white); --mark: var(--c-paper);
  --field-bg: rgba(245, 243, 246, 0.07); --field-bg-focus: rgba(245, 243, 246, 0.13); --card: rgba(37, 55, 70, 0.5); --focus: var(--c-paper);
  color-scheme: dark;
}
.tone-light {
  --fg: var(--c-blackc); --muted: rgba(45, 41, 38, 0.86); --faint: rgba(45, 41, 38, 0.66);
  --line: rgba(45, 41, 38, 0.16); --line-strong: rgba(45, 41, 38, 0.4); --hover: rgba(37, 55, 70, 0.08);
  --btn-bg: var(--c-7546); --btn-fg: var(--c-paper); --btn-hover: var(--c-7699); --mark: var(--c-7699);
  --field-bg: var(--c-white); --field-bg-focus: var(--c-white); --card: var(--c-white); --focus: var(--c-7546);
  color-scheme: light;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); overflow-x: clip; background: var(--c-deep); }
body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; letter-spacing: var(--tr-body); color: var(--c-paper); background: var(--c-deep); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, iframe, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { line-height: 1.05; text-wrap: balance; font-weight: 600; }
ol, ul { list-style: none; padding: 0; }
[hidden] { display: none !important; }
::selection { background: var(--c-7699); color: var(--c-paper); }
:focus-visible { outline: 2px solid var(--fg, var(--c-paper)); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: fixed; left: 1rem; top: -100px; z-index: 600; padding: 0.6rem 1rem; background: var(--c-paper); color: var(--c-7546); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: calc(1rem + env(safe-area-inset-top, 0px)); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { position: relative; width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
main, .site-footer { position: relative; z-index: 1; }

/* ---------- 4. Escenario fijo (forma orgánica) ---------- */
.stage {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: var(--scene-bg); transition: background-color 0.6s var(--ease-soft);
}
.orb { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(12px) saturate(1.02); transform: scale(1.08); opacity: 1; transition: opacity 0.9s var(--ease-soft); }
.stage.is-light .orb { opacity: 0.5; }
.grain {
  position: absolute; inset: 0; opacity: 0.12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- 5. Titulares por líneas y capítulos ---------- */
.headline { color: var(--fg); line-height: 0.98; letter-spacing: var(--tr-display); font-weight: 400; }
.headline-xl { font-size: var(--fs-xl); }
.headline-lg { font-size: var(--fs-lg); }
.headline-md { font-size: var(--fs-md); }
.line { display: block; overflow: hidden; padding-block: 0.14em 0.1em; margin-block: -0.14em -0.1em; }
.line-in { display: block; will-change: transform; }
.t-accent { font-family: var(--font-accent); font-weight: 400; font-synthesis: none; }
.t-light { font-family: var(--font-sans); font-weight: 300; }
.headline .t-light { font-family: var(--font-accent); font-weight: 400; color: var(--faint); }
.tone-light .headline .t-light { color: var(--c-7699); }

.chapter {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  font-size: 0.98rem; color: var(--muted);
}
.chapter b { font-weight: 600; font-size: 0.9rem; color: var(--fg); }
.chapter b::after { content: ""; display: inline-block; width: 2rem; height: 1px; background: currentColor; margin-left: 0.7rem; vertical-align: middle; }
.chapter i, .sub-label i, .svc-group-label i { font-style: italic; font-weight: 500; color: var(--fg); }
.sub-label { display: inline-flex; gap: 0.8rem; align-items: baseline; font-size: 0.95rem; color: var(--muted); }
.sub-label b { font-weight: 600; font-size: 0.9rem; }

.statement { text-align: center; display: grid; justify-items: center; gap: 0; }
.statement .headline { max-width: 14ch; }
.statement-lead { margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); max-width: 36ch; font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; letter-spacing: var(--tr-body); color: var(--muted); text-wrap: balance; }
.projects-note { margin-top: 0.9rem; font-size: 0.95rem; font-style: italic; font-weight: 500; color: var(--muted); }
.kicker { font-size: 0.95rem; font-style: italic; font-weight: 500; letter-spacing: 0.01em; color: var(--muted); }
.lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; max-width: 42ch; color: var(--fg); }
.quiet { color: var(--muted); max-width: 52ch; }

/* ---------- 6. Botones, chips y enlaces (150–250 ms) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 52px; padding: 0.85rem 1.55rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.98rem; line-height: 1.25; letter-spacing: 0.01em; text-decoration: none; text-align: center;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.btn-arrow { display: inline-block; transition: transform var(--dur-med) var(--ease-out); }
.btn:hover, .btn:focus-visible { background: var(--btn-hover); }
.btn:hover .btn-arrow, .btn:focus-visible .btn-arrow { transform: translateX(5px); }
.btn:active { transform: scale(0.97); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--hover); border-color: var(--fg); }
.btn-outline:hover .btn-arrow, .btn-outline:focus-visible .btn-arrow { transform: translateY(4px); }
.btn-small { min-height: 42px; padding: 0.5rem 1.1rem; font-size: 0.92rem; }
.btn.is-sending { pointer-events: none; }
.btn.is-sending .btn-arrow { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.45rem 0.95rem;
  font-size: 0.92rem; font-weight: 600; text-decoration: none; color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: 999px;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.chip:hover, .chip:focus-visible { border-color: var(--fg); background: var(--hover); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="false"] { border-style: dashed; }
.chip-dark { --fg: var(--c-7546); --line-strong: rgba(37, 55, 70, 0.4); --hover: rgba(37, 55, 70, 0.1); }
.link-arrow { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; text-decoration: none; color: var(--fg); padding-bottom: 3px; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform var(--dur-med) var(--ease-out); }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(0.35); }
.link-arrow:hover .btn-arrow, .link-arrow:focus-visible .btn-arrow { transform: translateX(5px); }

/* ---------- 7. Cabecera, progreso, índice y menú ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 300; padding-top: env(safe-area-inset-top, 0px);
  --fg: var(--c-paper); --muted: var(--c-paper); --line: rgba(245, 243, 246, 0.2); --line-strong: rgba(245, 243, 246, 0.42);
  --btn-bg: var(--c-paper); --btn-fg: var(--c-7546); --btn-hover: var(--c-white); --hover: rgba(245, 243, 246, 0.07);
  color: var(--c-paper);
  /* Siempre opaca, también arriba del todo: ni el fondo animado ni el vídeo se transparentan detrás del menú */
  background: var(--c-deep);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
}
.site-header.is-solid { box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { max-width: var(--max); margin-inline: auto; height: var(--header-h); padding-inline: var(--gutter); display: flex; align-items: center; gap: 1.5rem; }
.brand { position: relative; top: 6px; display: inline-flex; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.brand:hover, .brand:focus-visible { transform: scale(1.05); }
.brand img { width: 56px; height: auto; aspect-ratio: 168 / 166; }
@media (max-width: 719px) { .brand img { width: 50px; } }

/* Logo de la cabecera: siempre visible. Cada 5 s, sin prisa:
   un degradado brillante lo cruza en diagonal, deja un halo suave
   y enciende un pequeño destello en la esquina superior.
   El brillo usa el propio emblema como máscara: solo ilumina el dibujo. */
.brand-anim { position: relative; display: block; line-height: 0; animation: logoGlow 5s ease-in-out infinite; }
.brand-anim img { opacity: 0.86; } /* blanco suave en reposo: el brillo destaca por contraste */
.brand-anim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* degradado brillante: bordes azul claro (7699 aclarado) y centro blanco */
  background: linear-gradient(115deg, transparent 32%, rgba(140, 190, 216, 0.85) 41%, #fff 50%, rgba(140, 190, 216, 0.85) 59%, transparent 68%) 120% 0 / 320% 100% no-repeat;
  -webkit-mask: url("../assets/img/emblema-cabecera.webp") center / contain no-repeat;
          mask: url("../assets/img/emblema-cabecera.webp") center / contain no-repeat;
  opacity: 0; animation: logoShine 5s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.brand-anim::before {
  content: ""; position: absolute; z-index: 2; top: 2px; right: 4px; width: 16px; height: 16px; pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 14%, rgba(214, 233, 242, 0.7) 26%, transparent 46%),
    linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, 0.95) 50%, transparent 56%),
    linear-gradient(0deg, transparent 44%, rgba(255, 255, 255, 0.95) 50%, transparent 56%);
  opacity: 0; transform: scale(0) rotate(0deg); animation: logoSpark 5s ease-in-out infinite;
}
@keyframes logoShine {               /* el brillo cruza en unos 2 s */
  0%, 8%    { opacity: 0; background-position: 120% 0; }
  14%       { opacity: 1; }
  44%       { opacity: 1; background-position: -20% 0; }
  52%, 100% { opacity: 0; background-position: -20% 0; }
}
@keyframes logoSpark {
  0%, 36%   { opacity: 0; transform: scale(0) rotate(0deg); }
  43%       { opacity: 1; transform: scale(1) rotate(45deg); }
  52%, 100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
@keyframes logoGlow {
  0%, 10%   { filter: drop-shadow(0 0 0 rgba(150, 196, 220, 0)); }
  30%       { filter: drop-shadow(0 0 10px rgba(170, 210, 230, 0.55)); }
  56%, 100% { filter: drop-shadow(0 0 0 rgba(150, 196, 220, 0)); }
}
/* Movimiento reducido: logo fijo, sin brillo */
@media (prefers-reduced-motion: reduce) {
  .brand-anim { animation: none; filter: none; }
  .brand-anim img { opacity: 1; }
  .brand-anim::after, .brand-anim::before { animation: none; opacity: 0; }
}

.main-nav { position: relative; display: none; margin-left: auto; }
.nav-list { display: flex; gap: 0.1rem; }
/* Enlaces del menú en blanco pleno; el activo se distingue por el peso y la línea inferior */
.nav-list a { display: block; padding: 0.55rem 0.72rem; font-size: 0.93rem; font-weight: 500; text-decoration: none; color: var(--c-paper); transition: color var(--dur-fast); }
.nav-list a:hover, .nav-list a:focus-visible, .nav-list a.is-active { color: var(--c-white); }
.nav-list a.is-active { font-weight: 700; }
.nav-indicator { position: absolute; left: 0; bottom: -2px; height: 2px; width: 1px; background: var(--c-paper); transform-origin: left; transition: transform var(--dur-med) var(--ease-out); opacity: 0; }
.header-cta { display: none; }
.menu-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.4rem 0.2rem 0.4rem 0.6rem; font-weight: 700; }
.menu-toggle-bars { position: relative; width: 28px; height: 10px; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--dur-med) var(--ease-out); }
.menu-toggle-bars::before { top: 0; }
.menu-toggle-bars::after { bottom: 0; }
.menu-toggle:hover .menu-toggle-bars::after, .menu-toggle:focus-visible .menu-toggle-bars::after { transform: scaleX(0.55); transform-origin: right; }
.read-progress { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.read-progress span { display: block; height: 100%; background: var(--c-paper); transform-origin: left; transform: scaleX(var(--p, 0)); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 500; overflow-y: auto;
  padding: calc(0.5rem + env(safe-area-inset-top, 0px)) var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; background: var(--c-deep); color: var(--c-paper);
  --fg: var(--c-paper); --line: rgba(245, 243, 246, 0.2);
  opacity: 0; transition: opacity 0.35s var(--ease-soft);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.mobile-menu-top img { width: 48px; height: 48px; }
.menu-close { display: inline-flex; gap: 0.75rem; align-items: center; min-height: 44px; font-weight: 700; padding: 0.4rem 0.2rem; }
.menu-x { position: relative; width: 24px; height: 24px; }
.menu-x::before, .menu-x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform var(--dur-med) var(--ease-out); }
.menu-x::before { transform: rotate(45deg); }
.menu-x::after { transform: rotate(-45deg); }
.menu-close:hover .menu-x::before, .menu-close:focus-visible .menu-x::before { transform: rotate(135deg); }
.menu-close:hover .menu-x::after, .menu-close:focus-visible .menu-x::after { transform: rotate(45deg); }
.mobile-menu nav { flex: 1; display: grid; place-items: center; padding-block: 2rem; }
.mobile-links { display: grid; justify-items: center; gap: 0.1rem; text-align: center; }
.mobile-links li, .mobile-menu-foot { opacity: 0; transform: translateY(24px); transition: opacity 0.45s var(--ease-soft), transform 0.6s var(--ease-out); transition-delay: calc(0.08s + var(--i) * 0.055s); }
.mobile-menu.is-open .mobile-links li, .mobile-menu.is-open .mobile-menu-foot { opacity: 1; transform: none; }
.mobile-links a { display: inline-block; padding: 0.15rem 0.5rem; font-family: var(--font-accent); font-size: clamp(2rem, 1.2rem + 4.5vw, 4.4rem); line-height: 1.1; letter-spacing: var(--tr-title); text-decoration: none; color: rgba(245, 243, 246, 0.66); transition: color var(--dur-fast); }
.mobile-links a:hover, .mobile-links a:focus-visible, .mobile-links a.is-active { color: var(--c-paper); }
.mobile-menu-foot { display: grid; justify-items: center; gap: 0.3rem; text-align: center; }
.mobile-menu-foot i { font-style: italic; font-weight: 500; color: rgba(245, 243, 246, 0.78); }
.mobile-menu-foot a { font-weight: 700; font-size: 1.15rem; }
.section-index { display: none; }

/* ---------- 8. Escenas ---------- */
.scene { position: relative; color: var(--fg); padding-block: var(--section-y); }

/* 01 · Inicio */
.s-inicio { padding-block: 0; }
.hero {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(1rem, 0.5rem + 2vw, 2.5rem));
  padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  display: grid; justify-items: center; align-content: center; text-align: center;
}
.hero-lead { margin-top: clamp(1.25rem, 1rem + 1.5vw, 2rem); max-width: 50ch; font-size: var(--fs-lead); color: var(--fg); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; }


/* 02 · Quiénes somos */
.values-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem; margin-top: 1.75rem; font-style: italic; font-weight: 500; color: var(--fg); }
.values-line span + span::before { content: "·"; margin-right: 1.6rem; color: var(--mark); font-style: normal; }
.about-grid { display: grid; gap: 2.5rem; margin-top: clamp(4rem, 3rem + 5vw, 9rem); }
.about-sticky { display: grid; gap: 1.25rem; align-content: start; }
.about-visual { position: relative; display: grid; gap: 0.75rem; }
.about-photo { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--c-7546); }
.about-photo img { position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); object-fit: cover; will-change: transform; }
/* Vídeos de prevención, detección y respuesta (fundido entre ellos al cambiar de pilar) */
.pillar-media-in { position: absolute; left: 0; right: 0; top: -40px; bottom: -40px; will-change: transform; }
.pillar-media { isolation: isolate; background: var(--c-deep); }
/* Etalonaje de marca: el vídeo pasa a escala de grises y se tiñe con el azul 7699 sobre el 7546 */
.pillar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.15) brightness(1.02); transition: opacity 0.8s var(--ease-soft); }
.pillar-video.is-on { opacity: 1; }
.pillar-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, var(--c-7699) 0%, var(--c-7546) 100%); mix-blend-mode: color; }
.pillar-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(245, 243, 246, 0.05) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 85% 10%, rgba(52, 101, 127, 0.28), transparent 60%),
    linear-gradient(to top, rgba(12, 26, 38, 0.88) 0%, rgba(12, 26, 38, 0.25) 48%, rgba(12, 26, 38, 0.32) 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 243, 246, 0.14); border-radius: inherit; }
.pillar-hud { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: auto 1fr auto auto; padding: clamp(1rem, 0.7rem + 1.2vw, 1.6rem); color: var(--c-paper); pointer-events: none; }
.pillar-hud-num { font-size: 0.85rem; font-weight: 500; letter-spacing: var(--tr-small); font-variant-numeric: tabular-nums; color: rgba(245, 243, 246, 0.86); }
.pillar-hud-num b { font-weight: 700; color: var(--c-paper); }
.pillar-hud-word { grid-row: 3; font-family: var(--font-accent); font-size: clamp(2rem, 1.2rem + 3.4vw, 4.2rem); line-height: 1; letter-spacing: var(--tr-title); transition: opacity 0.35s var(--ease-soft), transform 0.6s var(--ease-out); }
.pillar-hud-word.is-swap { opacity: 0; transform: translateY(10px); }
.pillar-hud-bar { grid-row: 4; position: relative; height: 2px; margin-top: 1rem; background: rgba(245, 243, 246, 0.22); border-radius: 2px; overflow: hidden; }
.pillar-hud-bar i { position: absolute; inset: 0; background: var(--c-paper); transform: scaleX(0); transform-origin: left; }
.about-visual figcaption { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); min-height: 1.6em; }
.pillar-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pillar-tab { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.45rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: 0.92rem; color: var(--fg); transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.pillar-tab b { font-weight: 400; }
.pillar-tab:hover, .pillar-tab:focus-visible { border-color: var(--fg); background: var(--hover); }
.pillar-tab[aria-selected="true"] { background: var(--c-7546); color: var(--c-paper); border-color: var(--c-7546); }
.about-flow { display: grid; gap: 2rem; align-content: start; }
.pillar-steps { display: grid; }
.pillar-step { position: relative; display: grid; gap: 0.5rem; padding-block: 2rem; border-top: 1px solid var(--line); transition: opacity 0.45s var(--ease-soft); cursor: pointer; }
.pillar-step::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--c-7699); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.pillar-step.is-active::before { transform: scaleX(1); }
.pillar-num { font-size: 0.9rem; font-weight: 600; color: var(--c-7546); }
.pillar-name { font-family: var(--font-accent); font-weight: 400; font-size: clamp(2.4rem, 1.4rem + 4.2vw, 5.4rem); line-height: 1; letter-spacing: var(--tr-display); }
.pillar-short { font-size: var(--fs-lead); font-weight: 500; font-style: italic; }
.pillar-text { color: var(--muted); max-width: 50ch; }
.mission { display: grid; gap: 0.3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.mission span { font-size: 0.95rem; font-style: italic; font-weight: 500; color: var(--c-7699); }

/* 03 · Ciberseguridad */
.services-grid { display: grid; gap: 2.5rem; }
.services-sticky { display: grid; gap: 1.25rem; align-content: start; }
.services-sticky .chapter { margin-bottom: 0.25rem; }
.side-lead { color: var(--muted); max-width: 36ch; }
/* Vista previa del servicio: número y barras arriba, en su propia fila; nombre y necesidad debajo, a todo el ancho.
   Las barras nunca comparten espacio con el texto. */
.service-preview { display: none; position: relative; overflow: hidden; margin-top: 1rem; padding: 1.75rem; min-height: 250px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(37, 55, 70, 0.4); grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 1.25rem; row-gap: 0.6rem; align-content: start; }
.sp-num { grid-column: 1; grid-row: 1; font-size: clamp(3.5rem, 2rem + 4vw, 6rem); font-weight: 200; line-height: 0.9; }
.sp-label { grid-column: 1 / -1; grid-row: 2; margin-top: 0.6rem; font-family: var(--font-accent); font-size: 1.6rem; line-height: 1.12; letter-spacing: var(--tr-small); }
.sp-need { grid-column: 1 / -1; grid-row: 3; color: var(--muted); max-width: 32ch; line-height: 1.5; }
.sp-art { grid-column: 2; grid-row: 1; align-self: center; width: clamp(64px, 6vw, 96px); display: grid; gap: 8px; }
.sp-art i { display: block; height: 8px; border-radius: 4px; background: var(--c-7699); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.sp-art i:nth-child(1) { transform: scaleX(var(--a1, 0.8)); }
.sp-art i:nth-child(2) { transform: scaleX(var(--a2, 0.5)); background: rgba(245, 243, 246, 0.4); }
.sp-art i:nth-child(3) { transform: scaleX(var(--a3, 0.65)); }
.service-preview.is-swapping .sp-num, .service-preview.is-swapping .sp-label, .service-preview.is-swapping .sp-need { animation: swap 0.4s var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.service-groups { display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem); }
.svc-group { transition: opacity 0.5s var(--ease-soft); }
.svc-group-label { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 1rem; font-size: 0.95rem; color: var(--muted); }
.svc-group-label b { font-weight: 600; font-size: 0.9rem; color: var(--fg); }
.service { position: relative; border-top: 1px solid var(--line); transition: background-color var(--dur-fast); }
.service:last-child { border-bottom: 1px solid var(--line); }
.service::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-paper); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-med) var(--ease-out); }
.service:hover, .service.is-current { background: var(--hover); }
.service:hover::before, .service.is-current::before, .service.is-open::before { transform: scaleY(1); }
.service-btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; padding: 1.75rem 1.25rem 0.75rem 1.5rem; text-align: left; }
.service-label { display: block; font-size: 0.95rem; font-style: italic; font-weight: 500; line-height: 1.35; letter-spacing: 0.01em; color: var(--muted); margin-bottom: 0.5rem; }
.service-label b { font-style: normal; font-weight: 600; margin-right: 0.6rem; }
.service-title { display: block; font-family: var(--font-accent); font-weight: 400; font-size: var(--fs-row); line-height: 1.12; letter-spacing: var(--tr-title); }
.service-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 0.3rem; border: 1px solid var(--line-strong); border-radius: 50%; transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-fast), border-color var(--dur-fast); }
.service-btn:hover .service-icon, .service-btn:focus-visible .service-icon { transform: translateX(4px); border-color: var(--fg); }
.service.is-open .service-icon { transform: rotate(90deg); background: var(--c-paper); color: var(--c-7546); }
.service-summary { padding: 0 1.25rem 1.6rem 1.5rem; color: var(--muted); max-width: 58ch; line-height: 1.6; }
.service-fw { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1.25rem 1.5rem 1.5rem; }
.service-fw span { font-family: var(--font-accent); font-size: 0.95rem; letter-spacing: var(--tr-small); padding: 0.3rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 999px; }
.service-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-out); }
.service.is-open .service-panel { grid-template-rows: 1fr; }
.service-panel-in { overflow: hidden; }
.service-panel-body { display: grid; gap: 1.1rem; padding: 0 1.25rem 2rem 1.5rem; }
.service-need { padding-left: 0.9rem; border-left: 2px solid var(--c-paper); }
.service-need b { font-weight: 700; }
.service-details { display: grid; gap: 0.5rem; }
.service-details li { position: relative; padding-left: 1.3rem; color: var(--muted); }
.service-details li::before { content: "→"; position: absolute; left: 0; color: var(--fg); }
.fw-grid { display: grid; gap: 0.6rem; }
.fw { padding: 1rem 1.1rem; background: rgba(37, 55, 70, 0.45); border: 1px solid var(--line); border-radius: var(--radius); }
.fw b { font-family: var(--font-accent); font-weight: 400; font-size: 1.25rem; letter-spacing: var(--tr-small); display: block; margin-bottom: 0.2rem; }
.fw p { color: var(--muted); font-size: 0.94rem; }
.soc-bridge { margin-top: 3rem; display: grid; gap: 0.5rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); text-decoration: none; background: var(--c-7546); border-radius: var(--radius); transition: transform var(--dur-med) var(--ease-out); }
.soc-bridge:hover, .soc-bridge:focus-visible { transform: translateY(-3px); }
.soc-bridge:hover .btn-arrow, .soc-bridge:focus-visible .btn-arrow { transform: translateY(4px); }
.soc-bridge-k { font-size: 0.95rem; font-style: italic; font-weight: 500; color: var(--muted); }
.soc-bridge-t { font-size: var(--fs-lead); max-width: 44ch; }
.soc-bridge-t b { font-family: var(--font-accent); font-weight: 400; letter-spacing: var(--tr-small); }
.soc-bridge-c { font-weight: 700; }

/* 04 · Soluciones */
.metasoc { margin-top: clamp(4rem, 3rem + 5vw, 8rem); }
.panel { display: grid; gap: 2rem; align-items: center; }
.panel-media { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--c-7546); }
.panel-media-in { position: absolute; left: 0; right: 0; top: -40px; bottom: -40px; will-change: transform; }
.panel-media-in img { width: 100%; height: 100%; object-fit: cover; }
/* MetaSOC: vídeo del centro de operaciones en bucle con capa animada (escaneo, visor y etiqueta) */
.soc-media { isolation: isolate; background: var(--c-deep); }
.soc-video { width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; transform-origin: 30% 50%; animation: socZoom 20s ease-in-out infinite alternate; }
@keyframes socZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.soc-overlay { --corner: clamp(16px, 2.4vw, 28px); position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(245, 243, 246, 0.035) 0 1px, transparent 1px 4px),
    radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(12, 26, 38, 0.55) 100%),
    linear-gradient(to top, rgba(12, 26, 38, 0.7) 0%, transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(245, 243, 246, 0.14); }
.soc-scan { position: absolute; left: 0; right: 0; top: 0; height: 28%; background: linear-gradient(to bottom, transparent 0%, rgba(52, 101, 127, 0.16) 70%, rgba(214, 228, 238, 0.55) 99%, transparent 100%); mix-blend-mode: screen; transform: translateY(-100%); animation: socScan 5.2s cubic-bezier(0.55, 0, 0.45, 1) infinite; }
@keyframes socScan { 0% { transform: translateY(-100%); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateY(360%); opacity: 0; } }
.soc-corner { position: absolute; width: var(--corner); height: var(--corner); border: 0 solid rgba(245, 243, 246, 0.85); animation: socCorner 3.2s ease-in-out infinite; }
.soc-corner.tl { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.soc-corner.tr { top: 14px; right: 14px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.soc-corner.bl { bottom: 14px; left: 14px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.soc-corner.br { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
@keyframes socCorner { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.soc-tag { position: absolute; left: calc(14px + var(--corner) + 0.6rem); bottom: 14px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: rgba(12, 26, 38, 0.72); color: var(--c-paper); font-size: 0.82rem; font-weight: 500; letter-spacing: var(--tr-small); white-space: nowrap; }
.soc-tag b { font-weight: 700; }
@media (max-width: 479px) { .soc-tag { font-size: 0.78rem; padding: 0.35rem 0.7rem; } .soc-tag-sub { display: none; } }
.soc-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #7fc4e6; flex: none; }
.soc-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: socPulse 1.8s ease-out infinite; }
@keyframes socPulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .soc-video, .soc-scan, .soc-corner, .soc-dot::after { animation: none; } .soc-scan { display: none; } }
.panel-copy { display: grid; gap: 1.25rem; align-content: start; justify-items: start; min-width: 0; }
.panel-title { font-family: var(--font-accent); font-weight: 400; font-size: var(--fs-md); line-height: 1.02; letter-spacing: var(--tr-title); }
.soc-seq { position: relative; margin-top: clamp(4rem, 3rem + 5vw, 8rem); }
.soc-sticky { display: grid; gap: 2rem; }
.soc-head { display: grid; gap: 1rem; }
.soc-progress { height: 2px; background: var(--line); overflow: hidden; }
.soc-progress span { display: block; height: 100%; background: var(--c-paper); transform-origin: left; transform: scaleX(var(--p, 0.25)); transition: transform 0.5s var(--ease-out); }
.soc-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.soc-tab { display: grid; gap: 0.1rem; text-align: left; padding: 0.8rem 0.9rem; min-height: 56px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.soc-tab b { font-weight: 500; font-size: 0.9rem; }
.soc-tab span { font-weight: 700; }
.soc-tab:hover, .soc-tab:focus-visible { border-color: var(--line-strong); color: var(--fg); background: var(--hover); }
.soc-tab[aria-selected="true"] { color: var(--c-7546); background: var(--c-paper); border-color: var(--c-paper); }
.soc-stage { display: grid; gap: 2rem; align-items: center; }
.soc-panels { position: relative; min-height: 13rem; }
.soc-panel { display: grid; gap: 0.75rem; }
.soc-panel.is-in { animation: socIn 0.5s var(--ease-out); }
@keyframes socIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.soc-step-num { font-size: 0.95rem; font-style: italic; font-weight: 500; color: var(--muted); }
.soc-step-title { font-family: var(--font-accent); font-weight: 400; font-size: clamp(2.6rem, 1.4rem + 5vw, 6.2rem); line-height: 0.98; letter-spacing: var(--tr-display); }
.soc-step-phrase { font-size: var(--fs-lead); max-width: 34ch; }
.soc-diagram { width: min(100%, 360px); justify-self: center; overflow: visible; }
.soc-diagram .ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.soc-diagram .arc { fill: none; stroke: var(--c-7699); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 704; stroke-dashoffset: calc(704 - 704 * var(--p, 0.25)); transition: stroke-dashoffset 0.6s var(--ease-out); }
.soc-diagram .node circle { fill: var(--c-deep); stroke: var(--c-paper); stroke-width: 1.5; transition: fill var(--dur-med); }
.soc-diagram .node text { fill: var(--c-paper); font-family: var(--font-sans); font-size: 13px; font-weight: 700; text-anchor: middle; transition: fill var(--dur-med); }
.soc-diagram .node.is-on circle { fill: var(--c-paper); }
.soc-diagram .node.is-on text { fill: var(--c-deep); }
.soc-markers { display: none; }
.more-solutions { margin-top: clamp(5rem, 3rem + 6vw, 10rem); display: grid; gap: clamp(4rem, 3rem + 5vw, 8rem); }
.sol { display: grid; gap: 2rem; align-items: center; }
.sol-media { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-radius: var(--radius); }
.sol-media-in { position: absolute; left: 0; right: 0; top: -40px; bottom: -40px; will-change: transform; }
.sol-art-a { background: repeating-linear-gradient(0deg, rgba(245, 243, 246, 0.06) 0 1px, transparent 1px 22px), radial-gradient(70% 90% at 25% 30%, var(--c-7699), transparent 70%), radial-gradient(60% 70% at 80% 80%, var(--c-7546), transparent 70%), var(--c-deep); }
.sol-art-b { background: repeating-radial-gradient(circle at 70% 50%, rgba(245, 243, 246, 0.12) 0 1px, transparent 1px 26px), radial-gradient(80% 80% at 70% 50%, var(--c-7546), transparent 75%), var(--c-deep); }
.sol-word { position: absolute; left: 1.25rem; bottom: calc(40px + 1rem); font-family: var(--font-accent); font-size: clamp(2rem, 1.2rem + 4vw, 4.8rem); line-height: 0.95; letter-spacing: var(--tr-title); color: var(--c-paper); }
/* Solución con foto (MetaCiber): etalonaje de marca + animación de copia (bloques que suben y barra de sincronización) */
.sol-media-photo { isolation: isolate; background: var(--c-deep); }
.sol-photo { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: saturate(0.7) contrast(1.05) brightness(0.92); transform-origin: 70% 55%; animation: solZoom 18s ease-in-out infinite alternate; }
.sol-media-shield .sol-photo { filter: saturate(0.85) contrast(1.05) brightness(0.96); transform-origin: 75% 50%; }
@keyframes solZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.sol-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(245, 243, 246, 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(to top, rgba(12, 26, 38, 0.86) 0%, rgba(12, 26, 38, 0.2) 45%, rgba(37, 55, 70, 0.32) 100%),
    linear-gradient(120deg, rgba(52, 101, 127, 0.35), rgba(37, 55, 70, 0.1) 60%);
  box-shadow: inset 0 0 0 1px rgba(245, 243, 246, 0.14); }
.sol-fx .sol-word { bottom: 1.1rem; left: 1.25rem; }
.sol-bits { position: absolute; inset: 0; }
.sol-bits i { position: absolute; bottom: -12px; width: 8px; height: 8px; border-radius: 2px; background: rgba(245, 243, 246, 0.75); box-shadow: 0 0 12px rgba(127, 196, 230, 0.7); opacity: 0; animation: solBit 6s linear infinite; }
.sol-bits i:nth-child(1) { left: 12%; animation-delay: 0s; }
.sol-bits i:nth-child(2) { left: 26%; animation-delay: 2.1s; width: 6px; height: 6px; }
.sol-bits i:nth-child(3) { left: 41%; animation-delay: 4.3s; }
.sol-bits i:nth-child(4) { left: 55%; animation-delay: 1.2s; width: 5px; height: 5px; }
.sol-bits i:nth-child(5) { left: 68%; animation-delay: 3.4s; }
.sol-bits i:nth-child(6) { left: 81%; animation-delay: 5.1s; width: 6px; height: 6px; }
.sol-bits i:nth-child(7) { left: 92%; animation-delay: 2.7s; width: 5px; height: 5px; }
@keyframes solBit { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.9; } 70% { opacity: 0.6; } 100% { transform: translateY(-420px); opacity: 0; } }
.sol-sync { position: absolute; top: 1rem; left: 1rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.35rem 0.6rem; max-width: calc(100% - 2rem); padding: 0.55rem 0.85rem 0.65rem; border-radius: 12px; background: rgba(12, 26, 38, 0.74); color: var(--c-paper); font-size: 0.8rem; line-height: 1.25; }
.sol-sync-ico { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(245, 243, 246, 0.9); border-right-color: transparent; animation: solSpin 1.6s linear infinite; }
@keyframes solSpin { to { transform: rotate(360deg); } }
.sol-sync-txt { display: flex; flex-wrap: wrap; gap: 0 0.4rem; min-width: 0; }
.sol-sync-txt b { font-weight: 700; }
.sol-sync-bar { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 3px; background: rgba(245, 243, 246, 0.2); overflow: hidden; }
.sol-sync-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #7fc4e6, var(--c-paper)); transform: scaleX(0); transform-origin: left; animation: solFill 6s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes solFill { 0% { transform: scaleX(0); opacity: 1; } 75% { transform: scaleX(1); opacity: 1; } 90% { transform: scaleX(1); opacity: 0.35; } 100% { transform: scaleX(1); opacity: 0; } }
/* Kaspersky Next: ondas hexagonales desde el emblema, pulso de luz y amenazas que se detectan y se neutralizan */
.sol-shield { position: absolute; left: var(--fx-x, 65%); top: 50%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-14deg); }
.sol-shield svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sol-shield polygon { fill: none; stroke: rgba(214, 205, 255, 0.85); stroke-width: 1.5; stroke-linejoin: round; transform-origin: 100px 100px; opacity: 0; animation: solHex 4.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.sol-shield polygon:nth-child(2) { animation-delay: 1.6s; }
.sol-shield polygon:nth-child(3) { animation-delay: 3.2s; }
@keyframes solHex { 0% { transform: scale(0.55); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: scale(1.55); opacity: 0; } }
.sol-shield-glow { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(160, 130, 255, 0.55), transparent 70%); mix-blend-mode: screen; animation: solGlow 3.2s ease-in-out infinite; }
@keyframes solGlow { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 0.9; transform: scale(1.08); } }
.sol-threats i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #ff7a6b; box-shadow: 0 0 0 0 rgba(255, 122, 107, 0.6); opacity: 0; animation: solThreat 6.4s ease-out infinite; }
.sol-threats i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(127, 196, 230, 0.95); opacity: 0; animation: solCatch 6.4s ease-out infinite; animation-delay: inherit; }
.sol-threats i:nth-child(1) { left: 20%; top: 30%; animation-delay: 0.4s; }
.sol-threats i:nth-child(2) { left: 38%; top: 72%; animation-delay: 2s; }
.sol-threats i:nth-child(3) { left: 92%; top: 22%; animation-delay: 3.6s; }
.sol-threats i:nth-child(4) { left: 52%; top: 18%; animation-delay: 5s; }
@keyframes solThreat { 0% { opacity: 0; transform: scale(0.4); } 8% { opacity: 1; transform: scale(1); } 28% { opacity: 1; background: #ff7a6b; } 36% { background: #7fc4e6; } 48% { opacity: 0; transform: scale(0.2); background: #7fc4e6; } 100% { opacity: 0; } }
@keyframes solCatch { 0%, 24% { opacity: 0; transform: scale(1.8); } 32% { opacity: 1; transform: scale(1); } 48% { opacity: 0; transform: scale(0.8); } 100% { opacity: 0; } }
.sol-fx-shield .sol-sync-ico { border-radius: 4px 4px 9px 9px; border: 2px solid rgba(245, 243, 246, 0.9); animation: solShieldIco 2.4s ease-in-out infinite; }
@keyframes solShieldIco { 0%, 100% { box-shadow: 0 0 0 0 rgba(127, 196, 230, 0.6); } 50% { box-shadow: 0 0 0 5px rgba(127, 196, 230, 0); } }
.sol-fx-shield .sol-sync-bar i { width: 35%; right: auto; transform: none; background: linear-gradient(90deg, transparent, #b9a8ff, transparent); animation: solSweep 2.6s ease-in-out infinite alternate; }
@keyframes solSweep { from { transform: translateX(-100%); } to { transform: translateX(285%); } }
@media (max-width: 479px) { .sol-sync { font-size: 0.74rem; } .sol-sync-txt span, .sol-sync-txt { gap: 0 0.3rem; } }
@media (prefers-reduced-motion: reduce) { .sol-photo, .sol-bits i, .sol-sync-ico, .sol-sync-bar i, .sol-shield polygon, .sol-shield-glow, .sol-threats i, .sol-threats i::after { animation: none; } .sol-bits, .sol-threats, .sol-shield svg { display: none; } .sol-sync-bar i { transform: scaleX(1); } .sol-fx-shield .sol-sync-bar i { width: 100%; transform: none; } }
.sol-copy { display: grid; gap: 1.1rem; align-content: start; justify-items: start; min-width: 0; }
.sol-name { font-family: var(--font-accent); font-weight: 400; font-size: var(--fs-md); line-height: 1.02; letter-spacing: var(--tr-title); }
.sol-facts { display: grid; gap: 1rem; width: 100%; }
.sol-facts div { display: grid; gap: 0.25rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.sol-facts dt { font-size: 0.95rem; font-style: italic; font-weight: 500; }
.sol-facts dd { color: var(--muted); }
.sol-points { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sol-points li { font-size: 0.92rem; line-height: 1.35; padding: 0.35rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 999px; }
.sol-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }

/* 05 · Confianza */
.s-trust { --fg: var(--c-7546); }
.trust-groups { display: grid; gap: 2.5rem; margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.trust-group { display: grid; gap: 1rem; align-content: start; }
.trust-group h3 { font-size: 1rem; font-style: italic; font-weight: 500; line-height: 1.35; padding-bottom: 0.9rem; border-bottom: 2px solid var(--c-7699); }
.trust-note { color: var(--muted); font-size: 0.93rem; }
.trust-item { display: grid; gap: 0.2rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.trust-item strong { font-family: var(--font-accent); font-weight: 400; font-size: 1.6rem; line-height: 1.1; letter-spacing: var(--tr-small); }
.trust-item img { max-height: 44px; width: auto; }
.trust-item span { color: var(--muted); font-size: 0.95rem; }
/* Certificaciones: rejilla de cajas iguales */
/* Flex centrado: si la última fila queda incompleta, sus sellos quedan centrados */
.seals { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.seals .seal { flex: 0 0 calc((100% - 0.75rem) / 2); }
.seal { display: grid; grid-template-rows: 7.5rem auto; justify-items: center; align-content: start; gap: 0.75rem; padding: 1.1rem 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfafb; text-align: center; }
.seal-mark { align-self: center; display: block; max-width: 100%; object-fit: contain; }
.seal-txt { display: grid; gap: 0.2rem; }
.seal-txt strong { font-size: 0.95rem; font-weight: 700; color: var(--fg); }
.seal-txt span { font-size: 0.8rem; line-height: 1.35; color: var(--muted); }
@media (min-width: 540px) { .seals .seal { flex-basis: calc((100% - 1.5rem) / 3); } }
@media (max-width: 400px) { .seal { grid-template-rows: 6rem auto; } .seal-mark { transform: scale(0.82); } }
.trust-empty { min-height: 140px; display: grid; place-items: center; text-align: center; padding: 1.25rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); font-size: 0.93rem; }
.clients { margin-top: clamp(6rem, 4rem + 7vw, 11rem); }
.clients .statement .chip { margin-top: 1.5rem; }
.marquees { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.marquee-group { min-width: 0; }
.marquee-group-title { text-align: center; font-size: 1rem; font-style: italic; font-weight: 500; color: var(--muted); margin-bottom: 0.6rem; }
.marquee { overflow: hidden; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--mq-dur, 60s) linear infinite; }
.marquee-track ul { display: flex; }
.marquee.is-reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-item { display: grid; place-items: center; min-width: 14rem; min-height: 104px; padding: 1rem 2rem; }
/* Logotipos en un solo color: el del texto (--fg), como los nombres que había antes */
.logo-item .logo-mark { display: block; max-height: none; object-fit: contain; }
.logo-item img { max-height: 48px; width: auto; }
.logo-item span { font-family: var(--font-accent); font-size: 1.35rem; letter-spacing: var(--tr-small); white-space: nowrap; color: var(--fg); }

/* 06 · Proyectos (carrusel) */
.carousel { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: grid; gap: 1.75rem; }
.car-thumbs { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; }
.car-thumb { position: relative; width: 84px; height: 52px; padding: 0; border: 0; border-radius: 3px; background: var(--c-deep); overflow: hidden; opacity: 0.55; outline-offset: 3px; transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.car-thumb:hover, .car-thumb:focus-visible { opacity: 0.9; transform: translateY(-2px); }
.car-thumb[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--c-paper); }
.car-thumb .cover-word { display: none; }
/* Todas las miniaturas con el mismo formato, sea foto, vídeo o página de PDF */
.car-thumb img, .car-thumb .cover { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.car-stage { position: relative; }
.car-slide { display: grid; gap: 1.5rem; justify-items: center; text-align: center; }
.car-slide.is-in .project-media { animation: slideIn 0.7s var(--ease-out); }
.car-slide.is-in .car-copy > * { animation: socIn 0.6s var(--ease-out) both; }
.car-slide.is-in .car-copy > *:nth-child(2) { animation-delay: 0.06s; }
.car-slide.is-in .car-copy > *:nth-child(3) { animation-delay: 0.12s; }
.car-slide.is-in .car-copy > *:nth-child(4) { animation-delay: 0.18s; }
@keyframes slideIn { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.project-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--c-deep); text-align: left; }
.project-media-in { position: absolute; left: 0; right: 0; top: -50px; bottom: -50px; will-change: transform; }
.project-media-in.is-video { top: 0; bottom: 0; transform: none !important; }
.project-media-zoom { width: 100%; height: 100%; transition: transform 0.7s var(--ease-out); }
.project-media:hover .project-media-zoom, .project-media:focus-visible .project-media-zoom { transform: scale(1.05); }
.project-media img { width: 100%; height: 100%; object-fit: cover; }
/* Pase de páginas (Viogen): página completa centrada sobre un fondo desenfocado de ella misma */
.slides { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #e9efe9; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease-soft); }
.slide.is-on { opacity: 1; }
.slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.1); transform: scale(1.15); opacity: 0.85; }
.slide-fg { position: absolute; inset: 6% 4%; width: 92%; height: 88%; object-fit: contain; filter: drop-shadow(0 14px 30px rgba(12, 26, 38, 0.35)); }
.slide.is-on .slide-fg { animation: slideIn 4.5s var(--ease-out) both; }
@keyframes slideIn { from { transform: scale(0.97); } to { transform: scale(1); } }
.slides-dialog .slide-fg { inset: 4%; width: 92%; height: 92%; }
.slide-dots { position: absolute; left: 50%; bottom: 0.8rem; z-index: 2; display: flex; gap: 0.4rem; transform: translateX(-50%); padding: 0.35rem 0.55rem; border-radius: 999px; background: rgba(12, 26, 38, 0.55); }
.slide-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(245, 243, 246, 0.5); transition: background-color var(--dur-fast), transform var(--dur-fast); }
.slide-dots i.is-on { background: var(--c-paper); transform: scale(1.25); }
.project-media-in .slides .slide-fg { inset: calc(50px + 5%) 6%; width: 88%; height: calc(100% - 100px - 10%); }
.project-media-in .slide-dots { bottom: calc(50px + 0.8rem); left: 1.2rem; transform: none; }
/* Variante foto: la imagen llena el recuadro y se mueve despacio (acercamiento y desplazamiento, distinto en cada foto) */
.slides-photo .slide-bg { display: none; }
.slides-photo .slide-fg, .project-media-in .slides-photo .slide-fg, .slides-dialog.slides-photo .slide-fg { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.slides-photo .slide.is-on .slide-fg { animation: kbA 6s ease-out both; }
.slides-photo .slide:nth-child(2).is-on .slide-fg { animation-name: kbB; }
.slides-photo .slide:nth-child(3).is-on .slide-fg { animation-name: kbC; }
@keyframes kbA { from { transform: scale(1.18) translate(2%, 2%); } to { transform: scale(1.04) translate(-1%, 0); } }
@keyframes kbB { from { transform: scale(1.04) translate(-3%, 1%); } to { transform: scale(1.16) translate(2%, -2%); } }
@keyframes kbC { from { transform: scale(1.2) translateY(-3%); } to { transform: scale(1.05) translateY(2%); } }
.slides-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(12, 26, 38, 0.45), transparent 40%); }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } .slide.is-on .slide-fg, .slides-photo .slide.is-on .slide-fg { animation: none; } }
.project-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--c-deep); }
.pd-cover.has-video { background: #000; }
.pd-cover .project-video { object-fit: contain; }
.cover { position: relative; width: 100%; height: 100%; }
.cover-word { position: absolute; left: 1.5rem; top: calc(50px + 1.25rem); font-family: var(--font-accent); font-size: clamp(1.6rem, 1rem + 3vw, 4rem); line-height: 1; letter-spacing: var(--tr-title); color: var(--c-paper); max-width: 12ch; }
.cover-0 { background: repeating-linear-gradient(90deg, rgba(245, 243, 246, 0.06) 0 1px, transparent 1px 42px), radial-gradient(70% 80% at 72% 40%, var(--c-7699), transparent 70%), radial-gradient(60% 60% at 20% 90%, var(--c-7546), transparent 70%), var(--c-deep); }
.cover-1 { background: repeating-radial-gradient(circle at 30% 65%, rgba(245, 243, 246, 0.12) 0 1px, transparent 1px 24px), linear-gradient(140deg, var(--c-7699), var(--c-deep)); }
.cover-2 { background: repeating-linear-gradient(-35deg, rgba(245, 243, 246, 0.12) 0 1px, transparent 1px 16px), linear-gradient(160deg, var(--c-7699), var(--c-deep) 75%); }
.cover-3 { background: radial-gradient(rgba(245, 243, 246, 0.2) 1.1px, transparent 1.5px) 0 0 / 20px 20px, linear-gradient(200deg, var(--c-7546), var(--c-deep) 80%); }
.project-view { position: absolute; right: 1rem; bottom: 1rem; display: inline-flex; gap: 0.5rem; align-items: center; padding: 0.6rem 1.1rem; border-radius: 999px; font-size: 0.9rem; font-weight: 700; background: var(--c-paper); color: var(--c-7546); transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast); }
.project-media:hover .project-view, .project-media:focus-visible .project-view { transform: translateY(-3px); background: var(--c-white); }
.project-media:hover .project-view .btn-arrow, .project-media:focus-visible .project-view .btn-arrow { transform: translateX(4px); }
.car-copy { display: grid; gap: 0.75rem; justify-items: center; max-width: 60ch; }
.project-title { font-family: var(--font-accent); font-weight: 400; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: var(--tr-title); }
.project-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; font-size: 0.95rem; font-style: italic; font-weight: 500; color: var(--muted); }
.project-summary { color: var(--muted); }
.car-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.car-arrow { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--line-strong); font-size: 1.2rem; transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.car-arrow:hover, .car-arrow:focus-visible { background: var(--c-paper); color: var(--c-7546); border-color: var(--c-paper); }
.car-arrow:active { transform: scale(0.95); }
.car-count { font-weight: 600; letter-spacing: 0.1em; }

.project-dialog {
  margin: 0 0 0 auto; padding: 0; width: min(680px, 100%); max-width: 100%; height: 100%; max-height: 100%; border: 0;
  background: var(--c-paper); color: var(--c-blackc);
  --fg: var(--c-blackc); --muted: rgba(45, 41, 38, 0.86); --line: rgba(45, 41, 38, 0.16); --line-strong: rgba(45, 41, 38, 0.4);
  --btn-bg: var(--c-7546); --btn-fg: var(--c-paper); --btn-hover: var(--c-7699); --hover: rgba(37, 55, 70, 0.1);
  color-scheme: light; transform: translateX(100%); transition: transform 0.45s var(--ease-out);
}
.project-dialog.is-visible { transform: none; }
.project-dialog::backdrop { background: rgba(0, 0, 0, 0); transition: background-color 0.4s; }
.project-dialog.is-visible::backdrop { background: rgba(0, 0, 0, 0.6); }
.pd-inner { padding: calc(1.25rem + env(safe-area-inset-top, 0px)) clamp(1.25rem, 1rem + 2vw, 2.5rem) calc(2.5rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: 1.5rem; }
.pd-close { justify-self: end; }
.pd-inner [data-dialog-body] { display: grid; gap: 1.1rem; min-width: 0; }
.pd-cover { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: var(--radius); }
.pd-cover .cover-word { top: 1rem; }
.pd-title { font-family: var(--font-accent); font-weight: 400; font-size: var(--fs-md); line-height: 1.02; letter-spacing: var(--tr-title); }
.pd-facts { display: grid; gap: 1.25rem; }
.pd-facts div { display: grid; gap: 0.35rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.pd-facts dt { font-size: 0.95rem; font-style: italic; font-weight: 500; color: var(--c-7699); }
.pd-facts dd { color: var(--muted); }
.pd-pending { padding: 1rem 1.25rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); }
.pd-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.pd-inner .project-meta { justify-content: flex-start; }

/* Desplegable de textos legales (hereda el panel lateral de proyectos) */
.legal-doc { display: grid; gap: 1rem; min-width: 0; }
.legal-kicker { font-size: 0.95rem; font-style: italic; font-weight: 500; color: var(--c-7699); }
.legal-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
.legal-updated { font-size: 0.9rem; color: var(--muted); }
.legal-body { display: grid; gap: 0.9rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.65; overflow-wrap: anywhere; }
.legal-body h3 { margin-top: 0.8rem; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--fg); }
.legal-body h4 { margin-top: 0.4rem; font-size: 1rem; font-weight: 700; color: var(--fg); }
.legal-body ul, .legal-body ol { display: grid; gap: 0.4rem; padding-left: 1.25rem; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body strong { color: var(--fg); }
.legal-body a, .legal-doc .pd-pending a { color: var(--c-7699); font-weight: 600; text-underline-offset: 0.2em; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 0.9rem; display: block; overflow-x: auto; }
.legal-body th, .legal-body td { padding: 0.5rem 0.6rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-body th { color: var(--fg); background: rgba(37, 55, 70, 0.06); }
.legal-body .legal-data { display: grid; gap: 0; border-top: 1px solid var(--line); }
.legal-body .legal-data div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.25rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.legal-body .legal-data dt { font-weight: 600; color: var(--fg); }
.legal-body td, .legal-body th { overflow-wrap: normal; }
@media (max-width: 539px) {
  .legal-body .legal-data div { grid-template-columns: 1fr; }
  /* En móvil, cada fila de la tabla de cookies pasa a ser una ficha */
  .legal-body table, .legal-body tbody, .legal-body tr, .legal-body th, .legal-body td { display: block; width: 100%; }
  .legal-body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-body tr { margin-bottom: 0.75rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .legal-body tbody th, .legal-body td { border: 0; border-bottom: 1px solid var(--line); }
  .legal-body td:last-child { border-bottom: 0; }
  .legal-body td::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 600; color: var(--fg); }
}
.footer-nav button[data-legal] { font: inherit; color: inherit; }

/* 07 · Contacto */
.contact-title .headline, .contact-title { max-width: 20ch; }
[data-rotator] { display: inline-block; transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease-soft); }
[data-rotator].is-out { transform: translateY(-100%); opacity: 0; }
[data-rotator].is-pre { transform: translateY(100%); opacity: 0; transition: none; }
.contact-grid { display: grid; gap: 4rem; margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.form { display: grid; gap: 1.35rem; }
.field-row { display: grid; gap: 1.35rem; }
.field { position: relative; display: grid; gap: 0.45rem; min-width: 0; align-content: start; }
.field label { font-weight: 600; font-size: 0.95rem; transition: color var(--dur-fast); }
.optional { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; min-height: 52px; padding: 0.8rem 0.95rem; font: inherit; color: var(--fg);
  background: var(--field-bg); border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-med) var(--ease-out);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--fg); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--focus); background: var(--field-bg-focus); box-shadow: inset 0 -3px 0 0 var(--c-7699), 0 0 0 2px var(--focus); }
.field:focus-within > label { color: var(--fg); }
.field [aria-invalid="true"] { border-color: var(--fg); border-style: dashed; }
.field.shake { animation: shake 0.32s var(--ease-soft); }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.field-error { font-size: 0.9rem; font-weight: 700; color: var(--fg); animation: socIn 0.3s var(--ease-out); }
.field-error::before { content: "⚠ "; }
.field-check { grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: start; }
.field-check input { width: 20px; height: 20px; margin-top: 0.2rem; accent-color: var(--c-7699); }
.field-check label { font-weight: 400; color: var(--muted); }
.field-check label a { color: var(--fg); font-weight: 700; }
.field-check .field-error { grid-column: 2; }
.privacy-info { font-size: 0.9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.9rem; }
.privacy-info summary { cursor: pointer; font-weight: 700; color: var(--fg); min-height: 32px; }
.privacy-info p { margin-top: 0.6rem; max-width: 70ch; }
/* Campo trampa antispam: invisible para personas, visible para robots */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-status { display: grid; gap: 0.6rem; padding: 1rem 1.15rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--field-bg); animation: socIn 0.4s var(--ease-out); }
.form-status.is-error { border-left: 4px solid var(--fg); }
.form-status.is-ok { border-left: 4px solid var(--c-7699); }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.copy-row code { font-family: var(--font-sans); font-weight: 700; user-select: all; }
.contact-side { display: grid; gap: 3rem; align-content: start; }
.side-title { font-size: 0.95rem; font-style: italic; font-weight: 500; letter-spacing: 0.01em; color: var(--muted); margin-bottom: 1rem; }
.contact-data dl { display: grid; gap: 1.25rem; }
.contact-data dl div { display: grid; gap: 0.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.contact-data dt { color: var(--muted); font-size: 0.9rem; }
.contact-data dd { font-size: 1.1rem; }
.contact-data dd a { font-weight: 700; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--dur-med) var(--ease-out); }
.contact-data dd a:hover, .contact-data dd a:focus-visible { background-size: 35% 1px; }
/* ---------- Soluciones de emergencia · Genasys ---------- */
.emergency { grid-template-columns: minmax(0, 1fr); margin-top: clamp(6rem, 4rem + 6vw, 11rem); padding-top: clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--line); display: grid; gap: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.em-intro { display: grid; gap: 1.5rem; }
.em-head { display: grid; gap: 1rem; align-content: start; }
.em-title { font-family: var(--font-accent); font-weight: 400; font-size: var(--fs-md); line-height: 1.04; letter-spacing: var(--tr-title); max-width: 16ch; text-wrap: balance; }
.em-copy { display: grid; gap: 1.1rem; align-content: start; }
.em-sub { font-family: var(--font-accent); font-weight: 400; font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.2rem); line-height: 1.08; letter-spacing: var(--tr-title); }
.em-provide, .em-apps { display: grid; gap: 1rem; }
.em-steps { display: grid; gap: 0; margin-top: 0.75rem; counter-reset: none; }
.em-steps li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.75rem; align-items: baseline; padding-block: 1rem; border-top: 1px solid var(--line); font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
.em-step-n { font-size: 0.9rem; font-style: italic; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.em-catalog { display: grid; gap: 1.75rem; }
.em-cat-head { display: grid; gap: 0.5rem; }
.em-products { display: grid; gap: 1.25rem; }
.em-product { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgba(245, 243, 246, 0.04); }
.em-product-media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-deep); }
.em-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.em-product:hover .em-product-media img { transform: scale(1.04); }
.em-product-copy { display: grid; gap: 0.5rem; align-content: start; padding: 1.25rem 1.25rem 1.5rem; }
.em-product-type { font-size: 0.9rem; font-style: italic; font-weight: 500; color: var(--muted); }
.em-product-name { font-family: var(--font-accent); font-weight: 400; font-size: 1.6rem; line-height: 1.05; letter-spacing: var(--tr-title); }
.em-product-copy p:last-child { color: var(--muted); line-height: 1.5; }
.em-brochure { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(245, 243, 246, 0.04); scroll-margin-top: calc(var(--header-h) + 1rem); }
.em-brochure-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; }
.em-brochure-head > div:first-child { display: grid; gap: 0.5rem; max-width: 46ch; }
.btn-note { font-weight: 500; opacity: 0.72; white-space: nowrap; }
.em-brochure .btn { white-space: nowrap; max-width: 100%; }
@media (max-width: 379px) { .em-brochure { padding: 1.25rem; } .em-brochure .btn-note { display: none; } }
@media (min-width: 720px) {
  .em-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
@media (min-width: 960px) {
  .em-intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
  .em-head { grid-column: 1 / span 6; }
  .em-copy { grid-column: 8 / -1; padding-top: 2.4rem; }
  .em-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1.25rem; }
  .em-steps li { grid-template-columns: 1fr; gap: 0.6rem; padding-top: 1.1rem; }
  }
@media (min-width: 1280px) {
  .em-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .em-product-media img { transition: none; } .em-product:hover .em-product-media img { transform: none; } }

/* Redes sociales (contacto y pie): icono circular + red + @ */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.social-list { display: grid; gap: 0.5rem; }
.social-link { display: flex; align-items: center; gap: 0.9rem; padding: 0.35rem 0; text-decoration: none; color: var(--fg); }
.social-ic { flex: none; width: 2.75rem; height: 2.75rem; transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast); }
.social-txt { display: grid; gap: 0.1rem; line-height: 1.25; min-width: 0; }
.social-net { font-size: 0.85rem; color: var(--muted); }
.social-handle { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.social-link:hover .social-ic, .social-link:focus-visible .social-ic { transform: scale(1.08) rotate(-4deg); color: var(--c-7699); }
.social-link:hover .social-handle, .social-link:focus-visible .social-handle { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.footer-nav .social-list-footer { gap: 0.35rem; }
.footer-nav .social-link { display: flex; background: none; padding-block: 0.25rem; }
.footer-nav .social-ic { width: 2.25rem; height: 2.25rem; }
.footer-nav .social-link:hover .social-ic, .footer-nav .social-link:focus-visible .social-ic { color: var(--c-white); }
.footer-nav .social-handle { font-size: 0.98rem; }
@media (prefers-reduced-motion: reduce) { .social-ic { transition: none; } .social-link:hover .social-ic { transform: none; } }

/* ---------- 9. Pie ---------- */
.site-footer { background: var(--c-deep); color: var(--fg); padding-block: 4.5rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
.footer-grid { display: grid; gap: 2.5rem; }
.footer-brand { display: grid; gap: 1rem; align-content: start; }
.footer-brand img { width: 72px; height: 72px; }
.footer-brand p { color: var(--muted); max-width: 26ch; }
.footer-title { font-size: 0.95rem; font-style: italic; font-weight: 500; letter-spacing: 0.01em; color: var(--muted); margin-bottom: 0.9rem; }
.footer-nav ul { display: grid; gap: 0.15rem; }
.footer-nav a { display: inline-block; padding-block: 0.3rem; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 90% / 0 1px no-repeat; transition: background-size var(--dur-med) var(--ease-out); }
.footer-nav a:hover, .footer-nav a:focus-visible { background-size: 100% 1px; }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.footer-bottom p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

/* ---------- 10. Responsive ---------- */
@media (max-width: 719px) {
  .car-arrow { width: 52px; height: 52px; }
  .car-thumbs { flex-wrap: nowrap; justify-content: flex-start; gap: 0.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 4px 6px; margin-inline: -4px; }
  .car-thumbs::-webkit-scrollbar { display: none; }
  .car-thumb { flex: none; scroll-snap-align: center; }
  .car-thumb { width: 70px; height: 44px; }
}
@media (max-width: 539px) {
  /* Valores en 2 × 2, sin puntos que queden sueltos al partir la línea */
  .values-line { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 0.5rem 2rem; }
  .values-line span + span::before { content: none; }
}
@media (min-width: 540px) {
  .soc-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .trust-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
  .trust-group.is-seals { grid-column: 1 / -1; }
  .seals { gap: 1rem; }
  .seals .seal { flex-basis: calc((100% - 4rem) / 5); }
  .fw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); }
  .sol-facts { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .car-thumb { width: 110px; height: 66px; }
}
@media (min-width: 960px) {
  .read-progress { display: block; }
  .about-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
  .about-sticky { grid-column: 1 / span 6; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .about-flow { grid-column: 8 / -1; }
  .js .pillar-step { min-height: 52vh; align-content: center; }
  /* El paso inactivo atenúa solo el título grande; el texto sigue legible */
  .js .pillar-step:not(.is-active) { opacity: 0.9; }
  .js .pillar-step:not(.is-active) .pillar-name { opacity: 0.62; transition: opacity 0.45s var(--ease-soft); }

  .services-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
  .services-side { grid-column: 1 / span 4; align-self: stretch; }
  .services-sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
  .service-preview { display: grid; }
  .services-main { grid-column: 6 / -1; }
  .js .svc-group:not(.is-active) { opacity: 0.74; }

  .panel { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
  .panel-media { grid-column: 1 / span 7; }
  .panel-copy { grid-column: 9 / -1; }
  .js .soc-sticky { position: sticky; top: calc(var(--header-h) + 1rem); min-height: calc(100vh - var(--header-h) - 2rem); align-content: center; }
  .js .soc-markers { display: block; }
  .soc-marker { height: 50vh; }
  .soc-stage { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .sol { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
  .sol .sol-media { grid-column: 1 / span 6; }
  .sol .sol-copy { grid-column: 8 / -1; }
  .sol.is-flipped .sol-media { grid-column: 7 / -1; grid-row: 1; }
  .sol.is-flipped .sol-copy { grid-column: 1 / span 5; grid-row: 1; }

  .car-stage { padding-inline: 4%; }
  .contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
  .contact-main { grid-column: 1 / span 7; }
  .contact-side { grid-column: 9 / -1; }
}
@media (min-width: 1280px) {
  .main-nav { display: block; }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
  .nav-indicator { opacity: 1; }
}
/* Índice lateral solo cuando cabe en el margen sin tocar el contenido (≥ 1800 px) */
@media (min-width: 1800px) {
  .section-index { display: block; position: fixed; z-index: 250; left: 18px; top: 50%; transform: translateY(-50%); --ix: var(--c-paper); }
  .section-index[data-tone="light"] { --ix: var(--c-7546); }
  .section-index ol { display: grid; gap: 0.35rem; }
  .section-index a { display: flex; align-items: center; gap: 0.5rem; min-height: 26px; text-decoration: none; color: var(--ix); opacity: 0.55; transition: opacity var(--dur-fast), color var(--dur-med); }
  .section-index a b { font-size: 0.82rem; font-weight: 700; }
  .section-index a span { font-size: 0.82rem; font-style: italic; font-weight: 500; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.4s var(--ease-out); }
  .section-index a::before { content: ""; width: 10px; height: 1px; background: currentColor; transition: width 0.4s var(--ease-out); }
  .section-index a.is-active { opacity: 1; }
  .section-index a.is-active::before { width: 22px; }
  .section-index a.is-active span, .section-index a:hover span, .section-index a:focus-visible span { max-width: 9rem; }
  .section-index a:hover, .section-index a:focus-visible { opacity: 1; }
}

/* ---------- 11. Movimiento reducido: estados finales ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-track ul { flex-wrap: wrap; justify-content: center; }
  .marquee-track ul[aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .mobile-menu, .mobile-links li, .mobile-menu-foot, .project-dialog, .stage, [data-rotator] { transition-duration: 0.01ms !important; }
  .car-slide.is-in .project-media, .car-slide.is-in .car-copy > * { animation: none !important; }
  .pillar-hud-word { transition: none; }
  .about-photo img, .pillar-media-in, .panel-media-in, .sol-media-in, .project-media-in { transform: none !important; }
}

/* =============================================================
   12. Intro de entrada (estilo Fromanother)
   Telón claro con saludo, emblema oficial y porcentaje de carga
   real. Se salta con clic, tecla o rueda; nunca pasa de ~3,5 s.
   ============================================================= */
.intro { display: none; }
.has-intro .intro {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--c-paper); color: var(--c-7546); cursor: pointer;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.95s cubic-bezier(0.76, 0, 0.24, 1);
  animation: introSafety 0.01s 6s forwards; /* red de seguridad si falla el JS */
}
.has-intro body { overflow: hidden; }
.intro-hello, .intro-mark { grid-area: 1 / 1; }
.intro-hello {
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.6rem); font-weight: 500; color: rgba(37, 55, 70, 0.62); text-align: center; padding-inline: var(--gutter);
  opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease-soft), transform 0.7s var(--ease-out);
}
.intro-mark { display: grid; justify-items: center; gap: 1.1rem; opacity: 0; transform: scale(0.9); transition: opacity 0.5s var(--ease-soft), transform 0.9s var(--ease-out); }
.intro-mark img { width: clamp(96px, 10vw, 140px); height: auto; }
.intro-count { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.intro.is-hello .intro-hello { opacity: 1; transform: none; }
.intro.is-mark .intro-hello { opacity: 0; transform: translateY(-10px); }
.intro.is-mark .intro-mark { opacity: 1; transform: none; }
.intro.is-leaving { clip-path: inset(0 0 100% 0); }
.intro.is-leaving .intro-mark { transform: translateY(-40px) scale(1.04); opacity: 0; transition-duration: 0.6s; }
.intro.is-gone { display: none !important; }
@keyframes introSafety { to { clip-path: inset(0 0 100% 0); pointer-events: none; visibility: hidden; } }

/* Reloj de la cabecera (detalle inspirado en Uncommon) */
.clock { display: none; margin: 0; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-paper); font-variant-numeric: tabular-nums; }
.clock span { font-weight: 500; }
@media (min-width: 1280px) { .clock { display: block; margin-left: 1rem; } }

/* Cinta de palabras al pie de la portada (detalle Uncommon) */
.ticker { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: var(--c-deep); }
.ticker-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.ticker-group { display: flex; flex: none; }
.ticker-track span { padding: 0.7rem 1.4rem; font-family: var(--font-accent); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); letter-spacing: var(--tr-small); white-space: nowrap; color: var(--c-paper); }
.ticker-track span::after { content: "—"; margin-left: 2.8rem; font-family: var(--font-sans); opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }


/* =============================================================
   13. Portada a pantalla completa (dirección Fromanother)
   Todo centrado: la forma orgánica del fondo es la protagonista
   y el titular lleva una miniatura de vídeo (como la referencia)
   que se abre a pantalla completa al pasar el cursor o al tocarla.
   ============================================================= */
.s-inicio { position: relative; padding: 0; }
.hero {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto; justify-items: center;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 0.5rem) var(--gutter) clamp(1rem, 0.8rem + 1vw, 1.75rem);
  text-align: center;
}
.hero-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(0.9rem, 0.6rem + 1.2vw, 1.75rem); width: 100%; max-width: var(--max); text-align: center;
}
.hero-center .chapter { margin: 0; justify-content: center; }
.hero-title {
  font-family: var(--font-accent); font-weight: 400; text-transform: uppercase;
  /* Limitado también por la altura para que las tres líneas quepan siempre en pantalla */
  font-size: clamp(2rem, min(8.2vw, 13.5svh), 9rem); line-height: 0.94; letter-spacing: var(--tr-caps);
  color: var(--c-paper); max-width: none; margin: 0; text-align: center;
}
.hero-title .line { padding-block: 0.22em 0.08em; margin-block: -0.22em -0.08em; }
.hero-word { color: var(--c-paper); }

/* Miniatura de vídeo dentro del titular */
.hero-reel {
  position: relative; display: inline-block; vertical-align: 0;
  width: 1.9em; height: 0.72em; margin-inline: 0.06em;
  overflow: hidden; border-radius: 0.08em; background: var(--c-7546);
  cursor: pointer; pointer-events: auto;
  transition: transform var(--dur-med) var(--ease-out);
}
.hero-reel video, .hero-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease-soft); }
.hero-reel .is-on { opacity: 1; }
.hero-reel:hover { transform: scale(1.06); }
.reel-toggle:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reel-toggle:focus-visible { padding: 0.5rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--fg); background: transparent; }

/* Capa de vídeo a pantalla completa */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.7s var(--ease-soft); }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.6s var(--ease-soft), transform 1.2s var(--ease-out); }
.hero-media video.is-on { opacity: 1; transform: scale(1); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 50%, rgba(12, 26, 38, 0.62), rgba(12, 26, 38, 0.88)); }
.s-inicio.is-reel .hero-media { opacity: 1; }

.hero-lead { margin: 0; max-width: 44ch; font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem); font-weight: 500; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; }
.scroll-cue { display: grid; justify-items: center; gap: 0.5rem; text-decoration: none; color: var(--muted); font-size: 0.9rem; }
.scroll-cue i { font-weight: 500; }
.scroll-cue-line { position: relative; width: 1px; height: 40px; background: var(--line); overflow: hidden; }
.scroll-cue-line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--c-paper); animation: cue 2.2s var(--ease-soft) infinite; }
@keyframes cue { to { top: 100%; } }
.scroll-cue:hover, .scroll-cue:focus-visible { color: var(--c-paper); }
.ticker { position: relative; z-index: 1; background: rgba(12, 26, 38, 0.6); }
@media (max-width: 719px) {
  .hero-title { font-size: min(9.6vw, 13svh); }
  .hero-reel { width: 1.6em; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
}
@media (max-height: 760px) { .scroll-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue-line::after { animation: none; } .hero-reel, .hero-media video { transition: none; } }