/* =============================================================
CYBERNOX — Hoja de estilos unificada (ordenada y documentada)
Enfoque: mobile‑first + variables CSS + componentes
-------------------------------------------------------------
Guía de lectura:
1) Reset y Variables
2) Temas (dark automático y manual)
3) Base tipográfica y elementos comunes
4) Utilidades de layout (container, helpers)
5) MASTHEAD (Topbar + Header + Nav) unificado
6) Hero principal con imagen de fondo
7) Intro + iconos + botones
8) Bloques de contenido: Destacados (cards), Why (cards), Blog, CTA, Footer
9) Sección Servicio al Cliente
10) Accesibilidad: focus visible
11) Breakpoints (responsive)
12) Motion Safe (reduce motion)
-------------------------------------------------------------
Convenciones:
- Comentarios /* ... */
/*explican el "por qué" de cada bloque/propiedad
- Mobile-first: estilos base aplican a móviles; escalamos con min-width
- Variables centralizan colores y tamaños; facilita rebranding
============================================================= */
/* =============================================================
SECTORES STYLES
-------------------------------------------------------------
Estilos específicos para la página sectores.html
============================================================= */
.sector-detail {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 80px;
overflow: hidden;
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sector-detail:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-strong);
}

.sector-header {
background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.1), rgba(var(--primary-rgb), 0.05));
padding: 40px;
display: flex;
align-items: center;
gap: 32px;
border-bottom: 1px solid var(--border);
}

.sector-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary), rgba(var(--blue-rgb), 0.8));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 32px;
flex-shrink: 0;
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
}

.sector-meta {
flex: 1;
}
.sector-badge {
display: inline-block;
background: var(--primary);
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}

.sector-title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
color: var(--text);
margin: 0 0 12px 0;
line-height: 1.2;
}

.sector-subtitle {
font-size: 18px;
color: var(--muted);
margin: 0;
line-height: 1.5;
max-width: 600px;
}

.sector-content {
padding: 40px;
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
}

.sector-description h3 {
font-size: 24px;
font-weight: 700;
color: var(--primary);
margin-bottom: 16px;
}

.sector-description p {
font-size: 16px;
line-height: 1.6;
color: var(--muted);
margin-bottom: 32px;
}

.sector-services-grid {
display: grid;
gap: 20px;
}

.sector-service-item {
display: grid;
grid-template-columns: 60px 1fr;
gap: 16px;
background: rgba(var(--primary-rgb), 0.02);
border: 1px solid rgba(var(--border), 0.5);
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
}

.sector-service-item:hover {
background: rgba(var(--primary-rgb), 0.05);
border-color: rgba(var(--primary-rgb), 0.3);
transform: translateY(-2px);
}

.service-icon-small {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary-10), rgba(var(--primary-rgb), 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(var(--primary-rgb), 0.2);
}

.service-icon-small img {
width: 24px;
height: 24px;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .1));
}

.service-content h4 {
font-size: 18px;
font-weight: 700;
color: var(--text);
margin: 0 0 8px 0;
}

.service-content p {
font-size: 14px;
color: var(--muted);
margin: 0;
line-height: 1.5;
}

.sector-cta {
display: flex;
flex-direction: column;
gap: 24px;
}

.sector-stats {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}

.stat-item {
text-align: center;
padding: 16px;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.05));
border-radius: 12px;
border: 1px solid rgba(var(--primary-rgb), 0.2);
display: block;
font-size: 28px;
font-weight: 900;
color: var(--primary);
margin-bottom: 4px;
text-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
}

.stat-item small {
font-size: 13px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}

.sector-actions {
display: flex;
flex-direction: column;
gap: 12px;
}

.sector-actions .btn {
width: 100%;
text-align: center;
}

/* RESPONSIVE SECTORES */
@media (max-width: 1024px) {
.sector-content {
grid-template-columns: 1fr;
gap: 32px;
}

.sector-cta {
order: -1;
}
}

@media (max-width: 768px) {
.sector-detail {
margin-bottom: 60px;
}

.sector-header {
flex-direction: column;
text-align: center;
padding: 32px 24px;
gap: 24px;
}

.sector-icon {
width: 64px;
height: 64px;
font-size: 24px;
}

.sector-title {
font-size: 28px;
}

.sector-subtitle {
font-size: 16px;
}

.sector-content {
padding: 24px;
}

.sector-services-grid {
gap: 16px;
}

.sector-service-item {
padding: 16px;
grid-template-columns: 48px 1fr;
gap: 12px;
}

.service-icon-small {
width: 40px;
height: 40px;
}

.service-icon-small img {
width: 20px;
height: 20px;
}

.service-content h4 {
font-size: 16px;
}

.service-content p {
font-size: 13px;
}

.sector-cta {
gap: 20px;
}

.why-grid {
grid-template-columns: 1fr;
gap: 24px;
}

.why-card {
padding: 24px 20px;
}
}
/* =============================================================
24) Hero Seguridad Integral
-------------------------------------------------------------
Nuevo hero enfocado en seguridad para hogares y pymes con
diseño profesional, innovación y equilibrio entre físicas y digital.
============================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
/* Incluye padding/border dentro del width/height */
}

html {
scroll-behavior: smooth;
/* Suaviza anclas y navegación interna */
}
/* =============================================================
Hero Portfolio Custom
-------------------------------------------------------------
Hero personalizado para la página de portafolio con métricas integradas.
============================================================= */
.hero-portfolio {
position: relative;
display: flex;
align-items: center;
min-height: 85vh;
overflow: hidden;
background: linear-gradient(135deg, #0b0f1a 0%, #1a1d2e 50%, #0d1b2a 100%);
font-family: var(--font-sans);
}

.hero-portfolio-bg {
position: absolute;
inset: 0;
z-index: 0;
}

.hero-portfolio-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.08), transparent 60%),
linear-gradient(45deg, transparent 30%, rgba(255, 0, 51, 0.05) 50%, transparent 70%);
z-index: 1;
}

.hero-portfolio-content {
position: relative;
z-index: 2;
max-width: var(--maxw);
margin: 0 auto;
padding: 120px var(--gutter);
display: grid;
grid-template-columns: 2fr 1fr;
gap: 80px;
align-items: center;
}

.hero-portfolio-text {
color: #fff;
}

.hero-portfolio-metrics .metric-item {
background: rgba(6, 10, 20, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.floating-element {
animation: float 6s ease-in-out infinite;
}

@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}

/* Responsive Hero Portfolio */
@media (max-width: 1024px) {
.hero-portfolio-content {
grid-template-columns: 1fr;
gap: 60px;
text-align: center;
}
}

@media (max-width: 768px) {
.hero-portfolio {
min-height: 70vh;
}

.hero-portfolio-content {
padding: 80px var(--gutter);
gap: 40px;
}

.hero-portfolio-metrics {
justify-content: center;
}
}

:root {
/* --- Paleta (elige azul o rojo como --primary) --- */
--white: #ffffff;
/* Blanco base */
--black: #000000;
/* Negro absoluto */
--blue: #0A84FF;
/* Azul tecnológico */
--blue-rgb: 10, 132, 255;
/* RGB del azul para sombras/transparencias */
--red: #FF0033;
/* Rojo cibernético */
--red-rgb: 255, 0, 51;
/* RGB del rojo */
/* --- Tema por defecto (claro) --- */
--bg: var(--white);
/* Fondo global */
--text: #0e0e10;
/* Texto principal */
--muted: #6b7280;
/* Texto secundario/descriptivo */
--primary: var(--blue);
/* Color de marca principal */
--primary-rgb: var(--blue-rgb);
/* RGB sincronizado con --primary */
--primary-10: #e8f1ff;
/* Versión muy clara para hovers/fondos suaves */
--border: #e5e7eb;
/* Bordes sutiles */
--card: #fafafa;
/* Fondo de tarjetas/blocks */
--overlay: rgba(0, 0, 0, 0.45);
/* Capa oscura sobre imágenes (hero) */
--focus: #7aa7ff;
/* Anillos de enfoque accesibles */
/* --- Radii, sombras y layout --- */
--radius: 14px;
/* Radio estándar para tarjetas */
--radius-sm: 10px;
/* Radio reducido */
--shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
/* Sombra suave */
--shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.15);
/* Sombra en hover */
--maxw: 1200px;
/* Ancho máximo del contenedor */
--gutter: 24px;
/* Padding horizontal del contenedor */
--font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
/* Stack legible y moderno */
/* --- Site accent colors --- */
--accent-primary: var(--blue);
/* #0A84FF */
--accent-red: var(--red);
/* #FF0033 */
--glow-primary: rgba(10, 132, 255, 0.12);
--hero-bg-1: #05060a;
--hero-bg-2: #0b0f1a;
}
/* =============================================================
2) Tema oscuro automático (según prefers-color-scheme)
-------------------------------------------------------------
Ajusta variables cuando el usuario prefiere tema oscuro.
============================================================= */
@media (prefers-color-scheme: dark) {
:root {
--bg: #0b0c10;
/* Fondo más oscuro */
--text: #f5f5f7;
/* Texto claro */
--muted: #a1a1aa;
/* Texto secundario */
--border: #22242a;
/* Bordes en dark */
--card: #121318;
/* Tarjetas en dark */
--overlay: rgba(0, 0, 0, 0.5);
/* Overlay un poco más fuerte */
--primary-10: rgba(10, 132, 255, 0.12);
/* Fondo sutil acorde al primary */
--focus: #98b7ff;
/* Anillo de enfoque en dark */
}
}

/* =============================================================
2b) Tema oscuro manual (html[data-theme="dark"])
-------------------------------------------------------------
Permite forzar dark con un atributo en <html>.
============================================================= */
html[data-theme="dark"] {
--bg: #0b0c10;
--text: #f5f5f7;
--muted: #a1a1aa;
--border: #22242a;
--card: #121318;
--overlay: rgba(0, 0, 0, 0.5);
--primary-10: rgba(10, 132, 255, 0.12);
--focus: #98b7ff;
}

/* =============================================================
3) Base tipográfica y elementos comunes
-------------------------------------------------------------
Reseteamos márgenes y definimos tipografía/colores globales.
============================================================= */
body {
margin: 0;
/* Quita margen por defecto */
font-family: var(--font-sans);
/* Tipografía global */
background: var(--bg);
/* Fondo condicionado por tema */
color: var(--text);
/* Color de texto principal */
line-height: 1.6;
/* Lectura cómoda */
-webkit-font-smoothing: antialiased;
/* Mejor render en WebKit */
-moz-osx-font-smoothing: grayscale;
/* Mejor render en macOS */
}

/* Elementos de bloque y tipografía */
section {
padding: 64px 0;
/* Espaciado vertical estándar */
}

h1,
h2,
h3 {
line-height: 1.15;
margin: 0 0 12px;
/* Títulos compactos */
}

p {
margin: 0 0 14px;
color: var(--muted);
/* Párrafos con color secundario */
}

img,
picture,
video {
display: block;
max-width: 100%;
height: auto;
/* Media responsiva */
}

a {
color: var(--primary);
/* Enlaces con color de marca */
}
/* =============================================================
4) Utilidades de layout
-------------------------------------------------------------
Contenedor centralizado y helpers básicos.
============================================================= */
.container {
max-width: var(--maxw);
/* Limita el ancho máximo del contenido */
margin-inline: auto;
/* Centra el contenedor */
padding-inline: var(--gutter);
/* Gutter horizontal fluido */
}

/* =============================================================
5) MASTHEAD UNIFICADO (Topbar + Header + Nav)
-------------------------------------------------------------
Topbar y Header comparten fondo semitransparente con blur
para una barra "de una sola pieza".
============================================================= */
.topbar,
header {
background: rgba(11, 12, 16, 0.70);
/* Fondo translúcido para ver el contenido debajo */
backdrop-filter: blur(10px);
/* Desenfoque del fondo (soporte moderno) */
-webkit-backdrop-filter: blur(10px);
/* Prefijo para Safari */
border: 0;
/* Remueve separadores duplicados */
}

header {
position: sticky;
top: 0;
z-index: 100;
/* Mantiene el header visible al hacer scroll */
}

/* Línea sutil al final del bloque del header (divide del contenido) */
header::after {
content: "";
/* Genera línea decorativa */
display: block;
height: 1px;
/* Altura de la línea */
background: linear-gradient(90deg, transparent, var(--border), transparent);
/* Degradado suave */
}

/* Contenedores internos para topbar y header */
.topbar-inner,
.header-inner {
display: flex;
/* Estructura flexible */
align-items: center;
/* Centra verticalmente */
justify-content: space-between;
/* Separa extremos */
gap: 14px;
/* Espacio entre elementos */
padding: 8px var(--gutter);
/* Respiración interna */
}

/* --- TOPBAR --- */
.topbar {
font-size: 14px;
color: var(--muted);
/* Tamaño y color discreto */
}

.topbar-inner {
white-space: normal;
/* Evita saltos raros en ítems cortos */
flex-wrap: wrap;
/* Mantiene en una línea cuando hay espacio */
gap: 10px;
/* Separación entre spans/enlaces */
justify-content: flex-end;
/* Alinea todo a la derecha */
}

