/* === 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;
}

/* === layout.css === */
/* =====================================================
   LAYOUT - Contenedor, Grid, Flex, Espaciado
   ===================================================== */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-2 {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-3 {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-4 {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* En tablet caben DOS columnas cómodas, no tres ni cuatro.
   Los mismos valores están repetidos en responsive.css, que se carga después y
   es la que manda de verdad: si tocas uno, toca el otro. */
@media (min-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Flexbox */
.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex-between {
  justify-content: space-between;
  align-items: center;
}

.flex-start {
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-end {
  justify-content: flex-end;
  align-items: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
.gap-4xl { gap: var(--space-4xl); }

/* Alineación */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Espaciado */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mt-4xl { margin-top: var(--space-4xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
.mb-4xl { margin-bottom: var(--space-4xl); }

.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }
.my-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); }
.my-4xl { margin-top: var(--space-4xl); margin-bottom: var(--space-4xl); }

.px-sm { padding: 0 var(--space-sm); }
.px-md { padding: 0 var(--space-md); }
.px-lg { padding: 0 var(--space-lg); }
.px-xl { padding: 0 var(--space-xl); }

.py-sm { padding: var(--space-sm) 0; }
.py-md { padding: var(--space-md) 0; }
.py-lg { padding: var(--space-lg) 0; }
.py-xl { padding: var(--space-xl) 0; }
.py-2xl { padding: var(--space-2xl) 0; }
.py-3xl { padding: var(--space-3xl) 0; }
.py-4xl { padding: var(--space-4xl) 0; }

.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

/* Visibilidad */
.hidden { display: none !important; }
.visible { display: block !important; }

.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-inline { display: inline; }
.d-none { display: none; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Width & Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }

/* Posicionamiento */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Rounded */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-2xl { border-radius: var(--border-radius-2xl); }
.rounded-full { border-radius: var(--border-radius-full); }

/* Sombras */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* Responsive */
@media (max-width: 768px) {
  .md-hidden { display: none; }
  .md-block { display: block; }
  
  .container {
    padding: 0 var(--space-md);
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}

@media (max-width: 640px) {
  .sm-hidden { display: none; }
  .sm-block { display: block; }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 0 var(--space-md);
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1rem; }
}

/* === components.css === */
/* =====================================================
   COMPONENTES - Botones, Tarjetas, Formularios
   ===================================================== */

/* BOTONES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border: 2px solid transparent;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  /* Misma coreografía que .zbtn en el home: el desplazamiento va con la curva
     de la casa y en medio segundo; el color, rápido. `transition: all` metía
     en la animación cosas que no deben animarse (bordes, tamaño) y hacía que
     el botón se sintiera blando. */
  transition: transform 0.5s var(--ease), background 0.25s ease,
              border-color 0.25s ease, color 0.25s ease, box-shadow 0.35s ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  letter-spacing: -0.01em;
}

/* Variantes de botón */
/* Fondo en el tono profundo: el carmesí de marca con texto blanco se queda en
   3.92:1 y WCAG AA pide 4.5:1. Así llega a 5.5:1. Al pasar el cursor sube al
   carmesí vivo, que es el momento en que el botón debe cantar. */
/* Las sombras son neutras a propósito. Una sombra carmesí bajo un botón
   carmesí no es profundidad: es un halo, y es de los tics que hacen que una
   web parezca generada. El color lo pone el propio botón; la sombra solo
   tiene que separarlo del fondo. Igual que .zbtn--signal en el home. */
.btn-primary {
  background: var(--color-blue-deep);
  color: var(--color-white);
  border-color: var(--color-blue-deep);
  box-shadow: var(--shadow-lift-sm);
}

.btn-primary:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
  color: var(--color-white);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background: transparent;
  color: var(--color-blue-light);
  border-color: rgba(238, 61, 54, 0.45);
}

/* Sin el anillo de 1px carmesí: era una sombra con desplazamiento cero, que es
   decoración pegada al borde y no elevación. El borde ya cambia de color. */
.btn-secondary:hover {
  background: rgba(238, 61, 54, 0.12);
  color: #ffffff;
  border-color: var(--color-blue-light);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border-color: transparent;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
  transform: translateY(-2px);
}

/* Tamaños de botón */
.btn-sm {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-md);
}

.btn-lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--font-size-lg);
}

.btn-block {
  width: 100%;
  display: flex;
  justify-content: center;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* TARJETAS */
/* Mismo comportamiento que .zcard en el home: la tarjeta se levanta, el fondo
   sube un escalón y el borde se tiñe de carmesí. Antes el hover era un halo de
   color; ahora es elevación de verdad, con desplazamiento y desenfoque. */
.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  transition: transform 0.5s var(--ease), border-color 0.35s ease,
              background 0.35s ease, box-shadow 0.45s ease;
}

