/* ====================================================================
   DANEMAR PARCEROS — COMPLETE STYLESHEET
   Opción 3: Fondo Gris — Industrial Cyberpunk
   ====================================================================
   Sitio: https://danemarparceros.pt
   Fuente: Exo 2 (Google Fonts)
   Colores del logo: #f8bf00 (amarillo), #f88000 (naranja), #e80808 (rojo)
   Fondo: Gris oscuro (#1a1a1a, #2a2a2a)
   Estilo: Cyberpunk industrial, tech profesional
   
   Tabla de contenidos:
   1. Google Fonts Import
   2. CSS Reset
   3. Variables CSS (:root)
   4. Estilos Base (html, body, tipografía)
   5. Contenedor / Layout
   6. Header y Navegación
   7. Selector de Idiomas
   8. Menú Móvil (Hamburguesa)
   9. Botones (Cyberpunk Industrial)
   10. Hero Section
   11. Servicios Section
   12. Proceso / Timeline Section
   13. Clientes Section
   14. Contacto Section (formulario)
   15. Footer
   16. Cookie Banner
   17. Cookie Modal
   18. Páginas Legales (privacy, cookies, terms)
   19. Tablas (cookies.html)
   20. Internacionalización (i18n)
   21. Animaciones y Keyframes
   22. Accesibilidad
   23. Responsive: Tablet (≥768px)
   24. Responsive: Desktop (≥1024px)
   25. Responsive: Móvil (≤1023px)
   26. Prefers Reduced Motion
   ==================================================================== */


/* ====================================================================
   1. GOOGLE FONTS IMPORT
   ==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');


/* ====================================================================
   2. CSS RESET
   ==================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

ul, ol {
  list-style: none;
}

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

button {
  font-family: inherit;
}

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


/* ====================================================================
   3. VARIABLES CSS (:root)
   ==================================================================== */
