/**
 * El sistema visual de sylarcr.com.
 *
 * Una sola hoja para las trece páginas. Acá viven los tokens, el armazón —isla
 * de navegación, pie, botones, tipografía— y los componentes que más de una
 * página usa. Lo que es de una sola página vive en su propia hoja (`home.css`,
 * `contacto.css`, `demo.css`).
 *
 * Sistema claro sobre lavanda: púrpura #7C3AED para la acción, cian #0891B2
 * para el dato, tinta índigo #1E1B4B para leer. La marca no cambió en el
 * rediseño de 2026-08; lo que subió fue la ejecución:
 *
 *   - la barra dejó de ser una franja pegada al borde y ahora es una isla de
 *     vidrio que flota sobre la página;
 *   - toda superficie que importa lleva doble bisel: un marco exterior tenue
 *     y un núcleo interior con su propia luz, radios concéntricos;
 *   - el contenido entra en escena al llegar al viewport, no está simplemente
 *     puesto (`.revela`, la maneja site.js y respeta reduced-motion);
 *   - un grano casi subliminal rompe la planicie digital del lavanda.
 *
 * Escala de capas, para no inventar z-index sueltos:
 *   100 skip-link · 90 grano · 50 isla de navegación · 1 contenido realzado.
 *
 * Radios, una sola regla: interactivo = píldora; marco exterior 28; núcleo
 * interior 20; chip 12. Nada intermedio.
 */

/* Geist Sans, variable y autoalojada.
   68 KB para todos los pesos, licencia OFL, servida desde el propio dominio:
   sin `fonts.gstatic.com` no hay una petición a un tercero en la primera
   pintura de una página que vende aislamiento de datos. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fuentes/geist.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Superficies. Lavanda muy claro de base y blanco para lo que flota:
     sobre blanco puro una tarjeta blanca no existe. */
  --fondo: #faf5ff;
  --fondo-2: #f4eefe;
  --panel: #ffffff;
  --panel-suave: #f7f3fd;

  /* Texto. Tinta índigo, nunca negro puro: el negro sobre lavanda se ve
     ajeno, como pegado de otro documento. */
  --tinta: #1e1b4b;
  --tinta-suave: #3e3b66;
  --muted: #5a5878;
  --muted-strong: #4a4870;
  --rotulo: #6f6c8f;

  /* La acción es violeta; el dato es cian. Dos acentos con oficios distintos,
     nunca intercambiables. */
  --violet: #7c3aed;
  --violet-deep: #6d28d9;
  --violet-soft: #a78bfa;
  --cian: #0891b2;

  --line: rgba(30, 27, 75, .13);
  --line-soft: rgba(30, 27, 75, .07);

  /* Vidrio claro: blanco translúcido con desenfoque, borde interior de un
     píxel y un brillo arriba que simula el canto pulido. Dos niveles. */
  --glass-1: rgba(255, 255, 255, .55);
  --glass-2: rgba(255, 255, 255, .78);
  --blur: blur(18px);
  --brillo-canto: inset 0 1px 0 rgba(255, 255, 255, .55);

  /* Sombras con tinte violeta, no gris: en un ambiente lavanda la sombra
     neutra se ve sucia. La flotante es para lo que de verdad despega. */
  --shadow-1: 0 16px 40px rgba(76, 29, 149, .1);
  --shadow-2: 0 32px 80px rgba(76, 29, 149, .14);
  --shadow-flotante: 0 24px 70px rgba(76, 29, 149, .16), 0 4px 14px rgba(76, 29, 149, .07);

  /* El doble bisel: marco exterior apenas presente, núcleo con luz propia. */
  --marco: rgba(255, 255, 255, .5);
  --marco-borde: rgba(30, 27, 75, .08);

  --content: 1240px;
  --radio-chip: 12px;
  --radio-nucleo: 20px;
  --radio-shell: 28px;
  /* Alias históricos: siguen apuntando a la escala nueva. */
  --radio: 16px;
  --radio-lg: 26px;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Movimiento: dos duraciones y dos curvas. La corta responde, la blanda
     acomoda las piezas grandes con peso físico. */
  --paso: .22s;
  --paso-largo: .7s;
  --curva: cubic-bezier(.22, .8, .3, 1);
  --curva-blanda: cubic-bezier(.32, .72, 0, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--fondo); }

