/* ============================================================
   CIQNO STUDIO — styles.css
   Bloque 2: Home mobile-first — Primera maqueta visual
   ============================================================
   NOTA: Este archivo usa variables CSS para tipografía, colores
   y espaciados. Cambiar la variable en :root actualiza todo el sitio.

   Tipografía:  fallback del sistema (system-ui). Sin Google Fonts.
                Preparado para activar TT Commons local vía @font-face.

   Proporciones de video (OFICIALES, NO cambiar sin autorización):
     Mobile:  aspect-ratio: 1440 / 810
     Desktop: aspect-ratio: 1920 / 620
   Fuente: AGENT_BRIEF.md
   ============================================================ */

/* ------------------------------------------------------------
   1. FUENTES — Placeholder local (tipografía final pendiente)
   ------------------------------------------------------------
   TT Commons (.otf) requiere conversión a .woff2. Pendiente.
   Para activar fuente local: descomentar el @font-face correcto.
   ------------------------------------------------------------ */

/* @font-face {
  font-family: 'TTCommons';
  src: url('../fonts/TT-Commons-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TTCommons';
  src: url('../fonts/TT-Commons-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TTCommons';
  src: url('../fonts/TT-Commons-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
} */

/* Google Fonts eliminados — usando fallback del sistema */

/* ------------------------------------------------------------
   2. VARIABLES CSS — Design System
   ------------------------------------------------------------ */
:root {
  /* --- Tipografía --- */
  /* NOTA: Cambiar --font-primary para actualizar toda la tipografía del sitio.
     Cuando TT Commons .woff2 esté listo, reemplazar el valor de estas variables. */
  --font-primary:   system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:      'Courier New', Courier, monospace;

  /* Escalas de tamaño */
  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */
  --text-6xl:   4.5rem;     /* 72px */

  /* Pesos tipográficos */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Interlineado */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.85;

  /* --- Colores — Paleta oscura/premium de Ciqno Studio --- */
  /* NOTA: Colores finales pendientes de confirmación con diseño oficial */
  --color-black:      #080808;
  --color-dark:       #0f0f0f;
  --color-dark-mid:   #171717;
  --color-dark-soft:  #1f1f1f;
  --color-gray-dark:  #2a2a2a;
  --color-gray-mid:   #3d3d3d;
  --color-gray:       #5a5a5a;
  --color-gray-light: #8a8a8a;
  --color-gray-pale:  #c0c0c0;
  --color-white:      #ffffff;
  --color-off-white:  #f0eeea;

  /* Colores de acento — Bloque 2.8: azul celeste #2fd8ff */
  --color-accent:        #2fd8ff;  /* azul celeste — acento principal */
  --color-accent-warm:   #1ab8e0;  /* azul celeste oscuro */
  --color-accent-bright: #7eeaff;  /* azul celeste claro */

  /* Colores de fondo por sección */
  --bg-primary:    var(--color-black);
  --bg-secondary:  var(--color-dark);
  --bg-tertiary:   var(--color-dark-mid);
  --bg-card:       var(--color-dark-soft);
  --bg-overlay:    rgba(0, 0, 0, 0.6);
  --bg-overlay-sm: rgba(0, 0, 0, 0.35);

  /* Texto */
  --text-primary:   var(--color-white);
  --text-secondary: var(--color-gray-pale);
  --text-muted:     var(--color-gray-light);
  --text-accent:    var(--color-accent);

  /* Bordes */
  --border-color:       rgba(255, 255, 255, 0.10);
  --border-color-light: rgba(255, 255, 255, 0.05);
  --border-color-mid:   rgba(255, 255, 255, 0.18);

  /* --- Espaciados --- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */

  /* Contenedor máximo */
  --container-max:  1440px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;

  /* Padding horizontal de sección */
  --section-px:   1.25rem;  /* mobile: 20px */
  --section-py:   2.5rem;   /* Bloque 2.9: mobile reducido (antes 4.5rem) */

  /* --- Radios de borde --- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* --- Z-index --- */
  --z-below:  -1;
  --z-base:    0;
  --z-above:   1;
  --z-card:   10;
  --z-overlay:20;
  --z-sticky: 50;
  --z-nav:   100;
  --z-modal: 200;
  --z-top:   999;

  /* --- Transiciones --- */
  --transition-fast:  140ms ease;
  --transition-base:  260ms ease;
  --transition-slow:  420ms ease;
  --transition-xslow: 650ms cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Sombras --- */
  --shadow-sm:  0 1px 4px  rgba(0,0,0,0.5);
  --shadow-md:  0 4px 18px rgba(0,0,0,0.55);
  --shadow-lg:  0 10px 36px rgba(0,0,0,0.65);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.75);

  /* --- Proporciones de segmento de video (OFICIALES — no cambiar) ---
     Mobile:  1440 / 810   ← ~56.25% (widescreen estándar)
     Desktop: 1920 / 620   ← ~32.3%  (ultra panorámico)
     Fuente: AGENT_BRIEF.md — si hay conflicto, el brief manda.
  ----------------------------------------------------------------- */
  --video-ratio-mobile:  810 / 1440;
  --video-ratio-desktop: 620 / 1920;

  /* --- Proporciones de cápsula del Showcase (SHOWCASE-CP3) ---
     Unidad de centralización = (token, régimen responsive).
     Seis declaraciones = tres tokens × dos regímenes. Ajustar una
     proporción NO debe requerir tocar showcase.js, main.js,
     showcase-data.js ni selections.

     `default` compacto es 16 / 9, numéricamente idéntico al
     1440 / 810 de la baseline: geometría exterior sin cambio.
     El token `special` no vive aquí: sus dos variables las
     transporta el renderer por aparición ya validadas.
  ----------------------------------------------------------------- */
  --showcase-ratio-default-compact: 16 / 9;
  --showcase-ratio-large-compact:   4 / 3;
  --showcase-ratio-feature-compact: 1 / 1;

  --showcase-ratio-default-desktop: 1920 / 620;
  --showcase-ratio-large-desktop:   1920 / 900;
  --showcase-ratio-feature-desktop: 16 / 9;
}