:root {
  /* ── Fondos ── */
  --bg-primary: #1a1a1a;
  --bg-secondary: #222222;
  --bg-card: #2a2a2a;
  --bg-card-hover: #333333;
  --bg-header: rgba(26, 26, 26, 0.96);
  --bg-footer: #111111;
  --bg-input: #2a2a2a;

  /* ── Colores del logo (acento) ── */
  --accent-yellow: #f8bf00;
  --accent-orange: #f88000;
  --accent-red: #e80808;

  /* ── Gradientes principales ── */
  --gradient-brand: linear-gradient(135deg, #f8bf00 0%, #f88000 50%, #e80808 100%);
  --gradient-brand-horizontal: linear-gradient(90deg, #f8bf00 0%, #f88000 50%, #e80808 100%);
  --gradient-brand-vertical: linear-gradient(180deg, #f8bf00 0%, #f88000 50%, #e80808 100%);

  /* ── Texto ── */
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #808080;
  --text-on-accent: #1a1a1a;

  /* ── Bordes ── */
  --border-default: #3a3a3a;
  --border-hover: #f8bf00;
  --border-subtle: rgba(255, 255, 255, 0.08);

  /* ── Sombras y Glows ── */
  --glow-yellow: 0 0 20px rgba(248, 191, 0, 0.3);
  --glow-orange: 0 0 20px rgba(248, 128, 0, 0.3);
  --glow-red: 0 0 20px rgba(232, 8, 8, 0.2);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 32px rgba(248, 191, 0, 0.15), 0 0 48px rgba(248, 128, 0, 0.08);

  /* ── Tipografía ── */
  --font-primary: 'Exo 2', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */
  --font-size-5xl: 3rem;      /* 48px */

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

  /* ── Layout ── */
  --container-width: 1200px;
  --border-radius: 0.5rem;
  --border-radius-lg: 1rem;

  /* ── Transiciones ── */
  --transition: all 0.3s ease;
  --transition-slow: all 0.35s ease;
}


/* ====================================================================
   4. ESTILOS BASE (html, body, tipografía)
   ==================================================================== */
body {
  font-family: var(--font-primary);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Tipografía global ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

h1 {
  font-size: var(--font-size-3xl);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--font-size-2xl);
  color: var(--accent-orange);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

h5 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

h6 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

a {
  color: var(--accent-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-orange);
}

a:focus {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 2px;
}

strong, b {
  font-weight: 700;
  color: var(--text-primary);
}

small {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}


/* ====================================================================
   5. CONTENEDOR / LAYOUT
   ==================================================================== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}


/* ====================================================================
   6. HEADER Y NAVEGACIÓN
   ==================================================================== */
.header {
  position: sticky;
  top: 0;
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
  padding: 16px 0;
  z-index: 100;
}

/* Línea de circuito decorativa inferior del header con gradiente de marca */
.header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand-horizontal);
  opacity: 0.6;
}

.nav-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.nav-brand {
  flex-shrink: 0;
  text-decoration: none;
}

.nav-brand a {
  text-decoration: none;
}

.brand-logo {
  height: 40px;
  width: auto;
}

.brand-text {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* Texto con gradiente de marca */
.brand-highlight {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Menú de navegación principal */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 32px;
}

.nav-menu a {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
  transition: color 0.3s ease;
  padding: 4px 0;
}

/* Underline animado en hover */
.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-brand-horizontal);
  transition: width 0.3s ease;
}

.nav-menu a:hover {
  color: var(--accent-yellow);
}

.nav-menu a:hover::after {
  width: 100%;
}

.nav-menu a:focus {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 4px;
}

/* Estado activo del nav */
.nav-active {
  color: var(--accent-yellow) !important;
}


/* ====================================================================
   7. SELECTOR DE IDIOMAS (ES/EN/PT)
   ==================================================================== */
.language-selector {
  display: flex;
  gap: 4px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 4px;
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.lang-btn:hover {
  color: var(--accent-yellow);
  background: rgba(248, 191, 0, 0.1);
}

.lang-btn:focus {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 2px;
}

.lang-btn.active {
  background: var(--accent-yellow);
  color: var(--text-on-accent);
}


/* ====================================================================
   8. MENÚ MÓVIL (HAMBURGUESA)
   ==================================================================== */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: all 0.3s ease;
  border-radius: 1px;
}

/* Animación del hamburguesa a X cuando está activo */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* ====================================================================
   9. BOTONES — Cyberpunk Industrial
   Esquinas asimétricas, gradientes en bordes, efecto circuitos
   ==================================================================== */

/* ── Base de botón ── */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border: none;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-base);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: visible;
  transition: all 0.35s ease;
  line-height: 1.2;
  /* Esquinas asimétricas cyberpunk */
  border-radius: 2px 12px 2px 12px;
}

.btn:focus {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 3px;
}

/* ── Botón Primario (CTA) ── */
.btn-primary {
  background: var(--accent-red);
  color: var(--text-primary);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Borde con gradiente usando pseudo-elemento */
.btn-primary::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--gradient-brand);
  border-radius: 3px 14px 3px 14px;
  z-index: -1;
}

/* Línea de circuito decorativa que sale del botón al hover */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-yellow), transparent);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.35s ease, right 0.35s ease;
}

.btn-primary:hover {
  background: var(--accent-yellow);
  color: var(--text-on-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(248, 191, 0, 0.35);
}

.btn-primary:hover::after {
  opacity: 1;
  right: -30px;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(248, 191, 0, 0.25);
  background: var(--accent-orange);
}

/* ── Botón Secundario ── */
.btn-secondary {
  background: transparent;
  color: var(--accent-yellow);
  border: 2px solid var(--accent-yellow);
  border-radius: 2px 12px 2px 12px;
}

.btn-secondary:hover {
  background: var(--accent-yellow);
  color: var(--text-on-accent);
  box-shadow: 0 4px 16px rgba(248, 191, 0, 0.25);
}

.btn-secondary:active {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
}

/* ── Botón Terciario ── */
.btn-tertiary {
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 20px;
  border: 1px solid var(--border-default);
  border-radius: 2px 12px 2px 12px;
}

.btn-tertiary:hover {
  color: var(--accent-yellow);
  border-color: var(--accent-yellow);
}

/* ── Botón Hero ── */
.btn-hero {
  display: inline-block;
  padding: 16px 40px;
  background: var(--accent-red);
  color: var(--text-primary);
  border: 2px solid transparent;
  background-clip: padding-box;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-lg);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: visible;
  transition: all 0.35s ease;
  border-radius: 2px 12px 2px 12px;
}

