/* ================================================================
   NEXUS CORP — styles.css
   Evaluación Universitaria: Consolidado 1 — Desarrollo Web
   Cada regla está comentada con el número de indicador que cumple.
================================================================ */


/* ================================================================
   Indicador 14: Variables CSS
   Se definen en :root para uso global mediante var().
   Mejoran consistencia y facilitan el mantenimiento del código.
================================================================ */
:root {
  /* -- COLORES PRIMARIOS (hex — Indicador 10) -- */
  --color-primario:       #0a84ff;   /* Azul tecnológico corporativo */
  --color-primario-dark:  #0060c8;   /* Variante oscura para hover */
  --color-acento:         #00e5ff;   /* Cian eléctrico para detalles */
  --color-secundario:     #1e2a3a;   /* Azul marino corporativo */
  --color-exito:          #00c896;   /* Verde para estados positivos */

  /* -- FONDOS -- */
  --fondo-oscuro:   #080e1a;                  /* hex — Indicador 10 */
  --fondo-medio:    #0d1626;                  /* hex — Indicador 10 */
  --fondo-tarjeta:  #111d30;                  /* hex — Indicador 10 */
  --fondo-header:   rgba(8, 14, 26, 0.96);   /* rgba — Indicador 10 */

  /* -- TEXTOS -- */
  --color-texto:       #c9d6e8;   /* hex — Indicador 10 */
  --color-texto-claro: #ffffff;   /* hex — Indicador 10 */
  --color-texto-muted: #6e8aaa;   /* hex — Indicador 10 */

  /* -- BORDES (rgba — Indicador 10) -- */
  --borde-sutil:  rgba(10, 132, 255, 0.2);
  --borde-activo: rgba(0, 229, 255, 0.5);

  /* -- TIPOGRAFÍA -- */
  --fuente-principal: 'Inter', sans-serif;
  --fuente-logo:      'Orbitron', sans-serif;

  /* Tamaños con em (Indicador 10) */
  --tamano-base: 1em;
  --tamano-sm:   0.875em;
  --tamano-lg:   1.125em;
  --tamano-xl:   1.5em;
  --tamano-2xl:  2em;
  --tamano-3xl:  3em;

  /* -- ESPACIADO (px — Indicador 10) -- */
  --espacio-xs: 4px;
  --espacio-sm: 8px;
  --espacio-md: 16px;
  --espacio-lg: 32px;
  --espacio-xl: 64px;

  /* -- BORDES REDONDEADOS -- */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;

  /* -- SOMBRAS (rgba — Indicador 10) -- */
  --sombra-tarjeta: 0 4px 24px rgba(0, 0, 0, 0.4);
  --sombra-glow:    0 0 20px rgba(10, 132, 255, 0.3);
}


/* ================================================================
   RESET Y BASE GLOBAL
================================================================ */
*, *::before, *::after {
  box-sizing: border-box;  /* Indicador 11: propiedad CSS estándar */
  margin: 0;               /* Indicador 11: margin */
  padding: 0;              /* Indicador 11: padding */
}

/* Indicador 9: Selector de elemento — html */
/* Indicador 10: font-size base en px */
html {
  scroll-behavior: smooth;
  font-size: 16px; /* px — Indicador 10: unidad de medida */
}

/* Indicador 9: Selector de elemento — body */
/* Indicador 11: propiedades font-family, background, color */
body {
  font-family: var(--fuente-principal); /* Indicador 11: var() */
  background:  var(--fondo-oscuro);     /* Indicador 11: background + var() */
  color:       var(--color-texto);      /* Indicador 11: color + var() */
  line-height: 1.7;
  overflow-x: hidden;
}