/* ------------------------------------------------------------
   3. RESET BÁSICO
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Bloque 2.12/2.13/2.14: offset de anclas moderado */
  scroll-padding-top: 35px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

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

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   4. UTILIDADES GLOBALES
   ------------------------------------------------------------ */

/* Contenedor centrado */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

/* Visualmente oculto (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: 0;
}

/* Separador decorativo */
.section-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  margin-block: var(--space-5);
}

/* Etiqueta de sección */
.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* Número de sección decorativo */
.section-number {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------
   5. BOTONES
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-fast),
    box-shadow var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* Primario — blanco sólido */
.btn--primary {
  background: var(--color-white);
  color: var(--color-black);
  border: 2px solid var(--color-white);
}

.btn--primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 6px 24px rgba(212, 197, 169, 0.35);
}

/* Outline — borde transparente */
.btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,0.45);
}

.btn--outline:hover {
  border-color: var(--color-white);
  background: rgba(255,255,255,0.07);
}

/* Acento — borde con color dorado/beige */
.btn--accent {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

.btn--accent:hover {
  background: var(--color-accent);
  color: var(--color-black);
}

/* Tamaños */
.btn--sm {
  padding: 0.5rem 1.2rem;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}

.btn--lg {
  padding: 1rem 2.5rem;
  font-size: var(--text-base);
}

/* ------------------------------------------------------------
   6. HEADER / NAV
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  /* Bloque 2.12: Header mobile más compacto (se redujo padding vertical) */
  padding: var(--space-4) var(--section-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition:
    background var(--transition-slow),
    backdrop-filter var(--transition-slow),
    padding var(--transition-slow);
}

/* Header con fondo cuando hay scroll */
.site-header.scrolled {
  background: rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  /* Bloque 2.12: Aún más compacto al hacer scroll */
  padding-block: 0.5rem;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  z-index: var(--z-top);
}

.site-logo__img {
  /* Bloque 2.8: reducido 20% respecto al Bloque 2.7 (135px → 108px) */
  width: 108px;
  height: auto;
  object-fit: contain;
}

/* Navegación desktop */
.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  /* Bloque 2.8: texto completamente blanco */
  color: rgba(255,255,255,0.85);
  transition: color var(--transition-fast);
  position: relative;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}

.site-nav__link:hover {
  color: var(--color-white);
}

.site-nav__link:hover::after {
  width: 100%;
}

/* Link de contacto como botón */
.site-nav__link.btn {
  padding: 0.45rem 1.1rem;
}

.site-nav__link.btn::after {
  display: none;
}

/* Botón hamburguesa */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  z-index: var(--z-top);
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.nav-toggle:hover {
  background: rgba(255,255,255,0.06);
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base), width var(--transition-base);
  transform-origin: center;
}

/* Barras a X cuando abierto */
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Menú móvil overlay (Bloque 2.10: compacto desplegable) */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: calc(var(--z-nav) - 1);
  background: rgba(8, 8, 8, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 100px; /* Espacio para el header */
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-color);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.mobile-menu.is-open {
  display: flex;
  opacity: 1;
}