body {
  margin: 0;
  min-width: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El grano. Fijo, sin eventos, casi invisible: rompe la planicie del lavanda
   sin ensuciar el texto. Va sobre todo menos el skip-link. */
body::before {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .022;
  content: "";
  pointer-events: none;
}

main { overflow: clip; }

::selection { background: rgba(124, 58, 237, .18); }

img { max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: -64px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--tinta);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--paso) var(--curva);
}

.skip-link:focus { top: 14px; }

/* --- La isla ------------------------------------------------------------------
   La barra ya no es una franja pegada al techo: es una píldora de vidrio que
   flota despegada del borde, en todas las páginas —también en la portada,
   donde antes iba desnuda: una pieza suelta no compite con la escena, una
   franja sí. Al bajar solo gana cuerpo, nunca ancho. */

.nav {
  position: sticky;
  z-index: 50;
  top: 14px;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  width: min(1140px, calc(100% - 32px));
  min-height: 62px;
  margin: 14px auto 0;
  padding: 8px 10px 8px 24px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  backdrop-filter: var(--blur) saturate(1.4);
  -webkit-backdrop-filter: var(--blur) saturate(1.4);
  box-shadow: var(--brillo-canto), 0 10px 34px rgba(76, 29, 149, .08);
  transition: background var(--paso) var(--curva), box-shadow var(--paso) var(--curva);
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--brillo-canto), 0 18px 50px rgba(76, 29, 149, .13);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--tinta);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.035em;
  text-decoration: none;
}

/* La "S" del cuadrado: marca secundaria, para tamaños chicos y utilitarios.
   Donde hay lugar manda el rostro del robot, y nunca los dos juntos. */
.brand span {
  position: relative;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: linear-gradient(150deg, #9c85ff, #6d28d9 78%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px rgba(109, 40, 217, .3);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.nav .brand {
  gap: 0;
  font-size: 14px;
  font-weight: 740;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.nav .brand span { display: none; }

/* El logotipo manda en la barra: alto fijo, ancho por proporción. El texto
   "Sylar" queda solo en el `aria-label` del enlace, que es donde sirve. */
.brand-logo {
  display: block;
  width: auto;
  height: 16px;
}

@media (max-width: 560px) {
  .brand-logo { height: 14px; }
}

.nav nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: auto;
}

.nav nav a,
footer a { color: var(--muted); text-decoration: none; }

.nav nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: color var(--paso) var(--curva), background var(--paso) var(--curva);
}

.nav nav a:hover,
.nav nav a[aria-current="page"] { color: var(--tinta); background: rgba(124, 58, 237, .08); }

/* --- Mission Control ---------------------------------------------------
   Es el único destino que no es una página de texto: es la sala en vivo, y se
   entra a operarla. La señal es un punto de 3,5 px en cian —el color del dato
   en todo el sistema, el mismo que marca el ámbito en las consolas— al 55 %
   en reposo. Sin pulso y sin brillo: un indicador que late convierte una
   señal en un adorno, y acá alcanza con que esté.

   Al pasar el cursor la pastilla se tiñe de cian en vez de violeta, así las
   dos señales apuntan a lo mismo sin gritar ninguna. */

.nav-vivo { gap: 8px; }

.nav-vivo i {
  width: 3.5px;
  height: 3.5px;
  flex: none;
  border-radius: 50%;
  background: var(--cian);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .12);
  opacity: .55;
  transition: opacity var(--paso) var(--curva);
}

.nav nav a.nav-vivo:hover,
.nav nav a.nav-vivo[aria-current="page"] { background: rgba(8, 145, 178, .09); }
.nav-vivo:hover i,
.nav-vivo[aria-current="page"] i { opacity: 1; }

.nav-sesion {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
  color: var(--tinta-suave);
  font-size: 14px;
  font-weight: 580;
  text-decoration: none;
  transition: color var(--paso) var(--curva), border-color var(--paso) var(--curva);
}

.nav-sesion:hover { color: var(--tinta); border-color: rgba(30, 27, 75, .24); }

.menu-button { display: none; }

/* --- Acciones --------------------------------------------------------------- */

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  /* Violeta pleno, sin degradado: la autoridad se sostiene con un color que
     no duda. El brillo del canto arriba es lo único que lo talla. */
  background: var(--violet);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px rgba(124, 58, 237, .32);
  color: #fff !important;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 620;
  text-decoration: none;
  transition: transform var(--paso) var(--curva), background var(--paso) var(--curva), box-shadow var(--paso) var(--curva);
}