/* ================================================================
   Indicador 9: Selector de clase (.container)
   Indicador 11: calc() — función CSS para ancho dinámico
================================================================ */
.container {
  /* Indicador 11: Función calc() — descuenta márgenes laterales del ancho total */
  width: calc(100% - 48px);  /* Indicador 11: calc() + Indicador 10: px */
  max-width: 1200px;
  margin-left: auto;   /* Indicador 11: margin */
  margin-right: auto;  /* Indicador 11: margin */
  padding: 0 var(--espacio-md); /* Indicador 11: padding + var() */
}


/* ================================================================
   Indicador 12: HACK CSS — Clearfix con ::after
   -----------------------------------------------------------------
   PROBLEMA DE COMPATIBILIDAD QUE RESUELVE:
   En navegadores antiguos como Internet Explorer 8 e inferiores,
   los contenedores que solo tienen hijos con "float" colapsan a
   altura 0 (no envuelven a sus hijos flotados). Este hack inserta
   un pseudo-elemento invisible con "clear: both" que fuerza al
   padre a reconocer la altura de los elementos flotados.
   Hoy en día es innecesario con flexbox/grid, pero sigue siendo
   válido en proyectos que requieren compatibilidad con IE8.
================================================================ */
.clearfix::after {            /* Indicador 12: Hack clearfix */
  content: "";                /* Genera un nodo de texto vacío */
  display: table;             /* Activa el contexto de formato de bloque */
  clear: both;                /* Limpia floats izquierdos y derechos */
}

/* ================================================================
   Indicador 12: HACK CSS — zoom:1 para IE6/IE7 (hasLayout)
   -----------------------------------------------------------------
   PROBLEMA DE COMPATIBILIDAD QUE RESUELVE:
   Internet Explorer 6 y 7 manejaban el renderizado mediante un
   mecanismo interno llamado "hasLayout". Cuando hasLayout no se
   activaba, los elementos presentaban errores visuales: márgenes
   colapsados, floats ignorados y bordes mal calculados. La
   propiedad "zoom:1" no tiene efecto visual en navegadores
   modernos, pero en IE6/IE7 activa hasLayout corrigiendo dichos
   problemas de renderizado sin alterar el diseño.
================================================================ */
.legacy-container {
  zoom: 1; /* Indicador 12: Hack IE6/IE7 — activa hasLayout */
}


/* ================================================================
   TIPOGRAFÍA GLOBAL — h1 a h6
   Indicador 2: Jerarquía de encabezados completamente estilizada
   Indicador 10: Unidades em para tipografía escalable
================================================================ */
/* Indicador 9: Selector de grupo */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-texto-claro); /* Indicador 11: color + var() */
}

/* Indicador 10: medidas em para cada nivel */
h1 { font-size: 2.5em;  }  /* Indicador 10: em */
h2 { font-size: 2em;    }  /* Indicador 10: em */
h3 { font-size: 1.5em;  }  /* Indicador 10: em */
h4 { font-size: 1.25em; }  /* Indicador 10: em */
h5 { font-size: 1.1em;  }  /* Indicador 10: em */
h6 { font-size: 0.85em; }  /* Indicador 10: em */

/* Indicador 3 / Formateo de texto: strong, em, mark */
strong { color: var(--color-texto-claro); font-weight: 700; }
em     { color: var(--color-acento);      font-style: italic; }

/* Indicador 9: Selector de clase .mark-tech — formateo de texto con <mark> */
.mark-tech {
  background: rgba(10, 132, 255, 0.25); /* Indicador 10: rgba */
  color: var(--color-acento);
  padding: 1px 6px;           /* Indicador 11: padding en px */
  border-radius: var(--radio-sm);
  font-style: normal;
}


/* ================================================================
   HEADER Y NAVEGACIÓN
   Indicador 9: Selector de ID (#header) + selector de clase
================================================================ */
/* Indicador 9: Selector de ID */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;                              /* Indicador 10: % */
  /* Indicador 11: background con var() que contiene rgba — Indicador 10 */
  background: var(--fondo-header);
  /* Indicador 11: border */
  border-bottom: 1px solid var(--borde-sutil);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Prefijo vendor para Safari */
  z-index: 1000;
  /* Indicador 11: padding con var() */
  padding: var(--espacio-md) 0;
}