.topbar-inner a {
color: var(--text);
/* Enlaces visibles en topbar */
text-decoration: none;
/* Sin subrayado */
transition: color .2s ease, opacity .2s ease;
/* Feedback sutil */
}

.topbar-inner i {
margin-right: 6px;
/* Separación icono-texto */
opacity: .9;
/* Iconos un poco atenuados */
transition: color .2s ease, opacity .2s ease, transform .15s ease;
/* Hover suave */
}

.topbar-inner a:hover,
.topbar-inner a:hover i {
color: var(--primary);
/* Resalta con color de marca en hover */
opacity: 1;
/* Recupera opacidad completa */
}

.topbar-inner a:hover i {
transform: translateY(-1px);
/* Micro-interacción */
}

.topbar-inner .sep {
color: #ffffff22;
/* Separadores visuales discretos */
}

/* --- HEADER / NAV --- */
.header-inner {
flex-wrap: wrap;
/* Permite que el nav salte abajo en pantallas pequeñas */
}

.logo {
order: 1;
/* Logo primero */
}

.main-nav {
order: 2;
margin-left: auto;
/* Menú a la derecha */
}

.logo {
width: auto;
height: auto;
/* Deja que la imagen controle el tamaño */
display: flex;
/* Alinea elementos internos */
align-items: baseline;
/* Alineación estética con el texto */
gap: 12px;
/* Espacio si se agrega texto al lado */
padding: 10px 0;
/* Área clicable cómoda */
font-weight: 800;
letter-spacing: .5px;
/* Si el logo fuera texto */
text-decoration: none;
/* Quita subrayado si es enlace */
}

.main-nav ul {
margin: 0;
padding: 0;
/* Elimina márgenes/padding por defecto */
list-style: none;
/* Quita viñetas */
display: flex;
gap: 8px;
/* Menú horizontal y espaciado corto */
flex-wrap: wrap;
/* Permite segunda línea si no cabe */
}

.main-nav a {
display: inline-block;
/* Área clicable con padding */
padding: 10px 12px;
/* Zona táctil óptima */
border-radius: 10px;
/* Pastilla suave */
text-decoration: none;
/* Sin subrayado */
color: var(--text);
/* Texto visible */
font-weight: 600;
/* Peso medio-alto */
transition: color .2s ease, background-color .2s ease, transform .08s ease;
/* Hover */
}

.main-nav a:hover {
background: var(--primary-10);
/* Resalta con fondo suave */
color: var(--primary);
/* Y texto de marca */
}

.main-nav a[aria-current="page"] {
background: var(--primary-10);
/* Resalta como activa */
color: var(--primary);
/* Y texto de marca */
font-weight: 700;
/* Más peso para destacar */
border: 1px solid rgba(var(--primary-rgb), 0.3);
/* Borde sutil */
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.15);
/* Sombra ligera */
}

/* Escudo 3D animado en el hero */
.hero-futuristic__content {
position: relative;
/* para posicionar el escudo flotante */
}

/* Escudo con candado flotante en el hero */
.hero-shield-floating,
.hero-privacy-floating {
position: absolute;
width: 120px;
height: 120px;
z-index: 10;
animation: shield-float-simple 8s ease-in-out infinite;
}

.hero-shield-floating {
right: 2%;
top: 60px;
/* alineado con el área del título */
}

.hero-privacy-floating {
right: 3%;
top: 120px;
width: 60px;
height: 60px;
animation: privacy-float 10s ease-in-out infinite;
opacity: 0.8;
}

.shield-container {
position: relative;
width: 100%;
height: 100%;
}

.shield-container img {
width: 100%;
height: 100%;
filter: brightness(0.8) drop-shadow(0 0 20px rgba(10, 132, 255, 0.8));
transition: filter 0.3s ease;
}

.hero-shield-floating:hover .shield-container img {
filter: brightness(1.2) drop-shadow(0 0 30px rgba(10, 132, 255, 1));
}

.shield-container i.fas.fa-lock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #0A84FF;
font-size: 32px;
z-index: 11;
filter: drop-shadow(0 0 8px rgba(10, 132, 255, 0.6));
transition: color 0.3s ease, filter 0.3s ease;
}

.hero-shield-floating:hover .shield-container i {
color: rgba(10, 132, 255, 0.9);
filter: drop-shadow(0 0 12px rgba(10, 132, 255, 1));
}

@keyframes shield-float-simple {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}

@keyframes privacy-float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(180deg);
}
}

@media (max-width: 768px) {
.hero-shield-floating {
width: 80px;
height: 80px;
right: 2%;
top: 40px;
}

.shield-container i.fas.fa-lock {
font-size: 20px;
}
}

@media (max-width: 640px) {
.hero-shield-floating {
width: 70px;
height: 70px;
right: 5%;
top: 40px;
}

.shield-container i.fas.fa-lock {
font-size: 18px;
}
}

.hero-shield {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
z-index: 10;
transition: opacity 0.3s ease;
}

.hero-shield-floating {
position: absolute;
right: 8%;
bottom: 40%;
z-index: 5;
width: 120px;
height: 120px;
animation: shield-float-hero 12s ease-in-out infinite;
}

.hero-shield-floating img {
width: 100%;
height: 100%;
filter:
drop-shadow(0 0 20px rgba(0, 229, 255, 0.6)) drop-shadow(0 0 40px rgba(0, 229, 255, 0.4)) brightness(1.1);
animation: shield-pulse 3s ease-in-out infinite, shield-glow 2s ease-in-out infinite alternate;
}

@keyframes shield-float-hero {
0%,
100% {
transform: translateY(0) rotate(0deg) scale(1);
}
25% {
transform: translateY(-15px) rotate(90deg) scale(1.05);
}
50% {
transform: translateY(-30px) rotate(180deg) scale(1.1);
}
75% {
transform: translateY(-15px) rotate(270deg) scale(1.05);
}
}

@keyframes shield-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}

@keyframes shield-glow {
0% {
filter:
drop-shadow(0 0 20px rgba(0, 229, 255, 0.6)) drop-shadow(0 0 40px rgba(0, 229, 255, 0.4)) brightness(1.1);
}
100% {
filter:
drop-shadow(0 0 30px rgba(0, 229, 255, 0.8)) drop-shadow(0 0 60px rgba(0, 229, 255, 0.6)) drop-shadow(0 0 80px rgba(0, 229, 255, 0.4)) brightness(1.3);
}
}

.hero-shield {
display: none;
}

@media (max-width: 768px) {
.hero-shield-floating {
width: 80px;
height: 80px;
right: 5%;
bottom: 35%;
}
}

/* Llamada a la acción del navbar: Contáctanos */
.main-nav a.nav-cta {
background: linear-gradient(90deg, var(--blue), #00e5ff);
color: #fff;
border: 1px solid rgba(var(--primary-rgb), .35);
box-shadow: 0 8px 20px rgba(var(--primary-rgb), .25);
}

.main-nav a.nav-cta:hover {
filter: brightness(1.06);
box-shadow: 0 10px 24px rgba(var(--primary-rgb), .32);
}
}

/* Services Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-bottom: 32px;
}

/* Column Header */
.column-header {
display: flex;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid rgba(0, 229, 255, 0.3);
}

.column-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #00e5ff 0%, #0099cc 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
box-shadow: 0 4px 12px rgba(0, 229, 255, 0.3);
color: #ffffff;
font-size: 1.2rem;
}

.column-title {
color: #00e5ff;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
}
/* Service Item */
.service-item {
margin-bottom: 24px;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.service-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #00e5ff 50%, transparent 100%);
transform: translateX(-100%);
transition: transform 0.3s ease;
}

.service-item:hover {
background: rgba(0, 229, 255, 0.05);
border-color: rgba(0, 229, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 229, 255, 0.2);
}

.service-item:hover::before {
transform: translateX(0);
}

.service-title {
color: #ffffff;
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 8px 0;
line-height: 1.3;
}

.service-description {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin: 0 0 16px 0;
line-height: 1.5;
}

.service-link {
color: #00e5ff;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
padding: 8px 16px;
border: 1px solid rgba(0, 229, 255, 0.3);
border-radius: 6px;
background: rgba(0, 229, 255, 0.1);
}

.service-link:hover {
background: rgba(0, 229, 255, 0.2);
border-color: #00e5ff;
transform: translateX(4px);
}

/* Service Footer */
.service-footer {
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(0, 229, 255, 0.2);
padding: 24px 32px;
border-radius: 0 0 12px 12px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}

/* Stats */
.service-stats {
display: flex;
gap: 32px;
align-items: center;
}

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

.stat-value {
display: block;
color: #00e5ff;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
}

.stat-label {
color: rgba(255, 255, 255, 0.7);
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}

/* Actions */
.service-actions {
display: flex;
gap: 16px;
align-items: center;
}

.btn-service {
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 2px solid transparent;
display: inline-flex;
align-items: center;
gap: 8px;
}

.btn-primary {
background: linear-gradient(135deg, #00e5ff 0%, #0099cc 100%);
color: #ffffff;
box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

.btn-primary:hover {
background: linear-gradient(135deg, #00ccdd 0%, #0088bb 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 229, 255, 0.4);
}

.btn-secondary {
background: transparent;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #ffffff;
transform: translateY(-2px);
}
/* =============================================================
6) Hero con imagen de fondo
-------------------------------------------------------------
Cubre viewport, centra el título y aplica overlay para legibilidad.
============================================================= */
.hero--bg {
position: relative;
/* Para posicionar overlay */
min-height: 90vh;
/* Casi pantalla completa en desktop */
display: flex;
align-items: center;
/* Centrado vertical del contenido */
justify-content: center;
text-align: center;
/* Titular centrado */
padding: 0 24px;
/* Margen lateral en móviles */
background-image: url('imgs/familia.jpg');
/* ⚠️ AJUSTAR ruta según tu proyecto */
background-size: cover;
/* Cubre el área sin distorsión */
background-position: center;
/* Centra la imagen */
background-repeat: no-repeat;
/* Evita repeticiones */
}

.hero--bg .hero-overlay {
position: absolute;
inset: 0;
/* Cubre todo el hero */
background: var(--overlay);
/* Oscurece para mejorar contraste del texto */
}

.hero--bg .hero-content {
position: relative;
/* Sobre el overlay */
max-width: 900px;
/* Limita ancho del texto */
padding: 40px 0;
/* Respira verticalmente */
}

.hero--bg h2 {
font-size: clamp(32px, 6vw, 64px);
/* Escala fluida de título */
line-height: 1.1;
margin: 0;
/* Estética compacta */
color: #fff;
/* Texto blanco sobre overlay */
text-wrap: balance;
/* Mejor equilibrio de líneas (soporte moderno) */
}
/* =============================================================
7) Intro + iconos + botones
-------------------------------------------------------------
Bloque bajo el hero que explica la propuesta y muestra áreas.
============================================================= */
#intro {
padding: 40px 0 64px;
text-align: center;
/* Compensa espacio del hero */
}

#intro h2 {
font-size: clamp(28px, 4vw, 48px);
/* Subtítulo flexible */
margin-bottom: 18px;
color: var(--text);
}

#intro p {
margin: 0 auto 18px;
/* Centra y separa del título */
max-width: 820px;
/* Legibilidad en líneas largas */
font-size: clamp(16px, 2.4vw, 18px);
/* Cuerpo ligeramente adaptable */
color: var(--muted);
}

/* Línea de iconos: una fila en desktop */
#intro .icons-intro {
display: flex;
align-items: center;
/* Alineación vertical correcta */
justify-content: center;
/* Centrado horizontal */
gap: 28px;
/* Separación uniforme */
margin: 24px 0 28px;
/* Espaciado alrededor del carrusel */
flex-wrap: nowrap;
/* Mantener en una sola línea cuando hay espacio */
}

/* Ítem: icono arriba, texto abajo (layout column) */
#intro .icon-item {
display: flex;
/* Tamaño natural + flex */
align-items: center;
/* Centra icono respecto al contenedor */
gap: 10px;
/* Separación icono/texto */
padding: 8px 12px;
/* Zona táctil */
border-radius: 12px;
/* Pastilla suave */
background: transparent;
/* Sin fondo por defecto */
transition: background-color .2s ease, transform .08s ease;
/* Feedback en hover si se desea */
flex-direction: column;
/* Icono arriba, texto abajo */
text-align: center;
/* Texto centrado */
}

#intro .icon-item img {
width: 100px;
height: 100px;
/* Tamaño de icono en desktop */
object-fit: none;
/* Evita recortes; usa SVG/PNG limpios */
display: block;
margin: 0 auto;
/* Centrado absoluto */
}

#intro .icon-item p {
margin: 0;
color: var(--text);
font-weight: 600;
/* Etiqueta del icono más visible */
}

/* Botonera del intro (también usada en otras secciones) */
#intro .hero-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
/* =============================================================
8) Bloques de contenido: Destacados (cards)
-------------------------------------------------------------
Rejilla de 3 columnas (desktop) que colapsa en móviles.
============================================================= */
.destacados-content h2 {
text-align: center;
/* Centra el título del bloque */
}