.btn-hero::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--gradient-brand);
  border-radius: 3px 14px 3px 14px;
  z-index: -1;
}

.btn-hero:hover {
  background: var(--accent-yellow);
  color: var(--text-on-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(248, 191, 0, 0.4);
}

.btn-hero:focus {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 4px;
}

.btn-hero:active {
  transform: translateY(0);
  background: var(--accent-orange);
}

/* ── Botón Grande ── */
.btn-large {
  padding: 16px 40px;
  font-size: var(--font-size-lg);
}


/* ====================================================================
   10. HERO SECTION
   ==================================================================== */
.hero {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  background: var(--bg-primary);
}

/* Grid de circuitos de fondo — perspectiva cyberpunk */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(248, 191, 0, 0.03) 49.5%, rgba(248, 191, 0, 0.03) 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(248, 128, 0, 0.03) 49.5%, rgba(248, 128, 0, 0.03) 50.5%, transparent 50.5%);
  background-size: 80px 80px;
  pointer-events: none;
}

/* Línea decorativa inferior del hero */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--gradient-brand-horizontal);
  opacity: 0.4;
}

.hero .container {
  display: grid;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content {
  z-index: 1;
}

.hero-badge {
  display: inline-block;
  background: rgba(248, 191, 0, 0.08);
  border: 1px solid rgba(248, 191, 0, 0.4);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 24px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--accent-yellow);
  letter-spacing: 0.04em;
}

.hero-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  font-weight: 300;
  color: var(--text-secondary);
  margin-bottom: 48px;
  max-width: 600px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.hero-features {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: 500;
}

.feature-icon {
  color: var(--accent-yellow);
  font-weight: 700;
  font-size: var(--font-size-base);
}

/* ── Formas abstractas decorativas ── */
.hero-visual {
  position: relative;
  height: 400px;
}

.abstract-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(248, 191, 0, 0.2), transparent);
  top: 0;
  right: 0;
  animation-delay: 0s;
}

.shape-2 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(248, 128, 0, 0.2), transparent);
  top: 50%;
  right: 20%;
  animation-delay: 2s;
}

.shape-3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(232, 8, 8, 0.15), transparent);
  bottom: 0;
  right: 40%;
  animation-delay: 4s;
}


/* ====================================================================
   11. SERVICIOS SECTION
   ==================================================================== */
.services {
  padding: 96px 0;
  background: var(--bg-primary);
  position: relative;
}

/* Línea decorativa superior — circuito */
.services::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-yellow), transparent);
  opacity: 0.3;
}

/* ── Section Header (compartido entre secciones) ── */
.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-header h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--accent-orange);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.section-header p {
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── Grid de servicios ── */
.services-grid {
  display: grid;
  gap: 24px;
}

/* ── Tarjeta de servicio ── */
.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-top: 3px solid var(--accent-orange);
  border-radius: 12px 12px 4px 4px;
  padding: 32px;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

/* Esquina de circuito decorativa */
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-right: 1px solid rgba(248, 191, 0, 0.15);
  border-top: 1px solid rgba(248, 191, 0, 0.15);
  border-radius: 0 12px 0 0;
  pointer-events: none;
}

/* Punto/nodo de circuito */
.service-card::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 4px;
  height: 4px;
  background: var(--accent-yellow);
  border-radius: 50%;
  opacity: 0.4;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-6px);
  border-top-color: var(--accent-yellow);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-card-hover);
}