/* Indicador 9: Selector de clase */
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Indicador 9: Selector de clase .logo-brand */
.logo-brand {
  font-family: var(--fuente-logo);   /* Indicador 11: font-family */
  font-size: var(--tamano-xl);       /* Indicador 10: em vía var() */
  color: var(--color-texto-claro);   /* Indicador 11: color */
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* Indicador 9: Selector de clase .logo-accent */
.logo-accent {
  color: var(--color-acento);                    /* Indicador 11: color */
  text-shadow: 0 0 12px var(--color-acento);     /* Indicador 11: text-shadow */
}

/* Indicador 9: Selector de clase .nav-links */
.nav-links {
  display: flex;
  gap: var(--espacio-md);  /* Indicador 11: gap */
  align-items: center;
  list-style: none;
}

/* Indicador 9: Selector de clase .nav-item */
.nav-item {
  color: var(--color-texto);         /* Indicador 11: color */
  text-decoration: none;
  font-size: 0.9em;                  /* Indicador 10: em */
  font-weight: 600;
  padding: 6px 12px;                 /* Indicador 11: padding en px — Indicador 10 */
  border-radius: var(--radio-sm);    /* Indicador 11: border-radius */
  border: 1px solid transparent;    /* Indicador 11: border */
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

/* Indicador 9 y 13: Pseudo-clase :hover — interactividad en navegación */
.nav-item:hover {
  color: var(--color-acento);
  border-color: var(--borde-activo);
  background: rgba(0, 229, 255, 0.06); /* Indicador 10: rgba */
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

/* Indicador 9 y 13: Pseudo-clase :focus — accesibilidad de teclado */
.nav-item:focus {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
}

/* Indicador 9: Selector de clase .nav-cta — botón CTA de navegación */
.nav-cta {
  background: var(--color-primario);          /* Indicador 11: background */
  color: var(--color-texto-claro) !important; /* Indicador 11: color */
  border-color: var(--color-primario) !important;
}

/* Indicador 9 y 13: :hover en .nav-cta */
.nav-cta:hover {
  background: var(--color-primario-dark);
  box-shadow: var(--sombra-glow);
}


/* ================================================================
   SECCIÓN HERO
   Indicador 9: Selector de ID #inicio + combinadores
================================================================ */
/* Indicador 9: Selector de ID */
#inicio {
  min-height: 100vh;         /* Indicador 10: vh */
  display: flex;
  align-items: center;
  position: relative;
  /* Indicador 11: background con gradiente + var() */
  background: linear-gradient(
    135deg,
    var(--fondo-oscuro) 0%,    /* Indicador 10: % */
    var(--fondo-medio)  60%,   /* Indicador 10: % */
    #0a1a35 100%               /* hex — Indicador 10 */
  );
  padding-top: 100px;              /* Indicador 11: padding en px */
  padding-bottom: var(--espacio-xl);
  overflow: hidden;
}

/* Decoración de fondo con gradiente radial */
#inicio::before {
  content: "";
  position: absolute;
  top: -50%;                   /* Indicador 10: % */
  right: -20%;                 /* Indicador 10: % */
  /* Indicador 10: rgb() en gradiente */
  background: radial-gradient(
    ellipse,
    rgba(10, 132, 255, 0.15) 0%,
    transparent 70%
  );
  width: 80%;   /* Indicador 10: % */
  height: 80%;  /* Indicador 10: % */
  pointer-events: none;
}

/* Indicador 9: Selector de clase .hero-section */
.hero-section {
  display: flex;
  align-items: center;
  gap: var(--espacio-xl);
}

/* Indicador 9: Selector de clase .hero-content */
.hero-content {
  flex: 1;
  z-index: 1;
  animation: fadeInUp 0.8s ease both; /* Indicador 15: animación coherente */
}

/* Indicador 9: Combinador descendente — .hero-content .hero-tagline */
.hero-content .hero-tagline {
  font-family: var(--fuente-logo);
  font-size: 3.5em;                   /* Indicador 10: em */
  /* Indicador 11: background + color (clip-text) */
  background: linear-gradient(90deg, var(--color-primario), var(--color-acento));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: var(--espacio-md);  /* Indicador 11: margin */
  letter-spacing: 2px;
}

/* Indicador 9: Combinador descendente — .hero-content p */
.hero-content p {
  font-size: var(--tamano-lg);       /* Indicador 10: em */
  color: var(--color-texto);         /* Indicador 11: color */
  margin-bottom: var(--espacio-lg);  /* Indicador 11: margin */
  max-width: 560px;                  /* Indicador 10: px */
}

/* Indicador 9: Selector de clase .hero-sub */
.hero-sub {
  font-size: var(--tamano-sm) !important;
  color: var(--color-texto-muted) !important;
  margin-bottom: var(--espacio-lg) !important;
}

/* Indicador 9: Selector de clase .hero-image-wrapper */
.hero-image-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  animation: fadeInUp 0.8s ease 0.2s both;
}