/* Bloque 2.14: FORZAR ocultamiento en desktop — nunca debe verse en pantallas >= 1024px */
@media (min-width: 1024px) {
  .mobile-menu,
  .mobile-menu.is-open {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.mobile-menu__link {
  font-size: clamp(1.25rem, 6vw, 1.75rem);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  letter-spacing: -0.01em;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: block;
}

.mobile-menu__link:hover {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* Info extra en menú móvil */
.mobile-menu__footer {
  position: static;
  margin-top: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  /* Bloque 2.9/2.10: Proporción 1440/810 con altura mínima segura */
  aspect-ratio: 1440 / 810;
  min-height: clamp(400px, 60vh, 600px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  /* Bloque 2.13/2.14: padding-top seguro para evitar empalme con header */
  padding-top: 90px;
}

/* Fondo del hero */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
}

/* Placeholder de fondo hero — gradiente oscuro premium */
.hero__bg--placeholder {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(60,40,10,0.5) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(30,20,5,0.4) 0%, transparent 60%),
    linear-gradient(160deg, #0f0e0c 0%, #0a0a0a 40%, #080808 100%);
}

/* Grilla de puntos decorativa sobre el hero */
.hero__bg--placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
}

/* Video de fondo del hero — Bloque 2.8 */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: var(--z-base);
  /* El video no debe bloquear clics ni interacciones */
  pointer-events: none;
}

/* Video / imagen de fondo real (cuando esté disponible) */
.hero__bg video,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay de gradiente sobre el hero — Bloque 2.8: más oscuro para legibilidad sobre video */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(8,8,8,0.50) 0%,
      rgba(8,8,8,0.55) 50%,
      rgba(8,8,8,0.85) 100%
    );
  z-index: var(--z-above);
}

/* Contenido del hero — Bloque 2.8: alineado a la izquierda */
.hero__content {
  position: relative;
  z-index: var(--z-card);
  padding: 0 var(--section-px);
  max-width: 860px;
  width: 100%;
  text-align: left;
}

/* Bloque 2.8/2.10/2.13: título a la izquierda, responsive extremo y un renglón */
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(1.5rem, 5vw, 4.5rem);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--color-white);
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
  text-align: left;
}

.hero__title-line1 {
  /* Bloque 2.13: Restaurado un solo renglón inquebrantable */
  white-space: nowrap;
  display: block;
}

/* Segunda línea en azul celeste */
.hero__title-line2 {
  font-style: normal;
  color: var(--color-accent);
  display: block;
  font-size: clamp(1.2rem, 3.8vw, 3.5rem);
  white-space: nowrap;
}

.hero__subtitle {
  font-size: clamp(var(--text-base), 2.5vw, var(--text-md));
  font-weight: var(--weight-light);
  color: var(--text-secondary);
  margin-bottom: var(--space-10);
  max-width: 540px;
  line-height: var(--leading-loose);
  text-align: left;
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Reel badge */
.hero__reel-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-12);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.hero__reel-badge::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.5;
  transition: opacity var(--transition-base);
}

.hero__scroll:hover {
  opacity: 1;
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { opacity: 1; transform: scaleY(1); transform-origin: top; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; transform: scaleY(1); }
}

.hero__scroll-text {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  writing-mode: vertical-rl;
}

/* Estadísticas del hero */
.hero__stats {
  position: absolute;
  bottom: var(--space-10);
  right: var(--section-px);
  z-index: var(--z-card);
  display: none; /* visible en desktop */
}

.hero__stats-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: right;
}

.hero__stat-number {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: 1;
}

.hero__stat-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* ------------------------------------------------------------
   8. SERVICIOS
   ------------------------------------------------------------ */
.servicios {
  padding-block: var(--section-py);
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

/* Línea decorativa arriba */
.servicios::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--section-px);
  right: var(--section-px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color-mid), transparent);
}

.servicios__header {
  margin-bottom: var(--space-12);
  text-align: center;
}

.servicios__title {
  font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.servicios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px; /* Separadores tipo borde */
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.servicio-card {
  background: var(--bg-secondary);
  padding: var(--space-8) var(--space-6);
  transition: background var(--transition-base);
  position: relative;
}

.servicio-card:hover {
  background: var(--bg-tertiary);
}

/* Indicador activo hover */
.servicio-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--transition-base);
}

.servicio-card:hover::before {
  transform: scaleY(1);
}