.service-card:hover::after {
  opacity: 1;
}

.service-icon {
  font-size: 2.5rem;
  margin-bottom: 20px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.15);
}

.service-card h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
  line-height: 1.3;
}

.service-card p {
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0;
}


/* ====================================================================
   12. PROCESO / TIMELINE SECTION
   ==================================================================== */
.process {
  padding: 96px 0;
  background: var(--bg-secondary);
  position: relative;
}

/* Líneas de circuito horizontales en background */
.process::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(0deg, transparent 49.5%, rgba(248, 128, 0, 0.02) 49.5%, rgba(248, 128, 0, 0.02) 50.5%, transparent 50.5%);
  background-size: 100% 60px;
  pointer-events: none;
}

.process .section-header {
  position: relative;
  z-index: 1;
}

.process .section-header h2 {
  color: var(--accent-orange);
}

.process .section-header p {
  color: var(--text-secondary);
}

/* ── Timeline ── */
.timeline {
  position: relative;
  padding-left: 48px;
  z-index: 1;
}

/* Línea vertical con gradiente de marca */
.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gradient-brand-vertical);
}

.timeline-item {
  position: relative;
  margin-bottom: 48px;
  padding-left: 32px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

/* Marcador circular con número */
.timeline-marker {
  position: absolute;
  left: -1px;
  top: 0;
  width: 32px;
  height: 32px;
  background: var(--accent-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-accent);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  box-shadow: 0 0 12px rgba(248, 128, 0, 0.4);
  transition: all 0.3s ease;
  animation: circuit-pulse 3s ease-in-out infinite;
}

.timeline-item:hover .timeline-marker {
  background: var(--accent-yellow);
  box-shadow: 0 0 20px rgba(248, 191, 0, 0.5);
  transform: scale(1.1);
}

.timeline-content h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--accent-yellow);
  line-height: 1.3;
}

.timeline-content p {
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.7;
}


/* ====================================================================
   13. CLIENTES SECTION
   ==================================================================== */
.clients {
  padding: 96px 0;
  background: var(--bg-primary);
  position: relative;
}

.clients .section-header h2 {
  color: var(--accent-orange);
}

.clients-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.client-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 24px 32px;
  min-width: 280px;
  transition: all 0.35s ease;
  position: relative;
}

/* Línea decorativa izquierda con gradiente */
.client-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--gradient-brand-vertical);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.client-item:hover {
  border-color: var(--accent-yellow);
  transform: translateX(6px);
  box-shadow: 0 4px 20px rgba(248, 191, 0, 0.12);
}

.client-item:hover::before {
  opacity: 1;
}

.client-logo {
  width: 56px;
  height: 56px;
  background: var(--accent-orange);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--font-size-xl);
  color: var(--text-on-accent);
  flex-shrink: 0;
}

.client-item span {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}


/* ====================================================================
   14. CONTACTO SECTION (formulario)
   ==================================================================== */
.contact {
  padding: 96px 0;
  background: var(--bg-secondary);
  position: relative;
}

/* Borde superior con gradiente de circuito */
.contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand-horizontal);
  opacity: 0.5;
}

.contact .section-header h2 {
  color: var(--accent-yellow);
}

.contact .section-header p {
  color: var(--text-secondary);
}

.contact-content {
  display: grid;
  gap: 48px;
}

/* ── Info de contacto ── */
.contact-info h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: 32px;
  color: var(--accent-yellow);
}

.contact-item {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-start;
}

.contact-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.contact-item div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-item strong {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.contact-item a {
  color: var(--accent-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--font-size-base);
  transition: color 0.3s ease;
}

.contact-item a:hover {
  color: var(--accent-orange);
}

.contact-item a:focus {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 2px;
}

.contact-item span {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

/* ── Formulario de contacto ── */
.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 4px 16px 4px 16px;
  padding: 40px;
  position: relative;
}

/* Esquina de circuito decorativa */
.contact-form::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-right: 2px solid rgba(248, 191, 0, 0.15);
  border-top: 2px solid rgba(248, 191, 0, 0.15);
  border-radius: 0 16px 0 0;
  pointer-events: none;
}