.button.small { min-height: 42px; padding-inline: 18px; font-size: 13.5px; }
.nav > .button.small { min-height: 44px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 24px rgba(112, 54, 255, .2); }
.button.grande { min-height: 56px; padding-inline: 12px 9px; font-size: 15.5px; }
.button.grande:not(:has(.btn-icono)) { padding-inline: 30px; }
.button:disabled { cursor: not-allowed; opacity: .55; }

/* La flecha vive en su propia cápsula, a ras del borde derecho: el botón
   dentro del botón. Al pasar el cursor, la cápsula empuja en diagonal. */
.button.grande > :first-child:not(.btn-icono) { padding-left: 18px; }

.btn-icono {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform var(--paso) var(--curva), background var(--paso) var(--curva);
}

/* Presión física: el botón cede un punto al hacer clic. */
.button:active { transform: translateY(0) scale(.985); }

/* La acción secundaria de vidrio: nació en la portada y ahora la usan dos
   páginas, así que vive acá y no en `home.css`. */
.boton-vidrio {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 24px 80px rgba(47, 32, 88, .08);
  color: var(--tinta-suave);
  font-size: 14.5px;
  font-weight: 590;
  text-decoration: none;
  transition: color var(--paso) var(--curva), border-color var(--paso) var(--curva), translate var(--paso) var(--curva), scale var(--paso) var(--curva);
}

.boton-vidrio svg { color: var(--violet); }

@media (hover: hover) {
  .boton-vidrio:hover { translate: 0 -1px; scale: 1.01; color: var(--tinta); border-color: rgba(124, 58, 237, .35); }
}

/* La acción secundaria no compite: es texto con una flecha que se mueve. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 6px;
  color: var(--tinta-suave);
  font-size: 14.5px;
  font-weight: 590;
  text-decoration: none;
  transition: color var(--paso) var(--curva);
}

.text-link svg { transition: transform var(--paso) var(--curva); }

.button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

/* --- CTA fijo de móvil -------------------------------------------------------
   En angosto, la isla esconde su botón dentro del menú: la acción principal
   baja al pulgar. La crea site.js en toda página que no sea su destino, y se
   retira cuando el pie entra en pantalla. En escritorio no existe. */

.cta-movil { display: none; }

@media (max-width: 800px) {
  .cta-movil {
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--violet);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 34px rgba(124, 58, 237, .38);
    color: #fff;
    font-size: 15px;
    font-weight: 620;
    text-decoration: none;
    translate: -50% 0;
    transition: translate var(--paso) var(--curva), opacity var(--paso) var(--curva);
  }

  .cta-movil:active { scale: .97; }

  .cta-movil.oculto {
    translate: -50% calc(100% + 24px);
    opacity: 0;
    pointer-events: none;
  }
}

/* --- Tipografía ------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 20px;
  color: var(--rotulo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.page-hero h1,
.contact-layout h1 {
  margin: 0;
  font-size: clamp(42px, 5.2vw, 76px);
  font-weight: 680;
  letter-spacing: -.046em;
  line-height: 1.01;
  text-wrap: balance;
}

.page-hero h1 em,
.contact-layout h1 em { color: var(--violet-deep); font-style: normal; }

.lead {
  max-width: 54ch;
  margin: clamp(20px, 2.4vh, 30px) 0 clamp(24px, 3vh, 34px);
  color: var(--muted);
  font-size: clamp(16.5px, 1.3vw, 19px);
  letter-spacing: -.012em;
  line-height: 1.6;
  text-wrap: pretty;
}

.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.section { max-width: var(--content); margin: auto; padding: clamp(90px, 12vh, 150px) 24px; }

/* El encabezado ya dejó su aire abajo. Sin esto los dos rellenos se suman y
   quedan 260 px de lavanda entre el copete y lo primero que hay que leer. */
.page-hero + .section,
.page-hero + .limites,
.page-hero + .ecosistema { padding-top: clamp(28px, 4vh, 52px); }

.section > h2,
.cta h2 {
  max-width: 940px;
  margin: 0 0 56px;
  font-size: clamp(36px, 4.4vw, 62px);
  font-weight: 650;
  letter-spacing: -.048em;
  line-height: 1.04;
  text-wrap: balance;
}

