/* === fonts.css === */
/* Fuentes auto-alojadas - Zodiak (display) + Switzer (texto), de Fontshare.
   Auto-alojadas para cumplir la CSP (font-src 'self'), no depender de un CDN
   externo y evitar el render-blocking de Google Fonts. */

@font-face{font-family:'Zodiak';src:url('/static/fonts/zodiak-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Zodiak';src:url('/static/fonts/zodiak-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Zodiak';src:url('/static/fonts/zodiak-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('/static/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('/static/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('/static/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('/static/fonts/switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* === reset.css === */
/* =====================================================
   RESET CSS - Normalizar estilos base
   ===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-base, 'Inter', sans-serif);
  line-height: 1.6;
  color: #e2e4ee;
  background: #0a0b12;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  /* Zodiak, igual que en el home. Peso 700 y no 600 porque Zodiak solo trae
     400 y 700: pedir 600 hace que el navegador lo sintetice y engorda el trazo. */
  font-family: var(--font-family-heading);
  font-weight: 700;
  /* El español encadena palabras largas ("acompañamos", "personalización").
     En columnas estrechas se salían de su caja en vez de partirse. */
  overflow-wrap: break-word;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: #f0f0f8;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: 1rem;
}

a {
  color: #a78bfa;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #c4b5fd;
}

button, input[type='submit'], input[type='button'] {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

textarea {
  resize: vertical;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Focus styles */
:focus {
  outline: 2px solid rgba(124, 58, 237, 0.7);
  outline-offset: 2px;
}

/* Accesibilidad */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* === variables.css === */
/* =====================================================
   CSS VARIABLES - Sistema de diseño
   ===================================================== */

:root {
  /* Colores Primarios — Zyro Brand */
  --color-dark: #0a0b12;          /* fondo de página */
  --color-darker: #06070d;        /* fondo más profundo */
  --color-slate: #c8ccd6;         /* texto/etiquetas claras sobre fondos oscuros */
  --color-blue: #ee3d36;          /* carmesí de la marca */
  --color-blue-light: #f5675f;    /* variante clara: para TEXTO sobre fondo oscuro */
  /* El carmesí de marca con texto blanco encima solo llega a 3.92:1, por debajo
     del 4.5:1 que exige WCAG AA. Este tono profundo da 5.5:1 y es el que deben
     usar los botones y las etiquetas que lleven texto blanco. */
  --color-blue-deep: #c9291f;
  --color-cyan: #ee3d36;          /* acento secundario */
  --color-white: #ffffff;
  --color-gray: #14161f;          /* superficie elevada (cards, panels) */
  --color-gray-dark: #a7adbb;     /* texto secundario */
  --color-gray-darker: #6d7484;   /* texto desenfatizado */

  /* Colores Semánticos */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Espaciado */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Tipografía — las mismas caras que el home (css/fonts.css, auto-alojadas).
     Antes las subpáginas iban con Inter + Poppins de Google y el home con
     Zodiak + Switzer: el sitio parecían dos sitios distintos.
     OJO: Zodiak solo tiene 400 y 700. Un font-weight 300/500/600/800 sobre
     --font-family-heading sale sintetizado por el navegador y se ve sucio. */
  --font-family-base: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-family-heading: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-family-mono: 'Monaco', 'Courier New', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Bordes */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.875rem;
  --border-radius-xl: 1.25rem;
  --border-radius-2xl: 1.75rem;
  --border-radius-full: 9999px;

  /* Sombras — ajustadas para fondos oscuros */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 24px 60px rgba(0, 0, 0, 0.7);

  /* Elevación al levantar un elemento (tarjetas, botones).
     Sustituye al antiguo --shadow-glow, que era un halo carmesí sin
     desplazamiento: eso no es profundidad, es decoración pegada al borde, y es
     de lo que hacía que las subpáginas se vieran de plantilla. La sombra de
     verdad tiene desplazamiento y desenfoque, y es neutra — el color lo pone el
     borde, no la sombra. Mismos valores que --sh-2 / --glow del home. */
  --shadow-lift: 0 16px 44px rgba(0, 0, 0, 0.5);
  --shadow-lift-sm: 0 6px 18px rgba(0, 0, 0, 0.45);

  /* Transiciones
     --ease es la misma curva que usa el home (remaster.css). Es lo que hace
     que un hover se sienta "de la casa": sale rápido y frena largo, en vez del
     `ease` genérico del navegador. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Escala tipográfica fluida — la misma que el home.
     Las subpáginas usaban tamaños FIJOS (3rem para un h1) mientras el home
     llega a 5.6rem: por eso, al saltar de una a otra, la web parecía encogerse.
     Con clamp() el titular crece con la pantalla en las nueve páginas. */
  --type-display: clamp(2.4rem, 5.4vw, 4.4rem);
  --type-h2: clamp(1.9rem, 4vw, 3.1rem);
  --type-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --type-lead: clamp(1.05rem, 1.5vw, 1.28rem);

  /* Ritmo vertical fluido (equivalente a .band del home) */
  --band-space: clamp(4rem, 9vw, 8rem);
  --band-space-tight: clamp(3rem, 6vw, 5rem);

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  --z-notification: 700;

  /* Ancho máximo del contenedor */
  --container-width: 1280px;
  --container-padding: 1.5rem;

  /* Breakpoints (para media queries) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* === remaster.css === */
/* ==========================================================================
   ZYRO — REMASTER · Dirección de arte "Signal / Dark"
   Base navy-carbón casi negro + coral señal que resalta. Fraunces + Space Grotesk.
   Se carga DESPUÉS de los CSS base para ganar la cascada del home.
   ========================================================================== */

:root {
  /* — Color: oscuro premium (navy / carbón) + coral señal — */
  --paper:       #0a0b12;   /* fondo de página (navy casi negro) */
  --paper-2:     #0e1019;   /* banda alterna / superficie hundida */
  --paper-ink:   #06070d;   /* superficie más profunda (footer) */
  --card:        #14161f;   /* tarjetas */
  --card-2:      #1c1f2b;   /* tarjeta elevada / hover */
  --ink:         #fbfbfd;   /* texto principal (casi blanco frío) */
  --ink-2:       #a7adbb;   /* texto secundario */
  /* Estaba en #6d7484, que sobre las tarjetas (#14161f) solo daba 3.85:1.
     Este tono llega a 6.3:1 y sigue leyéndose como texto secundario. */
  --muted:       #8b92a3;   /* texto terciario / metadatos */
  --line:        rgba(255, 255, 255, .09);   /* hairline */
  --line-2:      rgba(255, 255, 255, .18);   /* hairline fuerte */
  --signal:      #ee3d36;   /* carmesí de la marca */
  --signal-600:  #f5675f;   /* señal claro para TEXTO sobre oscuro */
  /* Superficies que llevan texto blanco encima: el carmesí de marca da 3.92:1
     con blanco, por debajo del 4.5:1 de WCAG AA. Este llega a 5.5:1. */
  --signal-deep: #c9291f;
  --signal-tint: rgba(238, 61, 54, .13);     /* fondo tenue señal */
  --glow:        0 14px 34px rgba(0, 0, 0, .55);   /* elevación neutra (sin halo de color) */
  --ok:          #34d399;

  /* — Tipografía — */
  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-sans: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* — Radios — */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-pill: 999px;

  /* — Sombra (para fondos oscuros) — */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 16px 44px rgba(0, 0, 0, .5);
  --sh-3: 0 28px 64px rgba(0, 0, 0, .62);

  /* — Motion — */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* — Layout — */
  --wrap: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
}

/* ─────────────────────────────  CANVAS  ───────────────────────────── */
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body.zx {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.62;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.zx ::selection { background: var(--signal); color: #fff; }

.zx h1, .zx h2, .zx h3, .zx h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.05;
  font-optical-sizing: auto;
}
.zx p { color: var(--ink-2); }
.zx a { color: inherit; text-decoration: none; }
.zx strong { font-weight: 600; color: var(--ink); }
.zx img { max-width: 100%; display: block; }

/* ─────────────────────────────  LAYOUT  ───────────────────────────── */
.zwrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.zwrap--wide { max-width: 1360px; }
.zwrap--narrow { max-width: 820px; }

.band { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.band--alt { background: var(--paper-2); }
.band--line { border-top: 1px solid var(--line); }

.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ─────────────────────────  TIPOGRAFÍA DISPLAY  ───────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans); font-weight: 600;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--signal-600);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--signal); opacity: .9;
}
.display {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.7rem, 6.4vw, 5.6rem);
  line-height: .98; letter-spacing: -.03em;
}
.h2big { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.028em; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
.emph { font-style: italic; color: var(--signal); font-weight: 400; }
.serifnum { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Cabecera de sección reutilizable */
.zhead { max-width: 760px; }
.zhead .eyebrow { margin-bottom: 1.1rem; }
.zhead h2 { margin-bottom: 1rem; }
.zhead .lead { max-width: 54ch; }

/* ─────────────────────────────  BOTONES  ──────────────────────────── */
.zbtn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .96rem; letter-spacing: -.01em;
  padding: .95rem 1.5rem; border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg); cursor: pointer;
  transition: transform .5s var(--ease), background .25s ease, color .25s ease, box-shadow .35s ease;
  will-change: transform;
}
.zbtn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.zbtn:active { transform: translateY(0); }
.zbtn__arrow { transition: transform .45s var(--ease); }
.zbtn:hover .zbtn__arrow { transform: translateX(4px); }

/* Fondo profundo: con el carmesi de marca el texto blanco da 3.92:1. */
.zbtn--signal { --btn-bg: var(--signal-deep); --btn-fg: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.zbtn--signal:hover { --btn-bg: var(--signal); box-shadow: var(--glow); }
.zbtn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none;
}
.zbtn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Botón con la identidad de WhatsApp */
/* Verde WhatsApp con tinta oscura: blanco sobre #25d366 da 1.98:1 y no cumple WCAG AA */
.zbtn--wa { --btn-bg: #25d366; --btn-fg: #06251a; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.zbtn--wa:hover { --btn-bg: #2ee477; box-shadow: var(--glow); }
.zx .zbtn--wa { color: #06251a; }                   /* 11:1 sobre el verde (gana a `.zx a { color: inherit }`) */
.zx .zbtn--signal { color: #fff; }
.zbtn--lg { padding: 1.1rem 1.9rem; font-size: 1.02rem; }

/* Botón interactivo (hover reveal) — adaptación vanilla del componente shadcn "interactive-hover-button" */
.ihb {
  position: relative; isolation: isolate; display: inline-block; box-sizing: border-box;
  width: 10rem; cursor: pointer; overflow: hidden; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: transparent;
  padding: .72rem .5rem; text-align: center;
  font-family: var(--font-sans); font-weight: 600; font-size: .9rem; line-height: 1;
  color: var(--ink); text-decoration: none;
  transition: border-color .3s ease;
}
.ihb__text { display: inline-block; transform: translateX(4px); transition: transform .5s var(--ease), opacity .5s var(--ease); }
.ihb:hover .ihb__text { transform: translateX(48px); opacity: 0; }
.ihb__hover {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  transform: translateX(48px); opacity: 0; color: #fff;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.ihb:hover .ihb__hover { transform: translateX(-4px); opacity: 1; }
.ihb__hover svg { width: 16px; height: 16px; }
.ihb__dot {
  position: absolute; left: 14%; top: 40%; z-index: 0;
  height: 8px; width: 8px; border-radius: var(--r-sm);
  background: var(--signal); transform: scale(1);
  transition: all .5s var(--ease);
}
.ihb:hover .ihb__dot { left: 0; top: 0; height: 100%; width: 100%; transform: scale(1.8); border-radius: var(--r-pill); }

/* Link con subrayado animado */
.zlink {
  position: relative; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: .4rem;
}
.zlink::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: var(--signal); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.zlink:hover { color: var(--signal-600); }
.zlink:hover::after { transform: scaleX(1); transform-origin: left; }
.zlink__arrow { transition: transform .4s var(--ease); }
.zlink:hover .zlink__arrow { transform: translateX(3px); }

/* ─────────────────────────────  TARJETAS  ─────────────────────────── */
.zcard {
  position: relative; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  transition: transform .5s var(--ease), border-color .35s ease, box-shadow .45s ease, background .35s ease;
}
.zcard:hover { transform: translateY(-5px); border-color: rgba(238, 61, 54, .38); background: var(--card-2); box-shadow: var(--sh-2); }
.zcard__idx {
  font-family: var(--font-display); font-size: .9rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.zcard h3 { font-size: 1.32rem; margin-bottom: .5rem; }
.zcard p { font-size: .96rem; color: var(--ink-2); line-height: 1.55; }

/* Icono señal (contenedor de SVG) */
.zico {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--ink); background: rgba(255, 255, 255, .02);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .5s var(--ease);
}
.zico svg { width: 22px; height: 22px; }
.zcard:hover .zico { background: var(--signal); color: #fff; border-color: var(--signal); transform: rotate(-4deg); box-shadow: var(--glow); }

/* Etiqueta / pill */
.ztag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-2); background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line); padding: .32rem .7rem; border-radius: var(--r-pill);
}
.ztag--signal { color: var(--signal-600); background: var(--signal-tint); border-color: transparent; }

/* Divisoria fina */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ─────────────────────────────  NAVBAR  ───────────────────────────── */
.znav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.znav.is-stuck {
  background: rgba(11, 14, 23, .8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: .7rem;
}
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
  position: relative;
  overflow: hidden;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 6px;
}

.navbar-logo::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 45px;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-25deg);
  opacity: 0;
  pointer-events: none;
}

.navbar-logo:hover::after {
  animation: logo-flare-shine 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes logo-flare-shine {
  0% { left: -60%; opacity: 0; }
  20% { opacity: 1; }
  100% { left: 160%; opacity: 0; }
}

.logo-wordmark {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.8rem;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1;
  padding-right: 0.15em;
  margin-right: -0.08em;
  background-image: linear-gradient(110deg, #ffffff 0%, #ffffff 38%, #ff9d98 45%, #ffffff 50%, #ee3d36 55%, #ffffff 62%, #ffffff 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position .75s cubic-bezier(0.16, 1, 0.3, 1), transform .3s ease, filter .3s ease;
}

.navbar-logo:hover .logo-wordmark {
  background-position: 0 0;
  transform: scale(1.02);
}

.logo-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

.logo-lines::before,
.logo-lines::after {
  content: '';
  display: block;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ee3d36, #f5675f);
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), filter .4s ease;
}

.logo-lines::before { width: 32px; }
.logo-lines::after  { width: 20px; }

.navbar-logo:hover .logo-lines::before { transform: translateX(3px); }
.navbar-logo:hover .logo-lines::after  { transform: translateX(5px); }

/* (.znav__logo eliminado: código muerto — el header usa .navbar-logo/.logo-wordmark) */
.znav__menu { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.znav__menu a {
  position: relative; font-size: .95rem; font-weight: 500; color: var(--ink-2);
  transition: color .25s ease; padding: .3rem 0;
}
.znav__menu a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: var(--signal); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.znav__menu a:hover, .znav__menu a.active { color: var(--ink); }
.znav__menu a:hover::after, .znav__menu a.active::after { transform: scaleX(1); transform-origin: left; }
.znav__toggle { display: none; background: none; border: 0; cursor: pointer; width: 30px; height: 24px; position: relative; }
.znav__toggle span { position: absolute; left: 0; height: 2px; width: 100%; background: var(--ink); transition: transform .3s var(--ease), opacity .3s ease; }
.znav__toggle span:nth-child(1) { top: 2px; }
.znav__toggle span:nth-child(2) { top: 11px; }
.znav__toggle span:nth-child(3) { top: 20px; }

/* Barra de progreso de scroll */
.zprogress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--signal); z-index: 600;
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* ─────────────────────────────  FOOTER  ───────────────────────────── */
.zfoot { background: var(--paper-ink); color: var(--ink); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem; border-top: 1px solid var(--line); }
.zfoot a { color: var(--ink-2); transition: color .25s ease; font-size: .93rem; }
.zfoot a:hover { color: var(--signal-600); }
.zfoot h4 { color: var(--ink); font-family: var(--font-sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 1.1rem; font-weight: 600; }
.zfoot__logo { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); }
.zfoot__logo b { color: var(--signal); }
.zfoot__bottom { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.6rem; color: var(--muted); font-size: .85rem; }

/* ─────────────────  MOTION · reveal (compatible rv-in)  ───────────── */
.zx .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
.zx .reveal--mask { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease), opacity .5s ease; }
.zx .reveal.rv-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* Titular con revelado por línea */
/* El padding ensancha la caja de recorte para que `overflow:hidden` no corte
   ascendentes ni descendentes (Fraunces itálica las tiene largas); el margen
   negativo compensa para no alterar el interlineado. */
.reveal-lines .rl { display: block; overflow: hidden; padding-block: .34em; margin-block: -.34em; }
.reveal-lines .rl > span { display: block; transform: translateY(105%); transition: transform .8s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal-lines.rv-in .rl > span { transform: translateY(0); }

/* ─────────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  /* El footer en 4 columnas se queda estrecho — pasa a 2 */
  .zfoot .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 720px) {
  .znav__menu { display: none; }
  .znav__toggle { display: block; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .lead { max-width: none; }
  /* Footer: columna única en móvil */
  .zfoot .grid-4 { grid-template-columns: 1fr; gap: 2rem; }
  .zfoot__bottom { flex-direction: column; gap: .8rem; text-align: center; }
  /* Botones del hero: apilados en pantallas pequeñas */
  .hero__ctas { flex-direction: column; }
  .hero__ctas .zbtn { width: 100%; justify-content: center; }
  /* CTA del diagnóstico: columna */
  .diag__ctas { flex-direction: column; align-items: stretch; }
  .diag__ctas .zbtn { width: 100%; justify-content: center; }
  /* CTA final */
  .cta-final__ctas { flex-direction: column; align-items: stretch; }
  .cta-final__ctas .zbtn { width: 100%; justify-content: center; }
  /* Empresa enterprise block */
  .enterprise { flex-direction: column; }
}

/* ─────────────────────────  ACCESIBILIDAD  ────────────────────────── */
.zx :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Solo desactivamos el movimiento problemático: animaciones en bucle (marquee) y
     movimiento continuo. Las microinteracciones de hover (botones, tarjetas, links)
     se CONSERVAN para que la UI no quede "rota" (saltos instantáneos) al pasar el cursor.
     La entrada por scroll ya la neutraliza el JS (añade rv-in al instante bajo reduce). */
  .zx *, .zx *::before, .zx *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .mq__track { animation: none !important; }
  /* Refuerzo sin-JS: garantiza que el contenido con reveal sea visible.
     NO tocamos transform/transition para no romper los hover de tarjetas que también son .reveal. */
  .zx .reveal { opacity: 1; }
}

/* ───────  Hover completo en elementos que TAMBIÉN son .reveal  ───────
   Van al final para ganar (por orden de cascada) a la transición de ENTRADA de
   .reveal (opacity/transform), y así animar todo su hover: elevación + borde + sombra.
   Incluyen opacity/transform para que la entrada por scroll siga animándose. */
.zx .zcard { transition: transform .5s var(--ease), opacity .55s var(--ease), border-color .35s ease, box-shadow .45s ease, background .35s ease; }
.zx .svc-row { transition: opacity .55s var(--ease), transform .5s var(--ease), background .35s ease, border-color .35s ease; }
.zx .plan { transition: transform .5s var(--ease), opacity .55s var(--ease), box-shadow .45s ease, border-color .35s ease; }

/* ───────────────────────── CURSOR SEGUIDOR ───────────────────────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483000; /* por encima de overlays como el banner de cookies (z 99999): el cursor nunca debe quedar debajo */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--color-blue-light, #f5675f);
  transition: opacity 0.3s ease;
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 0;
}
/* El aro visible se dibuja en ::before y es ESE el que se escala.
   Ojo: la propiedad `scale` se compone ANTES que `transform`, así que aplicarla
   al propio .cursor-ring multiplicaba el translate(x,y) que le pone el JS y
   desplazaba el cursor. Escalando el pseudo-elemento la posición no se toca
   y sigue sin animar width/height (sin reflow). */
.cursor-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 103, 95, 0.55);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.cursor-ring.cursor-hover::before {
  transform: scale(1.59);
  background: rgba(238, 61, 54, 0.12);
  border-color: var(--color-blue-light, #f5675f);
}

@media (hover: hover) and (pointer: fine) {
  html.custom-cursor-active,
  html.custom-cursor-active * {
    cursor: none !important;
  }
}