#destacados .cards {
display: grid;
/* Grid para tarjetas */
grid-template-columns: repeat(3, 1fr);
/* 3 columnas iguales en desktop */
gap: 18px;
/* Separación entre tarjetas */
margin-top: 18px;
/* Respiro del título */
}

.cards--three {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hero--compact {
min-height: 42vh;
}

.section-offset-top-sm {
margin-top: 22px;
}

#destacados .card {
display: block;
/* Tarjeta como enlace completo */
padding: 20px;
/* Espaciado interno cómodo */
background: var(--card);
/* Fondo de tarjeta */
border: 1px solid var(--border);
/* Delimitación sutil */
border-radius: var(--radius);
/* Esquinas suaves */
box-shadow: var(--shadow);
/* Elevación ligera */
text-decoration: none;
color: var(--text);
/* Enlace sin subrayado */
transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;}
/* Hover */
#destacados .card p {
margin-top: 6px;
/* Separación entre título y texto */
}

#destacados .card:hover {
transform: translateY(-2px);
/* Micro-elevación */
box-shadow: var(--shadow-strong);
/* Sombra más marcada */
border-color: rgba(var(--primary-rgb), 0.35);
/* Borde con tinte de marca */
}

/* Card header with icon */
#destacados .card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}

#destacados .card-icon {
font-size: 48px;
color: var(--primary);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-10), rgba(var(--primary-rgb), 0.1));
border-radius: 50%;
flex-shrink: 0;
}

#destacados .card:hover .card-icon {
transform: scale(1.1);
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
}

/* Card description */
#destacados .card p {
margin-bottom: 20px;
font-size: 16px;
color: var(--muted);
line-height: 1.5;
}

/* Servicio Cliente section */
.servicio-cliente-header {
text-align: center;
margin-bottom: 32px;
}

.servicio-cliente-header h2 {
font-size: clamp(32px, 4vw, 48px);
margin-bottom: 16px;
color: var(--text);
font-weight: 700;
}

.servicio-cliente-header p {
font-size: 18px;
color: var(--muted);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}

/* SC Block header with icon */
.sc-block-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}

.sc-icon {
font-size: 48px;
color: var(--primary);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-10), rgba(var(--primary-rgb), 0.1));
border-radius: 50%;
flex-shrink: 0;
}

.sc-block:hover .sc-icon {
transform: scale(1.1);
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
}

#servicio-cliente .sc-block h3 {
margin: 0;
}

#servicio-cliente .sc-block p {
margin-bottom: 16px;
color: var(--muted);
}
/* =============================================================
9) Bloques de contenido: Sobre Nosotros
-------------------------------------------------------------
Rejilla de 2 columnas (desktop) que colapsa en móviles.
============================================================= */
/* Sección Sobre Nosotros en dos columnas */
.sobre-nosotros-grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* 50% y 50% */
align-items: center;
gap: 40px;
}

.sobre-nosotros-img img {
width: 100%;
border-radius: var(--radius);
/* Usa el mismo radio de la marca */
box-shadow: var(--shadow);
}

@media (max-width: 768px) {
.sobre-nosotros-grid {
grid-template-columns: 1fr;
/* Una columna en móvil */
text-align: center;
}

.sobre-nosotros-img {
order: -1;
/* Imagen arriba en móvil */
}}
/* =============================================================
10) Bloque: Why (¿por qué nosotros?)
-------------------------------------------------------------
Tarjetas con icono cuadrado, título y descripción.
============================================================= */
#por-que-cybernox {
text-align: center;
/* Centra el contenido del bloque */
}

#por-que-cybernox .why-cards {
display: grid;
/* Grid para tarjetas */
grid-template-columns: repeat(4, minmax(220px, 1fr));
/* 4 col adaptables */
gap: 18px;
/* Separación consistente */
margin-top: 22px;
/* Respiro del párrafo */
}

#por-que-cybernox .why-card {
padding: 28px 18px;
/* Espaciado interno */
background: var(--card);
/* Fondo de tarjeta */
border: 1px solid var(--border);
/* Borde sutil */
border-radius: var(--radius);
/* Esquinas suaves */
box-shadow: var(--shadow);
/* Elevación ligera */
display: flex;
flex-direction: column;
/* Stack vertical */
align-items: center;
text-align: center;
/* Centrado del contenido */
transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
/* Hover */
}

#por-que-cybernox .why-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-strong);
border-color: rgba(var(--primary-rgb), .35);
}

#por-que-cybernox .why-icon {
width: 84px;
height: 84px;
/* Contenedor del icono */
border-radius: 20px;
/* Caja redondeada */
background: var(--primary-10);
/* Fondo con tinte de marca */
display: grid;
place-items: center;
/* Centrado perfecto del icono */
margin-bottom: 12px;
/* Espacio con el título */
}

#por-que-cybernox .why-icon i {
font-size: 38px;
color: var(--primary);
/* Ícono FA destacado */
}

#por-que-cybernox h3 {
margin: 8px 0 6px;
/* Espaciado título */
}

#por-que-cybernox p {
margin: 0;
color: var(--muted);
/* Descripción */
}
/* =============================================================
11) CTA final
-------------------------------------------------------------
Llama la atención con un fondo ligeramente tintado y bordes.
============================================================= */
.servicio-cliente-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 40px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

.servicio-cliente-grid .sc-block {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow);
}

.servicio-cliente-grid h3 {
margin-top: 0;
color: var(--text);
}

.servicio-cliente-grid p {
color: var(--muted);
}

.sc-block form {
display: flex;
flex-direction: column;
gap: 12px;
}

.sc-block input[type="text"],
.sc-block input[type="email"],
.sc-block input[type="tel"],
.sc-block select,
.sc-block textarea {
width: 100%;
padding: 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 14px;
}

/* Asegura fondo blanco en controles de formulario dentro de .sc-block */
.sc-block select,
.sc-block input,
.sc-block textarea {
background: #fff;
color: #0e0e10;
}

/* Ajustes del textarea del CTA */
.sc-block textarea {
min-height: 120px;
resize: vertical;
}
/* Éxito del formulario */
.form-success {
margin-top: 8px;
color: var(--success, #2ecc71);
font-weight: 600;
}

/* Errores de campo accesibles */
.field-error {
margin: 4px 0 0;
font-size: 12px;
color: var(--red, #FF0033);
}

.field-error[hidden] {
display: none;
}

/* Mensajes flotantes de error */
.float-error {
position: fixed;
z-index: 2147483647;
pointer-events: none;
display: inline-block;
background: #ff0033;
color: #fff;
font-size: 12px;
line-height: 1.3;
padding: 8px 10px;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
opacity: 0;
transform: translateY(-4px);
transition: opacity .16s ease, transform .16s ease;
max-width: calc(100vw - 16px);
word-break: break-word;
}

.float-error.is-visible {
opacity: 1;
transform: translateY(0);
}
.sc-nombre {
display: flex;
gap: 12px;
}

.sc-nombre>div {
flex: 1;
}

/* Label para campos de formulario */
.field-group-label {
display: block;
margin-top: 2px;
margin-bottom: 6px;
font-weight: 600;
}
.sc-check {
font-size: 14px;
color: var(--muted);
display: flex;
align-items: flex-start;
gap: 6px;
white-space: nowrap;
}

/* Checkbox circular con palomita personalizada */
.sc-check input[type="checkbox"] {
-webkit-appearance: none;
/* Quita estilo nativo en WebKit */
appearance: none;
/* Quita estilo nativo */
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--border);
background-color: var(--white);
/* Fondo claro por defecto */
cursor: pointer;
display: grid;
place-content: center;
transition: background-color 0.2s ease, border-color 0.2s ease;
margin-top: 2px;
/* Mantiene alineación con el texto */
}

/* Estado marcado: mostrar la palomita */
.sc-check input[type="checkbox"]::after {
content: "✓";
font-size: 12px;
color: white;
transform: scale(0);
transition: transform 0.15s ease;
}

/* Cuando está checked */
.sc-check input[type="checkbox"]:checked {
background-color: var(--primary);
border-color: var(--primary);
}

.sc-check input[type="checkbox"]:checked::after {
transform: scale(1);
}

/* Estilo del enlace dentro del checkbox */
.sc-check a {
color: inherit;
/* Igual color que el texto normal */
text-decoration: none;
/* Sin subrayado por defecto */
transition: color 0.2s ease;
}

.sc-check a:hover {
color: var(--primary);
/* Solo resalta en hover */
text-decoration: underline;
/* O puedes quitarlo si no quieres subrayado */
}
/* =============================================================
12) Blog preview
-------------------------------------------------------------
Dos columnas en desktop; colapsa a una en móvil vía breakpoints.
============================================================= */
#blog-preview .posts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
/* 2 columnas */
}

#blog-preview article {
padding: 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}

#blog-preview a {
color: var(--text);
text-decoration: none;
/* Enlaces de posts al color de texto */
}

#blog-preview a:hover {
text-decoration: underline;
/* Feedback sutil */
}
/* =============================================================
13) Newsletter
-------------------------------------------------------------
Sección profesional de suscripción al boletín con UX excepcional.
============================================================= */
#newsletter {
padding: 50px 0;
background: linear-gradient(135deg, rgba(5, 8, 15, 0.95) 0%, rgba(10, 132, 255, 0.06) 50%, rgba(5, 8, 15, 0.95) 100%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}

#newsletter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(10, 132, 255, 0.08), transparent 70%),
radial-gradient(circle at 80% 20%, rgba(255, 0, 51, 0.06), transparent 70%);
pointer-events: none;
}

.newsletter-container {
max-width: var(--maxw);
margin: 0 auto;
padding-inline: var(--gutter);
text-align: center;
position: relative;
z-index: 1;
}

.newsletter-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
/* Badge de exclusividad */
.newsletter-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(90deg, var(--primary), var(--blue));
color: #fff;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(var(--blue-rgb), 0.3);
}

.newsletter-badge i {
font-size: 14px;
}

.newsletter-content h2 {
font-size: clamp(28px, 5vw, 42px);
margin-bottom: 10px;
color: #fff;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.newsletter-content p {
margin-bottom: 16px;
color: rgba(235, 244, 255, 0.9);
max-width: 500px;
margin-left: auto;
margin-right: auto;
font-size: 18px;
line-height: 1.6;
}
/* Beneficios de suscripción */
.newsletter-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-bottom: 20px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}

.benefit-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.08);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
}

.benefit-item:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
border-color: rgba(var(--blue-rgb), 0.3);
}

.benefit-item i {
font-size: 20px;
color: var(--primary);
width: 24px;
flex-shrink: 0;
}

.benefit-item span {
color: #fff;
font-weight: 600;
font-size: 14px;
}
/* Formulario con UX premium */
.newsletter-form {
max-width: 450px;
margin: 0 auto;
}

.newsletter-input-group {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding: 6px 6px 6px 18px;
border-radius: 999px;
background: rgba(10, 18, 40, 0.85);
box-shadow: 0 12px 36px rgba(var(--blue-rgb), 0.28);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.newsletter-input-group:focus-within {
transform: translateY(-2px);
box-shadow: 0 18px 48px rgba(var(--blue-rgb), 0.38);
}

.input-wrapper {
position: relative;
flex: 1;
display: flex;
align-items: center;
}

#newsletter-email {
width: 100%;
padding: 14px 48px 14px 12px;
border: none;
background: transparent;
color: #fff;
font-size: 16px;
font-weight: 500;
outline: none;
}

#newsletter-email::placeholder {
color: rgba(235, 244, 255, 0.55);
}

#newsletter-email:focus {
outline: none;
}

.input-wrapper i {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(235, 244, 255, 0.55);
pointer-events: none;
}
.btn-newsletter {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, var(--primary), var(--blue));
color: #fff;
padding: 14px 26px;
border: none;
border-radius: 999px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
position: relative;
overflow: hidden;
white-space: nowrap;
box-shadow: 0 6px 24px rgba(var(--blue-rgb), 0.35);
}

.btn-newsletter:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(var(--blue-rgb), 0.45);
}

.btn-newsletter:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 6px 24px rgba(var(--blue-rgb), 0.35);
}

.btn-newsletter:disabled {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}

.btn-newsletter.is-loading {
pointer-events: none;
}

.btn-newsletter.is-success {
animation: btnPulse 0.45s ease;
}

.btn-newsletter.is-error {
animation: btnShake 0.45s ease;
}

.btn-text[hidden],
.btn-loading[hidden] {
display: none !important;
}

.btn-loading {
display: none;
align-items: center;
gap: 8px;
}

.btn-newsletter .btn-loading:not([hidden]) {
display: inline-flex;
}

.btn-loading i {
animation: spin 1s linear infinite;
}
@keyframes btnPulse {
0% {
transform: scale(1);
box-shadow: 0 6px 24px rgba(var(--blue-rgb), 0.35);
}
40% {
transform: scale(1.05);
box-shadow: 0 16px 40px rgba(var(--blue-rgb), 0.5);
}
100% {
transform: scale(1);
box-shadow: 0 6px 24px rgba(var(--blue-rgb), 0.35);
}
}