/* Ícono del servicio */
.servicio-card__icon {
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-3);
  object-fit: contain;
}

/* Tarjeta de servicio centrada — Bloque 2.8 y 2.9 (reducido) */
.servicio-card--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.servicio-card--centered .servicio-card__icon {
  margin-bottom: var(--space-4);
}

.servicio-card--centered .servicio-card__name {
  margin-bottom: var(--space-2);
}

.servicio-card__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.servicio-card__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* ------------------------------------------------------------
   9. PROYECTOS — Segmentos de video
   ============================================================
   PROPORCIÓN OFICIAL: Mobile 1440×810 / Desktop 1920×620
   NO cambiar sin autorización del usuario.
   Fuente: AGENT_BRIEF.md
   ------------------------------------------------------------ */
.proyectos {
  padding-top: var(--section-py);
  padding-bottom: 0;
  background: var(--bg-primary);
}

.proyectos__header {
  padding-inline: var(--section-px);
  margin-bottom: var(--space-10);
  text-align: center;
}

.proyectos__title {
  font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.proyectos__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
}

/* Lista de segmentos */
.proyectos__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ============================================================
   SEGMENTO INDIVIDUAL DE PROYECTO
   ============================================================ */
.proyecto-segment {
  position: relative;
  overflow: hidden;

  /* PROPORCIÓN OFICIAL MOBILE — token `default` (16 / 9 ≡ 1440 / 810) */
  aspect-ratio: var(--showcase-ratio-default-compact);

  /* Animación suave al entrar en pantalla */
  transition: filter var(--transition-slow);
}

/* ------------------------------------------------------------
   TOKENS DE ALTURA — régimen compacto (< 1024px) — SHOWCASE-CP3
   `default` no se declara: lo aporta la regla base de arriba.
   ------------------------------------------------------------ */
.proyecto-segment[data-height="large"] {
  aspect-ratio: var(--showcase-ratio-large-compact);
}

.proyecto-segment[data-height="feature"] {
  aspect-ratio: var(--showcase-ratio-feature-compact);
}

.proyecto-segment[data-height="special"] {
  aspect-ratio: var(--showcase-ratio-special-compact, var(--showcase-ratio-default-compact));
}

/* Medio (video o imagen) dentro del segmento */
.proyecto-segment__video,
.proyecto-segment__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* CRÍTICO: nunca deformar el medio */
  object-position: var(--media-pos-compact, center center);
  z-index: var(--z-base);
  transition: transform var(--transition-xslow);
  /* Bloque 2.8: el medio no bloquea clics al enlace de proyecto */
  pointer-events: none;
}

.proyecto-segment:hover .proyecto-segment__video,
.proyecto-segment:hover .proyecto-segment__image {
  transform: scale(1.03);
}

/* Placeholder de fondo (cuando no hay video) */
.proyecto-segment__placeholder {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  transition: transform var(--transition-xslow);

  /* Fondo base: se conserva cuando la pieza no declara theme. */
  background: var(--bg-primary);
}

/* ------------------------------------------------------------
   THEMES DE PLACEHOLDER — SHOWCASE-CP2
   ------------------------------------------------------------
   Migración de los ocho gradientes que antes inyectaba main.js.
   Solo aplican cuando el renderer escribió [data-theme]; si el
   theme es null el placeholder conserva var(--bg-primary).
   Los pares hex son exactamente los de la baseline. NO cambiar.
   ------------------------------------------------------------ */
.proyecto-segment[data-theme="gradient-01"] .proyecto-segment__placeholder {
  background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
}

.proyecto-segment[data-theme="gradient-02"] .proyecto-segment__placeholder {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.proyecto-segment[data-theme="gradient-03"] .proyecto-segment__placeholder {
  background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}

.proyecto-segment[data-theme="gradient-04"] .proyecto-segment__placeholder {
  background: linear-gradient(135deg, #1e1e2e 0%, #2a1a3e 100%);
}

.proyecto-segment[data-theme="gradient-05"] .proyecto-segment__placeholder {
  background: linear-gradient(135deg, #0a1628 0%, #122040 100%);
}

.proyecto-segment[data-theme="gradient-06"] .proyecto-segment__placeholder {
  background: linear-gradient(135deg, #1a160a 0%, #2a2210 100%);
}

.proyecto-segment[data-theme="gradient-07"] .proyecto-segment__placeholder {
  background: linear-gradient(135deg, #0a1a12 0%, #10281c 100%);
}

.proyecto-segment[data-theme="gradient-08"] .proyecto-segment__placeholder {
  background: linear-gradient(135deg, #1a0a0a 0%, #2e1010 100%);
}

.proyecto-segment:hover .proyecto-segment__placeholder {
  transform: scale(1.03);
}

/* Textura sutil sobre el placeholder */
.proyecto-segment__placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Overlay de gradiente sobre el video/fondo */
.proyecto-segment__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.10) 100%
  );
  z-index: var(--z-overlay);
  transition: background var(--transition-slow);
}

.proyecto-segment:hover .proyecto-segment__overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.05) 100%
  );
}