/* Nodo de circuito */
.contact-form::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 6px;
  height: 6px;
  background: var(--accent-yellow);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 2px 8px 2px 8px;
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent-yellow);
  box-shadow: 0 0 0 3px rgba(248, 191, 0, 0.15), 0 0 12px rgba(248, 191, 0, 0.08);
}

/* Validación */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(232, 8, 8, 0.15);
}

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

/* Botón de envío dentro del formulario */
.contact-form .btn-primary {
  width: 100%;
  margin-top: 8px;
}


/* ====================================================================
   15. FOOTER
   ==================================================================== */
.footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--border-default);
  padding: 64px 0 24px;
  margin-top: 0;
  position: relative;
}

/* Línea de gradiente en el top del footer */
.footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand-horizontal);
  opacity: 0.4;
}

.footer-content {
  display: grid;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .brand-text {
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.footer-brand p {
  color: var(--text-muted);
  margin-top: 12px;
  font-size: var(--font-size-base);
  line-height: 1.7;
}

.footer-links h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color 0.3s ease;
  position: relative;
}

.footer-links a:hover {
  color: var(--accent-yellow);
}

.footer-links a:focus {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 2px;
}

.footer-bottom {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
}


/* ====================================================================
   16. COOKIE BANNER
   ==================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(26, 26, 26, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 2px solid var(--accent-yellow);
  padding: var(--spacing-lg);
  z-index: 1000;
  animation: slideUp 0.4s ease;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner-content {
  max-width: var(--container-width);
  margin: 0 auto;
}

.cookie-banner h3 {
  margin-bottom: var(--spacing-sm);
  color: var(--accent-yellow);
}

.cookie-banner p {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

.cookie-banner-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}


/* ====================================================================
   17. COOKIE MODAL
   ==================================================================== */
.cookie-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: var(--spacing-md);
}

.cookie-modal[hidden] {
  display: none;
}

.cookie-modal-content {
  background: var(--bg-card);
  border: 2px solid var(--accent-yellow);
  border-radius: 4px 16px 4px 16px;
  padding: var(--spacing-xl);
  max-width: 500px;
  width: 100%;
  box-shadow: 0 0 40px rgba(248, 191, 0, 0.2);
  position: relative;
}

/* Esquina de circuito en modal */
.cookie-modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-right: 1px solid rgba(248, 191, 0, 0.2);
  border-top: 1px solid rgba(248, 191, 0, 0.2);
  border-radius: 0 16px 0 0;
  pointer-events: none;
}

.cookie-modal-content h3 {
  color: var(--accent-yellow);
  margin-bottom: var(--spacing-md);
}

.cookie-options {
  margin: var(--spacing-lg) 0;
}

.cookie-option {
  margin-bottom: var(--spacing-md);
}

.cookie-option label {
  display: flex;
  gap: var(--spacing-sm);
  cursor: pointer;
  align-items: flex-start;
}

.cookie-option input[type="checkbox"] {
  margin-top: 4px;
  cursor: pointer;
  accent-color: var(--accent-yellow);
}

.cookie-option input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.cookie-option span {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.cookie-option strong {
  color: var(--text-primary);
  font-weight: 600;
}

.cookie-option small {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cookie-modal-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}


/* ====================================================================
   18. PÁGINAS LEGALES (privacy.html, cookies.html, terms.html)
   ==================================================================== */
.legal-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

.legal-content {
  flex: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px 96px;
  width: 100%;
}

.legal-content h1 {
  font-size: var(--font-size-3xl);
  color: var(--accent-yellow);
  margin-bottom: 24px;
  line-height: 1.2;
}

.legal-content h2 {
  font-size: var(--font-size-2xl);
  color: var(--accent-orange);
  margin-top: 48px;
  margin-bottom: 16px;
  text-transform: none;
}

.legal-content h3 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin-top: 32px;
  margin-bottom: 12px;
}

