/* ============================================================
   FRAMEZERO PRODUCTIONS — styles.css
   Archivo de estilos principal de la página web
   ============================================================ */

/* ============================================================
   1. VARIABLES GLOBALES (colores, tipografías, gradientes)
   Aquí viven todos los valores del sistema de diseño.
   Si quieres cambiar un color o fuente, solo cambias aquí
   y se actualiza en toda la página automáticamente.
   ============================================================ */

:root {
  /* -- Fondos -- */
  --bg: #0b0b0e; /* Fondo principal. Cinemático, profundo, premium */
  --bg2: #0f0f13; /* Fondo secundario para secciones alternas */
  --bg3: #141418; /* Fondo para tarjetas y hover states */

  /* -- Tipografía -- */
  --white: #ffffff; /* Texto principal */
  --off: #ededed; /* Texto secundario, subtítulos */
  --muted: #7a7a8a; /* Texto de soporte, descripciones */
  --border: rgba(255, 255, 255, 0.07); /* Líneas divisorias sutiles */

  /* -- Colores de identidad Framezero -- */
  --red: #ff2e3d; /* Energía, inicio, grabación, "REC" */
  --purple: #8638d2; /* Experimental, creativo, digital */
  --blue: #1355bb; /* Tecnología, motion, futuro */
  --cyan: #38fdfd; /* Detalles finos, hover, highlights */

  /* -- Gradientes de marca (rojo → púrpura → azul) -- */
  --grad: linear-gradient(135deg, #ff2e3d 0%, #8638d2 50%, #1355bb 100%);
  --grad-h: linear-gradient(
    135deg,
    #ff2e3d 0%,
    #8638d2 40%,
    #38fdfd 100%
  ); /* Versión con cian al final */

  /* -- Tipografías -- */
  --font-h: "Barlow Condensed", sans-serif; /* Títulos, labels, botones */
  --font-b: "Barlow", sans-serif; /* Cuerpo de texto, párrafos */
}

/* ============================================================
   2. RESET Y BASE
   Limpia los estilos por defecto del navegador y establece
   la base visual de toda la página.
   ============================================================ */

/* Reset universal: elimina márgenes y paddings por defecto */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Scroll suave al hacer clic en links internos */
html {
  scroll-behavior: smooth;
}

/* Estilos base del body */
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden; /* Evita scroll horizontal indeseado */
  cursor: none; /* Oculta cursor nativo, usamos uno personalizado */
}

/* ============================================================
   3. CURSOR PERSONALIZADO
   Reemplaza el cursor del navegador por un punto cian con
   un anillo que sigue al mouse con un pequeño delay (efecto
   "suave"). Se activa en desktop, se oculta en móvil.
   ============================================================ */

/* Punto pequeño que sigue exactamente al mouse */
.cursor {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* No interfiere con clics */
  z-index: 9999;
  transform: translate(-50%, -50%);
  background: var(--cyan);
  transition:
    width 0.2s,
    height 0.2s;
}

/* Anillo exterior que sigue al mouse con delay (animado por JS) */
.cursor-ring {
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(56, 253, 253, 0.35);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    width 0.2s,
    height 0.2s,
    border-color 0.2s;
}

/* Cuando el mouse está sobre un link o botón, el cursor crece */
body:has(a:hover) .cursor,
body:has(button:hover) .cursor {
  width: 14px;
  height: 14px;
}
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring {
  width: 52px;
  height: 52px;
  border-color: var(--cyan);
}

/* ============================================================
   4. NAVEGACIÓN (NAV)
   Barra fija en la parte superior. Empieza transparente y
   al hacer scroll se vuelve opaca con blur de fondo.
   ============================================================ */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 52px;
  transition:
    background 0.4s,
    border 0.4s;
}

/* Clase que agrega JS al hacer scroll: fondo sólido + blur */
nav.scrolled {
  background: rgba(11, 11, 14, 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

/* Logo en el nav */
.nav-logo img {
  height: 38px;
  display: block;
}

/* Links de navegación */
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--white);
}