/* --- Revelado --------------------------------------------------------------
   site.js marca los bloques con `.revela` y les enciende `.visto` cuando
   entran al viewport. Sin JavaScript la clase nunca aparece y el contenido
   está visible desde el primer byte; con reduced-motion, site.js ni marca. */

.revela {
  opacity: 0;
  translate: 0 22px;
  transition: opacity var(--paso-largo) var(--curva-blanda), translate var(--paso-largo) var(--curva-blanda);
  transition-delay: var(--revela-espera, 0s);
}

.revela.visto { opacity: 1; translate: 0 0; }

/* Dentro de un grupo, los hijos entran en cascada: 70 ms entre pieza y pieza. */
[data-revela-grupo] > .revela:nth-child(2) { --revela-espera: .07s; }
[data-revela-grupo] > .revela:nth-child(3) { --revela-espera: .14s; }
[data-revela-grupo] > .revela:nth-child(4) { --revela-espera: .21s; }
[data-revela-grupo] > .revela:nth-child(5) { --revela-espera: .28s; }
[data-revela-grupo] > .revela:nth-child(n+6) { --revela-espera: .35s; }

/* --- Encabezado de página interior ------------------------------------------ */

.page-hero {
  position: relative;
  max-width: var(--content);
  margin: auto;
  padding: clamp(72px, 10vh, 124px) 24px clamp(40px, 5vh, 64px);
}

/* La luz entra desde arriba a la derecha; el cian responde apenas desde la
   esquina opuesta. Una sala con una ventana, no dos lámparas iguales. */
.page-hero::after {
  position: absolute;
  right: -6%;
  top: 0;
  width: 52%;
  height: 90%;
  background: radial-gradient(ellipse at 60% 40%, rgba(167, 139, 250, .22), transparent 66%);
  filter: blur(30px);
  content: "";
  pointer-events: none;
}

.page-hero::before {
  position: absolute;
  left: -8%;
  bottom: -20%;
  width: 40%;
  height: 70%;
  background: radial-gradient(ellipse at 40% 60%, rgba(8, 145, 178, .07), transparent 68%);
  filter: blur(34px);
  content: "";
  pointer-events: none;
}

.page-hero > * { position: relative; z-index: 1; }
.page-hero .lead { margin-bottom: 0; }
.page-hero .actions { margin-top: clamp(24px, 3vh, 34px); }

/* --- Cierre común ----------------------------------------------------------- */

.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(100px, 14vh, 170px) 24px;
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(ellipse 46% 66% at 50% 100%, rgba(167, 139, 250, .24), transparent 70%),
    var(--fondo-2);
  text-align: center;
}

.cta > * { position: relative; z-index: 1; }
.cta h2 { max-width: 900px; margin-bottom: 18px; }
.cta p { max-width: 580px; margin: 0 0 30px; color: var(--muted); font-size: 17px; line-height: 1.6; }

/* --- Pie -----------------------------------------------------------------
   No es un mapa del sitio. Es el cierre editorial de la página: una
   declaración grande, cuatro grupos de enlaces que son solo tipografía —sin
   una caja, sin un borde entre ellos— y, detrás de todo, la marca en tamaño
   de cartel disolviéndose en el fondo.

   La profundidad la dan dos halos difusos y el degradado de la palabra
   gigante, no las sombras: en una superficie clara la sombra ensucia y el
   aire construye. */

.pie {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: clamp(80px, 11vh, 132px) max(24px, calc((100vw - var(--content)) / 2)) 0;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 14px;
}

/* El ambiente: violeta arriba a la izquierda, un susurro de cian abajo a la
   derecha. Fijos y muy difusos — es la luz de la sala, no un efecto. */
.pie-lienzo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 52% 62% at 4% 0%, rgba(167, 139, 250, .18), transparent 68%),
    radial-gradient(ellipse 44% 56% at 98% 88%, rgba(8, 145, 178, .07), transparent 70%),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, .62));
  pointer-events: none;
}

.pie-cuerpo {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 2.38fr);
  align-items: start;
  column-gap: clamp(40px, 7vw, 120px);
}

/* La declaración. Es lo primero y es grande: el pie abre como abre una
   contratapa, no como una lista de enlaces. */
/* La declaración manda la primera columna. Los tres verbos van uno por
   renglón: es la marca, no un párrafo. */
.pie-declaracion { grid-column: 1; max-width: 14ch; }