@keyframes btnShake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-4px);
}
40% {
transform: translateX(4px);
}
60% {
transform: translateX(-3px);
}
80% {
transform: translateX(3px);
}
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}}
/* Checkbox de consentimiento */
.newsletter-consent {
margin-bottom: 24px;
text-align: left;
}

.consent-checkbox {
display: flex !important;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-size: 14px;
line-height: 1.4;
color: rgba(235, 244, 255, 0.9);
max-width: 400px;
margin-left: auto;
margin-right: auto;
}

.consent-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}

.checkmark {
position: relative;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
flex-shrink: 0;
transition: all 0.2s ease;
}

.consent-checkbox input:checked~.checkmark {
background: var(--primary);
border-color: var(--primary);
}

.consent-checkbox input:checked~.checkmark::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

/* Mensajes de feedback */
.form-messages {
text-align: center;
}

.form-success[hidden],
.form-error[hidden] {
display: none !important;
}

.form-messages [hidden] {
display: none !important;
}

.form-success {
color: #4CAF50;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
background: rgba(76, 175, 80, 0.1);
border: 1px solid rgba(76, 175, 80, 0.2);
border-radius: 8px;
margin-top: 20px;
}

.form-error {
color: #f44336;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
background: rgba(244, 67, 54, 0.1);
border: 1px solid rgba(244, 67, 54, 0.2);
border-radius: 8px;
margin-top: 20px;
}
.form-success i,
.form-error i {
font-size: 16px;
}

/* Responsive para móviles */
@media (max-width: 768px) {
#newsletter {
padding: 60px 0;
}

.newsletter-content {
grid-template-columns: 1fr;
gap: 24px;
}

.newsletter-input-group {
flex-direction: column;
align-items: stretch;
border-radius: 28px;
padding: 16px;
gap: 12px;
}

.newsletter-content h2 {
font-size: 28px;
}

.newsletter-content p {
font-size: 16px;
}

.newsletter-benefits {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 32px;
}

#newsletter-email {
padding: 16px 48px 16px 12px;
}

.btn-newsletter {
width: 100%;
}

.consent-checkbox {
text-align: center;
}
}
@media (max-width: 480px) {
.newsletter-benefits .benefit-item {
padding: 10px 14px;
}

.benefit-item span {
font-size: 13px;
}
}

/* =============================================================
14) Footer
-------------------------------------------------------------
Layout profesional: Newsletter arriba, 4 columnas principales,
y barra inferior con enlaces legales.
============================================================= */

/* Footer Base */
footer {
background: var(--bg);
border-top: 1px solid var(--border);
}

/* Newsletter Section (Top of Footer) */
.footer-newsletter {
background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.95), rgba(10, 18, 40, 0.98));
padding: 64px var(--gutter);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}

.footer-newsletter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 50%, rgba(var(--blue-rgb), 0.3), transparent 70%);
pointer-events: none;
}

.footer-newsletter-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
position: relative;
z-index: 1;
}

.footer-newsletter-text {
color: #fff;
}

.footer-newsletter-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.95);
}

.footer-newsletter-badge i {
font-size: 14px;
}

.footer-newsletter-text h2 {
color: #fff;
font-size: 32px;
font-weight: 700;
margin: 0 0 16px 0;
line-height: 1.2;
}

.footer-newsletter-text p {
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
line-height: 1.6;
margin: 0;
}

.footer-newsletter-form-area {
max-width: 500px;
}

.footer-newsletter .newsletter-benefits {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 24px;
}

.footer-newsletter .benefit-item {
background: rgba(10, 18, 40, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}

.footer-newsletter .benefit-item:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
border-color: rgba(var(--blue-rgb), 0.4);
}

.footer-newsletter .benefit-item i {
font-size: 18px;
color: var(--primary);
width: 20px;
flex-shrink: 0;
}

.footer-newsletter .benefit-item span {
color: #fff;
font-weight: 600;
font-size: 13px;
}

.footer-newsletter .newsletter-form {
max-width: 100%;
}

.footer-newsletter .newsletter-input-group {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding: 6px 6px 6px 18px;
border-radius: 999px;
background: rgba(10, 18, 40, 0.85);
box-shadow: 0 12px 36px rgba(var(--blue-rgb), 0.28);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.footer-newsletter .newsletter-input-group:focus-within {
transform: translateY(-2px);
box-shadow: 0 18px 48px rgba(var(--blue-rgb), 0.38);
}

.footer-newsletter .input-wrapper {
position: relative;
flex: 1;
display: flex;
align-items: center;
}

.footer-newsletter #newsletter-email {
width: 100%;
padding: 14px 48px 14px 12px;
border: none;
background: transparent;
color: #fff;
font-size: 16px;
font-weight: 500;
outline: none;
}

.footer-newsletter #newsletter-email::placeholder {
color: rgba(235, 244, 255, 0.55);
}

.footer-newsletter .input-wrapper i {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(235, 244, 255, 0.55);
pointer-events: none;
}

.footer-newsletter .consent-checkbox {
color: rgba(255, 255, 255, 0.9);
max-width: 100%;
margin: 0;
}

/* Main Footer (4 Columns) */
.footer-main {
padding: 60px var(--gutter) 40px;
background: var(--bg);
}

.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
gap: 40px;
max-width: var(--maxw);
margin: 0 auto;
}

.footer-column {
display: flex;
flex-direction: column;
}

/* Column 1: Brand */
.footer-brand {
max-width: 280px;
}

.footer-logo {
display: block;
margin-bottom: 16px;
transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-logo:hover {
opacity: 0.85;
transform: translateY(-2px);
}

.footer-slogan {
color: var(--primary);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 12px 0;
}

.footer-description {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
}

/* Column 2: Services */
.footer-services h3 {
color: var(--text);
font-size: 17px;
font-weight: 700;
margin: 0 0 16px 0;
letter-spacing: -0.3px;
}

.footer-services ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-services li {
margin-bottom: 10px;
}

.footer-services a {
color: var(--muted);
text-decoration: none;
font-size: 14px;
line-height: 1.5;
transition: all 0.2s ease;
display: inline-block;
}

.footer-services a:hover {
color: var(--primary);
transform: translateX(4px);
}

/* Column 3: Site Map */
.footer-sitemap h3 {
color: var(--text);
font-size: 17px;
font-weight: 700;
margin: 0 0 16px 0;
letter-spacing: -0.3px;
}

.footer-sitemap ul {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
}

.footer-sitemap li {
margin-bottom: 10px;
}

.footer-sitemap a {
color: var(--muted);
text-decoration: none;
font-size: 14px;
line-height: 1.5;
transition: all 0.2s ease;
display: inline-block;
}

.footer-sitemap a:hover {
color: var(--primary);
transform: translateX(4px);
}

/* Column 4: Contact & Social */
.footer-contact-social h3 {
color: var(--text);
font-size: 17px;
font-weight: 700;
margin: 0 0 16px 0;
letter-spacing: -0.3px;
}

.footer-contact-social .contact-list {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
}

.contact-list li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}

.contact-list i {
width: 18px;
text-align: left;
color: var(--primary);
flex-shrink: 0;
margin-top: 2px;
font-size: 15px;
}

.contact-list a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}

.contact-list a:hover {
color: var(--primary);
}

.contact-list span {
color: var(--muted);
}

.footer-contact-social .social-links {
display: flex;
gap: 10px;
margin-bottom: 24px;
flex-wrap: wrap;
}

.footer-contact-social .social-links a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--card);
border: 1px solid var(--border);
color: var(--muted);
text-decoration: none;
transition: all 0.3s ease;
font-size: 16px;
}

.footer-contact-social .social-links a:hover {
background: var(--primary);
color: #fff;
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.footer-contact-social .footer-certifications {
margin-bottom: 0;
}

.footer-certifications h3 {
color: var(--text);
font-size: 17px;
font-weight: 700;
margin: 0 0 12px 0;
letter-spacing: -0.3px;
}

.footer-cert-text {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
margin: 0;
}

/* Bottom Bar (Legal Links & Copyright) */
.footer-bottom-bar {
background: var(--card);
border-top: 1px solid var(--border);
padding: 20px var(--gutter);
}

.footer-bottom-content {
max-width: var(--maxw);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}

.footer-legal-links {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.footer-legal-links a {
color: var(--muted);
text-decoration: none;
font-size: 13px;
transition: color 0.2s ease;
}

.footer-legal-links a:hover {
color: var(--primary);
}

.footer-separator {
color: var(--border);
font-size: 13px;
}

.footer-copyright p {
color: var(--muted);
font-size: 13px;
margin: 0;
}

/* Responsive Footer */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}

.footer-brand {
max-width: 100%;
}
}

@media (max-width: 768px) {
.footer-newsletter {
padding: 48px var(--gutter);
}

.footer-newsletter-content {
grid-template-columns: 1fr;
gap: 32px;
}

.footer-newsletter-text h2 {
font-size: 28px;
}

.footer-newsletter .newsletter-benefits {
grid-template-columns: 1fr;
gap: 10px;
}

.footer-newsletter .newsletter-input-group {
flex-direction: column;
align-items: stretch;
border-radius: 28px;
padding: 16px;
gap: 12px;
}

.footer-newsletter .btn-newsletter {
width: 100%;
}

.footer-main {
padding: 48px var(--gutter) 32px;
}

.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}

.footer-brand {
max-width: 100%;
}

.footer-bottom-content {
flex-direction: column;
text-align: center;
}

.footer-legal-links {
justify-content: center;
}
}

@media (max-width: 480px) {
.footer-newsletter {
padding: 40px var(--gutter);
}

.footer-newsletter-text h2 {
font-size: 24px;
}

.footer-newsletter .benefit-item {
padding: 10px 14px;
}

.footer-newsletter .benefit-item span {
font-size: 12px;
}

.footer-main {
padding: 40px var(--gutter) 24px;
}

.footer-grid {
gap: 28px;
}

.footer-bottom-bar {
padding: 16px var(--gutter);
}

.footer-bottom-content {
gap: 12px;
}

.footer-legal-links {
flex-direction: column;
gap: 8px;
}

.footer-separator {
display: none;
}
}
/* =============================================================
14) Accesibilidad: estados de enfoque
-------------------------------------------------------------
Aumenta la visibilidad del foco para teclado/lectores de pantalla.
============================================================= */
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--focus);
/* Anillo evidente para navegación por teclado */
outline-offset: 2px;
/* Separación del borde del elemento */
}
/* =============================================================
15) Botones (comunes)
-------------------------------------------------------------
Botones con estados hover/focus consistentes y accesibles.
============================================================= */
.btn {
display: inline-block;
/* Permite padding y ancho natural */
padding: 12px 20px;
/* Área clicable grande */
border-radius: 12px;
/* Esquinas suaves */
text-decoration: none;
/* Sin subrayado */
border: 1px solid transparent;
/* Borde para animar sin layout shift */
transition: transform .08s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
/* Feedback */
font-weight: 600;
font-size: 16px;
line-height: 1.2;
/* Legibilidad */
cursor: pointer;
/* Indica clicable */
}

.btn:active {
transform: translateY(1px);
/* Click-in sutil */
}

.btn:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
/* Accesible */
}

.btn-primary {
background: var(--primary);
color: #fff;
/* Botón sólido de marca */
box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.25);
/* Elevación acorde a marca */
margin-top: 28px;
margin-bottom: 28px;
/* Espacio arriba/abajo como pidió el usuario */
}

.btn-primary:hover {
filter: brightness(0.95);
box-shadow: 0 12px 25px rgba(var(--primary-rgb), 0.30);
/* Hover más marcado */
}

.btn-secondary {
background: transparent;
/* Variante contorno */
border: 1px solid var(--border);
/* Delimitación sutil */
color: var(--text);
/* Texto legible */
margin-top: 28px;
margin-bottom: 28px;
/* Misma separación vertical */
}

.btn-secondary:hover {
background: var(--primary-10);
/* Fondo suave en hover */
}

.btn-terciary {
background: #4FCE5D;
/* Variante más sutil */
border: 1px solid var(--border);
/* Borde sutil */
color: var(--white);
/* Texto secundario */
border: 1px solid transparent;
/* Sin borde por defecto */
margin-top: 28px;
margin-bottom: 28px;
/* Espacio vertical consistente */
}
/* =============================================================
16) Breakpoints (mobile-first)
-------------------------------------------------------------
Ajustes progresivos para pantallas más pequeñas.
Nota: usamos max-width para "hacia abajo" y min-width cuando convenga.
============================================================= */
@media (max-width: 960px) {
.topbar-inner {
justify-content: center;
gap: 8px;
/* Centra topbar cuando hay menos ancho */
}

.header-inner {
gap: 8px;
/* Reduce separación en header */
}
}

@media (max-width: 860px) {
#intro .icons-intro {
gap: 18px;
flex-wrap: wrap;
row-gap: 10px;
/* Permite saltos a varias filas */
}