.legal-content h4 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-top: 24px;
  margin-bottom: 12px;
}

.legal-content p {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-content ul,
.legal-content ol {
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-left: 24px;
  list-style: disc;
}

.legal-content ol {
  list-style: decimal;
}

.legal-content li {
  margin-bottom: 8px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.legal-content a {
  color: var(--accent-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content a:hover {
  color: var(--accent-orange);
}

.legal-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Enlace de regreso ── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-yellow);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 32px;
  transition: all 0.3s ease;
  font-size: var(--font-size-base);
}

.back-link:hover {
  color: var(--accent-orange);
  transform: translateX(-4px);
}

.back-link:focus {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 4px;
}

/* ── Fecha de última actualización ── */
.last-updated {
  display: block;
  margin-bottom: 32px;
  padding: 12px 16px;
  background: rgba(248, 191, 0, 0.05);
  border-left: 3px solid var(--accent-yellow);
  border-radius: 0 4px 4px 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}


/* ====================================================================
   19. TABLAS (cookies.html)
   ==================================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
}

thead {
  background: var(--bg-secondary);
}

th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--accent-yellow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--accent-orange);
}

td {
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--border-default);
  line-height: 1.6;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: rgba(248, 191, 0, 0.03);
}

tbody tr {
  transition: background 0.2s ease;
}


/* ====================================================================
   20. INTERNACIONALIZACIÓN (i18n)
   Controla visibilidad de contenido por idioma
   ==================================================================== */


/* El idioma activo se muestra via JavaScript
   añadiendo display:block a la clase correspondiente */
.content-es.active,
.content-en.active,
.content-pt.active {
  display: block;
}


/* ====================================================================
   21. ANIMACIONES Y KEYFRAMES
   ==================================================================== */

/* Flotar — formas abstractas del hero */
@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

/* Pulso de circuito — timeline markers */
@keyframes circuit-pulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(248, 128, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(248, 191, 0, 0.6);
  }
}

/* Slide up — cookie banner */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Fade in — general purpose */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scan line — efecto cyberpunk opcional */
@keyframes scan-line {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Glow pulse — efecto de brillo suave */
@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}


/* ====================================================================
   22. ACCESIBILIDAD
   ==================================================================== */

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

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--accent-yellow);
  color: var(--text-on-accent);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-primary);
  border-radius: 0 0 8px 8px;
}

.skip-to-main:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  outline: 2px solid var(--text-on-accent);
  outline-offset: 2px;
}

/* Focus visible global — para navegación con teclado */
:focus-visible {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 2px;
}

/* Asegurar que el focus es visible en todos los interactivos */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 2px;
}


/* ====================================================================
   23. RESPONSIVE: TABLET (≥768px)
   ==================================================================== */