/* Botón CTA del nav (Hablemos) */
.nav-cta {
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 26px;
  border-radius: 2px;
  background: var(--grad); /* Gradiente de marca */
  color: var(--white);
  transition:
    opacity 0.2s,
    transform 0.15s;
}
.nav-cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ============================================================
   5. HERO — SECCIÓN DE INICIO
   Primera pantalla completa. Tiene fondo con gradiente
   radial, grilla decorativa, punto REC parpadeante,
   estadísticas y el titular principal.
   ============================================================ */

#hero {
  min-height: 100vh; /* Ocupa toda la pantalla */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Ancla desde arriba: el titular crece hacia abajo */
  padding: 0 52px 88px;
  padding-top: 20vh; /* Empuja el contenido al centro-bajo de la pantalla */
  position: relative;
  overflow: hidden;
}

/* Gradiente radial de fondo (púrpura y rojo sutiles) */
.hero-bg-grad {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 50% at 80% 50%,
      rgba(134, 56, 210, 0.12) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 40% 60% at 20% 80%,
      rgba(255, 46, 61, 0.07) 0%,
      transparent 55%
    );
  pointer-events: none;
  z-index: 0;
}

/* Grilla decorativa en el fondo */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
  z-index: 0;
  /* Se desvanece arriba y abajo para que no se vea dura */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 25%,
    black 70%,
    transparent 100%
  );
}

/* Textura de ruido sutil sobre el fondo */
.hero-noise {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Indicador REC en la esquina superior derecha */
.hero-rec {
  position: absolute;
  top: 110px;
  right: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  z-index: 2;
  opacity: 0;
  animation: fadeIn 1s 1.2s forwards;
}

/* Punto rojo parpadeante del REC */
.hero-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 1.4s ease-in-out infinite;
}

/* Animación del pulso del punto REC */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

/* Estadísticas flotantes (6+ proyectos, 3 creativos, 0 frames vacíos) */
.hero-stats {
  position: absolute;
  right: 52px;
  bottom: 88px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 2;
  opacity: 0;
  animation: fadeIn 1s 1.1s forwards;
}

.stat-item {
  text-align: right;
}

/* Número grande con gradiente de marca */
.stat-num {
  display: block;
  font-family: var(--font-h);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

/* Etiqueta pequeña sobre el titular ("Productora audiovisual · Cali") */
.hero-tag {
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(56, 253, 253, 0.06);
  border: 1px solid rgba(56, 253, 253, 0.18);
  padding: 6px 16px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: fadeUp 0.8s 0.2s forwards;
}

/* Titular principal del hero */
.hero-headline {
  font-family: var(--font-h);
  font-size: clamp(
    70px,
    9.5vw,
    148px
  ); /* Responsive: mínimo 70px, máximo 148px */
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: fadeUp 0.9s 0.4s forwards;
}

/* Subtítulo del hero */
.hero-sub {
  margin-top: 28px;
  font-size: 17px;
  font-weight: 300;
  color: var(--muted);
  max-width: 460px;
  line-height: 1.65;
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: fadeUp 0.9s 0.65s forwards;
}
.hero-sub strong {
  color: var(--off);
  font-weight: 500;
}

/* Botones de acción del hero */
.hero-actions {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  align-items: center;
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: fadeUp 0.9s 0.8s forwards;
}

/* --- Animaciones de entrada del hero --- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================
   6. BOTONES GLOBALES
   Estilos compartidos de los dos tipos de botón
   que se usan en toda la página.
   ============================================================ */

/* Botón primario: fondo con gradiente de marca */
.btn-primary {
  background: var(--grad);
  color: var(--white);
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 34px;
  border-radius: 2px;
  text-decoration: none;
  border: none;
  cursor: none;
  transition:
    opacity 0.2s,
    transform 0.15s;
  display: inline-block;
}
.btn-primary:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* Botón secundario: solo texto con flecha */
.btn-secondary {
  color: var(--off);
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.btn-secondary:hover {
  color: var(--cyan);
}
.btn-secondary .arrow {
  font-size: 18px;
  transition: transform 0.2s;
}
.btn-secondary:hover .arrow {
  transform: translateX(4px);
}

/* ============================================================
   7. DIVISORES Y ESTRUCTURA DE SECCIONES
   Líneas que separan secciones y estilos base que comparten
   todos los bloques de contenido.
   ============================================================ */

/* Línea divisoria horizontal */
hr.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 52px;
}

/* Padding base de cada sección */
section {
  padding: 120px 52px;
}

/* Label pequeño sobre títulos ("Quiénes somos", "Servicios"…) */
.section-label {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
  display: block;
}

/* Título grande de sección */
.section-title {
  font-family: var(--font-h);
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

/* Párrafo introductorio de sección */
.section-intro {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 520px;
}

/* Texto con gradiente de marca (rojo → púrpura → azul) */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   8. SOBRE NOSOTROS
   Sección de presentación con frase grande a la izquierda
   y texto descriptivo a la derecha. Debajo, los 4 valores.
   ============================================================ */

#about {
  padding-top: 136px;
} /* Más padding arriba por el nav fijo */

/* Layout de dos columnas */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 56px;
}