.pie-marca {
  display: inline-block;
  /* En móvil la palabra mide 32 px de alto: el relleno lleva el área tocable a
     44 px y el margen negativo lo descuenta, así el pie no se mueve un píxel. */
  margin-block: -6px;
  padding-block: 6px;
  color: var(--tinta);
  font-size: clamp(32px, 3.9vw, 54px);
  font-weight: 720;
  letter-spacing: -.045em;
  line-height: 1;
  text-decoration: none;
}

.pie-declaracion p {
  margin: 14px 0 0;
  color: var(--muted-strong);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.35;
  text-wrap: balance;
}

/* Los cuatro grupos. Columnas de anchos distintos a propósito: dos llevan
   cuatro enlaces y dos llevan dos, y forzarlas a la misma medida es lo que
   produce el mapa del sitio que este pie no quiere ser. */
.pie-grupos {
  display: grid;
  grid-column: 2;
  grid-template-columns: 1.05fr 1fr .95fr .8fr;
  gap: clamp(24px, 3vw, 48px);
  /* Arranca a la altura de la declaración, no ochenta píxeles más abajo: ese
     hueco era lo que hacía que el pie se leyera como dos bloques sueltos. */
  margin-top: 6px;
}

.pie-grupos > div { display: grid; align-content: start; min-width: 0; }

.pie-grupos b {
  margin-bottom: 16px;
  color: var(--rotulo);
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* El enlace se corre dos píxeles y le entra una marca violeta desde la
   izquierda. Es la microinteracción entera: en un pie, cualquier cosa más
   grande compite con lo que hay arriba. */
.pie-grupos a {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14.5px;
  text-decoration: none;
  transition: color var(--paso) var(--curva), transform var(--paso) var(--curva);
}

.pie-grupos a::before {
  position: absolute;
  left: -14px;
  width: 6px;
  height: 1px;
  background: var(--violet);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--paso) var(--curva), transform var(--paso) var(--curva);
}

.pie-grupos a[aria-current="page"] { color: var(--tinta); font-weight: 620; }

.pie-cierre {
  grid-column: 1 / -1;
  margin-top: clamp(52px, 7vh, 84px);
  padding: 22px 0 26px;
  border-top: 1px solid var(--line-soft);
}

.pie-cierre small { color: var(--rotulo); font-size: 12.5px; }

/* --- La marca en tamaño de cartel ---------------------------------------
   Se apoya en el borde de abajo y se disuelve hacia arriba con un degradado
   recortado al texto: no es una imagen de fondo ni una marca de agua, es la
   palabra misma volviéndose fondo. Queda por detrás de todo y fuera del
   árbol de accesibilidad. */

.pie-gigante {
  position: absolute;
  z-index: -1;
  left: 50%;
  /* Solo asoma la parte alta de las letras. */
  bottom: -.34em;
  margin: 0;
  color: transparent;
  /* Invisible arriba —donde están los enlaces— y apenas presente abajo, contra
     el borde. Así las letras **emergen** del canto inferior en vez de quedar
     como una mancha detrás del texto, que es lo que pasaba con el degradado
     al revés y al 13 %. */
  background: linear-gradient(180deg, rgba(124, 58, 237, 0) 6%, rgba(124, 58, 237, .085) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: min(19vw, 300px);
  font-weight: 760;
  letter-spacing: -.06em;
  line-height: .78;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .pie-grupos a:hover { color: var(--tinta); transform: translateX(2px); }
  .pie-grupos a:hover::before { opacity: 1; transform: scaleX(1); }
  .pie-marca:hover { color: var(--violet-deep); }
}

/* --- Sellos ------------------------------------------------------------------
   Garantías en fila, con ícono. Van junto a cada punto de conversión: lo último
   que se lee antes de decidir tiene que ser lo que la plataforma garantiza. */

.sellos-franja {
  max-width: var(--content);
  margin: auto;
  padding: 0 24px clamp(64px, 9vh, 104px);
}

.sellos-franja > .eyebrow { margin-bottom: 16px; }

.sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sellos li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  background: var(--glass-2);
  box-shadow: var(--brillo-canto);
  color: var(--tinta-suave);
  font-size: 13.5px;
  font-weight: 540;
}

.sellos svg { flex: none; color: var(--cian); }

/* --- Rostro Sylar ------------------------------------------------------------
   El símbolo principal de la marca. Donde hay lugar manda el rostro; la "S" del
   cuadrado queda para favicon y tamaños chicos. Nunca los dos en la misma
   composición. */