/* Línea separadora entre segmentos */
.proyecto-segment + .proyecto-segment {
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* Contenido superpuesto */
.proyecto-segment__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-8) var(--space-6);
  /* Bloque 2.10: Z-index mayor que overlay para permitir clics en el botón */
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Grupo de texto */
.proyecto-segment__text {
  flex: 1;
  min-width: 0;
}

.proyecto-segment__cliente {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.proyecto-segment__titulo {
  font-size: clamp(var(--text-lg), 3vw, var(--text-xl));
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

/* Botón "Ver proyecto" */
.proyecto-segment__cta {
  flex-shrink: 0;
}

/* Número del proyecto (decorativo) */
.proyecto-segment__index {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.25);
  z-index: calc(var(--z-overlay) + 1);
}

/* Badge "VIDEO PRÓXIMAMENTE" */
.proyecto-segment__badge {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  z-index: var(--z-card);
}

/* ------------------------------------------------------------
   10. CLIENTES (logos)
   ------------------------------------------------------------ */
.clientes {
  padding-block: var(--section-py);
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.clientes::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--section-px);
  right: var(--section-px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color-mid), transparent);
}

.clientes__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.clientes__title {
  font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.clientes__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-3);
}

/* ============================================================
   CLIENTES SLIDER — Bloque 2.8
   Una tira visible a la vez con fade.
   Preparado para agregar más grupos en el futuro.
   ============================================================ */
.clientes__slider {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  min-height: 120px; /* evitar salto de layout durante fade */
}

.cliente-slide {
  display: none;
  width: 100%;
  background: var(--bg-card);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.cliente-slide--active {
  display: flex;
  opacity: 0; /* JS controla la transición */
}

.cliente-slide--visible {
  opacity: 1;
}

/* Logos blancos sólidos — sin opacidad reducida */
.cliente-logo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Bloque 2.8: forzar logos a blanco sólido sin alterar archivo original */
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* ------------------------------------------------------------
   11. NUESTRO PROCESO
   ------------------------------------------------------------ */
.proceso {
  padding-block: var(--section-py);
  background: var(--bg-primary);
  position: relative;
}

.proceso::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--section-px);
  right: var(--section-px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color-mid), transparent);
}

.proceso__header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.proceso__title {
  font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

/* Timeline vertical en mobile */
.proceso__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

/* Tarjeta de proceso — Bloque 2.8: con marco celeste */
.proceso-step--card {
  border: 1px solid rgba(47, 216, 255, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: rgba(47, 216, 255, 0.03);
  transition: border-color var(--transition-base), background var(--transition-base);
}

.proceso-step--card:hover {
  border-color: rgba(47, 216, 255, 0.55);
  background: rgba(47, 216, 255, 0.06);
}

.proceso-step {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  position: relative;
}

.proceso-step + .proceso-step {
  /* Sin borde superior — las tarjetas ya tienen bordes propios */
  border-top: none;
}

/* Número circular en azul celeste */
.proceso-step__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(47, 216, 255, 0.5);
  background: rgba(47, 216, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}

.proceso-step__body {
  flex: 1;
  padding-top: 0.75rem;
}

.proceso-step__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.proceso-step__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* ------------------------------------------------------------
   12. TESTIMONIOS / CONFIANZA
   ------------------------------------------------------------ */
.testimonios {
  padding-block: var(--section-py);
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.testimonios::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--section-px);
  right: var(--section-px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color-mid), transparent);
}

/* Resplandor decorativo */
.testimonios::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(212,197,169,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.testimonios__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.testimonios__title {
  font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.testimonios__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-3);
}

.testimonios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.testimonio-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.testimonio-card:hover {
  border-color: var(--border-color-mid);
  transform: translateY(-2px);
}

/* Comilla decorativa — Bloque 2.8: en azul celeste */
.testimonio-card__comilla {
  font-size: 4rem;
  font-weight: var(--weight-black);
  color: var(--color-accent);
  line-height: 1;
  opacity: 0.6; /* más visible que antes */
  margin-bottom: var(--space-2);
  font-family: Georgia, serif;
}