/* Frase grande izquierda */
.big-quote {
  font-family: var(--font-h);
  font-size: clamp(38px, 3.8vw, 56px);
  font-weight: 800;
  line-height: 1;
  color: var(--white);
}

/* Párrafos del lado derecho */
.about-right p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 18px;
}
.about-right p strong {
  color: var(--off);
  font-weight: 500;
}

/* Tira de los 4 valores en la parte inferior */
.values-strip {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  margin-top: 64px;
  border-radius: 2px;
  overflow: hidden;
}

.value-item {
  flex: 1;
  padding: 28px 24px;
  border-right: 1px solid var(--border);
  transition: background 0.25s;
}
.value-item:last-child {
  border-right: none;
}
.value-item:hover {
  background: rgba(56, 253, 253, 0.03);
}

/* Placeholder de imagen para cada valor (proporciones 16:9) */
/* Para usar: reemplaza .value-img-empty con <img src="tu-imagen.jpg"/> */
.value-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--bg3);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  position: relative;
}

/* Imagen real: agregar <img> dentro de .value-img cuando tengas las fotos */
.value-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.value-item:hover .value-img img {
  transform: scale(1.04);
}

/* Estado vacío: visible mientras no hay imagen */
.value-img-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.value-img-empty span {
  font-family: var(--font-h);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.45;
}

.value-name {
  font-family: var(--font-h);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 7px;
}

.value-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* ============================================================
   9. ENFOQUE CREATIVO
   3 tarjetas: Mirada estratégica, Producción con intención,
   Trabajo colaborativo. Con línea de acento en hover.
   ============================================================ */

#enfoque {
  background: var(--bg2);
}

/* Grid de 3 columnas separadas por líneas */
.enfoque-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border); /* El background del grid actúa como separador */
  margin-top: 60px;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.enfoque-card {
  background: var(--bg2);
  padding: 48px 36px;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}

/* Línea de acento superior que se revela en hover */
.enfoque-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.enfoque-card:hover::before {
  transform: scaleX(1);
}
.enfoque-card:hover {
  background: #121216;
}

.enfoque-num {
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--cyan);
  margin-bottom: 24px;
  display: block;
}

.enfoque-title {
  font-family: var(--font-h);
  font-size: 32px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 14px;
}

.enfoque-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* ============================================================
   10. SERVICIOS
   Grid de 4 servicios en 2 columnas. Flecha en la esquina
   que cambia a cian en hover para invitar al clic.
   ============================================================ */

/* Header con título izquierda e intro derecha */
.servicios-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