/* Indicador 9: Selector de clase .hero-img */
/* Indicador 6 y 8: Estilización de la imagen con src y alt */
.hero-img {
  /* Indicador 11: Función calc() — ancho dinámico restando margen */
  width: calc(100% - 20px);          /* Indicador 11: calc() */
  max-width: 480px;                  /* Indicador 10: px */
  height: auto;
  border-radius: var(--radio-lg);
  /* Indicador 11: border */
  border: 1px solid var(--borde-activo);
  box-shadow: var(--sombra-tarjeta), var(--sombra-glow);
  object-fit: cover;
}


/* ================================================================
   BOTONES
   Indicador 9 y 13: Pseudo-clases :hover y :focus
================================================================ */
/* Indicador 9: Selector de clase .btn-primary */
.btn-primary {
  display: inline-block;
  /* Indicador 11: background, color, padding, border */
  background: var(--color-primario);
  color: var(--color-texto-claro);
  padding: 14px 32px;                /* Indicador 10: px */
  border-radius: var(--radio-md);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--tamano-base);
  letter-spacing: 0.5px;
  border: 2px solid var(--color-primario);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Indicador 9 y 13: Pseudo-clase :hover */
.btn-primary:hover {
  background: transparent;
  color: var(--color-acento);
  border-color: var(--color-acento);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.35); /* Indicador 10: rgba */
  transform: translateY(-2px);
}

/* Indicador 9 y 13: Pseudo-clase :focus */
.btn-primary:focus {
  outline: 3px solid var(--color-acento);
  outline-offset: 4px;              /* Indicador 10: px */
}


/* ================================================================
   SECCIÓN SERVICIOS
   Indicador 9: Selectores de ID y clase + combinadores
================================================================ */
/* Indicador 9: Selector de ID */
#servicios {
  padding: var(--espacio-xl) 0;    /* Indicador 11: padding */
  background: var(--fondo-medio);  /* Indicador 11: background */
  position: relative;
}

/* Línea decorativa superior */
#servicios::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primario), transparent);
}

/* Indicador 9: Selector de clase .section-title */
.section-title {
  font-family: var(--fuente-logo);
  font-size: var(--tamano-2xl);     /* Indicador 10: em vía var() */
  color: var(--color-texto-claro);  /* Indicador 11: color */
  text-align: center;
  margin-bottom: var(--espacio-md); /* Indicador 11: margin */
  letter-spacing: 2px;
}

.alineado-izq { text-align: left; }