.card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(238, 61, 54, 0.38);
  box-shadow: var(--shadow-lift);
  transform: translateY(-5px);
}

.card-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-body {
  margin-bottom: var(--space-lg);
}

.card-footer {
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* FORMULARIOS */
.form-group {
  margin-bottom: var(--space-xl);
}

.form-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate);
  font-size: var(--font-size-sm);
  letter-spacing: 0.01em;
}

.form-label.required::after {
  content: ' *';
  color: var(--color-danger);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-base);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-blue-light);
  box-shadow: 0 0 0 3px rgba(238, 61, 54, 0.18);
  background: rgba(238, 61, 54, 0.06);
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a78bfa' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: var(--space-2xl);
}

.form-select option {
  background: #0e0c1e;
  color: #ffffff;
}

.form-input.error,
.form-textarea.error,
.form-select.error {
  border-color: var(--color-danger);
  background-color: rgba(239, 68, 68, 0.05);
}

.form-error {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin-top: var(--space-sm);
}

.form-success {
  color: var(--color-success);
  font-size: var(--font-size-sm);
  margin-top: var(--space-sm);
}

.form-help {
  color: var(--color-gray-darker);
  font-size: var(--font-size-sm);
  margin-top: var(--space-sm);
}

/* BADGES */
.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-full);
  background: var(--color-blue);
  color: var(--color-white);
  letter-spacing: 0.02em;
}

.badge-success { background: var(--color-success); }
.badge-warning { background: var(--color-warning); color: #0a0a15; }
.badge-danger  { background: var(--color-danger); }
.badge-info    { background: var(--color-info); }

/* ALERTS
   El borde va completo y a 1px, no como barra gruesa a la izquierda: ese
   recurso es de los que más delatan una interfaz de plantilla, y aquí no hacía
   falta porque el fondo teñido y el color del texto ya dicen de qué tipo es
   cada aviso. */
.alert {
  padding: var(--space-lg);
  border-radius: var(--border-radius-lg);
  border: 1px solid;
  margin-bottom: var(--space-lg);
}

.alert-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}

.alert-info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}

/* LOADING */
.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--color-blue-light);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* TABLA */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  background: rgba(255, 255, 255, 0.05);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
}

.table td {
  padding: var(--space-md) var(--space-lg);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: var(--font-size-sm);
}

.table tbody tr:hover {
  background: rgba(238, 61, 54, 0.04);
}

/* MODAL */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
}

.modal {
  /* Estaba en #0f0d22, un morado de la paleta anterior. Sobre un sitio navy y
     carmesí el modal se veía de otro tono que el resto de superficies. */
  background: var(--color-gray);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-xl);
  max-width: 520px;
  width: 90%;
  box-shadow: var(--shadow-2xl);
  z-index: var(--z-modal);
}

.modal-header {
  padding: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-body {
  padding: var(--space-xl);
}

.modal-footer {
  padding: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
}

/* =====================================================
   MOVIMIENTO — Marquee, cursor, magnetismo, stagger
   ===================================================== */

/* Banda de texto en scroll infinito */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 0;
  background: rgba(238, 61, 54, 0.06);
  border-top: 1px solid rgba(238, 61, 54, 0.18);
  border-bottom: 1px solid rgba(238, 61, 54, 0.18);
  -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;
  gap: 3rem;
  animation: marquee-scroll 28s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.marquee-item span {
  color: var(--color-blue-light);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Botones magnéticos: siguen ligeramente al cursor */
.btn {
  will-change: transform;
}

/* Stagger: entrada escalonada de tarjetas en grid */
.grid-3 > .reveal:nth-child(2),
.grid-2 > .reveal:nth-child(2),
.project-grid > .reveal:nth-child(2) { animation-delay: 0.08s; }

.grid-3 > .reveal:nth-child(3),
.grid-2 > .reveal:nth-child(3),
.project-grid > .reveal:nth-child(3) { animation-delay: 0.16s; }

.grid-3 > .reveal:nth-child(4),
.grid-2 > .reveal:nth-child(4) { animation-delay: 0.24s; }

.grid-3 > .reveal:nth-child(5),
.grid-2 > .reveal:nth-child(5) { animation-delay: 0.32s; }

.grid-3 > .reveal:nth-child(6),
.grid-2 > .reveal:nth-child(6) { animation-delay: 0.4s; }

/* Cursor personalizado (solo dispositivos con puntero fino) */
.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);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 0;
}
/* El aro visible va en ::before y es ESE el que se escala: la propiedad `scale`
   se compone ANTES que `transform`, así que aplicarla al .cursor-ring multiplicaba
   el translate(x,y) del JS y desplazaba el cursor. */