.testimonio-card__quote {
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: var(--text-secondary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-6);
  font-style: italic;
}

.testimonio-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonio-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-gray-dark);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.testimonio-card__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

.testimonio-card__company {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 1px;
}

/* Banda de confianza — logos pequeños */
.testimonios__trust-band {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.testimonios__trust-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

/* ------------------------------------------------------------
   13. CONTACTO
   ------------------------------------------------------------ */
.contacto {
  padding-block: var(--section-py);
  background: var(--bg-primary);
  position: relative;
}

.contacto::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--section-px);
  right: var(--section-px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color-mid), transparent);
}

.contacto__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

/* Columna de info */
.contacto__info {
  /* placeholder layout */
}

.contacto__header {
  margin-bottom: var(--space-8);
}

.contacto__title {
  font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.contacto__subtitle {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* Datos de contacto */
.contacto__datos {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.contacto__dato {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.contacto__dato-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  flex-shrink: 0;
  color: var(--color-accent);
}

.contacto__dato-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.contacto__dato-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.contacto__dato-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Formulario */
.contacto-form {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contacto-form__note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color-light);
  /* El formulario envía mediante main.js a /api/contact.php */
}

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-field__input,
.form-field__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  outline: none;
}

.form-field__input:hover,
.form-field__textarea:hover {
  border-color: var(--border-color-mid);
}

.form-field__input:focus,
.form-field__textarea:focus {
  border-color: rgba(212, 197, 169, 0.4);
  background: rgba(255,255,255,0.06);
}

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

.form-field__input::placeholder,
.form-field__textarea::placeholder {
  color: var(--color-gray);
}

.contacto-form__submit {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contacto-form__submit .btn {
  width: 100%;
  justify-content: center;
}

/* Alternativas directas */
.contacto__alternativas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  text-align: center;
}

.contacto__alternativas-label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contacto__links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background: var(--color-dark);
  border-top: 1px solid var(--border-color);
  padding-block: var(--space-12) var(--space-8);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

/* Logo en footer */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__logo {
  font-size: 1rem;
  font-weight: var(--weight-black);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
}

.site-footer__logo-img {
  /* Bloque 2.8: reducido 20% (135px → 108px), consistente con header */
  width: 108px;
  height: auto;
  object-fit: contain;
}

.site-footer__tagline {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* Navegación footer */
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
}

.site-footer__nav-link {
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.site-footer__nav-link:hover {
  color: var(--color-white);
}

/* Redes sociales */
.site-footer__social {
  display: flex;
  gap: var(--space-3);
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.site-footer__social-link:hover {
  border-color: rgba(47, 216, 255, 0.4);
  background: rgba(47, 216, 255, 0.06);
}

.social-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  transition: transform var(--transition-base), opacity var(--transition-base), filter var(--transition-base);
  opacity: 1;
  /* Bloque 2.9: Convertir a cyan (aprox #2fd8ff) */
  filter: brightness(0) saturate(100%) invert(67%) sepia(35%) saturate(3015%) hue-rotate(151deg) brightness(101%) contrast(101%);
}

.site-footer__social-link:hover .social-icon {
  transform: translateY(-2px);
  opacity: 1;
}

/* Copyright */
.site-footer__bottom {
  margin-top: var(--space-8);
  text-align: center;
}

.site-footer__copy {
  font-size: var(--text-xs);
  color: var(--text-muted);
  opacity: 0.6;
}

.site-footer__divider {
  width: 100%;
  height: 1px;
  background: var(--border-color-light);
}

/* ------------------------------------------------------------
   15. PÁGINAS INTERNAS DE PROYECTO
   ------------------------------------------------------------ */
.page-proyecto {
  /* Bloque 2.12: Menos aire inicial */
  padding-top: 100px; 
  min-height: 100vh;
  background: var(--bg-primary);
}

.page-proyecto__hero {
  /* Bloque 2.12: Menos aire en el hero interno */
  padding-block: var(--space-6);
  text-align: center;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.page-proyecto__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.page-proyecto__title {
  font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  color: var(--color-accent);
}

.page-proyecto__cliente {
  font-size: var(--text-md);
  color: var(--text-muted);
}

/* Embed de video */
.proyecto-embed {
  /* Bloque 2.12: menos separación */
  padding-top: var(--space-10);
  padding-bottom: var(--space-6);
}

.proyecto-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.proyecto-embed__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: var(--text-sm);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}

.proyecto-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Galería */
.proyecto-galeria {
  /* Bloque 2.12: menos separación */
  padding-top: var(--space-6);
  padding-bottom: var(--section-py);
}

.proyecto-galeria__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-8);
}