/* El arte oficial, no una reconstrucción en CSS. `--cara` sigue siendo el
   ancho, como antes; la proporción sale del recorte del archivo (1390×1034),
   que incluye las antenas y el resplandor violeta del contorno.
   La sombra va por `drop-shadow` y no por `box-shadow`: sigue la silueta del
   casco en vez de dibujar un rectángulo detrás. */
.cara {
  position: relative;
  display: inline-block;
  width: var(--cara, 64px);
  aspect-ratio: 1390 / 1034;
  background: url(/assets/marca/sylar-icono.png?v=1) center / contain no-repeat;
  filter: drop-shadow(
    0 calc(var(--cara, 64px) * .09)
    calc(var(--cara, 64px) * .18) rgba(76, 29, 149, .2));
}

/* --- Marco y núcleo -----------------------------------------------------------
   El doble bisel compartido: un envoltorio apenas más oscuro que el aire y un
   núcleo blanco con su propio canto de luz, radios concéntricos (28 fuera,
   20 dentro). Es la diferencia entre una tarjeta puesta y una pieza encajada. */

.marco {
  padding: 8px;
  border: 1px solid var(--marco-borde);
  border-radius: var(--radio-shell);
  background: var(--marco);
  box-shadow: 0 1px 2px rgba(30, 27, 75, .04);
}

.marco > .nucleo {
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radio-nucleo);
  background: var(--panel);
  box-shadow: var(--brillo-canto), var(--shadow-1);
}

/* --- Declaración (Seguridad, Empresa, Integraciones, Recursos) --------------- */

.declaracion {
  max-width: calc(1000px + 24px);
  margin-inline: max(24px, calc((100vw - var(--content)) / 2)) auto;
  padding: clamp(48px, 8vh, 96px) 24px clamp(48px, 8vh, 96px) 0;
}

.declaracion p {
  margin: 0;
  color: var(--tinta);
  font-size: clamp(27px, 3.6vw, 50px);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.12;
  text-wrap: balance;
}

.declaracion p em { color: var(--muted); font-style: normal; }

/* Para salvedades: lo que todavía no tenemos se dice con claridad, no a gritos. */
.declaracion.menor { padding-block: clamp(32px, 5vh, 56px); }
.declaracion.menor p {
  max-width: 62ch;
  font-size: clamp(16px, 1.25vw, 18.5px);
  font-weight: 400;
  letter-spacing: -.008em;
  line-height: 1.72;
}

/* --- Límites (Seguridad) / Principios (Empresa, Recursos) --------------------
   Sin numeración: el orden en la página ya ordena. Lo que pesa es el título. */

.limites {
  max-width: calc(880px + 24px);
  margin-inline: max(24px, calc((100vw - var(--content)) / 2)) auto;
  padding: 0 24px clamp(72px, 10vh, 118px) 0;
}

.limites > div {
  padding-block: clamp(30px, 4.4vh, 48px);
  border-top: 1px solid var(--line-soft);
}

.limites h2 { margin: 0 0 10px; font-size: clamp(22px, 2.1vw, 29px); font-weight: 650; letter-spacing: -.03em; }
.limites p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }

/* --- Ecosistema (Integraciones) ---------------------------------------------- */

.ecosistema {
  max-width: var(--content);
  margin: auto;
  padding: clamp(24px, 4vh, 48px) 24px clamp(72px, 10vh, 118px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.ecosistema h2 { margin: 0 0 20px; color: var(--rotulo); font-size: 12px; font-weight: 680; letter-spacing: .14em; text-transform: uppercase; }
.ecosistema ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.ecosistema li { padding: 15px 0; border-top: 1px solid var(--line-soft); color: var(--tinta-suave); font-size: 15.5px; }
.ecosistema li small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }

/* El centro es una pieza física: rostro en su medallón de doble bisel. */
.ecosistema .nucleo-equipo {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(26px, 3vw, 38px) clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--marco-borde);
  border-radius: var(--radio-shell);
  background: var(--marco);
  text-align: center;
}

.ecosistema .nucleo-equipo > span:first-child { filter: drop-shadow(0 14px 30px rgba(76, 29, 149, .18)); }
.ecosistema .nucleo-equipo b { font-size: 15px; font-weight: 640; }
.ecosistema .nucleo-equipo span:last-child { color: var(--muted); font-size: 13px; }