#intro .icon-item {
padding: 6px 10px;
/* Compacta tarjeta de icono */
}

#intro .icon-item img {
width: 36px;
height: 36px;
/* Iconos más pequeños en móviles */
}
}

@media (max-width: 640px) {
.logo {
padding: 8px 0;
/* Reduce padding del logo */
}

.main-nav a {
padding: 9px 10px;
/* Menú más compacto */
}

.hero--bg {
min-height: 64vh;
padding: 0 16px;
/* Hero más corto y con menos padding lateral */
}

#intro .hero-btns .btn {
width: 100%;
/* Botones apilados a ancho completo */
}

#destacados .cards {
grid-template-columns: 1fr;
/* Cards a una columna */
}

#blog-preview .posts {
grid-template-columns: 1fr;
/* Posts a una columna */
}
}

/* Adaptación de Why-cards en tablets y móviles */
@media (max-width: 1024px) {
#por-que-cybernox .why-cards {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 640px) {
#por-que-cybernox .why-cards {
grid-template-columns: 1fr;
} }
/* =============================================================
17) Servicio al Cliente: grid responsivo
-------------------------------------------------------------
Ajusta el grid de bloques de servicio al cliente en pantallas pequeñas.
============================================================= */
@media (max-width: 960px) {
.servicio-cliente-grid {
grid-template-columns: 1fr;
} }
/* =============================================================
18) Motion Safe (Reduce motion)
-------------------------------------------------------------
Respeta preferencias del usuario reduciendo transiciones/animaciones.
============================================================= */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
/* Evita mareos/fatiga visual */
}
}
/* =============================================================
19) WhatsApp flotating button
-------------------------------------------------------------
Estilos específicos para el boton de WhatsApp
============================================================= */
/* Botón flotante WhatsApp – versión “blindada” para móvil */
.wa-float {
position: fixed;
right: 16px;
/* evita vw/clamp en móviles con zoom */
bottom: max(16px, env(safe-area-inset-bottom, 0px));
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--wa-bg, #25D366);
color: var(--wa-fg, #fff);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--wa-shadow, 0 8px 24px rgba(0, 0, 0, .22));
/* Súper por encima de cualquier overlay/hero/header con z-index alto */
z-index: 2147483647;
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
-webkit-tap-highlight-color: transparent;
}

.wa-float:hover {
transform: translateY(-2px) scale(1.02);
}

.wa-float:active {
transform: translateY(0) scale(0.98);
}

.wa-float:focus-visible {
outline: 3px solid rgba(37, 211, 102, .35);
outline-offset: 3px;
}

.wa-float svg {
width: 58%;
height: 58%;
display: block;
fill: currentColor;
}

/* iOS antiguo (Safari pre-15) */
@supports (bottom: constant(safe-area-inset-bottom)) {
.wa-float {
bottom: calc(16px + constant(safe-area-inset-bottom));
}
}

/* No mostrar al imprimir */
@media print {
.wa-float {
display: none !important;
}
}

/* Ocultar botón flotante de WhatsApp cuando el menú móvil está abierto */
.cnx-drawer-root.is-open~.wa-float {
display: none !important;
}
/* =============================================================
MENÚ MÓVIL DESLIZANTE (CYBERNOX)
- Botón hamburguesa con morph a "X"
- Drawer 50% del viewport desde la derecha
- Overlay con blur en la mitad izquierda (cierra al hacer clic)
- Accesible y sin choque con otros elementos (prefijo .cnx-)
============================================================= */
/* Botón hamburguesa */
.cnx-burger {
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius);
color: var(--text);
cursor: pointer;
transition: background 240ms cubic-bezier(.2, .65, .3, 1), transform 120ms ease;
}

.cnx-burger:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}

.cnx-burger:hover {
background: rgba(0, 0, 0, .04);
}

@media (prefers-color-scheme: dark) {
.cnx-burger:hover {
background: rgba(255, 255, 255, .06);
}
}

.cnx-burger:active {
transform: scale(.98);
}

.cnx-burger-text {
font-weight: 700;
font-size: 14px;
color: var(--cnx-muted);
}

/* Ícono animado del botón */
.cnx-burger-icon {
position: relative;
width: 26px;
height: 18px;
}

.cnx-burger-icon span {
position: absolute;
left: 0;
right: 0;
height: 2px;
background: currentColor;
border-radius: 2px;
transform-origin: center;
transition: transform 240ms cubic-bezier(.2, .65, .3, 1),
opacity 240ms cubic-bezier(.2, .65, .3, 1),
top 240ms cubic-bezier(.2, .65, .3, 1);
}

.cnx-burger-icon span:nth-child(1) {
top: 0;
}

.cnx-burger-icon span:nth-child(2) {
top: 8px;
}

.cnx-burger-icon span:nth-child(3) {
top: 16px;
}

/* Estado abierto => morph a "X" */
.cnx-burger[aria-expanded="true"] .cnx-burger-icon span:nth-child(1) {
top: 8px;
transform: rotate(45deg);
}

.cnx-burger[aria-expanded="true"] .cnx-burger-icon span:nth-child(2) {
opacity: 0;
}

.cnx-burger[aria-expanded="true"] .cnx-burger-icon span:nth-child(3) {
top: 8px;
transform: rotate(-45deg);
}
/* Root del drawer + overlay */
.cnx-drawer-root {
position: fixed;
inset: 0;
z-index: 1000;
pointer-events: none;
}

/* Overlay con blur: ocupa la mitad izquierda */
.cnx-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 50vw;
background: rgba(0, 0, 0, .35);
backdrop-filter: blur(6px) saturate(120%);
-webkit-backdrop-filter: blur(6px) saturate(120%);
opacity: 0;
pointer-events: none;
transition: opacity 240ms cubic-bezier(.2, .65, .3, 1);
}

/* Panel deslizante: 50% del ancho desde la derecha */
.cnx-drawer {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: 50vw;
max-width: 520px;
min-width: 280px;
background:
radial-gradient(120% 120% at 100% -10%,
color-mix(in oklab, var(--primary) 18%, transparent) 0%, transparent 40%),
var(--card);
box-shadow: var(--shadow);
border-left: 1px solid var(--border);
transform: translateX(100%);
transition: transform 240ms cubic-bezier(.2, .65, .3, 1);
pointer-events: auto;
display: flex;
flex-direction: column;
gap: 8px;
}

/* Header interno del drawer */
.cnx-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
}

.cnx-drawer-title {
font-size: 14px;
letter-spacing: .3px;
color: var(--muted);
}

/* Navegación interna */
.cnx-nav {
display: flex;
flex-direction: column;
padding: 8px 10px 16px 10px;
}

.cnx-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
border-radius: 12px;
color: var(--text);
text-decoration: none;
font-weight: 600;
letter-spacing: .2px;
transition: background-color .2s ease, color .2s ease;
}

.cnx-nav a:hover {
background: var(--primary-10);
color: var(--text);
}

.cnx-nav a .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary);
opacity: .9;
}

/* Variante CTA también en el drawer */
.cnx-nav a.nav-cta {
background: linear-gradient(90deg, var(--blue), #00e5ff);
color: #fff;
border: 1px solid rgba(var(--primary-rgb), .35);
}

.cnx-nav a.nav-cta:hover {
filter: brightness(1.06);
}

/* Footer / CTA opcional */
.cnx-drawer-footer {
margin-top: auto;
padding: 14px 16px;
border-top: 1px solid var(--border);
}

.cnx-cta {
display: block;
text-align: center;
padding: 12px 14px;
border-radius: 12px;
background: var(--primary);
color: #fff;
font-weight: 800;
text-decoration: none;
box-shadow: 0 8px 20px rgba(var(--primary-rgb), .25);
}

.cnx-cta:hover {
filter: brightness(.97);
box-shadow: 0 10px 24px rgba(var(--primary-rgb), .30);
}

/* Variante rectangular de WhatsApp para el drawer */
.cnx-cta--wa {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #25D366;
color: #fff;
border: 1px solid #1DA851;
border-radius: 10px;
padding: 12px 14px;
font-weight: 800;
text-decoration: none;
box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.cnx-cta--wa:hover {
filter: brightness(1.03);
box-shadow: 0 12px 28px rgba(0, 0, 0, .20);
}

.cnx-cta--wa i {
font-size: 18px;
}

/* Estado ABIERTO */
.cnx-drawer-root.is-open {
pointer-events: auto;
}

.cnx-drawer-root.is-open .cnx-overlay {
opacity: 1;
pointer-events: auto;
}

.cnx-drawer-root.is-open .cnx-drawer {
transform: translateX(0);
}

/* Bloquear scroll del fondo cuando el menú está abierto */
.cnx-no-scroll {
overflow: hidden;
height: 100vh;
}
/* En escritorio ocultamos el botón (el drawer igual existe por accesibilidad) */
@media (min-width:1024px) {
.cnx-burger {
display: none;
}
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
.cnx-burger,
.cnx-overlay,
.cnx-drawer,
.cnx-burger-icon span {
transition: none !important;
}
}

/* === NAV: ocultar menú de escritorio en móvil/tablet === */
@media (max-width: 1024px) {
.main-nav {
display: none !important;
/* evita que reglas previas lo re-muestren */
}

/* Asegura una barra limpia: logo a la izquierda y burger visible a la derecha */
.header-inner {
align-items: center;
}
}

/* Header: orden y alineación en móvil/tablet */
@media (max-width: 1024px) {
.header-inner {
display: flex;
align-items: center;
}

.logo {
order: 1;
/* Izquierda */
}

.main-nav {
order: 2;
display: none !important;
/* Oculta menú de escritorio en móvil */
}

.cnx-burger {
order: 3;
margin-left: auto;
/* Empuja el botón a la derecha */
}
}

/* En escritorio ya ocultamos el burger desde el CSS del menú móvil */
@media (min-width: 1024px) {
.cnx-burger {
display: none;
}
}
/* =============================================================
ESTILOS ESPECÍFICOS PARA PÁGINA NOSOTROS
-------------------------------------------------------------
Hero futurista, elementos orbitales y elementos de confianza.
============================================================= */
/* Hero Nosotros: fondo oscuro ciberpunk con gradientes animados */
.hero-nosotros {
position: relative;
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #05070d 0%, #0b0f1a 50%, #1a1d2e 100%);
color: #fff;
}

.hero-nosotros::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 80%, var(--glow-primary), transparent 60%),
radial-gradient(circle at 80% 20%, rgba(var(--red-rgb), 0.08), transparent 60%),
linear-gradient(45deg, transparent 30%, rgba(100, 150, 255, 0.05) 50%, transparent 70%);
animation: nebula-shift 20s ease-in-out infinite alternate;
}

@keyframes nebula-shift {
0% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(1.1) rotate(2deg);
}
}

.hero-nosotros__content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
min-width: 0;
/* Asegura que no se desborde */
}

.hero-nosotros__eyebrow {
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--accent-primary);
margin-bottom: 12px;
}

.hero-nosotros__title {
font-family: 'Orbitron', 'Audiowide', var(--font-sans);
font-size: clamp(48px, 8vw, 72px);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.02em;
margin: 0 0 20px 0;
color: #fff;
}

.hero-nosotros__sub {
font-size: clamp(18px, 2.5vw, 24px);
line-height: 1.4;
margin: 0 0 32px 0;
color: rgba(245, 248, 255, 0.9);
}

.hero-nosotros__highlights {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}

.highlight-item {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(var(--blue-rgb), 0.3);
border-radius: 24px;
padding: 12px 20px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}

.highlight-item:hover {
background: rgba(0, 229, 255, 0.15);
border-color: var(--accent-primary);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 229, 255, 0.3);
}

.highlight-item i {
font-size: 18px;
color: var(--accent-primary);
}

.highlight-item span {
font-weight: 600;
color: #fff;
}

.hero-nosotros__visual {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}

/* Orbital Ring: animación de electrones orbitando */
.orbital-ring {
position: relative;
width: 200px;
height: 200px;
}

.orbital-ring::before,
.orbital-ring::after {
content: '';
position: absolute;
border-radius: 50%;
border: 1px solid var(--accent-primary);
animation: orbit 10s linear infinite;
}

.orbital-ring::before {
top: 10px;
left: 10px;
width: 180px;
height: 180px;
border: 2px solid rgba(0, 229, 255, 0.6);
animation-duration: 15s;
}

.orbital-ring::after {
top: 20px;
left: 20px;
width: 160px;
height: 160px;
border: 1px solid rgba(255, 0, 51, 0.4);
animation-duration: 8s;
animation-direction: reverse;
}

@keyframes orbit {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.center-core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--neon-cyan), rgba(255, 0, 51, 0.5));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
animation: pulse-core 3s ease-in-out infinite;
}

.center-core i {
font-size: 24px;
color: #fff;
}

@keyframes pulse-core {
0%,
100% {
box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
}
50% {
box-shadow: 0 0 60px rgba(0, 229, 255, 0.9);
}
}

/* Futuristic sections */
.futuristic {
position: relative;
background: linear-gradient(135deg, rgba(5, 7, 13, 0.95), rgba(11, 15, 26, 0.95));
}