.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-dot {
  transition: opacity 0.3s ease;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ── TOASTS ─────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 99999;
  min-width: 260px;
  max-width: 420px;
  padding: 0.875rem 1.25rem;
  border-radius: 0.625rem;
  background: #1e2030;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: toastSlideIn 0.25s ease;
  pointer-events: none;
}
.toast-content {
  font-size: 0.875rem;
  font-weight: 500;
  color: #fbfbfd;
  line-height: 1.4;
}
/* Igual que las alertas: borde completo de 1px teñido, no barra lateral. */
.toast-success { border-color: rgba(34, 197, 94, 0.45); }
.toast-danger  { border-color: rgba(238, 61, 54, 0.45); }
.toast-info    { border-color: rgba(59, 130, 246, 0.45); }
.toast-warning { border-color: rgba(245, 158, 11, 0.45); }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === pages.css === */
/* =====================================================
   PÁGINAS - Estilos específicos por sección
   ===================================================== */

/* HEADER / NAVEGACIÓN */
header {
  position: sticky;
  top: 0;
  /* Limpio arriba, como la home: la barra oscura solo aparece al hacer scroll (header.scrolled) */
  background: transparent;
  border-bottom: 1px solid transparent;
  z-index: var(--z-sticky);
  box-shadow: none;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}

header.scrolled {
  background: rgba(3, 3, 10, 0.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 32px rgba(0, 0, 0, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) 0;
}

.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);
  filter: drop-shadow(0 0 10px rgba(238, 61, 54, 0.4));
}

.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);
  filter: drop-shadow(0 0 8px rgba(238, 61, 54, 0.9));
}

.navbar-logo:hover .logo-lines::after {
  transform: translateX(5px);
  filter: drop-shadow(0 0 8px rgba(245, 103, 95, 0.9));
}

/* El hueco es fluido, no fijo.
   Con 48px fijos y seis elementos de menú son 240px solo de separación: entre
   los 768px (donde entra el menú de hamburguesa) y los ~1100px, el logo, el
   menú y el botón no caben en la barra y "Sobre Nosotros" partía en dos
   líneas. Con clamp, el menú se aprieta en pantallas intermedias y recupera
   los 48px cuando hay sitio. */
.navbar-menu {
  display: flex;
  list-style: none;
  gap: clamp(1.15rem, 2.6vw, 3rem);
  white-space: nowrap;
}

.navbar-menu a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}

.navbar-menu a:hover {
  color: #ffffff;
}

.navbar-menu a.active {
  color: #ffffff;
  font-weight: var(--font-weight-semibold);
  position: relative;
}

.navbar-menu a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-blue), var(--color-blue-light));
  border-radius: 2px;
}

.navbar-cta {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.navbar-cta .btn-primary {
  /* Tono profundo: con el carmesí de marca el texto blanco se queda en 3.92:1. */
  background: var(--color-blue-deep);
  color: #ffffff;
  border-color: var(--color-blue-deep);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  padding: 0.6rem 1.25rem;
  box-shadow: var(--shadow-lift-sm);
}

.navbar-cta .btn-primary:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
  box-shadow: var(--shadow-lift);
  color: #ffffff;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 36px;
  height: 36px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s ease;
}

/* HERO
   ────────────────────────────────────────────────────────────────────────────
   Mismo lienzo que el home: fondo plano, rejilla de 60px difuminada por una
   máscara radial y un resplandor cálido arriba a la derecha. Antes cada
   subpágina llevaba un degradado a 135° con dos manchas carmesí encima, que es
   el recurso que hace que una página parezca salida de una plantilla.

   Los dos efectos van en pseudoelementos, no en marcado, para que cualquier
   sección con clase .hero los herede sin tocar el HTML.

   OJO: el tamaño de celda (60px) y los valores de la máscara están duplicados
   en js/grid-particles.js, que hace circular los puntos justo por encima de
   estas líneas. Si cambias uno, cambia el otro. */
.hero,
.projects-hero {
  position: relative;
  background: var(--color-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--color-white);
  overflow: hidden;
}

.hero {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--band-space);
  text-align: center;
}

/* Rejilla */
.hero::before,
.projects-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 25% 35%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 65% at 25% 35%, #000 0%, transparent 72%);
}

/* Resplandor */
.hero::after,
.projects-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 620px;
  height: 620px;
  top: -180px;
  right: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 82, 51, 0.16) 0%, transparent 62%);
  filter: blur(20px);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
  padding: 0 var(--container-padding);
}

/* El contenido de la página de proyectos tiene que quedar por encima del
   lienzo, igual que .hero-content en las demás. */
.projects-hero > .container {
  position: relative;
  z-index: 1;
}