/* Indicador 9: Selector de clase .section-intro */
.section-intro {
  text-align: center;
  color: var(--color-texto-muted);   /* Indicador 11: color */
  font-size: var(--tamano-lg);       /* Indicador 10: em */
  max-width: 680px;                  /* Indicador 10: px */
  margin: 0 auto var(--espacio-xl);  /* Indicador 11: margin */
}

/* ----------------------------------------------------------------
   Indicador 4: Lista desordenada <ul> — grid de tarjetas de servicio
   Indicador 9: Selector de clase .lista-servicios
---------------------------------------------------------------- */
.lista-servicios {
  list-style: none;             /* Indicador 11: list-style */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-lg);       /* Indicador 11: gap */
}

/* Indicador 9: Selector de clase .tarjeta-servicio */
.tarjeta-servicio {
  /* Indicador 11: background, border, padding, margin */
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-md);
  padding: var(--espacio-lg);         /* Indicador 11: padding con px vía var() */
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

/* Barra superior decorativa */
.tarjeta-servicio::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;                         /* Indicador 10: px */
  background: linear-gradient(90deg, var(--color-primario), var(--color-acento));
  transform: scaleX(0);
  transition: transform 0.35s ease;
}

/* Indicador 9 y 13: Pseudo-clase :hover en .tarjeta-servicio */
.tarjeta-servicio:hover {
  border-color: var(--borde-activo);
  transform: translateY(-6px);
  box-shadow: var(--sombra-tarjeta), var(--sombra-glow);
}

.tarjeta-servicio:hover::before {
  transform: scaleX(1);
}

/* Indicador 9: Combinador descendente — .tarjeta-servicio h3 */
.tarjeta-servicio h3 {
  color: var(--color-texto-claro);     /* Indicador 11: color */
  font-size: var(--tamano-lg);         /* Indicador 10: em */
  margin-bottom: var(--espacio-sm);    /* Indicador 11: margin */
  font-weight: 700;
}

/* Indicador 9: Combinador descendente — .tarjeta-servicio p */
.tarjeta-servicio p {
  color: var(--color-texto);           /* Indicador 11: color */
  font-size: 0.95em;                   /* Indicador 10: em */
  line-height: 1.6;
  margin-bottom: var(--espacio-sm);    /* Indicador 11: margin */
}

/* Indicador 9: Selector de clase .tag-servicio */
.tag-servicio {
  color: var(--color-acento);  /* Indicador 11: color */
  font-size: 0.75em;           /* Indicador 10: em */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------
   Indicador 9 y 13: :nth-child — color alterno en lista de servicios
   Diferencia visualmente los ítems pares e impares de la <ul>
---------------------------------------------------------------- */
/* Indicador 13: Selector avanzado :nth-child(even) */
.lista-servicios .tarjeta-servicio:nth-child(even) {
  background: #0f1e35;                    /* hex — Indicador 10 */
  border-color: rgba(0, 229, 255, 0.12); /* rgba — Indicador 10 */
}

/* Indicador 13: Selector avanzado :nth-child(odd) */
.lista-servicios .tarjeta-servicio:nth-child(odd) {
  background: var(--fondo-tarjeta);  /* var() — Indicador 11 */
}


/* ================================================================
   SECCIÓN NOSOTROS
   Indicador 9: Selector de ID #nosotros
================================================================ */
#nosotros {
  padding: var(--espacio-xl) 0;   /* Indicador 11: padding */
  background: var(--fondo-oscuro); /* Indicador 11: background */
}

.nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Indicador 10: % implícito en fr */
  gap: var(--espacio-xl);
  align-items: center;
}

/* Indicador 6: Estilización de imagen <img class="img-nosotros"> */
/* Indicador 11: calc() en width de imagen */
.img-nosotros {
  width: calc(100% - 16px);        /* Indicador 11: calc() — descuenta borde */
  height: 380px;                   /* Indicador 10: px */
  object-fit: cover;
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde-sutil);  /* Indicador 11: border */
  box-shadow: var(--sombra-tarjeta);
}