.futuristic::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 70%, rgba(0, 229, 255, 0.03), transparent 70%);
pointer-events: none;
}

.about-section {
padding: 80px 0;
color: #fff;
position: relative;
z-index: 1;
}

.about-section h2 {
font-size: clamp(36px, 5vw, 48px);
font-weight: 800;
margin-bottom: 20px;
color: #fff;
text-align: center;
}

.about-section p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 16px;
}

.about-section strong {
color: var(--accent-primary);
}

/* Trust badges */
.trust-badges {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
justify-content: center;
}

.badge {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(0, 229, 255, 0.3);
border-radius: 20px;
padding: 12px 18px;
backdrop-filter: blur(10px);
color: #fff;
transition: all 0.3s ease;
}

.badge:hover {
background: rgba(0, 229, 255, 0.1);
border-color: var(--neon-cyan);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 229, 255, 0.3);
}

.badge i {
color: var(--neon-cyan);
font-size: 16px;
}

.futuristic-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

.futuristic-visual img {
border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 229, 255, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.futuristic-visual:hover img {
transform: scale(1.05);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 229, 255, 0.4);
}

/* Futuristic Core (Misión-Visión-Valores) */
.futuristic-core {
background: linear-gradient(135deg, rgba(5, 7, 13, 0.98), rgba(11, 15, 26, 0.98));
border-top: 1px solid rgba(0, 229, 255, 0.2);
border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}

.futuristic-core h2 {
text-align: center;
color: #fff;
font-weight: 800;
font-size: clamp(32px, 4vw, 44px);
}

.futuristic-mission,
.futuristic-vision,
.futuristic-values {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(0, 229, 255, 0.2);
transition: all 0.3s ease;
}

.futuristic-mission:hover {
border-color: var(--neon-cyan);
box-shadow: 0 0 30px rgba(0, 229, 255, 0.3);
}

.futuristic-vision:hover {
border-color: rgba(255, 0, 51, 0.5);
box-shadow: 0 0 30px rgba(255, 0, 51, 0.3);
}

.futuristic-values:hover {
border-color: var(--neon-purple);
box-shadow: 0 0 30px rgba(124, 58, 237, 0.3);
}

.futuristic-core h3 {
color: var(--neon-cyan);
font-size: 24px;
font-weight: 700;
margin-bottom: 16px;
}

.futuristic-core p {
color: rgba(245, 248, 255, 0.9);
line-height: 1.6;
}

.futuristic-core strong {
color: var(--neon-cyan);
}
/* Responsive para hero nosotros */
@media (max-width: 960px) {
.hero-nosotros__content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}

.hero-nosotros__visual {
order: -1;
min-height: 250px;
}
}

@media (max-width: 640px) {
.hero-nosotros__highlights {
flex-direction: column;
align-items: center;
}

.trust-badges {
flex-direction: column;
align-items: center;
}

.orbital-ring {
width: 150px;
height: 150px;
}

.center-core {
width: 50px;
height: 50px;
}

.center-core i {
font-size: 20px;
} }
/* =============================================================
ESTILOS PARA SECCIONES ADICIONALES DE LA PÁGINA NOSOTROS
------------------------------------------------------------ */
/* --- ¿Por Qué CYBERNOX? Section --- */
.why-section {
background: var(--bg);
padding: 80px 0;
position: relative;
}

.why-header {
text-align: center;
margin-bottom: 60px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.why-header h2 {
font-size: clamp(36px, 5vw, 48px);
font-weight: 800;
color: var(--text);
margin-bottom: 16px;
}

.why-header p {
font-size: 18px;
color: var(--muted);
line-height: 1.6;
}

.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin-bottom: 60px;
}

.why-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px 30px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.why-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-red));
opacity: 0;
transition: opacity 0.3s ease;
}

.why-card:hover::before {
opacity: 1;
}

.why-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(var(--primary-rgb), 0.1);
border-color: var(--accent-primary);
}

.why-visual {
margin-bottom: 24px;
}

.why-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--glow-primary), rgba(var(--blue-rgb), 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.3s ease;
position: relative;
}

.why-card:hover .why-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 20px rgba(var(--blue-rgb), 0.2);
}

.why-icon i {
font-size: 32px;
color: var(--accent-primary);
}

.why-content h3 {
font-size: 24px;
font-weight: 700;
color: var(--text);
margin-bottom: 16px;
}

.why-content p {
color: var(--muted);
line-height: 1.6;
margin: 0;
}

.why-cta {
text-align: center;
background: var(--card);
border-radius: var(--radius);
padding: 40px;
border: 1px solid var(--border);
}

.why-cta p {
font-size: 18px;
font-weight: 600;
color: var(--text);
margin-bottom: 30px;
}

.why-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 30px;
max-width: 600px;
margin: 0 auto;
}

.stat {
text-align: center;
font-size: 36px;
font-weight: 900;
color: var(--accent-primary);
display: block;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.1);
}

.stat-label {
font-size: 14px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
/* --- Team Section --- */
.team-section {
background: linear-gradient(135deg, rgba(5, 7, 13, 0.98), rgba(11, 15, 26, 0.98));
padding: 80px 0;
}

.team-header {
text-align: center;
margin-bottom: 60px;
}

.team-header h2 {
font-size: clamp(36px, 5vw, 48px);
font-weight: 800;
color: #fff;
margin-bottom: 16px;
}

.team-header p {
font-size: 18px;
color: rgba(245, 248, 255, 0.8);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}

.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
}

.team-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius);
overflow: hidden;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}

.team-card:hover {
transform: translateY(-5px);
border-color: var(--accent-primary);
box-shadow: 0 20px 40px rgba(var(--primary-rgb), 0.15);
}

.team-visual {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}

.team-visual img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.team-card:hover img {
transform: scale(1.05);
}

.team-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.6), rgba(255, 0, 51, 0.6));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}

.team-card:hover .team-overlay {
opacity: 1;
}

.team-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}

.team-icon i {
font-size: 24px;
color: #fff;
}

.team-content {
padding: 32px 24px;
}

.team-content h3 {
font-size: 24px;
font-weight: 700;
color: #fff;
margin-bottom: 16px;
text-align: center;
}

.team-content p {
color: rgba(245, 248, 255, 0.9);
line-height: 1.6;
margin-bottom: 20px;
text-align: center;
}

.team-skills {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}

.team-skills li {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 8px 12px;
text-align: center;
color: rgba(245, 248, 255, 0.9);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}

.team-skills li:hover {
background: var(--accent-primary);
transform: translateY(-1px);
}
/* --- Methodology Section --- */
.methodology-section {
padding: 80px 0;
background: var(--bg);
position: relative;
}

.methodology-header {
text-align: center;
margin-bottom: 60px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.methodology-header h2 {
font-size: clamp(36px, 5vw, 48px);
font-weight: 800;
color: var(--text);
margin-bottom: 16px;
}

.methodology-header p {
font-size: 18px;
color: var(--muted);
line-height: 1.6;
}

.methodology-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: stretch;
margin-bottom: 60px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}

.step-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px 24px;
text-align: center;
transition: all 0.3s ease;
position: relative;
}

.step-card.active {
background: linear-gradient(135deg, var(--glow-primary), rgba(var(--blue-rgb), 0.02));
border-color: var(--accent-primary);
box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.1);
}

.step-card.active::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid var(--accent-primary);
}

.step-number {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: var(--accent-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
font-weight: 900;
border: 4px solid var(--bg);
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.step-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--glow-primary), rgba(var(--blue-rgb), 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.3s ease;
}

.step-card:hover .step-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 20px rgba(var(--blue-rgb), 0.2);
}

.step-icon i {
font-size: 28px;
color: var(--accent-primary);
}

.step-card h3 {
font-size: 20px;
font-weight: 700;
color: var(--text);
margin-bottom: 16px;
}

.step-card p {
color: var(--muted);
line-height: 1.6;
margin-bottom: 20px;
}

.step-details {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}

.step-details li {
color: var(--muted);
font-size: 13px;
margin-bottom: 6px;
position: relative;
padding-left: 20px;
}

.step-details li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent-primary);
font-size: 12px;
}

.methodology-cta {
text-align: center;
background: linear-gradient(135deg, var(--glow-primary), rgba(var(--blue-rgb), 0.02));
border-radius: var(--radius);
padding: 40px;
border: 1px solid var(--accent-primary);
}

.methodology-cta p {
font-size: 18px;
color: var(--text);
margin-bottom: 30px;
}

.methodology-cta .hero-btns {
justify-content: center;
}
/* --- CONTACTO PROFESIONAL Section --- */
.contact-professional-section {
padding: 80px 0;
background: linear-gradient(135deg, rgba(5, 7, 13, 0.98), rgba(11, 15, 26, 0.98));
position: relative;
border-top: 1px solid rgba(var(--primary-rgb), 0.2);
}

.contact-professional-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 70%, rgba(var(--blue-rgb), 0.05), transparent 50%),
radial-gradient(circle at 80% 30%, rgba(255, 0, 51, 0.05), transparent 50%);
pointer-events: none;
}

.contact-professional-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}

.contact-professional-content h2 {
font-size: clamp(36px, 6vw, 50px);
font-weight: 800;
color: #fff;
margin-bottom: 16px;
font-family: 'Orbitron', 'Audiowide', var(--font-sans);
letter-spacing: -0.02em;
}

.contact-professional-sub {
font-size: 18px;
color: rgba(245, 248, 255, 0.9);
line-height: 1.6;
margin-bottom: 32px;
}

.contact-professional-process {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 40px;
}

.process-step {
display: grid;
grid-template-columns: 60px 1fr;
gap: 16px;
align-items: center;
}

.process-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.9), rgba(var(--blue-rgb), 0.6));
border: 2px solid rgba(var(--primary-rgb), 0.3);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
transition: all 0.3s ease;
}

.contact-professional-actions {
display: flex;
flex-direction: column;
gap: 24px;
}

.btn-contact-primary {
background: linear-gradient(135deg, var(--blue), rgba(0, 229, 255, 0.8));
color: #fff;
padding: 16px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid rgba(var(--blue-rgb), 0.4);
box-shadow: 0 6px 20px rgba(var(--blue-rgb), 0.3);
transition: all 0.3s ease;
}

.btn-contact-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(var(--blue-rgb), 0.4);
}

.contact-info {
display: flex;
flex-direction: column;
gap: 8px;
}

.contact-detail {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
color: rgba(245, 248, 255, 0.9);
font-weight: 500;
}

.contact-detail i {
color: var(--accent-primary);
font-size: 16px;
width: 20px;
text-align: center;
}

.contact-professional-sidebar {
display: flex;
flex-direction: column;
gap: 32px;
}

.contact-professional-contact h3 {
font-size: 20px;
font-weight: 700;
color: #fff;
margin-bottom: 16px;
}

.contact-professional-contact p {
color: rgba(245, 248, 255, 0.9);
margin-bottom: 20px;
line-height: 1.6;
}

.contact-methods {
display: flex;
flex-direction: column;
gap: 16px;
}

.contact-method {
display: flex;
align-items: flex-start;
gap: 12px;
color: rgba(245, 248, 255, 0.9);
line-height: 1.5;
}

.contact-method strong {
color: #fff;
display: block;
font-size: 16px;
}

.contact-method span {
color: rgba(245, 248, 255, 0.7);
font-size: 14px;
}

.contact-method i {
font-size: 16px;
color: var(--accent-primary);
margin-top: 2px;
width: 18px;
text-align: center;
}
/* Responsive for contact professional section */
@media (max-width: 1024px) {
.contact-professional-grid {
gap: 40px;
}
}

@media (max-width: 768px) {
.contact-professional-grid {
grid-template-columns: 1fr;
gap: 32px;
}

.contact-professional-section {
padding: 60px 0;
}

.contact-infographic {
grid-template-columns: 1fr;
gap: 16px;
max-width: none;
}

.infographic-stat {
padding: 16px;
font-size: 28px;
}

.contact-professional-actions {
flex-direction: column;
}

.contact-info {
gap: 16px;
}
}

/* Responsive breakpoints for new sections */
@media (max-width: 1024px) {
/* Methodology Section */
.methodology-steps {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}

/* Why Section */
.why-grid {
gap: 30px;
}
}

@media (max-width: 768px) {
/* Why Section */
.why-section {
padding: 60px 0;
}

.why-grid {
grid-template-columns: 1fr;
gap: 30px;
}

.why-stats {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
text-align: center;
}

/* Team Section */
.team-section {
padding: 60px 0;
}

.team-grid {
gap: 30px;
}

.team-content h3 {
font-size: 22px;
}

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

/* Methodology Section */
.methodology-section {
padding: 60px 0;
}

.methodology-steps {
grid-template-columns: 1fr;
gap: 60px;
}

/* CTA Section */
.cta-section .cta-background {
padding: 60px 0;
}

.cta-actions {
flex-direction: column;
align-items: center;
}

.btn-cta-primary,
.btn-cta-secondary {
width: 100%;
max-width: 300px;
justify-content: center;
}

.cta-benefits {
grid-template-columns: 1fr;
gap: 20px;
}
}