/* Mismos ajustes ópticos que .display en el home: interlineado por debajo de 1
   y tracking negativo. A este tamaño el espacio entre letras por defecto abre
   demasiado y el titular pierde fuerza. */
.hero h1 {
  font-size: var(--type-display);
  margin-bottom: var(--space-lg);
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #ffffff;
}

.hero p {
  font-size: var(--type-lead);
  margin-bottom: var(--space-2xl);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}

/* SECCIONES
   Ritmo fluido, igual que .band en el home: en pantallas grandes el aire crece
   con ellas en vez de quedarse clavado en 6rem, que es lo que hacía que las
   subpáginas se vieran apretadas en un monitor ancho. */
section {
  padding: var(--band-space) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-header h2 {
  font-size: var(--type-h2);
  margin-bottom: var(--space-md);
  color: #ffffff;
  font-family: var(--font-family-heading);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.02;
  text-wrap: balance;
}

.section-header p {
  font-size: var(--font-size-lg);
  color: var(--color-gray-dark);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* SERVICIOS */
.service-card {
  text-align: center;
  padding: var(--space-2xl);
  border-radius: var(--border-radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.5s var(--ease), border-color 0.35s ease,
              background 0.35s ease, box-shadow 0.45s ease;
}

.service-card:hover {
  border-color: rgba(238, 61, 54, 0.45);
  background: rgba(238, 61, 54, 0.06);
  box-shadow: var(--shadow-lift);
  transform: translateY(-6px);
}

.service-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-lg);
  line-height: 1;
}

.service-card h3 {
  color: #ffffff;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.service-card p {
  color: var(--color-gray-dark);
  line-height: 1.7;
  font-size: var(--font-size-sm);
}

/* BENEFICIOS */
.benefit-item {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.benefit-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: rgba(238, 61, 54, 0.12);
  border: 1px solid rgba(238, 61, 54, 0.2);
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-light);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.benefit-content h4 {
  margin-bottom: var(--space-sm);
  color: #ffffff;
  font-weight: var(--font-weight-semibold);
}

.benefit-content p {
  color: var(--color-gray-dark);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

/* PORTFOLIO / PROYECTOS */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2xl);
}

.project-card {
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.5s var(--ease), border-color 0.35s ease,
              background 0.35s ease, box-shadow 0.45s ease;
}

.project-card:hover {
  border-color: rgba(238, 61, 54, 0.4);
  box-shadow: var(--shadow-lift);
  transform: translateY(-6px);
}

.project-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  overflow: hidden;
  transition: transform var(--transition-slow);
}

.project-card:hover .project-image {
  transform: scale(1.04);
}

.project-info {
  padding: var(--space-xl);
}