/* Grid de 2x2 separado por líneas */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.servicio-card {
  background: var(--bg);
  padding: 44px 40px;
  transition: background 0.25s;
  cursor: none;
}
.servicio-card:hover {
  background: var(--bg3);
}
/* Imagen de servicio — misma proporción 16:9 que los valores */
.servicio-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
  background: #141418;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  position: relative;
}
.servicio-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.servicio-card:hover .servicio-img img {
  transform: scale(1.04);
}

/* Fila superior de cada tarjeta: ícono + flecha */
.servicio-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.servicio-icon {
  font-size: 26px;
}

/* Flecha de navegación */
.servicio-arrow {
  color: var(--muted);
  font-size: 20px;
  transition:
    color 0.2s,
    transform 0.2s;
}
.servicio-card:hover .servicio-arrow {
  color: var(--cyan);
  transform: translate(3px, -3px);
}

.servicio-title {
  font-family: var(--font-h);
  font-size: 30px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 12px;
}

.servicio-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 26px;
}

/* Tags de servicios específicos */
.servicio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag {
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 2px;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.servicio-card:hover .tag {
  border-color: rgba(56, 253, 253, 0.2);
  color: var(--off);
}

/* ============================================================
   11. PROYECTOS / PORTAFOLIO
   Lista de proyectos en filas horizontales. Cada fila tiene
   número, info del proyecto y flecha de navegación.
   ============================================================ */

#proyectos {
  background: var(--bg2);
}

.proyectos-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.proyectos-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Cada fila de proyecto */
.proyecto-item {
  display: grid;
  grid-template-columns: 56px 1fr auto; /* Número | Info | Flecha */
  gap: 36px;
  align-items: center;
  padding: 28px 36px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition:
    background 0.25s,
    border-color 0.25s;
  cursor: none;
  margin-bottom: 1px;
}
.proyecto-item:hover {
  background: #16161b;
  border-color: rgba(56, 253, 253, 0.12);
}
/* Reset completo para <a> usado como proyecto-item */
a.proyecto-item {
  text-decoration: none;
  color: inherit;
  width: 100%;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

a.proyecto-item .proyecto-cat,
a.proyecto-item .proyecto-name,
a.proyecto-item .proyecto-desc {
  color: inherit;
}
/* Número con gradiente de marca */
.proyecto-num {
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.proyecto-cat {
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

.proyecto-name {
  font-family: var(--font-h);
  font-size: 26px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 5px;
}

.proyecto-desc {
  font-size: 13px;
  color: var(--muted);
}

.proyecto-arrow {
  font-size: 22px;
  color: var(--muted);
  transition:
    color 0.2s,
    transform 0.2s;
}
.proyecto-item:hover .proyecto-arrow {
  color: var(--cyan);
  transform: translate(4px, -4px);
}

/* ============================================================
   12. PAQUETES
   3 tarjetas de precios. La del centro (Signature) tiene
   borde con gradiente y es el plan destacado.
   ============================================================ */

.paquetes-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.paquetes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Tarjeta base de paquete */
.paquete-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 44px 34px;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.3s,
    transform 0.3s;
}
.paquete-card:hover {
  border-color: rgba(56, 253, 253, 0.2);
  transform: translateY(-4px);
}

/* Tarjeta destacada (Signature): borde con gradiente de marca */
.paquete-card.featured {
  background: linear-gradient(180deg, #141418 0%, #0f0f13 100%);
}
/* Técnica de borde con gradiente usando pseudo-elemento */
.paquete-card.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  padding: 1px;
  background: var(--grad);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:                          /* ← agrega esta línea */
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* Badge "Más elegido" */
.paquete-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--grad);
  color: var(--white);
  font-family: var(--font-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}

.paquete-name {
  font-family: var(--font-h);
  font-size: 52px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}
/* Nombre del plan destacado con gradiente */
.paquete-card.featured .paquete-name {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.paquete-sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 30px;
  line-height: 1.5;
}

/* Lista de ítems del paquete con guion de marca */
.paquete-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.paquete-items li {
  font-size: 14px;
  color: var(--muted);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.4;
}
.paquete-items li::before {
  content: "—";
  flex-shrink: 0;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* CTA de cada tarjeta */
.paquete-cta {
  display: block;
  margin-top: 32px;
  text-align: center;
  padding: 13px 24px;
  border-radius: 2px;
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.15s;
  border: 1px solid var(--border);
  color: var(--off);
}
.paquete-cta:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-2px);
}

/* CTA del plan destacado: relleno con gradiente */
.paquete-card.featured .paquete-cta {
  background: var(--grad);
  color: var(--white);
  border: none;
}
.paquete-card.featured .paquete-cta:hover {
  opacity: 0.88;
}

/* ============================================================
   13. DIFERENCIADORES (POR QUÉ FRAMEZERO)
   Frase impactante a la izquierda + lista de 4 razones
   con número, título y descripción a la derecha.
   ============================================================ */

#diferenciadores {
  background: var(--bg2);
}