/* Indicador 9: Combinador descendente — .nosotros-texto p */
.nosotros-texto p {
  color: var(--color-texto);       /* Indicador 11: color */
  margin-bottom: var(--espacio-md); /* Indicador 11: margin */
  font-size: var(--tamano-base);   /* Indicador 10: em */
  line-height: 1.8;
}

/* Indicador 9: Selector de clase .subtitulo-mision */
.subtitulo-mision {
  color: var(--color-acento);      /* Indicador 11: color */
  font-size: var(--tamano-lg);
  margin-bottom: var(--espacio-md);
  font-weight: 600;
}

/* Indicador 9: Selector de clase .subtitulo-valores */
/* Indicador 2: Estilización de <h5> — quinto nivel jerárquico */
.subtitulo-valores {
  color: var(--color-primario);    /* Indicador 11: color */
  font-size: 1.1em;                /* Indicador 10: em */
  font-weight: 700;
  margin-bottom: var(--espacio-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Indicador 9: Selector de clase .texto-destacado */
.texto-destacado {
  color: var(--color-texto-claro); /* Indicador 11: color */
  font-weight: 600;
  font-size: var(--tamano-lg);     /* Indicador 10: em */
}


/* ================================================================
   SECCIÓN PROCESO DE CONTRATACIÓN
   Indicador 4: Lista ordenada <ol>
   Indicador 9: Selector de ID #proceso
================================================================ */
#proceso {
  padding: var(--espacio-xl) 0;  /* Indicador 11: padding */
  background: var(--fondo-medio); /* Indicador 11: background */
}

/* Indicador 4: <ol> estilizada — se conserva numeración nativa del navegador */
/* Indicador 9: Selector de clase .lista-proceso */
.lista-proceso {
  /* list-style se conserva para mostrar la numeración nativa del <ol> */
  list-style: decimal;           /* Indicador 11: list-style */
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
  max-width: 800px;              /* Indicador 10: px */
  margin: 0 auto;
}

/* Indicador 9: Selector de clase .paso-proceso */
.paso-proceso {
  /* Indicador 11: background, border, padding */
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-md);
  /* Indicador 11: padding con px */
  padding: 20px 24px;            /* Indicador 10: px */
  list-style: none;              /* Oculta el marcador nativo — usamos ::marker */
  position: relative;
  transition: all 0.3s ease;
}

/* Estilización del marcador nativo de la lista (<ol>) */
.paso-proceso::marker {
  color: var(--color-primario);  /* Indicador 11: color en ::marker */
  font-weight: 900;
  font-size: 1.1em;
}

/* Numeración circular personalizada */
.lista-proceso {
  counter-reset: pasos;
}

.paso-proceso {
  counter-increment: pasos;
  padding-left: 72px;            /* Indicador 10: px — espacio para el número */
}

.paso-proceso::before {
  content: counter(pasos);
  position: absolute;
  left: 20px;                   /* Indicador 10: px */
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-primario); /* Indicador 11: background */
  color: var(--color-texto-claro);   /* Indicador 11: color */
  width: 40px;                  /* Indicador 10: px */
  height: 40px;                 /* Indicador 10: px */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1em;
}

/* Indicador 9 y 13: Pseudo-clase :hover en .paso-proceso */
.paso-proceso:hover {
  border-color: var(--borde-activo);
  background: #0f1e35;           /* hex — Indicador 10 */
  transform: translateX(8px);
}

/* Indicador 9: Combinador descendente — .paso-proceso h4 */
.paso-proceso h4 {
  color: var(--color-texto-claro); /* Indicador 11: color */
  font-size: var(--tamano-lg);
  margin-bottom: 6px;              /* Indicador 10: px */
  font-weight: 700;
}