.project-category {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-blue-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

.project-title {
  color: #ffffff;
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.project-description {
  color: var(--color-gray-dark);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.project-technologies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.tech-badge {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(238, 61, 54, 0.12);
  color: #f7938d;
  border: 1px solid rgba(238, 61, 54, 0.22);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* CTA FINAL */
.projects-cta-box {
  width: min(100%, 960px);
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-2xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-2xl);
}

.projects-cta-box > div:first-child {
  margin: 0 auto;
}

.projects-cta-box p {
  max-width: 520px;
  color: var(--color-gray-dark);
}

/* TESTIMONIOS */
.testimonial-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  transition: transform 0.5s var(--ease), border-color 0.35s ease,
              background 0.35s ease, box-shadow 0.45s ease;
}

.testimonial-card:hover {
  border-color: rgba(238, 61, 54, 0.3);
  background: rgba(238, 61, 54, 0.04);
  transform: translateY(-4px);
}

.testimonial-stars {
  color: #fbbf24;
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
  letter-spacing: 2px;
}

.testimonial-text {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-lg);
  font-style: italic;
  line-height: 1.8;
  font-size: var(--font-size-sm);
}

.testimonial-author {
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
}

.testimonial-position {
  color: var(--color-gray-darker);
  font-size: var(--font-size-xs);
  margin-top: 2px;
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto var(--space-lg);
  object-fit: cover;
  border: 2px solid rgba(238, 61, 54, 0.4);
}

/* CTA SECTION */
.cta {
  /* Era morado -> carmesí. El morado venía de la paleta anterior y era el
     único punto del sitio con ese tono: cantaba contra el resto. Ahora usa el
     mismo barrido que la barra de urgencia. */
  background: linear-gradient(135deg, #a11a15 0%, #ee3d36 58%, #7a1410 100%);
  color: var(--color-white);
  padding: var(--space-4xl) var(--space-2xl);
  text-align: center;
  border-radius: var(--border-radius-xl);
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(238, 61, 54, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

/* Este es el titular de cierre de la página: heredaba el h2 genérico y en
   móvil se quedaba en 20px, más pequeño que un título de sección. Va con la
   misma escala fluida que el resto de titulares. */
.cta h2 {
  font-size: var(--type-h2);
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.cta p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-2xl);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* Botones dentro del CTA */
.cta .btn-primary,
.cta .btn-secondary,
.cta a.btn {
  position: relative;
  z-index: 1;
}

/* FOOTER */
footer {
  background: #06070d;
  color: var(--color-white);
  padding: var(--space-4xl) 0 var(--space-2xl);
  margin-top: var(--space-4xl);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-section h3 {
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
}

.footer-section a {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.6rem;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer-section a:hover {
  color: var(--color-blue-light);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: var(--space-xl);
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--font-size-xs);
}

.social-links {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.4s var(--ease), background 0.2s ease,
              border-color 0.2s ease, color 0.2s ease;
}

.social-links a:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* FORMULARIO DE CONTACTO */
.contact-form {
  max-width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.form-row.full {
  grid-template-columns: 1fr;
}

/* CTA inyectado por navigation.js: oculto en escritorio */
.navbar-menu__mobile-cta {
  display: none !important;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }


  /* Ni el titular, ni la entradilla, ni el título de sección se refijan por
     breakpoint: lo resuelve clamp() en las reglas base, igual que en el home.
     Fijarlos otra vez aquí rompía la escala fluida justo en móvil, que es
     donde más se nota. */

  .project-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }
}

/* El menú horizontal necesita su propio punto de corte, antes que el resto.
   Con seis elementos, entre 769 y 900px el logo, el menú y el botón de
   presupuesto dejan de caber en la barra: a 785px faltaban 16px y el menú
   llegaba a tocar el botón. Las demás reglas de móvil siguen entrando a
   768px, que es donde tienen sentido para formularios y rejillas. */
@media (max-width: 900px) {
  .navbar-menu {
    display: none;
  }

  /* Menú móvil desplegado */
  .navbar-menu.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    background: rgba(6, 6, 18, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0.5rem var(--space-xl) 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: calc(var(--z-sticky) - 1);
    gap: 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  }

  .navbar-menu.active li {
    width: 100%;
  }

  .navbar-menu.active > li > a {
    display: block;
    font-size: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Quita el subrayado rojo en móvil (no cabe visualmente) */
  .navbar-menu.active a.active::after {
    display: none;
  }

  /* Botón "Solicitar presupuesto" inyectado en el menú móvil */
  .navbar-menu.active .navbar-menu__mobile-cta {
    display: block !important;
    padding-top: 1.25rem;
  }

  .navbar-menu.active .navbar-menu__mobile-cta a {
    display: flex !important;
    justify-content: center;
    background: var(--color-blue-deep, #c9291f);
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    padding: 0.75rem 1.5rem !important;
    border-bottom: none !important;
    box-shadow: var(--shadow-lift-sm);
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  .navbar-menu.active .navbar-menu__mobile-cta a:hover {
    background: var(--color-blue, #ee3d36);
    box-shadow: var(--shadow-lift);
  }

  .navbar-cta {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}

/* =====================================================
   PRECIOS
   ===================================================== */
.pricing-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  transition: transform 0.5s var(--ease), border-color 0.35s ease,
              background 0.35s ease, box-shadow 0.45s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  border-color: rgba(238, 61, 54, 0.4);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

/* El plan destacado se distingue por el borde y el fondo teñido, que ya lo
   separan de los otros dos. El halo carmesí que llevaba encima era sombra de
   color sin desplazamiento: no daba profundidad, solo lo hacía brillar. */
.pricing-featured {
  border-color: rgba(238, 61, 54, 0.5) !important;
  background: rgba(238, 61, 54, 0.07) !important;
  box-shadow: var(--shadow-lift);
}

.pricing-name {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  color: #ffffff;
  margin-bottom: var(--space-sm);
}

.pricing-popular {
  display: inline-block;
  font-size: var(--font-size-xs);
  background: linear-gradient(135deg, var(--color-blue), var(--color-blue-light));
  color: #fff;
  border-radius: var(--border-radius-full);
  padding: 4px 14px;
  margin-bottom: var(--space-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.pricing-price {
  font-size: 3.25rem;
  font-weight: var(--font-weight-extrabold);
  color: #ffffff;
  line-height: 1;
  margin-bottom: var(--space-sm);
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
}

.pricing-price span {
  font-size: 1.35rem;
  color: var(--color-blue-light);
  font-weight: var(--font-weight-semibold);
  vertical-align: super;
  margin-right: 2px;
}

.pricing-desc {
  color: var(--color-gray-dark);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xl);
  min-height: 2.5rem;
  line-height: 1.6;
}

.pricing-features {
  list-style: none;
  text-align: left;
  margin-bottom: var(--space-xl);
  flex: 1;
}

.pricing-features li {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-sm);
}

.pricing-features li:last-child {
  border-bottom: none;
}

/* =====================================================
   FAQ
   ===================================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item.open {
  border-color: rgba(238, 61, 54, 0.4);
  background: rgba(238, 61, 54, 0.04);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
  font-family: inherit;
}

.faq-question:hover {
  color: var(--color-blue-light);
}

.faq-icon {
  font-size: 1.3rem;
  min-width: 22px;
  text-align: center;
  color: var(--color-blue-light);
  transition: transform var(--transition-normal);
  line-height: 1;
  font-weight: 400;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  padding: 0 var(--space-xl) var(--space-lg);
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-answer p {
  color: var(--color-gray-dark);
  line-height: 1.75;
  font-size: var(--font-size-sm);
}

/* BLOG CONTENT */
.blog-content {
  color: var(--color-gray-dark);
  line-height: 1.85;
  font-size: var(--font-size-md);
}

.blog-content h2 {
  font-size: var(--font-size-2xl);
  color: var(--color-white);
  margin: var(--space-3xl) 0 var(--space-lg);
}

.blog-content h3 {
  font-size: var(--font-size-xl);
  color: var(--color-white);
  margin: var(--space-2xl) 0 var(--space-md);
}

.blog-content p {
  margin-bottom: var(--space-lg);
}

.blog-content ul,
.blog-content ol {
  margin: var(--space-lg) 0 var(--space-lg) var(--space-xl);
}

.blog-content li {
  margin-bottom: var(--space-sm);
}

.blog-content a {
  color: var(--color-blue-light);
  text-decoration: underline;
}

.blog-content strong {
  color: var(--color-white);
}

/* Cita: filete fino y aire, que es como se ha citado siempre en tipografía.
   Antes apilaba filete de 3px + fondo teñido + esquinas redondeadas a un solo
   lado; tres recursos para decir lo mismo. Manda el texto, no la caja. */
.blog-content blockquote {
  border-left: 1px solid var(--color-blue);
  margin: var(--space-2xl) 0;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-xl);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.82);
}

.blog-content code {
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
}

.blog-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: var(--space-2xl) 0;
}

/* PÁGINAS LEGALES */
.legal-page {
  padding: 4rem 0 6rem;
}

.legal-page h1 {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.legal-page h2 {
  /* Estaba en 1.1rem: solo 2px por encima del cuerpo, así que en un texto
     legal largo no se veía dónde empezaba cada sección. Ahora hay un salto
     claro (32 / 23 / 15px) y más aire encima que debajo, para que el titular
     se lea pegado a su párrafo y separado del anterior. */
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 2.75rem 0 0.75rem;
  color: #ffffff;
}

.legal-page p,
.legal-page li {
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 0.5rem;
  /* Las líneas llegaban a 95 caracteres y el ojo se pierde al volver al margen
     izquierdo. Se limita el texto corrido; los titulares siguen a todo el ancho. */
  max-width: 72ch;
}

/* Tablas anchas: que ruede la tabla, nunca la página.
   Sin esto la de /cookies (4 columnas, ~440px mínimos) provocaba scroll
   horizontal en toda la web al verla en un móvil. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal-page ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.legal-page a {
  color: var(--color-blue-light);
}

.legal-page a:hover {
  text-decoration: underline;
  color: #f7938d;
}

.legal-page code {
  background: rgba(255, 255, 255, 0.08);
  color: #f7938d;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* === responsive.css === */
/* =====================================================
   RESPONSIVE - Mobile First Design
   ===================================================== */

/* Small devices (portrait phones, less than 640px) */
@media (max-width: 639px) {
  :root {
    --font-size-5xl: 2rem;
    --font-size-4xl: 1.5rem;
    --font-size-3xl: 1.25rem;
    --font-size-2xl: 1.125rem;
  }

  .container {
    padding: 0 var(--space-md);
  }

  h1 { font-size: var(--font-size-4xl); }
  h2 { font-size: var(--font-size-3xl); }
  h3 { font-size: var(--font-size-2xl); }
  h4 { font-size: var(--font-size-xl); }
  h5 { font-size: var(--font-size-lg); }

  /* El tamaño del titular y de la entradilla ya no se toca por breakpoint: lo
     resuelve clamp() en pages.css, igual que en el home. Estos saltos fijos
     (1.75rem → 2.5rem → 3rem) eran los que hacían que la tipografía de las
     subpáginas se quedara pequeña justo donde el home crecía. */
  .hero {
    min-height: 60vh;
  }

  /* El resplandor mide 620px: en un móvil taparía media pantalla. */
  .hero::after,
  .projects-hero::after {
    width: 380px;
    height: 380px;
    top: -140px;
    right: -120px;
  }

  .hero h1 {
    margin-bottom: var(--space-lg);
  }

  .hero p {
    margin-bottom: var(--space-lg);
  }

  .hero-buttons {
    gap: var(--space-md);
    flex-direction: column;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  section {
    padding: var(--space-2xl) 0;
  }

  .section-header {
    margin-bottom: var(--space-2xl);
  }

  /* Sin font-size: lo pone clamp() en pages.css. Con este override el título
     de sección bajaba a 18px en móvil — más pequeño que varios textos de la
     propia página— y era lo que dejaba las subpáginas sin jerarquía. */
  .section-header h2 {
    margin-bottom: var(--space-md);
  }

  .section-header p {
    font-size: var(--font-size-base);
  }

  .navbar {
    padding: var(--space-md) 0;
  }

  .navbar-logo {
    font-size: var(--font-size-xl);
  }

  .navbar-menu {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .navbar-cta {
    display: none;
  }

  .btn {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
  }

  .btn-block {
    width: 100%;
  }

  .service-card {
    padding: var(--space-lg);
  }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .project-card {
    margin-bottom: 0;
  }

  .project-image {
    height: 200px;
  }

  .project-info {
    padding: var(--space-lg);
  }

  .benefit-item {
    gap: var(--space-md);
  }

  .benefit-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: var(--font-size-xl);
  }

  .testimonial-card {
    padding: var(--space-lg);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-input,
  .form-textarea,
  .form-select {
    padding: var(--space-md);
    font-size: var(--font-size-base);
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer-bottom {
    padding-top: var(--space-lg);
  }

  .cta {
    padding: var(--space-2xl);
    /* De borde a borde: el margen negativo tiene que valer exactamente el
       padding que .container tiene EN ESTE breakpoint (--space-md, arriba),
       no --container-padding, que aquí ya no se aplica. Con el valor mayor la
       página desbordaba 8px por lado y aparecía scroll horizontal en móvil. */
    margin: 0 calc(-1 * var(--space-md));
  }

  .table {
    font-size: var(--font-size-sm);
  }

  .table th,
  .table td {
    padding: var(--space-sm);
  }

  .modal {
    width: 95%;
  }
}

/* Medium devices (landscape phones, 640px and up) */
@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* El menú de escritorio entra a 901px, no a 768.
   Esta hoja se carga DESPUÉS de pages.css y ganaba con `!important`, así que
   entre 769 y 900px reaparecía el menú horizontal aunque pages.css lo hubiera
   ocultado: con seis elementos no cabía junto al logo y el botón, y a 785px se
   quedaba sin 16px y tocaba el botón de presupuesto. El breakpoint del menú
   vive aquí; si se cambia, cambiar también el de pages.css. */
@media (min-width: 901px) {
  .navbar-menu {
    display: flex;
  }

  .menu-toggle {
    display: none !important;
  }

  .navbar-cta {
    flex-direction: row;
  }
}

/* Large devices (tablets, 768px and up) */
@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
  }

  /* A 768px caben DOS columnas, no tres. Con tres, cada tarjeta se quedaba en
     ~230px y su contenido no bajaba de 246px: /blog desbordaba la página.
     Las 3 y 4 columnas entran en el bloque de 1024 que hay al final.
     OJO: esta hoja se carga DESPUÉS de layout.css y gana. Si cambias aquí los
     breakpoints de rejilla, cambia también los de layout.css o quedarán dos
     verdades distintas (fue justo lo que ocultó este fallo). */
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Antes esto pedía 90vh: casi una pantalla entera para un título y una
     frase. El home se puede permitir esa altura porque tiene algo que enseñar;
     una subpágina así solo obliga a hacer scroll para llegar al contenido. */
  .hero {
    min-height: 72vh;
  }

  .hero-buttons {
    flex-direction: row;
  }

  .hero-buttons .btn {
    width: auto;
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card {
    padding: var(--space-2xl);
  }

  .benefit-item {
    gap: var(--space-lg);
  }

  .benefit-icon {
    width: 48px;
    height: 48px;
  }

  .md-hidden {
    display: none;
  }

  .md-block {
    display: block;
  }

  footer {
    padding: var(--space-4xl) 0 var(--space-2xl);
  }

  .footer-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Extra large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
  /* Aquí ya hay sitio de sobra para las rejillas completas. */
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .navbar-logo {
    font-size: var(--font-size-2xl);
  }

  .navbar-menu {
    gap: var(--space-2xl);
  }

  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .service-card {
    padding: var(--space-2xl);
  }

  .footer-content {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Extra extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
  :root {
    --container-padding: 2.5rem;
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .project-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Print styles */
@media print {
  body {
    background: white;
    color: black;
  }

  a {
    text-decoration: underline;
  }

  .no-print,
  header,
  footer,
  .navbar-cta,
  .menu-toggle {
    display: none !important;
  }

  .container {
    max-width: 100%;
  }

  img {
    max-width: 100%;
  }
}

/* Preferencias de usuario */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   NAV UNIFICADO — clon exacto del nav de la home (.znav) para subpáginas.
   Las variables van scoped a .znav porque este bundle no define el sistema
   de tokens de la home; así el nav se pinta igual sin arrastrar el resto.
   ═══════════════════════════════════════════════════════════════════════ */
.znav {
  --ink: #fbfbfd; --ink-2: #a7adbb;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.18);
  --signal: #ee3d36; --signal-600: #f5675f;
  --r-pill: 999px; --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
  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;
}
/* El logotipo (.navbar-logo/.logo-wordmark/.logo-lines) NO se redefine aquí:
   las reglas base de este mismo fichero (línea ~1087) ya son una copia exacta
   de las de la home — Poppins 800 itálica con degradado de texto y barras en
   columna con su propio degradado. Redefinirlas dentro de .znav (como se hizo
   antes) las machaca por especificidad — dos clases ganan a una — y el logo
   de las subpáginas salía con otra tipografía (Zodiak en vez de Poppins) y
   otra geometría de barras. Sin reglas propias aquí, el logo es IDÉNTICO al
   de la home en las nueve subpáginas, letra por letra. */
.znav__menu { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.znav__menu a { position: relative; color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500; padding: .3rem 0; transition: color .25s ease; }
.znav__menu a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: right; transition: transform .3s 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; }
/* Botón Presupuesto — "interactive hover button" idéntico a la home.
   Reposo: pastilla con borde y punto rojo. Hover: el punto se expande y rellena,
   el texto sale y entra "Presupuesto →" en blanco. */
.znav .ihb {
  --r-sm: 8px;
  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-weight: 600; font-size: .9rem; line-height: 1;
  color: var(--ink); text-decoration: none;
  transition: border-color .3s ease;
}
.znav .ihb__text { display: inline-block; transform: translateX(4px); transition: transform .5s var(--ease), opacity .5s var(--ease); }
.znav .ihb:hover .ihb__text { transform: translateX(48px); opacity: 0; }
.znav .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);
}
.znav .ihb:hover .ihb__hover { transform: translateX(-4px); opacity: 1; }
.znav .ihb__hover svg { width: 16px; height: 16px; }
.znav .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);
}
.znav .ihb:hover .ihb__dot { left: 0; top: 0; height: 100%; width: 100%; transform: scale(1.8); border-radius: var(--r-pill); }
@media (max-width: 820px) {
  .znav__menu { position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.4rem; padding: 5rem 2rem; background: rgba(11,14,23,.97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform: translateX(100%); transition: transform .4s var(--ease); border-left: 1px solid var(--line); }
  .znav.menu-open .znav__menu { transform: translateX(0); }
  .znav__menu a { font-size: 1.1rem; }
  .znav__toggle { display: block; z-index: 501; }
  .znav.menu-open .znav__toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .znav.menu-open .znav__toggle span:nth-child(2) { opacity: 0; }
  .znav.menu-open .znav__toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

/* Con el nav fijo (.znav) la primera sección queda debajo. Se le da aire por
   ARRIBA a su contenido — no un margen al <main> — para que el fondo de esa
   sección siga llegando al borde superior y el nav lo cubra, igual que la home. */
main > :first-child { padding-top: 96px; }

/* ═══════════════════════════════════════════════════════════════════════
   ICONOGRAFÍA — sustituye a los emojis en /contacto y /sobre-nosotros.
   Mismo lenguaje visual en las dos páginas: caja con tinte carmesí, trazo
   fino (outline), sin relleno. Los emojis se veían distinto según el sistema
   operativo de quien mirara; esto se ve igual en todas partes.
   ═══════════════════════════════════════════════════════════════════════ */
.icon-badge svg { width: 20px; height: 20px; stroke: var(--color-blue-light); }

/* Insignia de icono independiente, para tarjetas de valores (Estudio):
   se coloca ENCIMA del título, no incrustada en el texto. */
.value-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--border-radius-md);
  background: rgba(238, 61, 54, 0.12);
  border: 1px solid rgba(238, 61, 54, 0.22);
  margin-bottom: var(--space-md, 1rem);
}
.value-icon svg { width: 22px; height: 22px; stroke: var(--color-blue-light); }

/* Icono inline pequeño, para líneas de texto sueltas (pie de página). */
.inline-icon { display: inline-flex; vertical-align: -3px; margin-right: 6px; }
.inline-icon svg { width: 15px; height: 15px; stroke: currentColor; opacity: .8; }