.proyecto-galeria__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.proyecto-galeria__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

/* Descripción */
.proyecto-descripcion {
  /* Bloque 2.12: menos separación */
  padding-block: var(--space-6);
}

.proyecto-descripcion__body {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-loose);
  max-width: 680px;
}

/* Botón volver */
.proyecto-volver {
  padding-block: var(--space-10) var(--space-16);
  text-align: center;
}

/* ------------------------------------------------------------
   16. MEDIA QUERIES — Tablet (>= 640px)
   ------------------------------------------------------------ */
@media (min-width: 640px) {
  :root {
    --section-px: 2rem;
  }

  /* Servicios 2 columnas */
  .servicios__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Clientes 3 columnas */
  .clientes__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Testimonios 2 columnas */
  .testimonios__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Galería 2 columnas */
  .proyecto-galeria__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero CTA en fila — alineado a la izquierda */
  .hero__cta-group {
    flex-direction: row;
    justify-content: flex-start;
  }

  /* Formulario: nombre y empresa en fila */
  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Contacto info + form lado a lado si hay espacio */
  .contacto-form {
    padding: var(--space-10);
  }

  /* Proceso: eliminar pseudo-elemento de línea (ahora son tarjetas) */
  .proceso__steps::before {
    display: none;
  }
}

/* ------------------------------------------------------------
   17. MEDIA QUERIES — Desktop (>= 1024px)
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  :root {
    --section-px: 3.5rem;
    --section-py: 3.5rem; /* Bloque 2.9: antes 6rem */
  }

  /* Nav desktop visible */
  .site-nav {
    display: flex;
  }

  /* Bloque 2.12/2.13/2.14/2.16: anclas desktop — 30px (−20px vs 2.14) */
  html {
    scroll-padding-top: 30px;
  }

  .site-logo__img,
  .site-footer__logo-img {
    /* Bloque 2.8: desktop 20% más pequeño que Bloque 2.7 (170px → 136px) */
    width: 136px;
  }
  
  .contacto__dato-icon-img {
    width: 32px;
    height: 32px;
  }
  
  .social-icon {
    width: 36px;
    height: 36px;
  }

  .nav-toggle {
    display: none;
  }

  /* Hero */
  .hero {
    /* Proporción OFICIAL DESKTOP: 1920 / 620 */
    aspect-ratio: 1920 / 620;
  }

  .hero__cta-group {
    gap: var(--space-5);
  }

  /* Las estadísticas del hero fueron eliminadas en Bloque 2.8 */

  /* Servicios 4 columnas */
  .servicios__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .servicio-card__icon {
    width: 56px;
    height: 56px;
  }

  /* PROPORCIÓN OFICIAL DESKTOP — token `default` (1920 / 620) */
  .proyecto-segment {
    aspect-ratio: var(--showcase-ratio-default-desktop);
  }

  /* Tokens de altura — régimen desktop (>= 1024px) — SHOWCASE-CP3 */
  .proyecto-segment[data-height="large"] {
    aspect-ratio: var(--showcase-ratio-large-desktop);
  }

  .proyecto-segment[data-height="feature"] {
    aspect-ratio: var(--showcase-ratio-feature-desktop);
  }

  .proyecto-segment[data-height="special"] {
    aspect-ratio: var(--showcase-ratio-special-desktop, var(--showcase-ratio-default-desktop));
  }

  /* Punto focal desktop: mismo mecanismo para video e imagen. */
  .proyecto-segment__video,
  .proyecto-segment__image {
    object-position: var(--media-pos-desktop, center center);
  }

  .proyecto-segment__content {
    padding: var(--space-10) var(--space-12);
  }

  .proyecto-segment__titulo {
    font-size: var(--text-2xl);
  }

  /* Clientes más columnas */
  .clientes__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Proceso horizontal — tarjetas en fila */
  .proceso__steps {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-4);
  }

  .proceso-step--card {
    flex: 1;
    flex-direction: column;
  }

  .proceso-step {
    flex-direction: column;
  }

  .proceso-step + .proceso-step {
    border-top: none;
    border-left: none;
  }

  .proceso-step__body {
    padding-top: var(--space-5);
  }

  /* Testimonios 3 columnas */
  .testimonios__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Contacto 2 columnas */
  .contacto__inner {
    grid-template-columns: 1fr 1.4fr;
    align-items: start;
  }

  /* Footer horizontal */
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    align-items: flex-start;
  }

  .site-footer__brand {
    align-items: flex-start;
  }

  /* Galería 3 columnas */
  .proyecto-galeria__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------------------------------------
   18. MEDIA QUERIES — Desktop grande (>= 1280px)
   ------------------------------------------------------------ */