@media (min-width: 768px) {
  /* Tipografía */
  h1 {
    font-size: var(--font-size-4xl);
  }

  .hero-title {
    font-size: var(--font-size-4xl);
  }

  /* Hero */
  .hero .container {
    grid-template-columns: 1fr 1fr;
  }

  .hero-features {
    flex-direction: row;
    flex-wrap: wrap;
  }

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

  /* Section headers más grandes */
  .section-header h2 {
    font-size: var(--font-size-2xl);
  }

  /* Contacto */
  .contact-content {
    grid-template-columns: 1fr 1.5fr;
  }

  /* Footer */
  .footer-content {
    grid-template-columns: 2fr 1fr;
  }

  /* Clientes */
  .clients-list {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Cookie banner */
  .cookie-banner-actions {
    justify-content: flex-end;
  }

  /* Páginas legales */
  .legal-content {
    padding: 64px 32px 96px;
  }

  .legal-content h1 {
    font-size: var(--font-size-4xl);
  }
}


/* ====================================================================
   24. RESPONSIVE: DESKTOP (≥1024px)
   ==================================================================== */
@media (min-width: 1024px) {
  /* Tipografía */
  h1 {
    font-size: var(--font-size-5xl);
  }

  .hero-title {
    font-size: var(--font-size-5xl);
  }

  /* Servicios — 3 columnas */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Ocultar hamburguesa en desktop */
  .mobile-menu-toggle {
    display: none !important;
  }

  /* Section headers */
  .section-header h2 {
    font-size: var(--font-size-3xl);
  }

  .section-header p {
    font-size: var(--font-size-lg);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Contacto form más amplio */
  .contact-form {
    padding: 48px;
  }

  /* Páginas legales */
  .legal-content {
    padding: 80px 32px 120px;
  }

  .legal-content h1 {
    font-size: var(--font-size-5xl);
  }

  /* Footer con más columnas */
  .footer-content {
    grid-template-columns: 2fr 1fr 1fr;
  }
}


/* ====================================================================
   25. RESPONSIVE: MÓVIL (≤1023px)
   ==================================================================== */
@media (max-width: 1023px) {
  /* Mostrar hamburguesa en móvil */
  .mobile-menu-toggle {
    display: flex;
  }

  /* Menú desplegable móvil */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    flex-direction: column;
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-default);
    display: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu a {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-default);
    display: block;
    font-size: var(--font-size-lg);
  }

  .nav-menu a::after {
    display: none;
  }

  /* Hero ajustes */
  .hero {
    padding: 64px 0;
  }

  .hero-visual {
    height: 250px;
  }

  .shape-1 {
    width: 200px;
    height: 200px;
  }

  .shape-2 {
    width: 150px;
    height: 150px;
  }

  .shape-3 {
    width: 120px;
    height: 120px;
  }

  /* Secciones con menos padding en móvil */
  .services,
  .process,
  .clients,
  .contact {
    padding: 64px 0;
  }

  .section-header {
    margin-bottom: 40px;
  }

  /* Contacto form */
  .contact-form {
    padding: 24px;
  }

  /* Timeline móvil */
  .timeline {
    padding-left: 32px;
  }

  .timeline-item {
    margin-bottom: 32px;
    padding-left: 24px;
  }

  /* Footer */
  .footer {
    padding: 48px 0 24px;
  }

  .footer-content {
    gap: 32px;
  }

  /* Tablas responsivas */
  table {
    font-size: var(--font-size-xs);
  }

  th, td {
    padding: 10px 12px;
  }
}

/* ── Extra small (≤480px) ── */
@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .nav-container {
    padding: 0 16px;
    gap: 12px;
  }

  .brand-text {
    font-size: var(--font-size-base);
  }

  .lang-btn {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
  }

  .hero-title {
    font-size: var(--font-size-2xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  .hero-badge {
    font-size: var(--font-size-xs);
    padding: 6px 14px;
  }

  .service-card {
    padding: 24px;
  }

  .client-item {
    padding: 16px 20px;
    min-width: auto;
    width: 100%;
  }

  .contact-form {
    padding: 20px;
  }

  .btn-hero,
  .btn-large {
    padding: 14px 28px;
    font-size: var(--font-size-base);
  }

  .legal-content {
    padding: 32px 16px 64px;
  }

  .legal-content h1 {
    font-size: var(--font-size-2xl);
  }

  /* Tablas scroll horizontal en pantallas pequeñas */
  .legal-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ====================================================================
   26. PREFERS REDUCED MOTION
   Respeta la configuración del usuario para reducir animaciones
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .abstract-shape {
    animation: none !important;
  }

  .timeline-marker {
    animation: none !important;
  }
}




.brand-logo {
    float: left;
    padding-right: 8px;
}

/* ====================================================================
   FIN DEL ARCHIVO CSS
   ==================================================================== */