@media (max-width: 480px) {
/* Why Section */
.why-stats {
grid-template-columns: 1fr;
gap: 15px;
}

.why-card {
padding: 30px 20px;
}

.why-icon {
width: 70px;
height: 70px;
}

.why-icon i {
font-size: 28px;
}

/* Team Section */
.team-skills {
grid-template-columns: 1fr;
}

.team-content h3 {
font-size: 20px;
}

/* Methodology Section */
.step-card {
padding: 30px 20px;
}

.step-number {
width: 35px;
height: 35px;
font-size: 16px;
}

.step-icon {
width: 60px;
height: 60px;
}

.step-icon i {
font-size: 24px;
}
}
/* =============================================================
20) Hero Seguridad Integral
-------------------------------------------------------------
Hero principal orientado a soluciones de seguridad física y
digital, con imagen contextual y métricas destacadas.
============================================================= */
.hero-security {
position: relative;
display: flex;
align-items: center;
min-height: 82vh;
color: #f5f8ff;
background: #05070d;
overflow: hidden;
}

.hero-security__media {
position: absolute;
inset: 0;
z-index: 0;
}

.hero-security__media picture,
.hero-security__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(110%);
}

.hero-security__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(115deg, rgba(5, 8, 15, 0.92) 0%, rgba(5, 8, 15, 0.86) 32%, rgba(5, 8, 15, 0.6) 68%, rgba(5, 8, 15, 0.4) 100%);
}

.hero-security__content {
position: relative;
z-index: 2;
display: grid;
gap: 40px;
grid-template-columns: minmax(0, 1fr);
align-items: center;
padding: 96px clamp(48px, 8vw, 96px);
max-width: var(--maxw);
margin-inline: auto;
}

.hero-security__copy {
max-width: 640px;
}

.hero-eyebrow {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
margin: 0 0 20px 0;
color: var(--neon-cyan, #2dd4ff);
}

.hero-security .hero-title {
font-family: 'Orbitron', 'Audiowide', var(--font-sans);
font-weight: 800;
text-transform: none;
font-size: clamp(44px, 7vw, 88px);
line-height: 0.95;
margin: 0 0 16px 0;
letter-spacing: -0.02em;
color: #fff;
text-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.hero-security .hero-sub {
margin: 0 0 28px 0;
font-size: clamp(18px, 2.6vw, 22px);
color: rgba(235, 244, 255, 0.9);
max-width: 520px;
}

.hero-security__list {
list-style: none;
margin: 0 0 32px 0;
padding: 0;
display: grid;
gap: 14px;
}

.hero-security__list li {
display: grid;
grid-template-columns: 16px 1fr;
gap: 12px;
font-size: 17px;
line-height: 1.5;
color: rgba(230, 240, 252, 0.92);
}

.hero-security__list li::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--neon-purple, #7c3aed);
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.26);
margin-top: 7px;
}

.hero-security .hero-btns {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.hero-security .btn-primary {
box-shadow: 0 14px 36px rgba(0, 229, 255, 0.22);
}

.hero-security__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 28px;
margin-top: clamp(28px, 5vw, 40px);
padding: 28px 40px;
border-radius: 24px;
background: rgba(6, 10, 20, 0.82);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
width: min(100%, 900px);
justify-self: start;
align-self: start;
}

.hero-security__metrics .metric {
position: relative;
width: 100%;
min-width: 0;
text-align: center;
padding: 20px 22px 24px;
border-radius: 20px;
background:
radial-gradient(120% 110% at 50% 0%, rgba(37, 53, 87, 0.18), transparent 70%),
linear-gradient(170deg, rgba(10, 14, 26, 0.92), rgba(7, 10, 20, 0.88));
border: 1px solid rgba(94, 138, 196, 0.22);
box-shadow: inset 0 -8px 20px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(4, 9, 18, 0.48);
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: space-between;
opacity: 1;
transform: none;
transition: opacity .6s ease, transform .6s ease;
transition-delay: calc(var(--metric-delay, 0) * .12s);
}

.hero-security__metrics.is-animating .metric {
opacity: 0;
transform: translateY(18px);
}

.hero-security__metrics.is-visible .metric {
opacity: 1;
transform: translateY(0);
}

.hero-security__metrics .metric:nth-child(1) {
--metric-delay: 0;
}

.hero-security__metrics .metric:nth-child(2) {
--metric-delay: 1;
}

.hero-security__metrics .metric:nth-child(3) {
--metric-delay: 2;
}

.hero-security__metrics .metric-counter {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 8px;
}

.hero-security__metrics .metric-value {
display: flex;
gap: 4px;
font-family: 'Orbitron', 'Audiowide', var(--font-sans);
font-size: clamp(22px, 3.6vw, 30px);
letter-spacing: 0.12em;
text-transform: uppercase;
color: #f7fbff;
}

.hero-security__metrics .metric-digit {
display: flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 6px 5px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(25, 31, 49, 0.92), rgba(10, 15, 24, 0.85));
border: 1px solid rgba(89, 131, 196, 0.32);
box-shadow: inset 0 -3px 9px rgba(0, 0, 0, 0.5), 0 8px 18px rgba(6, 12, 24, 0.4);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
transition: transform .18s ease, box-shadow .18s ease;
}

.hero-security__metrics .metric-digit.is-symbol {
min-width: 18px;
}

.hero-security__metrics .metric-digit.is-divider {
min-width: 16px;
padding: 0 2px;
background: transparent;
border: 0;
box-shadow: none;
text-shadow: none;
}

.hero-security__metrics .metric-digit.is-space {
min-width: 8px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}

.hero-security__metrics .metric-digit.is-rolling {
box-shadow: inset 0 -2px 12px rgba(0, 229, 255, 0.3), 0 0 12px rgba(52, 226, 255, 0.22);
transform: translateY(-2px) rotate(var(--tilt, 0deg));
}

.hero-security__metrics .metric-note {
font-size: clamp(11px, 2.4vw, 12px);
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(184, 208, 233, 0.76);
align-self: flex-end;
padding-bottom: 4px;
}

.hero-security__metrics .metric-label {
display: block;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(205, 222, 245, 0.78);
max-width: 200px;
}
@media (max-width: 1024px) {
.hero-security__content {
grid-template-columns: 1fr;
gap: 48px;
padding: 88px clamp(32px, 6vw, 52px) 72px;
}

.hero-security__metrics {
justify-self: center;
width: min(100%, 620px);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 22px;
padding: 24px 28px;
}
}

@media (max-width: 768px) {
.hero-security {
min-height: 72vh;
}

.hero-security__overlay {
background: linear-gradient(130deg, rgba(5, 8, 15, 0.94) 0%, rgba(5, 8, 15, 0.88) 45%, rgba(5, 8, 15, 0.72) 100%);
}

.hero-security__metrics {
justify-self: center;
width: min(100%, 440px);
grid-template-columns: 1fr;
gap: 18px;
padding: 24px;
}

.hero-security__list {
gap: 12px;
}

.hero-security__copy {
margin-inline: auto;
}
}

@media (max-width: 520px) {
.hero-security .hero-btns {
flex-wrap: nowrap;
width: 100%;
justify-content: center;
gap: 10px;
}

.hero-security .hero-btns .btn {
flex: 1 1 auto;
min-width: 0;
}

#intro .hero-btns {
flex-wrap: nowrap;
width: 100%;
justify-content: center;
gap: 10px;
}

#intro .hero-btns .btn {
flex: 1 1 auto;
min-width: 0;
width: auto;
}

.hero-security .hero-title {
font-size: clamp(38px, 11vw, 54px);
}

.hero-security__list li {
grid-template-columns: 12px 1fr;
font-size: 16px;
}

.hero-security__content {
padding: 72px clamp(28px, 9vw, 42px) 64px;
}
}

@media (max-width: 640px) {
#intro {
padding-inline: clamp(28px, 10vw, 40px);
}
}

@media (prefers-reduced-motion: reduce) {
.hero-security__metrics .metric,
.hero-security__metrics.is-animating .metric,
.hero-security__metrics.is-visible .metric {
transition: none;
opacity: 1;
transform: none;
}
}

/* =============================================================
Hero Futurista Metrics
-------------------------------------------------------------
Copy of security metrics styles for futuristic hero.
============================================================= */
.hero-futuristic__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 28px;
margin-top: clamp(28px, 5vw, 40px);
padding: 28px 40px;
border-radius: 24px;
background: rgba(6, 10, 20, 0.82);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
width: min(100%, 900px);
justify-self: start;
align-self: start;
}

.hero-futuristic__metrics .metric {
position: relative;
width: 100%;
min-width: 0;
text-align: center;
padding: 20px 22px 24px;
border-radius: 20px;
background:
radial-gradient(120% 110% at 50% 0%, rgba(37, 53, 87, 0.18), transparent 70%),
linear-gradient(170deg, rgba(10, 14, 26, 0.92), rgba(7, 10, 20, 0.88));
border: 1px solid rgba(94, 138, 196, 0.22);
box-shadow: inset 0 -8px 20px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(4, 9, 18, 0.48);
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: space-between;
opacity: 1;
transform: none;
transition: opacity .6s ease, transform .6s ease;
transition-delay: calc(var(--metric-delay, 0) * .12s);
}

.hero-futuristic__metrics.is-animating .metric {
opacity: 0;
transform: translateY(18px);
}

.hero-futuristic__metrics.is-visible .metric {
opacity: 1;
transform: translateY(0);
}

.hero-futuristic__metrics .metric:nth-child(1) {
--metric-delay: 0;
}

.hero-futuristic__metrics .metric:nth-child(2) {
--metric-delay: 1;
}

.hero-futuristic__metrics .metric:nth-child(3) {
--metric-delay: 2;
}

.hero-futuristic__metrics .metric-counter {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 8px;
}

.hero-futuristic__metrics .metric-value {
display: flex;
gap: 4px;
font-family: 'Orbitron', 'Audiowide', var(--font-sans);
font-size: clamp(22px, 3.6vw, 30px);
letter-spacing: 0.12em;
text-transform: uppercase;
color: #f7fbff;
}

.hero-futuristic__metrics .metric-digit {
display: flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 6px 5px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(25, 31, 49, 0.92), rgba(10, 15, 24, 0.85));
border: 1px solid rgba(89, 131, 196, 0.32);
box-shadow: inset 0 -3px 9px rgba(0, 0, 0, 0.5), 0 8px 18px rgba(6, 12, 24, 0.4);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
transition: transform .18s ease, box-shadow .18s ease;
}

.hero-futuristic__metrics .metric-digit.is-symbol {
min-width: 18px;
}

.hero-futuristic__metrics .metric-digit.is-divider {
min-width: 16px;
padding: 0 2px;
background: transparent;
border: 0;
box-shadow: none;
text-shadow: none;
}

.hero-futuristic__metrics .metric-digit.is-space {
min-width: 8px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}

.hero-futuristic__metrics .metric-digit.is-rolling {
box-shadow: inset 0 -2px 12px rgba(0, 229, 255, 0.3), 0 0 12px rgba(52, 226, 255, 0.22);
transform: translateY(-2px) rotate(var(--tilt, 0deg));
}

.hero-futuristic__metrics .metric-note {
font-size: clamp(11px, 2.4vw, 12px);
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(184, 208, 233, 0.76);
align-self: flex-end;
padding-bottom: 4px;
}

.hero-futuristic__metrics .metric-label {
display: block;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(205, 222, 245, 0.78);
max-width: 200px;
}

@media (max-width: 1024px) {
.hero-futuristic__metrics {
justify-self: center;
width: min(100%, 620px);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 22px;
padding: 24px 28px;
}
}

@media (max-width: 768px) {
.hero-futuristic__metrics {
justify-self: center;
width: min(100%, 440px);
grid-template-columns: 1fr;
gap: 18px;
padding: 24px;
}
}

@media (prefers-reduced-motion: reduce) {
.hero-futuristic__metrics .metric,
.hero-futuristic__metrics.is-animating .metric,
.hero-futuristic__metrics.is-visible .metric {
transition: none;
opacity: 1;
transform: none;
}
}
/* =============================================================
22) Hero Seguridad Integral
-------------------------------------------------------------
Nuevo hero enfocado en seguridad para hogares y pymes con
diseño profesional, innovación y equilibrio entre físicas y digital.
============================================================= */
.hero-integral-security {
position: relative;
display: flex;
align-items: center;
min-height: 50vh;
color: #fff;
background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #415a77 100%);
overflow: hidden;
font-family: 'Orbitron', 'Audiowide', var(--font-sans);
}

.hero-integral-security__background {
position: absolute;
inset: 0;
z-index: 0;
}

.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(13, 27, 42, 0.9) 0%,
rgba(27, 38, 59, 0.7) 50%,
rgba(65, 90, 119, 0.4) 100%);
z-index: 1;
}