@media (min-width: 1280px) {
  :root {
    --section-px: 5rem;
  }
}

/* ------------------------------------------------------------
   19. MEDIA QUERIES — Widescreen (>= 1440px)
   ------------------------------------------------------------ */
@media (min-width: 1440px) {
  :root {
    --section-px: 6rem;
    --section-py: 4rem; /* Bloque 2.9: antes 7rem */
  }
}

/* ============================================================
   20. DOCUMENTOS LEGALES (Bloque PRIVACIDAD-0B)
   ============================================================ */
.legal-page {
  background-color: #f7f7f7;
  color: #222;
}

.legal-header {
  padding: 1.5rem var(--section-px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  background: #fff;
}

.legal-header__logo {
  width: 90px;
  height: auto;
  filter: invert(1);
}

.legal-header__link {
  font-size: 13px;
  color: #555;
  text-decoration: none;
  font-weight: 500;
}

.legal-header__link:hover {
  text-decoration: underline;
  color: #222;
}

.legal-main {
  padding: var(--space-8) var(--section-px);
  max-width: 880px;
  margin: 0 auto;
}

.legal-doc {
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: var(--space-6);
  border-radius: 4px;
}

.legal-doc h1 {
  font-size: 22px;
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-6);
  color: #000;
  text-transform: uppercase;
}

.legal-doc h2 {
  font-size: 14.5px;
  font-weight: var(--weight-bold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: #111;
}

.legal-doc p,
.legal-doc ul {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  color: #333;
}

.legal-doc ul {
  list-style: disc;
  margin-left: 1.5rem;
}

.legal-doc a {
  color: #000;
  text-decoration: underline;
}

.legal-doc strong {
  font-weight: var(--weight-semibold);
  color: #111;
}

.legal-footer {
  text-align: center;
  padding: var(--space-6) var(--section-px);
  background: #f7f7f7;
  color: #666;
  font-size: 12px;
  border-top: 1px solid #e0e0e0;
}

.legal-footer p {
  margin-bottom: 0.25rem;
}

@media (min-width: 1024px) {
  .legal-doc {
    padding: var(--space-10);
  }
}

@media print {
  body.legal-page {
    background: #fff !important;
  }
  .legal-header,
  .legal-footer {
    display: none !important;
  }
  .legal-main {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .legal-doc {
    border: none !important;
    padding: 0 !important;
  }
  .legal-doc * {
    color: #000 !important;
  }
}

/* ============================================================
   FIN DE STYLES.CSS — Bloque 2: Home mobile-first
   ============================================================
   Para continuar:
   - Descomentar @font-face cuando TT Commons .woff2 esté listo
   - Reemplazar --font-primary con 'TTCommons' cuando aplique
   - Agregar más propiedades de video en Bloque 3
   ============================================================ */

/* ============================================================
   SELECTOR DE IDIOMA — .lang-switcher
   IDIOMA-0B: Estilos preparados. NO insertar HTML todavía.
   ============================================================
   Componente:
     .lang-switcher              — contenedor del selector
     .lang-switcher__link        — enlace ES o EN
     .lang-switcher__link--active — idioma actualmente activo
     .lang-switcher__sep         — separador visual entre idiomas

   Requisitos:
     - Sin banderas (solo texto: ES / EN)
     - Accesible mediante teclado (foco visible)
     - Estado hover y activo claramente diferenciados
     - Integrado al sistema de variables existente
     - Adaptable a desktop y móvil
   ============================================================ */

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lang-switcher__link {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition:
    color        var(--transition-fast),
    background   var(--transition-fast),
    outline      var(--transition-fast);
  /* Foco accesible */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.lang-switcher__link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.lang-switcher__link:focus-visible {
  outline-color: var(--color-accent);
  color: var(--text-primary);
}

.lang-switcher__link--active {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  cursor: default;
  pointer-events: none; /* el idioma activo no es navegable */
}

.lang-switcher__link--active:hover {
  background: transparent;
}

.lang-switcher__sep {
  display: inline-block;
  color: var(--border-color-mid);
  padding: 0 var(--space-1);
  user-select: none;
}

/* Ajuste móvil: tamaño ligeramente reducido */
@media (max-width: 767px) {
  .lang-switcher {
    font-size: var(--text-xs);
  }

  .lang-switcher__link {
    padding: var(--space-1) var(--space-1);
  }
}