/* Indicador 9: Combinador descendente — .paso-proceso p */
.paso-proceso p {
  color: var(--color-texto);       /* Indicador 11: color */
  font-size: 0.95em;               /* Indicador 10: em */
  line-height: 1.6;
}

/* Indicador 9 y 13: :nth-child — borde de color alterno en pasos del proceso */
/* Indicador 13: Selector avanzado :nth-child(odd) */
.lista-proceso .paso-proceso:nth-child(odd) {
  border-left: 3px solid var(--color-primario); /* Indicador 11: border */
}

/* Indicador 13: Selector avanzado :nth-child(even) */
.lista-proceso .paso-proceso:nth-child(even) {
  border-left: 3px solid var(--color-acento);   /* Indicador 11: border */
}


/* ================================================================
   SECCIÓN CONTACTO
   Indicador 9: Selector de ID #contacto + combinadores
================================================================ */
#contacto {
  padding: var(--espacio-xl) 0;   /* Indicador 11: padding */
  background: var(--fondo-oscuro); /* Indicador 11: background */
}

.contacto-inner {
  max-width: 960px;               /* Indicador 10: px */
}

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-xl);
  margin-top: var(--espacio-lg);  /* Indicador 11: margin */
}

/* Indicador 9: Combinador descendente — .contacto-info h3 */
.contacto-info h3 {
  color: var(--color-texto-claro); /* Indicador 11: color */
  font-size: var(--tamano-xl);
  margin-bottom: var(--espacio-md);
  font-family: var(--fuente-logo);
  letter-spacing: 1px;
}

/* Indicador 9: Combinador descendente — .contacto-info p */
.contacto-info p {
  color: var(--color-texto);       /* Indicador 11: color */
  margin-bottom: var(--espacio-sm); /* Indicador 11: margin */
  font-size: var(--tamano-base);
}

/* Indicador 9: Selector de clase .enlace-social */
/* Indicador 5 y 8: Enlace externo con href estilizado */
.enlace-social {
  color: var(--color-acento);      /* Indicador 11: color */
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent; /* Indicador 11: border */
  transition: border-color 0.2s;
}

/* Indicador 9 y 13: Pseudo-clase :hover en .enlace-social */
.enlace-social:hover {
  border-bottom-color: var(--color-acento);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); /* Indicador 10: rgba */
}

/* Indicador 9 y 13: Pseudo-clase :focus en .enlace-social */
.enlace-social:focus {
  outline: 2px dashed var(--color-acento);
  outline-offset: 2px;              /* Indicador 10: px */
}

/* Indicador 9: Combinador descendente — .contacto-form-wrapper h3 */
.contacto-form-wrapper h3 {
  color: var(--color-texto-claro);
  font-size: var(--tamano-xl);
  margin-bottom: var(--espacio-md);
  font-family: var(--fuente-logo);
  letter-spacing: 1px;
}

/* Indicador 9: Selector de clase .form-contacto */
.form-contacto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
}

/* Indicador 9: Combinador descendente — .form-contacto label */
.form-contacto label {
  color: var(--color-texto-muted); /* Indicador 11: color */
  font-size: 0.85em;               /* Indicador 10: em */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Indicador 9: Selector de grupo con combinador — .form-contacto input, textarea */
.form-contacto input,
.form-contacto textarea {
  /* Indicador 11: background, border, padding, color */
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-sm);
  padding: 12px 16px;              /* Indicador 10: px */
  color: var(--color-texto-claro);
  font-family: var(--fuente-principal);
  font-size: var(--tamano-base);
  transition: border-color 0.3s;
  /* Indicador 11: calc() — ancho completo menos el borde visual */
  width: calc(100% - 2px);        /* Indicador 11: calc() */
}

/* Indicador 9 y 13: Pseudo-clase :focus en inputs del formulario */
.form-contacto input:focus,
.form-contacto textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  /* Indicador 10: rgba en sombra de enfoque */
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
}

.form-contacto textarea {
  resize: vertical;
  min-height: 100px;               /* Indicador 10: px */
}