.security-patterns {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0.05;
background-image:
radial-gradient(circle at 25% 25%, #0a84ff 2px, transparent 2px),
radial-gradient(circle at 75% 75%, #00e5ff 1px, transparent 1px);
background-size: 40px 40px, 60px 60px;
background-position: 0 0, 20px 20px;
}

.hero-integral-security__content {
position: relative;
z-index: 2;
display: grid;
gap: 32px;
align-items: start;
max-width: var(--maxw);
margin: 0 auto;
padding: 96px clamp(48px, 8vw, 96px);
}

.hero-integral-security__header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}

.hero-integral-security__copy {
max-width: 650px;
}

/* Responsive for the two-column layout in header */
@media (max-width: 1024px) {
.hero-integral-security__header {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}

.security-icons-grid {
max-width: none;
grid-template-columns: repeat(4, 1fr);
}
}

.hero-integral-security__main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}

.hero-integral-security__copy {
max-width: 580px;
}

.integral-security-eye {
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(10, 132, 255, 0.9);
margin-bottom: 20px;
text-shadow: 0 0 8px rgba(10, 132, 255, 0.5);
}

.integral-security-title {
font-size: clamp(44px, 6vw, 72px);
font-weight: 900;
line-height: 0.95;
margin: 0 0 20px 0;
color: #ffffff;
text-shadow:
0 2px 6px rgba(0, 0, 0, 0.8),
0 0 25px rgba(10, 132, 255, 0.7),
0 0 50px rgba(10, 132, 255, 0.4),
0 -1px 2px rgba(0, 0, 0, 0.5),
0 0 0 2px rgba(10, 132, 255, 0.2);
-webkit-text-stroke: 1px rgba(10, 132, 255, 0.3);
}

.highlight {
background: linear-gradient(90deg, #0a84ff, #00e5ff);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
}

.integral-security-sub {
font-size: clamp(18px, 2.2vw, 22px);
line-height: 1.4;
margin: 0 0 32px 0;
color: rgba(230, 244, 255, 0.9);
font-family: var(--font-sans);
}

.hero-features {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 24px;
}

.feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: border-color 0.3s ease;
}

.feature-item:hover {
border-color: rgba(10, 132, 255, 0.5);
}

.feature-item i {
font-size: 20px;
color: #0a84ff;
width: 24px;
flex-shrink: 0;
}

.feature-item span {
color: #fff;
font-weight: 600;
font-size: 15px;
}

.hero-integral-security__visual {
display: flex;
align-items: center;
justify-content: center;
}

.security-icons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 400px;
}

.security-icon-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}

.security-icon-item:hover {
background: rgba(10, 132, 255, 0.1);
border-color: rgba(10, 132, 255, 0.3);
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(10, 132, 255, 0.2);
}

.icon-circle {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(10, 132, 255, 0.2), rgba(10, 132, 255, 0.4));
display: flex;
align-items: center;
justify-content: center;
color: #0a84ff;
font-size: 24px;
transition: all 0.3s ease;
}

.security-icon-item:hover .icon-circle {
background: linear-gradient(135deg, rgba(10, 132, 255, 0.4), rgba(10, 132, 255, 0.6));
transform: scale(1.1);
}

.security-icon-item span {
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.hero-integral-security__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 32px 0;
}

.stat-item {
text-align: center;
padding: 16px;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
}

.stat-item:hover {
background: rgba(10, 132, 255, 0.05);
border-color: rgba(10, 132, 255, 0.2);
transform: translateY(-2px);
}

.stat-value {
display: block;
font-size: clamp(28px, 4vw, 36px);
font-weight: 900;
color: #fff;
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.stat-label {
font-size: 13px;
color: rgba(230, 244, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}

.hero-integral-security__actions {
text-align: center;
}

.integral-security-btns {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}

.integral-security-btns .btn-primary {
background: linear-gradient(135deg, #0a84ff, #007aff);
box-shadow: 0 8px 24px rgba(10, 132, 255, 0.3);
}

.integral-security-btns .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(10, 132, 255, 0.4);
}

.integral-security-btns .btn-secondary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
backdrop-filter: blur(10px);
}

.integral-security-btns .btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
/* Responsive Design */
@media (max-width: 1200px) {
.hero-integral-security__header {
gap: 48px;
}

.hero-integral-security__copy {
max-width: 600px;
}
}

@media (max-width: 1024px) {
.hero-integral-security__header {
grid-template-columns: 1fr;
gap: 48px;
}

.hero-integral-security__content {
gap: 48px;
}

.hero-integral-security__stats {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}

@media (max-width: 768px) {
.hero-integral-security {
min-height: 90vh;
}

.hero-integral-security__content {
gap: 40px;
padding: 72px clamp(20px, 6vw, 32px);
}

.integral-security-eye {
margin-bottom: 16px;
font-size: 11px;
letter-spacing: 1px;
}

.integral-security-title {
font-size: clamp(28px, 11vw, 44px);
line-height: 1;
margin-bottom: 16px;
}

.integral-security-sub {
font-size: 16px;
line-height: 1.5;
margin-bottom: 0;
}

.security-icons-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 32px;
}

.security-icon-item {
padding: 16px 12px;
}

.security-icon-item span {
font-size: 11px;
line-height: 1.2;
}

.icon-circle {
width: 48px;
height: 48px;
font-size: 18px;
}

.hero-integral-security__stats {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 32px 0;
}

.stat-item {
padding: 16px 12px;
}

.stat-value {
font-size: 24px;
}

.stat-label {
font-size: 12px;
}
}

@media (max-width: 640px) {
.hero-integral-security {
min-height: 80vh;
}

.hero-integral-security__content {
gap: 36px;
padding: 64px clamp(16px, 5vw, 24px);
}

.hero-integral-security__header {
gap: 32px;
}

.security-icons-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.hero-integral-security__stats {
grid-template-columns: 1fr;
gap: 16px;
padding: 24px 0;
}

.integral-security-btns {
flex-direction: row;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}

.integral-security-btns .btn {
flex: 1 1 auto;
min-width: 140px;
max-width: 160px;
padding: 12px 16px;
font-size: 14px;
}
}

@media (max-width: 480px) {
.hero-integral-security {
min-height: 70vh;
}

.hero-integral-security__content {
gap: 32px;
padding: 56px clamp(12px, 4vw, 20px);
}

.hero-integral-security__header {
gap: 24px;
}

.integral-security-eye {
margin-bottom: 12px;
font-size: 10px;
}

.integral-security-title {
font-size: clamp(24px, 12vw, 36px);
margin-bottom: 12px;
}

.integral-security-sub {
font-size: 15px;
margin-bottom: 0;
}

.security-icons-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 24px;
}

.security-icon-item {
padding: 14px 8px;
}

.security-icon-item span {
font-size: 10px;
}

.icon-circle {
width: 44px;
height: 44px;
font-size: 16px;
}

.hero-integral-security__stats {
grid-template-columns: 1fr;
gap: 12px;
padding: 24px 0;
}

.stat-item {
padding: 14px 10px;
text-align: center;
}

.stat-value {
font-size: 22px;
}

.stat-label {
font-size: 11px;
}

.integral-security-btns {
flex-direction: row;
gap: 10px;
justify-content: center;
}

.integral-security-btns .btn {
flex: 1 1 auto;
min-width: 120px;
max-width: 140px;
padding: 10px 14px;
font-size: 13px;
}
}

@media (prefers-reduced-motion: reduce) {
.security-patterns,
.security-icon-item,
.stat-item,
.integral-security-btns .btn {
animation: none !important;
transition: none !important;
}}
/* ==========
TOOLTIP STYLES
========== */
.tooltip {
font-size: inherit;
color: rgba(10, 132, 255, 0.8);
cursor: help;
position: relative;
text-decoration: underline;
text-decoration-color: rgba(10, 132, 255, 0.5);
text-decoration-style: dotted;
display: inline-block;
border-radius: 2px;
}

.tooltip:hover .tooltip-content {
opacity: 1;
transform: translate3d(-50%, 0, 0);
pointer-events: auto;
visibility: visible;
}

.tooltip-content {
position: absolute;
top: 100%;
left: 50%;
transform: translate3d(-50%, 10px, 0);
background: rgba(0, 0, 0, 0.95);
color: #fff;
padding: 12px 16px;
border-radius: 8px;
font-size: 12px;
line-height: 1.4;
white-space: normal;
max-width: 300px;
z-index: 1000;
opacity: 0;
transform: translate3d(-50%, 10px, 0);
pointer-events: none;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
visibility: hidden;
}

.tooltip-content::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translate3d(-50%, 0, 0);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(0, 0, 0, 0.95);
}

/* (estilos de masthead transparente, chips y slider eliminados para volver al estilo clásico) */

/* =============================================================
Servicio Cards: Futuristic Design para servicios.html
-------------------------------------------------------------
Grid responsivo y tarjetas con hover effects, íconos gradientes y badges.
============================================================= */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 24px;
margin-top: 24px;
}

.service-card {
display: block;
padding: 32px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
text-decoration: none;
color: var(--text);
transition: all .3s ease;
position: relative;
overflow: hidden;
}

.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-strong);
border-color: rgba(var(--blue-rgb), 0.4);
background: linear-gradient(135deg, var(--card), rgba(var(--blue-rgb), 0.02));
}

.service-icon {
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--primary-10), rgba(var(--blue-rgb), 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
position: relative;
transition: transform .3s ease, box-shadow .3s ease;
}

.service-card:hover .service-icon {
transform: scale(1.05) rotate(2deg);
box-shadow: 0 8px 24px rgba(var(--blue-rgb), 0.2);
}

.service-icon img {
width: 64px;
height: 64px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
}

.service-card h3 {
margin: 0 0 16px;
font-size: 24px;
font-weight: 700;
color: var(--primary);
text-align: center;
transition: color .3s ease;
}

.service-card:hover h3 {
color: var(--blue);
text-shadow: 0 2px 4px rgba(var(--blue-rgb), 0.3);
}

.service-card p {
margin: 0 0 24px;
line-height: 1.6;
color: var(--muted);
text-align: center;
}

.service-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}

.service-features span {
padding: 6px 12px;
background: var(--primary-10);
border: 1px solid rgba(var(--primary-rgb), 0.2);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all .3s ease;
}

.service-card:hover .service-features span {
background: var(--primary);
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
}

/* =============================================================
Package Cards: Futuristic Design para paquetes en servicios.html
-------------------------------------------------------------
Tarjetas para paquetes rápidos, con badges, precios y features.
============================================================= */
.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin-top: 24px;
}

.package-card {
position: relative;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow);
transition: all 0.3s ease;
text-align: center;
overflow: hidden;
}

.package-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-strong);
border-color: rgba(var(--blue-rgb), 0.3);
}

.package-badge {
position: absolute;
top: 10px;
right: 10px;
padding: 4px 8px;
background: var(--primary);
color: white;
border-radius: 12px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.package-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-10), rgba(var(--blue-rgb), 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
transition: transform 0.3s ease;
}

.package-card:hover .package-icon {
transform: scale(1.1) rotate(5deg);
}

.package-icon img {
width: 40px;
height: 40px;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .2));
}

.package-card h3 {
margin: 0 0 12px;
font-size: 20px;
font-weight: 700;
color: var(--primary);
}

.package-card p {
color: var(--muted);
margin-bottom: 16px;
font-size: 14px;
line-height: 1.5;
}

.package-price {
margin-bottom: 16px;
}

.price-label {
display: block;
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}

.price-amount {
font-size: 24px;
font-weight: 700;
color: var(--primary);
}

.package-features {
text-align: left;
margin-bottom: 20px;
}

.feature-item {
font-size: 13px;
color: var(--muted);
margin-bottom: 4px;
line-height: 1.4;
}

.package-btn {
width: 100%;
margin-top: auto;
box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.25);
}

/* Animaciones de entrada para service cards */
@media (prefers-reduced-motion: no-preference) {
.service-card {
animation: slideUp 0.6s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}

.service-card:nth-child(1) {
animation-delay: 0.1s;
}

.service-card:nth-child(2) {
animation-delay: 0.2s;
}

.service-card:nth-child(3) {
animation-delay: 0.3s;
}

.service-card:nth-child(4) {
animation-delay: 0.4s;
}

.service-card:nth-child(5) {
animation-delay: 0.5s;
}

.service-card:nth-child(6) {
animation-delay: 0.6s;
}

.service-card:nth-child(7) {
animation-delay: 0.7s;
}

.service-card:nth-child(8) {
animation-delay: 0.8s;
}
}

@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}

/* Animaciones para package cards */
@media (prefers-reduced-motion: no-preference) {
.package-card {
animation: fadeScale 0.5s ease-out forwards;
opacity: 0;
transform: scale(0.95);
}

.package-card:nth-child(1) {
animation-delay: 0.1s;
}

.package-card:nth-child(2) {
animation-delay: 0.2s;
}

.package-card:nth-child(3) {
animation-delay: 0.3s;
}
}

@keyframes fadeScale {
to {
opacity: 1;
transform: scale(1);
}
}
/* Additional responsive fixes */
@media (max-width: 640px) {
.hero--bg {
background-attachment: scroll;
}
}