.diff-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
  margin-top: 60px;
}

.diff-statement {
  font-family: var(--font-h);
  font-size: clamp(42px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 0.97;
  margin-bottom: 22px;
}

.diff-body {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 32px;
}

/* Lista de razones */
.diff-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.diff-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 32px 1fr; /* Número | Contenido */
  gap: 18px;
  align-items: start;
}
.diff-item:first-child {
  border-top: 1px solid var(--border);
}

/* Número con gradiente */
.diff-num {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-top: 2px;
}

.diff-title {
  font-family: var(--font-h);
  font-size: 21px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 7px;
}

.diff-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* ============================================================
   14. PROCESO (CÓMO TRABAJAMOS)
   5 pasos en columnas horizontales. Estructura lineal
   para que el cliente entienda el flujo de trabajo.
   ============================================================ */

/* Grid de 5 columnas */
.proceso-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  margin-top: 60px;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.proceso-step {
  background: var(--bg);
  padding: 38px 26px;
  transition: background 0.25s;
}
.proceso-step:hover {
  background: var(--bg3);
}

.proceso-step-num {
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan);
  margin-bottom: 18px;
  display: block;
}

.proceso-step-title {
  font-family: var(--font-h);
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 10px;
}

.proceso-step-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* ============================================================
   15. FAQ (PREGUNTAS FRECUENTES)
   Acordeón: se abre una pregunta a la vez. Texto a la
   izquierda con CTA, preguntas a la derecha.
   ============================================================ */

#faq {
  background: var(--bg2);
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 100px;
  align-items: start;
  margin-top: 60px;
}

.faq-left p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

/* Cada ítem del acordeón */
.faq-item {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.faq-item:first-child {
  border-top: 1px solid var(--border);
}

/* Botón-pregunta */
.faq-q {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  cursor: none;
  text-align: left;
  gap: 16px;
}

.faq-q-text {
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* Ícono + que rota a × al abrirse */
.faq-icon {
  color: var(--cyan);
  font-size: 22px;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

/* Respuesta oculta que se expande con JS */
.faq-a {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  max-height: 0; /* Oculto por defecto */
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    padding 0.3s;
  padding-bottom: 0;
}
.faq-item.open .faq-a {
  max-height: 180px; /* Se expande al hacer clic */
  padding-bottom: 22px;
}

/* ============================================================
   16. EQUIPO
   Frase a la izquierda + 4 tarjetas del equipo a la derecha.
   La cuarta tarjeta es "Tú" para generar conversación.
   ============================================================ */

.equipo-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 60px;
}

.equipo-statement {
  font-family: var(--font-h);
  font-size: clamp(44px, 4.2vw, 62px);
  font-weight: 800;
  line-height: 0.97;
  margin-bottom: 22px;
}

.equipo-body {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
}

.equipo-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Tarjeta de cada miembro */
.equipo-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition:
    border-color 0.25s,
    transform 0.25s;
}
.equipo-card:hover {
  border-color: rgba(56, 253, 253, 0.18);
  transform: translateX(5px);
}

/* Avatar circular con gradiente de marca */
.equipo-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}