.btn-submit {
  margin-top: var(--espacio-sm);   /* Indicador 11: margin */
  align-self: flex-start;
}


/* ================================================================
   FOOTER
   Indicador 9: Selectores de clase + pseudo-clases
================================================================ */
/* Indicador 9: Selector de clase .site-footer */
.site-footer {
  /* Indicador 11: background, border, padding */
  background: #040a12;                       /* hex — Indicador 10 */
  border-top: 1px solid var(--borde-sutil); /* Indicador 11: border */
  padding: var(--espacio-lg) 0;             /* Indicador 11: padding */
  text-align: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-sm);
}

/* Indicador 9: Selector de clase .footer-brand */
.footer-brand {
  font-family: var(--fuente-logo);
  font-size: var(--tamano-lg);       /* Indicador 10: em */
  color: var(--color-texto-claro);   /* Indicador 11: color */
  letter-spacing: 3px;
}

/* Indicador 9: Selector de clase .footer-legal */
.footer-legal {
  color: var(--color-texto-muted);   /* Indicador 11: color */
  font-size: 0.85em;                 /* Indicador 10: em */
}

/* Indicador 9: Selector de clase .footer-top-link */
.footer-top-link {
  color: var(--color-primario);      /* Indicador 11: color */
  text-decoration: none;
  font-size: 0.9em;                  /* Indicador 10: em */
  font-weight: 600;
  padding: 6px 16px;                 /* Indicador 10: px / Indicador 11: padding */
  border: 1px solid var(--color-primario); /* Indicador 11: border */
  border-radius: var(--radio-sm);
  transition: all 0.3s;
}

/* Indicador 9 y 13: Pseudo-clase :hover en .footer-top-link */
.footer-top-link:hover {
  background: var(--color-primario); /* Indicador 11: background */
  color: var(--color-texto-claro);
  box-shadow: var(--sombra-glow);
}

/* Indicador 9 y 13: Pseudo-clase :focus en .footer-top-link */
.footer-top-link:focus {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;               /* Indicador 10: px */
}


/* ================================================================
   Indicador 15: DISEÑO COHERENTE — Animaciones de entrada
================================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;                        /* Indicador 10: valor sin unidad */
    transform: translateY(30px);       /* Indicador 10: px */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Indicador 15: DISEÑO COHERENTE — Scrollbar personalizada */
::-webkit-scrollbar {
  width: 6px;                          /* Indicador 10: px */
}
::-webkit-scrollbar-track {
  background: var(--fondo-oscuro);
}
::-webkit-scrollbar-thumb {
  background: var(--color-primario);
  border-radius: 3px;
}
/* Indicador 9 y 13: Pseudo-clase :hover en scrollbar */
::-webkit-scrollbar-thumb:hover {
  background: var(--color-acento);
}


/* ================================================================
   Indicador 15: DISEÑO COHERENTE — Media Queries Responsivas
   Asegura maquetado limpio y simétrico en todos los dispositivos
================================================================ */
@media (max-width: 992px) {
  .lista-servicios {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
  }
  .nosotros-grid {
    grid-template-columns: 1fr;
  }
  .contacto-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-section {
    flex-direction: column;
    text-align: center;
  }
  .hero-content p {
    max-width: 100%;                   /* Indicador 10: % */
  }
  .hero-content .hero-tagline {
    font-size: 2.2em;                  /* Indicador 10: em */
  }
  .lista-servicios {
    grid-template-columns: 1fr;
  }
  .nav-links {
    gap: 6px;                          /* Indicador 10: px */
    flex-wrap: wrap;
    justify-content: center;
  }
  /* Indicador 11: calc() en móviles — contenedor más ajustado */
  .container {
    width: calc(100% - 24px);         /* Indicador 11: calc() */
    padding: 0 12px;                  /* Indicador 10: px */
  }
}