/* --- Precios -----------------------------------------------------------------
   Tres componentes del precio en un bento asimétrico: la plataforma manda,
   consumo y servicio la escoltan apilados. Cada celda con su tinte, ninguna
   en blanco sobre blanco. */

.pricing-explain {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: auto auto;
  gap: clamp(14px, 1.6vw, 22px);
}

.pricing-explain > div {
  display: grid;
  align-content: end;
  gap: 0;
  min-height: 200px;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--radio-shell);
  box-shadow: var(--brillo-canto), 0 14px 40px rgba(76, 29, 149, .07);
}

.pricing-explain > div:first-child {
  grid-row: 1 / 3;
  background:
    radial-gradient(ellipse 90% 70% at 15% 0%, rgba(167, 139, 250, .26), transparent 70%),
    var(--panel);
}

.pricing-explain > div:nth-child(2) {
  background:
    radial-gradient(ellipse 90% 90% at 85% 0%, rgba(8, 145, 178, .1), transparent 72%),
    var(--panel);
}

.pricing-explain > div:nth-child(3) { background: var(--panel); }

.pricing-explain span { display: block; margin-bottom: clamp(28px, 5vh, 72px); color: var(--rotulo); font-size: 10px; font-weight: 720; letter-spacing: .14em; text-transform: uppercase; }
.pricing-explain h2 { margin: 0 0 12px; font-size: clamp(23px, 2.2vw, 30px); font-weight: 650; letter-spacing: -.032em; }
.pricing-explain p { margin: 0; max-width: 46ch; color: var(--muted); line-height: 1.7; }

.honest-price {
  max-width: 960px;
  margin: 0 auto clamp(72px, 10vh, 118px);
  padding: 8px;
  border: 1px solid var(--marco-borde);
  border-radius: var(--radio-shell);
  background: var(--marco);
  text-align: center;
}

.honest-price > div {
  padding: clamp(52px, 7vh, 84px) clamp(28px, 7vw, 84px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radio-nucleo);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(167, 139, 250, .14), transparent 70%),
    var(--panel);
  box-shadow: var(--brillo-canto), var(--shadow-1);
}

.honest-price p { margin: 0 0 28px; color: var(--tinta-suave); font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.02em; line-height: 1.5; text-wrap: balance; }

/* --- Legales y 404 ------------------------------------------------------------ */