.equipo-name {
  font-family: var(--font-h);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 3px;
}
.equipo-role {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ============================================================
   17. SECCIÓN DE CONTACTO (LLAMADO A LA ACCIÓN FINAL)
   Sección de cierre con titular gigante y dos botones.
   Tiene gradiente radial de fondo para dramatismo.
   ============================================================ */

#contacto {
  background: var(--bg);
  text-align: center;
  padding: 140px 52px;
  position: relative;
  overflow: hidden;
}

/* Gradiente radial de fondo */
#contacto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    rgba(134, 56, 210, 0.1) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.contacto-label {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
  display: block;
  position: relative;
}

.contacto-title {
  font-family: var(--font-h);
  font-size: clamp(64px, 8.5vw, 128px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
  position: relative;
}

.contacto-sub {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 460px;
  margin: 0 auto 44px;
  position: relative;
}
.contacto-sub strong {
  color: var(--off);
}

.contacto-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  position: relative;
}

/* ============================================================
   18. FOOTER
   Barra inferior con logo, links y año.
   ============================================================ */

footer {
  border-top: 1px solid var(--border);
  padding: 36px 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo img {
  height: 26px;
  display: block;
}

.footer-links {
  display: flex;
  gap: 28px;
  list-style: none;
}
.footer-links a {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover {
  color: var(--white);
}

.footer-tag {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-h);
  letter-spacing: 0.06em;
}

/* ============================================================
   19. ANIMACIONES DE SCROLL (REVEAL)
   Elementos que aparecen con animación al hacer scroll.
   JS agrega la clase .visible cuando el elemento es visible.
   Se pueden encadenar con delays usando .reveal-delay-N
   ============================================================ */

/* Estado inicial: invisible y desplazado hacia abajo */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Estado final: visible en su posición */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays escalonados para animar elementos en secuencia */
.reveal-delay-1 {
  transition-delay: 0.1s;
}
.reveal-delay-2 {
  transition-delay: 0.2s;
}
.reveal-delay-3 {
  transition-delay: 0.3s;
}
.reveal-delay-4 {
  transition-delay: 0.4s;
}

/* ============================================================
   20. RESPONSIVE (MOBILE)
   Ajustes para pantallas menores a 900px (tablets y móviles).
   ============================================================ */

@media (max-width: 900px) {
  /* Nav: menos padding, ocultar links */
  nav {
    padding: 14px 24px;
  }
  .nav-links {
    display: none;
  }

  /* Secciones: menos padding lateral */
  section {
    padding: 80px 24px;
  }
  hr.divider {
    margin: 0 24px;
  }
  #hero {
    padding: 0 24px 64px;
    padding-top: 20vh;
  }

  /* Ocultar elementos del hero que no caben en móvil */
  .hero-stats {
    display: none;
  }
  .hero-rec {
    right: 24px;
  }

  /* Layouts de dos columnas pasan a una columna */
  .about-layout,
  .diff-layout,
  .faq-layout,
  .equipo-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Grids de 3 columnas pasan a 1 columna */
  .enfoque-grid,
  .paquetes-grid,
  .proceso-steps {
    grid-template-columns: 1fr;
  }

  /* Servicios de 2 columnas pasa a 1 columna */
  .servicios-grid {
    grid-template-columns: 1fr;
  }

  /* Valores: 1 columna en móvil — más grandes y legibles */
  .values-strip {
    flex-direction: column;
  }
  .value-item {
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .value-item:last-child {
    border-bottom: none;
  }

  /* Headers de sección en columna */
  .proyectos-header,
  .paquetes-intro,
  .servicios-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Acciones de contacto en columna */
  .contacto-actions {
    flex-direction: column;
    align-items: center;
  }

  /* Footer en columna */
  footer {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Restaurar cursor nativo en móvil */
  body {
    cursor: auto;
  }
  .cursor,
  .cursor-ring {
    display: none;
  }
}