.legal { max-width: 800px; margin: 90px auto 140px; padding: 0 24px; }
.legal h1, .not-found h1 { margin: 18px 0 36px; font-size: clamp(46px, 6.4vw, 70px); font-weight: 670; letter-spacing: -.05em; line-height: 1; }
.legal h2 { margin: 52px 0 12px; font-size: 24px; font-weight: 630; letter-spacing: -.025em; }
.legal p { color: var(--muted); line-height: 1.75; }
.legal-warning { padding: 20px 22px; border-left: 2px solid #b8860b; border-radius: 0 var(--radio-chip) var(--radio-chip) 0; background: rgba(184, 134, 11, .07); color: #7a5c10; line-height: 1.6; }

.not-found { min-height: 100svh; max-width: 800px; margin: auto; padding: 80px 24px; display: flex; flex-direction: column; justify-content: center; }
.not-found .eyebrow { margin-top: 72px; }
.not-found > p:not(.eyebrow) { color: var(--muted); font-size: 18px; }

/* --- Contacto ----------------------------------------------------------------- */

.contact-layout { max-width: var(--content); margin: clamp(56px, 8vh, 96px) auto clamp(72px, 10vh, 118px); padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 486px); align-items: start; gap: clamp(54px, 7vw, 96px); }
.contact-layout h1 { max-width: 700px; font-size: clamp(38px, 4vw, 58px); }
.contact-points { margin-top: 54px; border-top: 1px solid var(--line); }
.contact-points p { display: grid; grid-template-columns: minmax(140px, .42fr) 1fr; gap: 20px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.contact-points b { font-weight: 600; }
.contact-points span { color: var(--muted); }
.contact-layout .sellos { margin-top: 26px; }

/* --- Hover y foco ------------------------------------------------------------- */

@media (hover: hover) {
  .button:hover { transform: translateY(-1px); background: var(--violet-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 16px 36px rgba(124, 58, 237, .4); }
  .button:hover .btn-icono { transform: translate(2px, -1px); background: rgba(255, 255, 255, .26); }
  .text-link:hover { color: var(--tinta); }
  .text-link:hover svg { transform: translateX(3px); }
}

/* --- Escalas ------------------------------------------------------------------ */

@media (max-width: 1060px) {
  /* Cinco destinos y dos acciones no entran cómodos en 1140. Antes de romper
     nada, la isla se ensancha y los enlaces se aprietan. */
  .nav { width: calc(100% - 28px); padding-left: 18px; }
  .nav nav { gap: 0; }
  .nav nav a { padding-inline: 10px; font-size: 13.5px; }
  .contact-layout { grid-template-columns: 1fr; max-width: 780px; }
}

@media (max-width: 880px) {
  .ecosistema { grid-template-columns: 1fr; gap: 40px; }
  .ecosistema .nucleo-equipo { justify-items: start; text-align: left; }
}

@media (max-width: 800px) {
  /* La isla se queda isla: ocupa el ancho menos el aire de los costados y,
     abierta, deja de ser píldora para volverse panel redondeado. */
  .nav { top: 10px; width: calc(100% - 20px); min-height: 58px; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 8px 10px 8px 18px; }
  .nav.menu-abierto { border-radius: 26px; }
  /* El botón de menú va último, contra el borde derecho. */
  .menu-button { position: relative; order: 3; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: 6px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .66); color: transparent; cursor: pointer; font-size: 0; }
  .menu-button::before, .menu-button::after { position: absolute; width: 18px; height: 1.5px; background: var(--tinta); content: ""; transition: transform var(--paso) var(--curva), top var(--paso) var(--curva); }
  .menu-button::before { top: 18px; }
  .menu-button::after { top: 25px; }
  .menu-button[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
  .menu-button[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }
  /* Abierto, el menú **se recompone**: cinco destinos en dos columnas leen
     mejor que una lista de cinco renglones, y Mission Control —que es el
     único que abre una sala— se queda solo en la última fila, a lo ancho. */
  .nav nav { order: 4; width: 100%; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; margin: 0; padding: 8px 4px 10px; border-top: 1px solid var(--line-soft); }
  .nav nav.open { display: grid; }
  .nav nav a { min-height: 48px; padding-inline: 12px; border-radius: 14px; font-size: 15px; }
  .nav nav a.nav-vivo { grid-column: 1 / -1; order: 1; }
  .nav-sesion { order: 2; margin-left: auto; }
  .nav > .button { display: none; }
  .nav nav.open ~ .button { order: 5; width: 100%; display: inline-flex; }

  .section { padding: clamp(72px, 9vh, 100px) 20px; }
  .section > h2, .cta h2 { font-size: clamp(34px, 9vw, 52px); margin-bottom: 40px; }
  .page-hero { padding: 64px 20px 52px; }
  .page-hero h1, .contact-layout h1 { font-size: clamp(38px, 10.5vw, 56px); }
  .lead { font-size: 16.5px; }

  .pricing-explain { grid-template-columns: 1fr; }
  .pricing-explain > div, .pricing-explain > div:first-child { grid-row: auto; min-height: 0; }
  .pricing-explain span { margin-bottom: 26px; }
  .honest-price { margin-inline: 20px; }
  .honest-price > div { padding-inline: 20px; }

  /* El pie se recompone: la declaración arriba, y los cuatro grupos en dos
     columnas de dos. Sigue sin ser un mapa del sitio. */
  .pie { padding-top: clamp(64px, 9vh, 88px); }
  .pie-cuerpo { grid-template-columns: 1fr; }
  .pie-declaracion { grid-column: 1; max-width: none; }
  .pie-grupos { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; margin-top: 48px; }
  .contact-layout { margin-top: 48px; padding-inline: 20px; }
}

@media (max-width: 520px) {
  .actions { align-items: stretch; flex-direction: column; }
  .actions .button, .actions .text-link { width: 100%; justify-content: center; }
  .contact-points p { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 420px) {
  /* En un teléfono el pie **se recompone**: los dos grupos de cuatro enlaces
     ocupan el ancho y los dos de dos comparten la última fila. Apilar los
     cuatro dejaría una columna de veinte renglones, que es justo el mapa del
     sitio que este pie no quiere ser. */
  .pie-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .pie-grupos > div:nth-child(-n+2) { grid-column: 1 / -1; }
  .pie-grupos > div:nth-child(-n+2) > b { margin-bottom: 10px; }
}

/* Cuando el sistema pide quietud, la página se queda quieta. No es una mejora
   opcional: para algunas personas el movimiento es un síntoma. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}