/* ==============================
     Stats: estilos movidos a sección .about
     ============================== */

/* Reset y Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Paleta de colores GRUPO ALSEG */
    /* Paleta extraída del logo (actualizada) */
    --primary-dark: #182259; /* tono principal oscuro (navy) */
    --secondary-navy: #030A8C; /* navy profundo */
    --accent-bright: #0511F2; /* acento vibrante */
    --accent-blue: #367FBF; /* azul medio para botones y accents */
    --background-light: #F2F2F2;
    --neutral-gray: #595959;
    --white: #FFFFFF;
    --text-dark: #1a1a1a;
    --text-light: #666666;

    --brand-black: #0D0D0D;
    
    /* Tipografía */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Espaciado */
    --section-padding: 100px 0;
    --container-padding: 0 24px;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    
    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(20, 24, 115, 0.08);
    --shadow-md: 0 8px 24px rgba(20, 24, 115, 0.12);
    --shadow-lg: 0 16px 48px rgba(20, 24, 115, 0.15);
    
    /* Transiciones */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s ease;
    /* Color principal para llamadas a la acción */
    --accent-orange: #FF7A00; /* naranja vivo */
    --accent-orange-dark: #e56600;
    --accent-orange-light: #FFB07A; /* naranja claro para botones secundarios */
    /* Altura del header (ajustable) */
    --nav-height: 92px;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--background-light);
    font-size: 16px;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    /* Navbar completamente opaco para evitar que se vea oscuro sobre el hero */
    background: #ffffff;
    backdrop-filter: blur(18px);
    /* quitar borde para evitar franja visible debajo del header */
    border-bottom: none;
    z-index: 1000;
    transition: var(--transition-smooth);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* usar la altura del header para centrar contenido verticalmente */
    height: 100%;
    padding: 0 20px;
    position: relative;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto; /* No crece ni encoge */
}
/*  Aqui puedes modificar el tamaño del Logo de la nav LOGONAVMOD*/
/* Brand: icon + wordmark */
.nav-logo .brand-mark { display: flex; align-items: center; }
.nav-logo .brand-mark-img {
    height: 65px;
    width: auto;
    max-width: none;
    display: block;
}
.nav-logo .brand-wordmark {
    height: 58px;
    width: auto;
    display: block;
    margin-left: 8px;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: -0.5px;
}

.nav-menu {
    display: flex;
    gap: 40px;
    list-style: none;
    margin-left: auto; /* Empuja el menú hacia la derecha */
    margin-right: 80px; /* Espacio desde el borde derecho */
}

/* Responsive: en tablet/ móvil el menú se oculta y aparece el toggle */
@media (max-width: 992px) {
    .nav-menu {
        position: static;
        transform: none;
        max-width: none;
        display: none;
        width: 100%;
        justify-content: flex-start;
        gap: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .nav-toggle { display: flex; }
}

@media (max-width: 768px) {
    /* cuando el menú está activo (toggle), se muestra en versión column/overlay */
    .nav-menu.active {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 18px 24px;
    }
}

.nav-menu a {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: var(--transition-fast);
    position: relative;
}

/* Sistema de botones flotantes de contacto */
.floating-contacts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;   /* 👈 clave: evita el stretch */
  width: fit-content;      /* opcional: el contenedor se ajusta */
}

/* ===== BOTÓN TELÉFONO - COMPLETAMENTE AISLADO ===== */
a.phone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: width .3s ease, border-radius .3s ease;
  box-shadow: 2px 2px 10px rgba(0,0,0,.2);
  text-decoration: none;
  color: white;
  background-color: #007bff;
}

a.phone-btn i.fa-phone {
  font-size: 18px;
  transition: width .3s ease, padding .3s ease;
  width: 100%;
  text-align: center;
}

a.phone-btn span.contact-text {
  opacity: 0;
  width: 0;
  transition: opacity .3s ease, width .3s ease, padding .3s ease;
  color: white;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}



/* ===== BOTÓN WHATSAPP - COMPLETAMENTE AISLADO ===== */
a.wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: width .3s ease, border-radius .3s ease;
  box-shadow: 2px 2px 10px rgba(0,0,0,.2);
  text-decoration: none;
  color: white;
  background-color: #00d757;
}

a.wa-btn div.wa-sign {
  width: 100%;
  transition: width .3s ease, padding .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.wa-btn div.wa-text {
  opacity: 0;
  width: 0;
  transition: opacity .3s ease, width .3s ease, padding .3s ease;
  color: white;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}



/* ===== BOTÓN INSTAGRAM - COMPLETAMENTE AISLADO ===== */
a.instagram-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: width .3s ease, border-radius .3s ease;
  box-shadow: 2px 2px 10px rgba(0,0,0,.2);
  text-decoration: none;
  color: white;
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}

a.instagram-btn i.fa-instagram {
  font-size: 18px;
  transition: width .3s ease, padding .3s ease;
  width: 100%;
  text-align: center;
}

a.instagram-btn span.contact-text {
  opacity: 0;
  width: 0;
  transition: opacity .3s ease, width .3s ease, padding .3s ease;
  color: white;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}



/* ===== BOTÓN FACEBOOK - COMPLETAMENTE AISLADO ===== */
a.facebook-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: width .3s ease, border-radius .3s ease;
  box-shadow: 2px 2px 10px rgba(0,0,0,.2);
  text-decoration: none;
  color: white;
  background-color: #1877f2;
}

a.facebook-btn i.fa-facebook-f {
  font-size: 18px;
  transition: width .3s ease, padding .3s ease;
  width: 100%;
  text-align: center;
}

a.facebook-btn span.contact-text {
  opacity: 0;
  width: 0;
  transition: opacity .3s ease, width .3s ease, padding .3s ease;
  color: white;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}



/* Estilos para SVG de WhatsApp */
svg.socialSvg {
  width: 20px;
  height: 20px;
}

svg.whatsappSvg {
  fill: white;
}

/* Hover solo en desktop (evita problemas de hover "pegajoso" en móvil) */
@media (hover: hover) and (pointer: fine) {
  a.phone-btn:hover {
    width: 150px;
    border-radius: 40px;
    justify-content: flex-start;
  }
  
  a.phone-btn:hover i.fa-phone {
    width: 30%;
    padding-left: 10px;
  }
  
  a.phone-btn:hover span.contact-text {
    opacity: 1;
    width: 70%;
    padding-right: 10px;
  }
  
  a.wa-btn:hover {
    width: 150px;
    border-radius: 40px;
    justify-content: flex-start;
  }
  
  a.wa-btn:hover div.wa-sign {
    width: 30%;
    padding-left: 10px;
  }
  
  a.wa-btn:hover div.wa-text {
    opacity: 1;
    width: 70%;
    padding-right: 10px;
  }
  
  a.instagram-btn:hover {
    width: 150px;
    border-radius: 40px;
    justify-content: flex-start;
  }
  
  a.instagram-btn:hover i.fa-instagram {
    width: 30%;
    padding-left: 10px;
  }
  
  a.instagram-btn:hover span.contact-text {
    opacity: 1;
    width: 70%;
    padding-right: 10px;
  }
  
  a.facebook-btn:hover {
    width: 150px;
    border-radius: 40px;
    justify-content: flex-start;
  }
  
  a.facebook-btn:hover i.fa-facebook-f {
    width: 30%;
    padding-left: 10px;
  }
  
  a.facebook-btn:hover span.contact-text {
    opacity: 1;
    width: 70%;
    padding-right: 10px;
  }
}

/* En móvil mantiene tamaño fijo y oculta texto */
@media (max-width: 640px) {
  .floating-contacts {
    gap: 8px;
  }
  
  a.phone-btn { width: 50px; height: 50px; border-radius: 50%; }
  a.wa-btn { width: 50px; height: 50px; border-radius: 50%; }
  a.instagram-btn { width: 50px; height: 50px; border-radius: 50%; }
  a.facebook-btn { width: 50px; height: 50px; border-radius: 50%; }
  
  a.phone-btn span.contact-text,
  a.instagram-btn span.contact-text,
  a.facebook-btn span.contact-text,
  a.wa-btn div.wa-text { 
    display: none;
  }
  
  a.phone-btn i.fa-phone,
  a.instagram-btn i.fa-instagram,
  a.facebook-btn i.fa-facebook-f {
    font-size: 20px;
    width: 100%;
    padding: 0;
  }
  
  a.wa-btn div.wa-sign {
    width: 100%;
    padding: 0;
  }
  
  svg.socialSvg { 
    width: 22px; 
    height: 22px; 
  }
}

/* Animaciones globales: retrasos y efectos */
.animate-in { opacity: 0; transform: translateY(18px); }
.animate-in.visible { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.8,0.2,1); }

/* Estadísticas: contador */
.stat-item h4 { font-size: 36px; color: var(--accent-bright); font-weight: 700; }

/* Ajustes nav en mobile: menú overlay cuando está activo */
@media (max-width: 768px) {    
    /* El menú aparece como overlay cuando está activo */
    .nav-menu.active { 
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 18px 24px;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(20, 24, 115, 0.1);
        z-index: 1050;
    }
}

/* Ajustes responsive para el logo (reducir en pantallas pequeñas) */
@media (max-width: 992px) {
    .nav-logo .brand-mark-img { height: 55px; }
    .nav-logo .brand-wordmark { height: 28px; }
    .nav-container { padding: 12px 20px; }
}

@media (max-width: 576px) {
    .nav-logo img { height: 40px; }
    .nav-logo .brand-mark-img { height: 45px; }
    .nav-logo .brand-wordmark { height: 24px; }
    .nav-container { padding: 12px 15px; }
    
    /* Reducir gap entre logos para dar más espacio */
    .nav-logo { gap: 6px; }
}

/* Animaciones globales: retrasos y efectos */

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-blue);
    transition: width 0.3s ease;
}

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

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--primary-dark);
    transition: var(--transition-fast);
}

/* Hero Section */
.hero {
    /* ocupar toda la altura de la pantalla */
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Compensar navbar fija */
    padding-top: var(--nav-height);
    /* Imagen de fondo de madera */
    background-image: url('../img/MaderaFondo1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Capa overlay para mejorar contraste del texto sobre la imagen */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    display: none;
    z-index: 1;
}

/* Asegurar que el contenido del hero quede por encima del overlay */
.hero .hero-container,
.hero .hero-content,
.hero .hero-visual { position: relative; z-index: 2; }

/* Forzar colores claros para texto del hero sobre la imagen */
.hero .hero-title {
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.30);
}
.hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

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

.hero-title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--primary-dark);
    letter-spacing: -2px;
}

.hero-title .highlight {
    /* Degradado azulado en el texto */
    background: linear-gradient(90deg, #0d6efd 0%, #4ea1ff 50%, #8cc7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(13,110,253,0.18));
}

/* Animación sutil para el título principal */
.title-animate {
    display: inline-block;
    animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
    0% { transform: translateY(0) scale(1); text-shadow: 0 2px 6px rgba(0,0,0,0.15); }
    50% { transform: translateY(-6px) scale(1.02); text-shadow: 0 6px 18px rgba(0,0,0,0.20); }
    100% { transform: translateY(0) scale(1); text-shadow: 0 2px 6px rgba(0,0,0,0.15); }
}

.hero-subtitle {
    font-size: 20px;
    color: var(--text-light);
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 500px;
}

.hero-cta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #FF7A00 0%, #FF9D00 100%);
    color: #ffffff;
    padding: 16px 36px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: center;
    box-shadow: 0 8px 28px rgba(255, 122, 0, 0.45);
    letter-spacing: 0.4px;
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50px;
}

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

.btn-primary:hover {
    background: linear-gradient(135deg, #e56600 0%, #FF7A00 100%);
    transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(255, 122, 0, 0.60);
}

.btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 122, 0, 0.40);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    padding: 16px 36px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    letter-spacing: 0.4px;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.90);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(255, 255, 255, 0.15);
}

.btn-secondary:active {
    transform: translateY(-1px);
}

.full-width {
    width: 100%;
}

/* Hero Visual */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── Hero Orbital Visual ── */

/* Contenedor con glow ambiental radial */
.hero-graphics {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* Blob de luz ambiental detrás de todo */
.hero-graphics::before {
    content: '';
    position: absolute;
    width: 720px;
    height: 720px;
    background: radial-gradient(
        circle,
        rgba(221, 217, 217, 0.22) 0%,
        rgba(83, 130, 172, 0.45) 25%,
        rgba(98, 87, 76, 0.15) 55%,
        transparent 72%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: pulse-glow 4s ease-in-out infinite;
    filter: blur(18px);
}

.security-circle {
    width: 540px;
    height: 540px;
    position: relative;
    /* Anillo exterior fino */
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotate 45s linear infinite;
    z-index: 1;
}

/* Anillo interior punteado (gira en dirección contraria) */
.security-circle::before {
    content: '';
    position: absolute;
    width: 69.5%;
    height: 69.5%;
    border: 1px dashed rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    animation: rotate-reverse 28s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* Arco de color que gira rápido — el "destello" del anillo */
.security-circle::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: rgba(255, 130, 0, 0.90);
    border-right-color: rgba(0, 128, 255, 0.803);
    filter: blur(0.5px);
    animation: rotate 6s linear infinite;
    pointer-events: none;
    z-index: 2;
}

.inner-circle {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    overflow: hidden;
    /* Combina contra-rotación + parpadeo blanco */
    animation: counter-rotate 45s linear infinite, inner-pulse 2.8s ease-in-out infinite;
    z-index: 3;
    position: relative;
}

.inner-circle img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.30));
}

.security-icons {
    position: absolute;
    width: 100%;
    height: 100%;
}

.icon-item {
    position: absolute;
    background: rgba(0, 128, 255, 0.75);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.45),
        0 0 22px rgba(255, 255, 255, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
    transition: box-shadow 0.3s ease;
    z-index: 4;
}

.icon-item:hover {
    box-shadow:
        0 4px 28px rgba(0, 0, 0, 0.50),
        0 0 38px rgba(255, 255, 255, 0.727),
        0 0 20px rgba(0, 166, 255, 0.764);
}

.icon-item img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    display: block;
    border-radius: 0;
    transform-origin: 50% 50%;
    animation: counter-rotate 45s linear infinite;
    will-change: transform;
    /* Blanco puro con resplandor fuerte */
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.229));
}

/* Posiciones en el borde del anillo (top/right/bottom/left/diagonal) */
.icon-item:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-item:nth-child(2) {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
}

.icon-item:nth-child(3) {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

.icon-item:nth-child(4) {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}

.icon-item:nth-child(5) {
    top: 13%;
    right: 13%;
    transform: translate(50%, -50%);
}

.icon-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation: counter-rotate 45s linear infinite;
}

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

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

@keyframes pulse-glow {
    0%, 100% { transform: scale(1);    opacity: 1;    }
    50%       { transform: scale(1.10); opacity: 0.70; }
}

@keyframes inner-pulse {
    0%   {
        background: rgba(255, 255, 255, 0.05);
        box-shadow:
            0 0 0 12px rgba(255, 255, 255, 0.04),
            0 0 60px rgba(54, 127, 191, 0.50),
            0 0 100px rgba(255, 255, 255, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.40);
    }
    50%  {
        background: rgba(255, 255, 255, 0.28);
        box-shadow:
            0 0 0 16px rgba(255, 255, 255, 0.10),
            0 0 80px rgba(54, 127, 191, 0.75),
            0 0 150px rgba(255, 255, 255, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.70);
    }
    100% {
        background: rgba(255, 255, 255, 0.05);
        box-shadow:
            0 0 0 12px rgba(255, 255, 255, 0.04),
            0 0 60px rgba(54, 127, 191, 0.50),
            0 0 100px rgba(255, 255, 255, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.40);
    }
}

/* Icon SVG sizing and placeholders */
.icon {
    width: 36px;
    height: 36px;
    display: block;
}

.section-image {
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto 12px;
}

.audience-image {
    width: 64px;
    height: 64px;
    display: block;
    margin: 0 auto 12px;
}

/* Section Styles */
section {
    padding: var(--section-padding);
    overflow-x: hidden;
    max-width: 100vw;
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.section-subtitle {
    font-size: 20px;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* About Section */
.about {
    background: var(--white);
    position: relative;
    overflow: hidden;
}

/* Patrón de circuitos SVG de fondo — más visible */
.circuit-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.70;
    z-index: 0;
    pointer-events: none;
}

.circuit-path {
    fill: none;
    stroke: rgba(52, 126, 191, 0.22);
    stroke-width: 1.5;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: circuitDash 20s linear infinite;
}

.circuit-path:nth-child(2) { animation-delay: -2s; }
.circuit-path:nth-child(3) { animation-delay: -4s; }
.circuit-path:nth-child(4) { animation-delay: -6s; }
.circuit-path:nth-child(5) { animation-delay: -8s; }
.circuit-path:nth-child(6) { animation-delay: -10s; }
.circuit-path:nth-child(7) { animation-delay: -12s; }
.circuit-path:nth-child(8) { animation-delay: -14s; }

@keyframes circuitDash {
    0% { stroke-dashoffset: 800; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -800; }
}

.circuit-node {
    fill: rgba(52, 126, 191, 0.45);
    animation: nodePulse 3s ease-in-out infinite;
}

.circuit-node:nth-child(2) { animation-delay: -0.5s; }
.circuit-node:nth-child(3) { animation-delay: -1s; }
.circuit-node:nth-child(4) { animation-delay: -1.5s; }
.circuit-node:nth-child(5) { animation-delay: -2s; }
.circuit-node:nth-child(6) { animation-delay: -0.3s; }
.circuit-node:nth-child(7) { animation-delay: -0.8s; }
.circuit-node:nth-child(8) { animation-delay: -1.2s; }

@keyframes nodePulse {
    0%, 100% { opacity: 0.4; r: 5; }
    50% { opacity: 1; r: 7; }
}

.circuit-pulse {
    fill: rgba(255, 200, 0, 0.8);
    animation: pulseDash 8s linear infinite;
}

.pulse-1 { animation-delay: 0s; }
.pulse-2 { animation-delay: -2s; }
.pulse-3 { animation-delay: -4s; }
.pulse-4 { animation-delay: -6s; }

@keyframes pulseDash {
    0% { cx: 100; cy: 200; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { cx: 500; cy: 400; opacity: 0; }
}

/* ---- Layout centrado minimalista ---- */
.about-content {
    position: relative;
    z-index: 1;
}

/* Titular y descripción minimalista */
.section-subtitle {
    font-size: 18px;
    color: rgba(24,34,89,0.92);
    margin: 0 auto 8px;
    text-align: center;
    max-width: 900px;
}

.about-description {
    font-size: 16px;
    color: rgba(24,34,89,0.78);
    margin: 0 auto 28px;
    text-align: center;
    max-width: 820px;
}

/* Fila horizontal de iconos */
.about-icons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
}

.about-icon-circle {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 20px rgba(24, 34, 89, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* color base para iconos (hereda a SVG inline y a los SVG importados que usan currentColor) */
    color: #6B7A99;
}

/* Efecto hover: elevar ligeramente el círculo y aumentar la sombra */
.about-icon-circle:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(24, 34, 89, 0.12);
}

.about-icon-circle svg {
    width: 44px;
    height: 44px;
    fill: currentColor;
    stroke: none;
    color: #6B7A99;
    opacity: 0.95;
    transition: all 0.18s ease;
}

.about-icon-circle:hover svg {
    color: var(--primary-dark);
    fill: currentColor;
    stroke: none;
    opacity: 1;
    transition: all 0.18s ease;
}

/* Asegurar que los elementos internos usen el color actual; no eliminar strokes globalmente */
.about-icon-circle svg * {
    fill: currentColor !important;
}

/* regla para imágenes SVG importadas externamente */
.about-icon-circle img.icon-img {
    width: 44px;
    height: 44px;
    display: block;
    /* intentar que el SVG importado use la propiedad color desde el contenedor */
    color: inherit;
}

/* Stats centrados debajo de los iconos */
.about .stats {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.about .stat-item {
    text-align: center;
    padding: 28px 36px;
    background: var(--accent-orange);
    border-radius: 16px;
    border: none;
    backdrop-filter: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 160px;
    box-shadow: 0 6px 24px rgba(255, 122, 0, 0.20);
}

.about .stat-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(255, 122, 0, 0.30);
    background: var(--accent-orange);
}

.about .stat-item h4,
.about .stat-item .counter {
    font-size: 40px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 6px;
    text-shadow: none;
}

.about .stat-item p {
    color: var(--white);
    font-weight: 600;
    margin: 0;
    font-size: 15px;
    opacity: 0.95;
    text-shadow: none;
}

/* (CSS huérfano de floating-icons/bubble-icon eliminado) */

/* Responsive Quiénes Somos */
@media (max-width: 968px) {
    .about-icons-row {
        gap: 28px;
    }
    .about-icon-circle {
        width: 78px;
        height: 78px;
    }
    .about-icon-circle svg {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 768px) {
    .about-icons-row {
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    .about-icon-circle {
        width: 68px;
        height: 68px;
    }
    .about-icon-circle svg {
        width: 32px;
        height: 32px;
    }
    .about .stats {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .about .stat-item {
        width: 100%;
        max-width: 280px;
    }
    .circuit-bg {
        opacity: 0.45;
    }
}

/* Problem Section — Fondo azul marino con degradados y textura de puntos */
.problem {
    background:
        radial-gradient(circle at 50% 40%, rgba(31,60,136,0.45) 0%, transparent 60%),
        radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(160deg, #0A1128 0%, #0F1E44 30%, #1F3C88 60%, #0F1E44 85%, #080E24 100%);
    background-size: 100% 100%, 18px 18px, 100% 100%;
    position: relative;
    overflow: hidden;
    color: var(--white);
    padding: 100px 0;
}

/* Línea decorativa amarilla bajo el subtítulo */
.section-line {
    display: block;
    width: 60px;
    height: 4px;
    background: #F5B400;
    border-radius: 2px;
    margin: 18px auto 0;
}

/* Orbes decorativos */
.problem-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.orb-left {
    width: 500px;
    height: 500px;
    top: -150px;
    left: -150px;
    background: radial-gradient(circle, rgba(52, 126, 191, 0.12), transparent 70%);
    animation: orbFloat 25s ease-in-out infinite;
}

.orb-right {
    width: 600px;
    height: 600px;
    bottom: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(255, 195, 0, 0.08), rgba(52, 126, 191, 0.05), transparent 70%);
    animation: orbFloat 30s ease-in-out infinite reverse;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -40px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(40px, 10px) scale(1.03); }
}

/* Burbujas flotantes */
.problem-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.p-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    animation: problemBubbleUp linear infinite;
}

.pb-1 { width: 70px; height: 70px; left: 8%; bottom: -80px; animation-duration: 13s; animation-delay: 0s; }
.pb-2 { width: 110px; height: 110px; left: 28%; bottom: -130px; animation-duration: 17s; animation-delay: 2s; }
.pb-3 { width: 50px; height: 50px; left: 48%; bottom: -60px; animation-duration: 11s; animation-delay: 5s; }
.pb-4 { width: 90px; height: 90px; right: 22%; bottom: -110px; animation-duration: 15s; animation-delay: 1s; }
.pb-5 { width: 60px; height: 60px; right: 8%; bottom: -70px; animation-duration: 12s; animation-delay: 4s; }
.pb-6 { width: 80px; height: 80px; left: 68%; bottom: -100px; animation-duration: 16s; animation-delay: 3s; }

@keyframes problemBubbleUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    8% { opacity: 0.5; }
    85% { opacity: 0.3; }
    100% { transform: translateY(-110vh) scale(0.4); opacity: 0; }
}

/* Textos en blanco para fondo oscuro */
.problem .section-title {
    color: var(--white);
}

.problem .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.problem .container {
    position: relative;
    z-index: 1;
}

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

.problem-card {
    background: #ffffff;
    padding: 48px 32px 36px;
    border-radius: 22px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Efecto shimmer en hover */
.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 180, 0, 0.06), transparent);
    transition: left 0.7s;
    pointer-events: none;
}

.problem-card:hover::before {
    left: 100%;
}

/* Línea de acento superior */
.problem-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #FFC300, #FFD700);
    border-radius: 0 0 4px 4px;
    opacity: 0;
    transition: all 0.4s ease;
}

.problem-card:hover::after {
    width: 100px;
    opacity: 1;
}

.problem-card:hover {
    transform: translateY(-10px);
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
    border-color: rgba(245, 180, 0, 0.25);
}

.card-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFDF6F 0%, #F5B400 100%);
    border: none;
    box-shadow: 0 6px 20px rgba(245, 180, 0, 0.25);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.card-icon svg { 
    width: 48px; 
    height: 48px; 
    display: block;
    color: #0F1E44;
    fill: #0F1E44;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
}

/* If icon is an external SVG image, match sizing and effects */
.card-icon img.icon {
    width: 48px;
    height: 48px;
    display: block;
    object-fit: contain;
    /* recolor SVG/PNG icon to blue-navy */
    filter: grayscale(1) brightness(0.2) drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    transition: all 0.3s ease;
}

/* For the asesoría icon: prefer CSS mask to render a solid navy shape; fallback to the original image when mask unsupported */
.card-icon.asesoria-icon { position: relative; }
.card-icon.asesoria-icon img.icon { opacity: 1; transition: opacity 0.2s ease; }
.card-icon.asesoria-icon::after {
    content: '';
    display: none; /* shown only when mask is supported */
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    background: #0F1E44; /* navy oscuro */
    -webkit-mask-image: url('../img/svg/Asesoria.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../img/svg/Asesoria.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    pointer-events: none;
}

/* If the browser supports mask-image, hide the original img and show the masked pseudo-element */
@supports (-webkit-mask-image: none) or (mask-image: none) {
    .card-icon.asesoria-icon img.icon { opacity: 0; pointer-events: none; }
    .card-icon.asesoria-icon::after { display: block; }
}

/* Integración icon: try mask first for a solid navy, fallback to filter on img */
.card-icon.integracion-icon { position: relative; }
.card-icon.integracion-icon img.icon { opacity: 1; transition: opacity 0.2s ease; filter: grayscale(1) brightness(0.2); }
.card-icon.integracion-icon::after {
    content: '';
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    background: #0F1E44;
    -webkit-mask-image: url('../img/svg/Integraci%C3%B3n.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../img/svg/Integraci%C3%B3n.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    pointer-events: none;
}

@supports (-webkit-mask-image: none) or (mask-image: none) {
    .card-icon.integracion-icon img.icon { opacity: 0; pointer-events: none; }
    .card-icon.integracion-icon::after { display: block; }
}

/* Implementación icon: make it bright yellow via filter and provide mask fallback if desired */
.element-icon.implementacion-icon { position: relative; }
.element-icon.implementacion-icon img.icon { width: 56px; height: 56px; filter: none; transition: opacity 0.2s ease; }

/* Mostrar el icono Implementación en blanco usando mask cuando esté disponible; fallback muestra la imagen original (sin filtro) */
.element-icon.implementacion-icon::after {
    content: '';
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    background: #ffffff;
    -webkit-mask-image: url('../img/svg/implementaci%C3%B3n.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../img/svg/implementaci%C3%B3n.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    pointer-events: none;
}

@supports (-webkit-mask-image: none) or (mask-image: none) {
    .element-icon.implementacion-icon img.icon { opacity: 0; pointer-events: none; }
    .element-icon.implementacion-icon::after { display: block; }
}


.problem-card:hover .card-icon {
    background: linear-gradient(135deg, #F5B400 0%, #FFDF6F 100%);
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 12px 36px rgba(245, 180, 0, 0.35);
}

.problem-card:hover .card-icon svg {
    filter: drop-shadow(0 4px 16px rgba(255, 195, 0, 0.5));
}

/* Tag informativo — ahora es botón pill */
.card-btn {
    display: inline-block;
    margin-top: 22px;
    padding: 10px 28px;
    border-radius: 30px;
    background: #F5B400;
    color: #0F1E44;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 2px solid #F5B400;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.card-btn:hover {
    background: #0F1E44;
    color: #F5B400;
    border-color: #F5B400;
}

/* Mantener .card-tag como fallback */
.card-tag {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 28px;
    border-radius: 30px;
    background: #F5B400;
    color: #0F1E44;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 2px solid #F5B400;
}

/* Responsive para Digital Concept */
@media (max-width: 768px) {
    .concept-content { gap: 40px; }
    .concept-visual { grid-template-columns: 1fr; gap: 16px; }
    .feature-item { flex-direction: column; align-items:center; text-align:center; padding: 20px; }
    .feature-icon { margin-right: 0; margin-bottom: 12px; width: 64px; height: 64px; min-width: 64px; }
    .feature-icon svg { width: 32px; height: 32px; }
    .concept-text h2 { font-size: 32px; }
}

.problem-card h3 {
    font-size: 22px;
    color: #0F1E44;
    margin-bottom: 14px;
    font-weight: 700;
}

.problem-card p {
    color: #4a4a6a;
    line-height: 1.7;
    font-size: 15px;
}

/* Problem Cards Responsive */
@media (max-width: 992px) {
    .problem-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
    }
    
    .card-icon {
        width: 88px;
        height: 88px;
    }
    
    .card-icon svg {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 768px) {
    .problem-grid {
        grid-template-columns: 1fr;
    }
    
    .problem-card {
        padding: 36px 28px 32px;
    }
    
    .card-icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
    }
    
    .card-icon svg {
        width: 40px;
        height: 40px;
    }
    
    .problem-card h3 {
        font-size: 20px;
    }
}

/* ======= Ciclo de Seguridad — Layout Circular ======= */
.security-cycle {
    /* Fondo gris claro con patrón de puntos */
    background-color: #e8ecf2;
    background-image:
        radial-gradient(circle, rgba(24,34,89,0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 36px 0 60px;
    position: relative;
    color: var(--primary-dark);
    overflow: hidden;
}

@keyframes cycleGradient {
    0% { background-position: 0% 30%; }
    50% { background-position: 100% 70%; }
    100% { background-position: 0% 30%; }
}

/* Aros decorativos animados de fondo */
.cycle-bg-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.dotted-ring {
    position: absolute;
    border-radius: 50%;
    border: 2.5px dashed rgba(24, 34, 89, 0.10);
}

.ring-1 {
    width: 320px; height: 320px;
    top: -90px; right: -70px;
    border-color: rgba(24, 34, 89, 0.09);
    animation: ringDrift 28s ease-in-out infinite, ringSpin 55s linear infinite;
}
.ring-2 {
    width: 220px; height: 220px;
    bottom: -50px; left: -40px;
    border-color: rgba(24, 34, 89, 0.08);
    animation: ringDrift 22s ease-in-out infinite reverse, ringSpin 40s linear infinite reverse;
}
.ring-3 {
    width: 500px; height: 500px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* Dorado/amarillo como en el boceto */
    border-color: #FFC300;
    border-width: 3px;
    border-style: dashed;
    opacity: 1;
    box-shadow: none;
    animation: ringSpinCenter 70s linear infinite;
}
.ring-4 {
    width: 160px; height: 160px;
    top: 15%; left: 8%;
    border-color: rgba(24, 34, 89, 0.12);
    animation: ringDrift 18s ease-in-out infinite 1s, ringSpin 30s linear infinite;
}
.ring-5 {
    width: 280px; height: 280px;
    bottom: 5%; right: 12%;
    border-color: rgba(24, 34, 89, 0.07);
    animation: ringDrift 26s ease-in-out infinite 3s, ringSpin 48s linear infinite reverse;
}
.ring-6 {
    width: 180px; height: 180px;
    top: 60%; left: 65%;
    border-color: rgba(24, 34, 89, 0.06);
    border-style: dotted;
    animation: ringDrift 20s ease-in-out infinite 5s, ringSpin 35s linear infinite;
}

@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes ringSpinCenter {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ringDrift {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(12px, -18px); }
    50% { transform: translate(-8px, 14px); }
    75% { transform: translate(18px, 6px); }
}
@keyframes ringPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); }
}

.security-cycle .section-title {
    font-size: 40px;
    color: var(--primary-dark);
}
.security-cycle .section-subtitle {
    font-size: 18px;
    color: rgba(24, 34, 89, 0.75);
    max-width: 650px;
    margin: 10px auto 0;
}
.security-cycle .container {
    position: relative;
    z-index: 1;
}

/* Reducir espacio entre el encabezado de sección y el diagrama en la sección Ciclo */
.security-cycle .section-header {
    margin-bottom: 16px; /* antes: 80px global */
}
/* Diagrama circular - posicionamiento absoluto */
.cycle-diagram {
    position: relative;
    max-width: 950px;
    height: 700px;
    margin: 8px auto 0; /* reducido para acercar el diagrama al encabezado */
}

/* Órbita circular grande punteada — solo visual */
.cycle-orbit {
    display: none;
}

/* Centro del ciclo */
.cycle-center {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
}

.center-glow {
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 34, 89, 0.12), transparent 70%);
    animation: centerGlow 4s ease-in-out infinite;
    pointer-events: none;
}

/* Resplandor estrellado que sale del círculo con degradado a transparente */
.center-glow {
    display: block !important;
    position: absolute;
    width: 350px;
    height: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.7) 100%, transparent),
        radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,0.5) 100%, transparent),
        radial-gradient(1.5px 1.5px at 80% 55%, rgba(200,220,255,0.8) 100%, transparent),
        radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.4) 100%, transparent),
        radial-gradient(1px 1px at 90% 35%, rgba(180,200,255,0.6) 100%, transparent),
        radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,0.5) 100%, transparent),
        radial-gradient(1px 1px at 50% 90%, rgba(200,210,255,0.4) 100%, transparent),
        radial-gradient(1.5px 1.5px at 75% 80%, rgba(255,255,255,0.3) 100%, transparent),
        radial-gradient(circle, rgba(6,13,36,0.7) 25%, rgba(10,21,53,0.4) 45%, rgba(18,32,80,0.15) 65%, transparent 80%);
    pointer-events: none;
    z-index: 14;
    animation: none;
}

@keyframes centerGlow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

.center-circle {
    width: 210px;
    height: 210px;
    /* Fondo tipo universo/estrellado */
    background:
        radial-gradient(1px 1px at 20% 30%, #fff 100%, transparent),
        radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.8) 100%, transparent),
        radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.6) 100%, transparent),
        radial-gradient(1.5px 1.5px at 80% 60%, #fff 100%, transparent),
        radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.7) 100%, transparent),
        radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.5) 100%, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, rgba(200,220,255,0.9) 100%, transparent),
        radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.6) 100%, transparent),
        radial-gradient(1px 1px at 65% 85%, rgba(255,255,255,0.4) 100%, transparent),
        radial-gradient(1px 1px at 15% 55%, rgba(200,210,255,0.7) 100%, transparent),
        radial-gradient(1.5px 1.5px at 50% 45%, rgba(255,255,255,0.8) 100%, transparent),
        radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.5) 100%, transparent),
        radial-gradient(1px 1px at 45% 90%, rgba(180,200,255,0.6) 100%, transparent),
        radial-gradient(1px 1px at 75% 75%, rgba(255,255,255,0.4) 100%, transparent),
        radial-gradient(ellipse at 30% 70%, rgba(30,50,120,0.6) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, rgba(20,40,100,0.4) 0%, transparent 50%),
        linear-gradient(145deg, #060d24 0%, #0c1a3e 30%, #122050 55%, #0a1535 80%, #060d24 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    box-shadow: 0 16px 48px rgba(8, 12, 30, 0.45), 0 0 0 8px rgba(255, 195, 0, 0.6), inset 0 0 30px rgba(0,10,40,0.5);
    position: relative;
    z-index: 16;
    border: 5px solid #FFC300;
    overflow: hidden;
}

.center-circle::before {
    /* Removed rotating conic-gradient ring to eliminate oval/halo in the center */
    display: none !important;
}

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

.center-icon { display: none; }

/* Responsive: reduce el ajuste negativo en pantallas pequeñas para evitar recortes */
@media (max-width: 968px) {
    .center-icon { display: none; }
}
@media (max-width: 768px) {
    .center-icon { display: none; }
}
.center-icon svg,
.center-icon .icon {
    display: none;
}

.center-circle h3 {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
    color: var(--white) !important;
}

.center-circle p {
    font-size: 14px;
    opacity: 0.95;
    margin: 0;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3);
    color: var(--white) !important;
}

/* Posiciones de los 3 elementos */
.cycle-element {
    position: absolute;
    z-index: 8;
}

.element-left {
    left: 20px;
    top: 36%;
    transform: translateY(-50%);
}

.element-right {
    right: 20px;
    top: 36%;
    transform: translateY(-50%);
}

.element-bottom {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

/* Cards glassmorphism */
.element-card {
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-radius: 20px;
    padding: 28px 20px 22px;
    width: 230px;
    text-align: center;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06), inset 0 1px 3px rgba(255,255,255,0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.element-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.cycle-element:hover .element-card::before { left: 100%; }

.cycle-element:hover .element-card {
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.12), inset 0 2px 4px rgba(255,255,255,0.8);
    border-color: rgba(52, 126, 191, 0.25);
    background: rgba(255, 255, 255, 0.95);
}

/* Hover: mover card hacia arriba via el contenedor padre */
.element-left:hover { transform: translateY(-50%) translateY(-8px); }
.element-right:hover { transform: translateY(-50%) translateY(-8px); }
.element-bottom:hover { transform: translateX(-50%) translateY(-8px); }

/* Número de paso decorativo */
.card-step-num {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 40px;
    font-weight: 900;
    color: rgba(255, 195, 0, 0.35);
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}
.cycle-element:hover .card-step-num { color: rgba(255, 195, 0, 0.55); }

/* Icono — uniforme: fondo navy/amarillo, icono blanco */
.element-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--primary-dark), #1a2a5e);
    box-shadow: 0 6px 20px rgba(24, 34, 89, 0.18);
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.element-icon svg,
.element-icon .icon {
    width: 28px;
    height: 28px;
    fill: var(--white);
    color: var(--white);
}

/* Forzar que SVGs cargados vía <img> se muestren en blanco */
.element-icon img.icon {
    width: 28px;
    height: 28px;
    /* convierte cualquier color a blanco manteniendo transparencia */
    filter: grayscale(1) brightness(0) invert(1);
}

.cycle-element:hover .element-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 10px 28px rgba(24, 34, 89, 0.28);
}

.element-card h4 {
    font-size: 18px;
    color: var(--primary-dark);
    margin-bottom: 6px;
    font-weight: 700;
}

.element-card > p {
    color: var(--brand-black); /* más negro */
    opacity: 0.95;
    margin-bottom: 14px;
    line-height: 1.5;
    font-size: 13px;
}

/* Tags */
.element-tags {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.element-tags span {
    background: rgba(24, 34, 89, 0.06);
    color: var(--primary-dark);
    padding: 4px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(24, 34, 89, 0.08);
    transition: all 0.3s ease;
}

.cycle-element:hover .element-tags span {
    background: rgba(52, 126, 191, 0.10);
    border-color: rgba(52, 126, 191, 0.18);
}

/* Conexiones SVG — líneas punteadas animadas */
.cycle-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* Ocultar la antigua elipse de órbita */
.orbit-path { display: none; }
.connection-line { display: none; }

/* Flechas amarillas curvadas SVG */
.cycle-arrows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* Botón "Ver más" estilo boceto */
.cycle-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 22px;
    background: #FFC300;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(255,195,0,0.3);
}
.cycle-btn:hover {
    background: #e6af00;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255,195,0,0.45);
}

@keyframes orbitDash {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -44; }
}

/* ======= Responsive Ciclo ======= */
@media (max-width: 1024px) {
    .cycle-diagram {
        max-width: 700px;
        height: 580px;
    }
    .element-card { width: 200px; padding: 24px 16px 20px; }
    .center-circle { width: 160px; height: 170px; }
    .center-circle h3 { font-size: 25px; }
    .center-icon svg { width: 30px; height: 30px; }
}

@media (max-width: 768px) {
    .security-cycle { padding: 60px 0 50px; }
    .security-cycle .section-title { font-size: 32px; }

    .cycle-diagram {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .cycle-center {
        position: relative;
        top: auto; left: auto;
        transform: none;
    }
    .center-circle { width: 150px; height: 150px; }
    .center-circle h3 { font-size: 17px; }

    .cycle-element {
        position: relative;
        top: auto !important; left: auto !important;
        right: auto !important; bottom: auto !important;
        transform: none !important;
    }
    .element-left:hover,
    .element-right:hover,
    .element-bottom:hover { transform: translateY(-6px) !important; }

    .element-card { width: 100%; max-width: 320px; }
    .cycle-connections { display: none; }
    .cycle-arrows { display: none; }
    .cycle-orbit { display: none; }
}

@media (max-width: 1024px) {
    .hero { min-height: 100vh; }
    .hero-container {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
}

@media (max-width: 992px) {
    .hero { min-height: 100vh; }
}

@media (max-width: 768px) {
    .hero { min-height: 100vh; }
    .hero-container {
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .hero { min-height: 100vh; }
    .hero-container {
        gap: 30px;
    }
}

/* Digital Concept */
.digital-concept {
    background: #f8f9fc;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Patrón de circuitos de fondo */
.circuit-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.circuit-svg {
    width: 100%;
    height: 100%;
    opacity: 1;
}

.circuit-line {
    stroke: rgba(24, 34, 89, 0.06);
    stroke-width: 1.5;
    stroke-dasharray: 8 12;
    animation: circuitDash 20s linear infinite;
}

.cl-1 { animation-delay: 0s; }
.cl-2 { animation-delay: -3s; }
.cl-3 { animation-delay: -6s; }
.cl-4 { animation-delay: -9s; }
.cl-5 { animation-delay: -2s; animation-name: circuitDashV; }
.cl-6 { animation-delay: -5s; animation-name: circuitDashV; }
.cl-7 { animation-delay: -8s; animation-name: circuitDashV; }
.cl-8 { animation-delay: -11s; animation-name: circuitDashV; }

@keyframes circuitDash {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

@keyframes circuitDashV {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

.circuit-node {
    fill: rgba(52, 126, 191, 0.15);
    animation: nodePulse 3s ease-in-out infinite;
}

.cn-1  { animation-delay: 0s; }
.cn-2  { animation-delay: 0.4s; }
.cn-3  { animation-delay: 0.8s; }
.cn-4  { animation-delay: 1.2s; }
.cn-5  { animation-delay: 1.6s; }
.cn-6  { animation-delay: 2.0s; }
.cn-7  { animation-delay: 0.2s; }
.cn-8  { animation-delay: 0.6s; }
.cn-9  { animation-delay: 1.0s; }
.cn-10 { animation-delay: 1.4s; }
.cn-11 { animation-delay: 1.8s; }
.cn-12 { animation-delay: 2.2s; }

@keyframes nodePulse {
    0%, 100% { r: 4; fill: rgba(52, 126, 191, 0.12); }
    50% { r: 7; fill: rgba(52, 126, 191, 0.3); }
}

.circuit-path {
    stroke: rgba(52, 126, 191, 0.1);
    stroke-width: 1.5;
    stroke-dasharray: 6 10;
    animation: circuitDash 15s linear infinite;
}

.cp-1 { animation-delay: -1s; }
.cp-2 { animation-delay: -4s; }
.cp-3 { animation-delay: -7s; }
.cp-4 { animation-delay: -10s; }

.circuit-pulse {
    fill: rgba(52, 126, 191, 0.5);
    filter: drop-shadow(0 0 6px rgba(52, 126, 191, 0.4));
}

.pulse-1 { fill: rgba(52, 126, 191, 0.5); }
.pulse-2 { fill: rgba(255, 195, 0, 0.5); }
.pulse-3 { fill: rgba(52, 126, 191, 0.4); }
.pulse-4 { fill: rgba(255, 195, 0, 0.4); }

.digital-concept .container {
    position: relative;
    z-index: 1;
}

.concept-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

.concept-text {
    text-align: center;
    max-width: 700px;
}

.concept-text h2 {
    font-size: 44px;
    color: var(--primary-dark);
    margin-bottom: 20px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.concept-subtitle {
    color: #000000 !important; /* negro total */
    font-size: 18px;
    line-height: 1.7;
    margin: 0;
    opacity: 1; /* totalmente negro */
}

.concept-text > p {
    color: var(--text-light);
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 40px;
}

.concept-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(20, 24, 115, 0.04);
    border: 1px solid rgba(52, 126, 191, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 126, 191, 0.04), transparent);
    transition: left 0.6s;
    pointer-events: none;
}

.feature-item:hover::after {
    left: 100%;
}

.feature-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(20, 24, 115, 0.12);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(52, 126, 191, 0.2);
}

.feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 16px 40px rgba(255, 195, 0, 0.35);
}

.feature-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    margin-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 18px;
    background: linear-gradient(135deg, #FFC300 0%, #FFD700 50%, #FFAB00 100%);
    color: var(--primary-dark);
    box-shadow: 0 8px 24px rgba(255, 195, 0, 0.25);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-icon svg { width:36px; height:36px; display:block; color:inherit; fill:currentColor; }

.feature-item h4 {
    color: var(--primary-dark);
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.3;
}

.feature-item p {
    color: var(--text-light);
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

.concept-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 40px;
    width: 100%;
    align-items: start;
}

.modules-container,
.concept-features {
    display: contents;
}

.feature-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 20px;
    padding: 20px;
    border-radius: 12px;
    transition: var(--transition-smooth);
    background: var(--white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.feature-item:hover {
    background: var(--white);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.feature-item:hover .feature-icon {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 16px 40px rgba(255,195,0,0.35);
}

.feature-item h4 {
    color: var(--primary-dark);
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}

.feature-item p {
    color: var(--text-light);
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.module-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFC300, #FFD700);
    color: var(--primary-dark);
    box-shadow: 0 12px 32px rgba(255,195,0,0.25);
    transition: var(--transition-smooth);
}

.module-icon svg {
    width: 44px;
    height: 44px;
    display: block;
    color: inherit;
    fill: currentColor;
}

.module-card {
    background: var(--white);
    padding: 36px 32px 32px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 3px solid transparent;
}

.module-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-top-color: var(--accent-blue);
}

.module-card:hover .module-icon {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 20px 48px rgba(255,195,0,0.35);
}

.module-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    justify-content: center;
}

.module-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-blue);
}

.module-card h4 {
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.module-card p {
    color: var(--text-light);
    margin: 0;
    line-height: 1.6;
    font-size: 15px;
}

/* Digital Concept Responsive */
@media (max-width: 992px) {
    .concept-content {
        gap: 40px;
    }
    
    .concept-text h2 {
        font-size: 38px;
        text-align: center;
    }
    
    .concept-visual {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .digital-concept {
        padding: 80px 0;
    }
    
    .concept-text h2 {
        font-size: 32px;
    }
    
    .concept-visual {
        grid-template-columns: 1fr;
    }
    
    .feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px;
    }
    
    .feature-icon {
        margin-right: 0;
        margin-bottom: 16px;
        width: 70px;
        height: 70px;
    }
    
    .feature-icon svg {
        width: 38px;
        height: 38px;
    }
}

/* Target Audience — Sectores que Protegemos */
.target-audience {
    background-color: #ffd86e;
    position: relative;
    overflow: hidden;
}

/* Burbujas decorativas para la sección */
.audience-bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.audience-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
    animation: floatAudienceBubble linear infinite;
}

.ab-1 { width: 100px; height: 100px; left: 5%; bottom: -120px; animation-duration: 14s; animation-delay: 0s; }
.ab-2 { width: 70px; height: 70px; left: 25%; bottom: -90px; animation-duration: 11s; animation-delay: 2s; }
.ab-3 { width: 130px; height: 130px; left: 50%; bottom: -160px; animation-duration: 18s; animation-delay: 4s; }
.ab-4 { width: 60px; height: 60px; right: 20%; bottom: -80px; animation-duration: 10s; animation-delay: 1s; }
.ab-5 { width: 90px; height: 90px; right: 5%; bottom: -110px; animation-duration: 15s; animation-delay: 3s; }

@keyframes floatAudienceBubble {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.3; }
    100% { transform: translateY(-110vh) scale(0.4); opacity: 0; }
}

.target-audience .section-title {
    color: var(--primary-dark);
}

.target-audience .section-subtitle {
    color: rgba(24, 34, 89, 0.75);
}

.target-audience .container {
    position: relative;
    z-index: 1;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    justify-items: center;
}

/* Contenedor para la fila inferior con 2 tarjetas centradas */
.audience-grid-centered {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 24px;
}
.audience-grid-centered .audience-card { width: 420px; }

/* Centrar las 2 últimas cards (fila de 2 en grid de 3) */
@media (min-width: 1025px) {
    .audience-grid .audience-card:nth-child(4) {
        grid-column: 1 / 2;
        margin-left: auto;
        margin-right: 0;
        justify-self: end;
        transform-origin: center;
    }
    .audience-grid .audience-card:nth-child(5) {
        grid-column: 2 / 3;
        margin-left: 0;
        margin-right: auto;
        justify-self: start;
        transform-origin: center;
    }
}

.audience-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    padding: 36px 32px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(255, 255, 255, 0.3) inset;
    position: relative;
    overflow: hidden;
}

.audience-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
    pointer-events: none;
}

.audience-card:hover::before {
    left: 100%;
}

.audience-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(255, 255, 255, 0.4) inset;
    border-color: rgba(255, 255, 255, 0.7);
}

.card-visual {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.card-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, #182259, #1A2B7D);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(24, 34, 89, 0.3);
    transition: all 0.3s ease;
}

.card-icon-wrap svg {
    color: #FFC300;
}

.audience-card:hover .card-icon-wrap {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 10px 30px rgba(24, 34, 89, 0.4);
}

.audience-card h3 {
    font-size: 22px;
    color: var(--primary-dark);
    margin-bottom: 14px;
    font-weight: 700;
}

.audience-card p {
    color: rgba(24, 34, 89, 0.95);
    margin-bottom: 22px;
    line-height: 1.6;
    font-size: 15px;
    font-weight: 500;
}

.card-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.card-examples span {
    background: rgba(24, 34, 89, 0.1);
    color: var(--primary-dark);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(24, 34, 89, 0.12);
    transition: all 0.3s ease;
}

.card-examples span:hover {
    background: var(--primary-dark);
    color: #FFC300;
    border-color: var(--primary-dark);
}

/* Final CTA */
.final-cta {
    background: linear-gradient(160deg, #020816 0%, #06122E 20%, #0B1A45 40%, #0E2060 55%, #091840 75%, #030A1E 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
    padding: 100px 0 140px;
    z-index: 2;
}

/* Patrón de puntos halftone */
.cta-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45%;
    height: 60%;
    background-image: radial-gradient(circle, rgba(100, 140, 220, 0.18) 1px, transparent 1px);
    background-size: 12px 12px;
    mask-image: radial-gradient(ellipse 90% 90% at 10% 90%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 90% 90% at 10% 90%, black 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    clip-path: inset(0);
}

/* Resplandores radiales sutiles */
.cta-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.cta-glow-1 {
    width: 600px;
    height: 600px;
    top: -180px;
    right: 10%;
    background: radial-gradient(circle, rgba(30, 70, 160, 0.25) 0%, rgba(15, 40, 100, 0.1) 40%, transparent 70%);
}

.cta-glow-2 {
    width: 500px;
    height: 500px;
    bottom: -120px;
    left: 15%;
    background: radial-gradient(circle, rgba(20, 60, 140, 0.2) 0%, rgba(10, 30, 80, 0.08) 40%, transparent 70%);
}

/* Orbes decorativos sutiles */
.final-cta::before,
.final-cta::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    clip-path: inset(0);
}

.final-cta::before {
    width: 350px;
    height: 350px;
    top: -80px;
    left: -60px;
    background: radial-gradient(circle, rgba(25, 60, 150, 0.15), transparent 70%);
}

.final-cta::after {
    width: 300px;
    height: 300px;
    bottom: -80px;
    right: -60px;
    background: radial-gradient(circle, rgba(15, 50, 130, 0.12), transparent 70%);
}

@keyframes floatBubble {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translate(50px, -50px) scale(1.1);
        opacity: 0.8;
    }
    50% {
        transform: translate(100px, -20px) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translate(30px, 30px) scale(1.05);
        opacity: 0.7;
    }
}

/* Burbujas adicionales decorativas */
.cta-bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 195, 0, 0.1), rgba(255, 255, 255, 0.06), transparent 70%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    animation: floatUp linear infinite;
}

.bubble-1 {
    width: 80px;
    height: 80px;
    left: 10%;
    bottom: -100px;
    animation-duration: 12s;
    animation-delay: 0s;
}

.bubble-2 {
    width: 120px;
    height: 120px;
    left: 35%;
    bottom: -150px;
    animation-duration: 16s;
    animation-delay: 3s;
}

.bubble-3 {
    width: 60px;
    height: 60px;
    right: 25%;
    bottom: -80px;
    animation-duration: 10s;
    animation-delay: 6s;
}

.bubble-4 {
    width: 100px;
    height: 100px;
    right: 10%;
    bottom: -120px;
    animation-duration: 14s;
    animation-delay: 2s;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(-120vh) scale(0.5);
        opacity: 0;
    }
}

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

.cta-text h2 {
    font-size: 46px;
    margin-bottom: 24px;
    font-weight: 800;
    font-style: italic;
    line-height: 1.18;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.cta-text > p {
    font-size: 17px;
    opacity: 0.8;
    margin-bottom: 40px;
    line-height: 1.7;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}

.cta-benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.check {
    color: #FFC300;
    font-weight: bold;
    font-size: 20px;
    text-shadow: 0 0 10px rgba(255, 195, 0, 0.5);
}

.benefit-item span:last-child {
    opacity: 0.9;
    font-size: 16px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Contact Form - Card con borde brillante azul */
.contact-form {
    background: linear-gradient(145deg, rgba(15, 30, 80, 0.7), rgba(10, 20, 60, 0.85));
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    padding: 44px 40px 52px;
    border-radius: 20px;
    border: 1.5px solid rgba(80, 140, 255, 0.35);
    box-shadow: 0 0 30px rgba(40, 90, 200, 0.2),
                0 0 60px rgba(30, 70, 180, 0.1),
                0 20px 60px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: visible;
}

/* Efecto de brillo sutil en la card */
.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(80, 140, 255, 0.06), 
        transparent);
    animation: shimmer 4s infinite;
    z-index: 0;
    pointer-events: none;
    border-radius: 20px;
    overflow: hidden;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.form-group {
    margin-bottom: 24px;
    position: relative;
    z-index: 10;
}

.form-group:last-of-type {
    margin-bottom: 28px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text-dark);
    font-size: 16px;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* remove inline arrow — we'll render it via .select-wrap::after */
    background-image: none;
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 16px;
}

.form-group input::placeholder {
    color: rgba(26,26,26,0.45);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 8px 20px rgba(52,126,191,0.08);
    background: #ffffff;
}

/* Acomodar el <select> dentro de forms con fondo oscuro (como .contact-form) */
.contact-form .form-group select,
.contact-form .form-group input {
    background: rgba(30, 50, 120, 0.35);
    color: var(--white);
    border: 1px solid rgba(80, 130, 240, 0.2);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.contact-form .form-group select {
    background-image: none;
    cursor: pointer;
    position: relative;
    z-index: 50;
}

.contact-form .form-group select:focus {
    z-index: 999;
    outline: none;
}

.contact-form .select-wrap:focus-within::after {
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-50%) rotate(180deg);
    z-index: 1000;
}

.contact-form .form-group select:focus,
.contact-form .form-group input:focus {
    background: rgba(35, 60, 140, 0.45);
    border-color: rgba(80, 140, 255, 0.5);
    box-shadow: 0 0 16px rgba(60, 120, 240, 0.2), inset 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

/* Input sin transform para evitar problemas con dropdown */
.contact-form .form-group input:focus {
    transform: translateY(-2px);
}

/* Placeholder y opciones en formularios oscuros: texto en blanco con buena legibilidad */
.contact-form .form-group input::placeholder,
.contact-form .form-group select::placeholder {
    color: rgba(255,255,255,0.75);
}

.contact-form .select-wrap select {
    color: var(--white);
}

.contact-form .select-wrap select option {
    color: #1a1a1a !important;
    background: #ffffff !important;
    padding: 14px 20px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    border: none;
}

.contact-form .select-wrap select option:hover,
.contact-form .select-wrap select option:checked {
    background: #347EBF !important;
    color: #ffffff !important;
    font-weight: 500;
}

.contact-form .select-wrap select option[value=""] {
    color: rgba(26, 26, 26, 0.6) !important;
}

/* Opcional: estilos para las opciones (visual sólo en navegadores que lo soporten) */
.form-group select option {
    color: var(--text-dark);
    background: #ffffff;
    padding: 12px 16px;
}

.form-group select option:hover,
.form-group select option:checked {
    background: var(--accent-blue);
    color: #ffffff;
}

/* Botón del formulario - amarillo con glow */
.contact-form .btn-primary {
    background: linear-gradient(135deg, #F5C800, #FFDF00, #F5B400);
    border: none;
    color: #0A1030;
    font-weight: 700;
    padding: 18px 32px;
    font-size: 17px;
    border-radius: 50px;
    box-shadow: 0 6px 28px rgba(245, 180, 0, 0.45),
                0 2px 8px rgba(245, 200, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 5;
    letter-spacing: 0.3px;
}

.contact-form .btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: -1;
}

.contact-form .btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.contact-form .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(245, 180, 0, 0.55),
                0 4px 12px rgba(245, 200, 0, 0.35);
}

.contact-form .btn-primary:active {
    transform: translateY(-1px);
}

.form-group select {
    cursor: pointer;
}

.form-group option {
    background: var(--primary-dark);
    color: var(--white);
}

/* Footer */
.footer {
    background: linear-gradient(135deg, 
        #0A1744 0%, 
        #111D66 15%, 
        #182259 30%, 
        #152655 50%,
        #0F1A44 70%, 
        #08102E 100%);
    background-size: 400% 400%;
    animation: footerGradient 25s ease infinite;
    color: var(--white);
    padding: 80px 0 30px;
    position: relative;
    overflow: hidden;
    max-width: 100vw;
}

@keyframes footerGradient {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 50% 100%; }
    75% { background-position: 0% 50%; }
    100% { background-position: 0% 50%; }
}

/* Orbes decorativos flotantes en el footer */
.footer-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.footer-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.2;
    animation: orbFloatFooter 30s ease-in-out infinite;
}

.orb-1 {
    width: 500px;
    height: 500px;
    top: -200px;
    left: -150px;
    background: radial-gradient(circle, rgba(52, 126, 191, 0.4), transparent 70%);
    animation-delay: 0s;
}

.orb-2 {
    width: 600px;
    height: 600px;
    bottom: -250px;
    right: -200px;
    background: radial-gradient(circle, rgba(255, 200, 0, 0.25), rgba(52, 126, 191, 0.2), transparent 70%);
    animation-delay: -10s;
}

.orb-3 {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(20, 34, 115, 0.3), transparent 70%);
    animation-delay: -20s;
}

@keyframes orbFloatFooter {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -50px) scale(1.1); }
    50% { transform: translate(-30px, 30px) scale(0.9); }
    75% { transform: translate(50px, 20px) scale(1.05); }
}

.footer .container {
    position: relative;
    z-index: 1;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    margin-bottom: 40px;
    align-items: start;
}

.footer-brand {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 32px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    transition: all 0.4s ease;
}

.footer-brand:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(52, 126, 191, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(52, 126, 191, 0.15);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    justify-content: flex-start;
}

.footer-logo img {
    width: 160px;
    height: auto;
    max-width: 100%;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(52, 126, 191, 0.3));
    transition: transform 0.3s ease;
}

.footer-brand:hover .footer-logo img {
    transform: scale(1.05);
}

.footer-logo span {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    text-shadow: 0 2px 8px rgba(52, 126, 191, 0.3);
}

.footer-brand p {
    opacity: 0.95;
    line-height: 1.7;
    margin: 0;
    color: rgba(255,255,255,0.95);
    max-width: 300px;
    font-size: 15px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* tres columnas: Servicios / Sectores / Contacto */
    gap: 24px;
    align-items: start;
}

.link-column {
    background: rgba(255, 255, 255, 0.02);
    padding: 24px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.link-column:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(52, 126, 191, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(52, 126, 191, 0.12);
}

.link-column h4 {
    margin-bottom: 24px;
    font-weight: 700;
    font-size: 18px;
    color: var(--white);
    position: relative;
    padding-bottom: 12px;
}

.link-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), transparent);
    border-radius: 2px;
}

.link-column a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    margin-bottom: 14px;
    transition: all 0.3s ease;
    padding: 6px 0;
    font-size: 14px;
}

.link-column a:hover {
    color: var(--white);
    padding-left: 8px;
    text-shadow: 0 2px 8px rgba(52, 126, 191, 0.4);
}

/* Footer contact icons */
.footer-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 10px;
    color: var(--white);
    /* mantén una sombra sutil para contraste sobre fondos oscuros */
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    transition: transform 0.3s ease;
}

.link-column a:hover .footer-icon {
    transform: scale(1.15) rotate(5deg);
}

/* Excepción: mostrar el icono de Google Maps tal cual (sin invertir/escala de grises) */
.footer-icon.maps-icon {
    filter: none !important;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Si el icono es una imagen (PNG), forzar conversión a blanco manteniendo transparencia */
.footer-icon[src$=".png"], .footer-icon[src$=".jpg"], .footer-icon[src$=".jpeg"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
}

/* Si por alguna razón hay SVG inline dentro del enlace, asegurar su relleno blanco */
.link-column a .footer-icon svg,
.link-column a .footer-icon svg * {
    fill: var(--white) !important;
    color: var(--white) !important;
}

/* Contenedor full-width para el mapa */
.footer-map-container {
    width: 100%;
    margin: 20px 0 30px;
    position: relative;
    z-index: 1;
}

.footer-map {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(52, 126, 191, 0.25);
    transition: all 0.4s ease;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
}

.footer-map:hover {
    box-shadow: 0 16px 50px rgba(52, 126, 191, 0.35);
    border-color: rgba(52, 126, 191, 0.5);
    transform: translateY(-3px);
}

.footer-map iframe {
    width: 100%;
    height: 280px;
    border: 0;
    filter: grayscale(0.15) contrast(1.15);
    transition: filter 0.3s ease;
}

.footer-map:hover iframe {
    filter: grayscale(0) contrast(1.2);
}

@media (max-width: 576px) {
    .footer-map iframe { height: 200px; }
}

/* Footer responsive: 2 columnas en tablet, 1 en móvil */
@media (max-width: 900px) {
    .footer-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .footer-links { grid-template-columns: 1fr; gap: 16px; }
    .link-column { padding: 18px; }
    .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* Ensure icons in footer links keep good contrast */
.footer .link-column a { color: rgba(255,255,255,0.85); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.95;
    margin-top: 20px;
    position: relative;
}

.footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
    border-radius: 2px;
}

.footer-bottom p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-legal {
    display: flex;
    gap: 28px;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    position: relative;
}

.footer-legal a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-blue);
    transition: width 0.3s ease;
}

.footer-legal a:hover {
    color: var(--white);
    text-shadow: 0 2px 8px rgba(52, 126, 191, 0.4);
}

.footer-legal a:hover::after {
    width: 100%;
}

/* Animations */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

.fade-in:nth-child(1) {
    animation-delay: 0s;
}

.fade-in:nth-child(2) {
    animation-delay: 0.2s;
}

.fade-in:nth-child(3) {
    animation-delay: 0.4s;
}

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

/* Responsive Design */

/* Tablet */
@media (max-width: 1024px) {
    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    /* Centrar la 5ta card (última) cuando es impar */
    .audience-grid .audience-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 50%;
        justify-self: center;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px 0;
    }
    
    .nav-menu {
        display: none;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .hero-title {
        font-size: 48px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .security-circle {
        width: 280px;
        height: 280px;
    }
    
    .inner-circle {
        width: 140px;
        height: 140px;
    }
    
    .icon-item {
        width: 60px;
        height: 60px;
    }
    
    .icon-item img {
        width: 38px;
        height: 38px;
    }
    
    .section-title {
        font-size: 36px;
    }
    
    .section-subtitle {
        font-size: 18px;
    }
    
    .about-content,
    .concept-content,
    .cta-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .stats {
        grid-template-columns: 1fr;
    }
    
    .cycle-items {
        grid-template-columns: 1fr;
        margin-top: 60px;
    }
    
    .cycle-center {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto 40px;
    }
    
    .audience-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-logo {
        justify-content: center; /* centrar logo en mobile */
    }

    .footer-logo img {
        width: 160px;
        height: auto;
    }

    /* Alinear la sección de marca en mobile para que logo y texto queden juntos */
    .footer-brand {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }

    .footer-brand p {
        max-width: 320px;
        margin-top: 6px;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .link-column a {
        justify-content: center; /* centrar los enlaces con icono */
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

/* Ajustes adicionales para icono y estadísticas en móvil pequeño */
@media (max-width: 480px) {
    .building-icon {
        font-size: 56px;
    }

    .visual-placeholder {
        padding: 28px 18px;
    }

    .stat-item {
        padding: 18px;
    }

    .stat-item h4 {
        font-size: 32px;
    }
}

/* Mejoras específicas para footer en pantallas muy pequeñas */
@media (max-width: 968px) {
    .footer {
        padding: 60px 0 30px;
    }
    
    .footer-content {
        gap: 35px;
    }
    
    .footer-brand {
        max-width: 100%;
        margin: 0 auto;
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .footer-map iframe {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 50px 0 25px;
    }
    
    .footer-orb {
        filter: blur(60px);
        opacity: 0.15;
    }
    
    .footer-brand {
        padding: 24px;
    }
    
    .link-column {
        padding: 20px 16px;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .footer-map iframe {
        height: 220px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .footer {
        padding: 40px 0 20px;
        padding-bottom: 160px; /* espacio extra para el FAB y evitar solapado */
    }

    .footer-content {
        text-align: center;
    }
    
    .footer-brand {
        align-items: center;
        padding: 20px;
    }

    .footer-logo {
        justify-content: center; /* centrar logo en mobile */
    }

    .footer-logo img {
        width: 130px;
        height: auto;
    }

    .link-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 18px 14px;
    }
    
    .link-column h4 {
        text-align: center;
    }
    
    .link-column h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-map iframe {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 36px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .cta-text h2 {
        font-size: 32px;
    }
    
    .contact-form {
        padding: 24px;
    }
    
    .problem-grid {
        grid-template-columns: 1fr;
    }
    
    .security-circle {
        width: 240px;
        height: 240px;
    }
    
    .inner-circle {
        width: 110px;
        height: 110px;
    }
    
    .icon-item {
        width: 50px;
        height: 50px;
    }
    
    .icon-item img {
        width: 30px;
        height: 30px;
    }
    
    .section-title {
        font-size: 28px;
    }
}


/* Wrapper for select/custom-select. The custom-select component
   renders its own arrow SVG; remove pseudo-element to avoid duplicate arrows. */
.select-wrap { 
    position: relative;
    overflow: visible;
    z-index: 100;
}

/* Mobile adjustments for "Sectores que Protegemos" cards */
@media (max-width: 768px) {
    .audience-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        justify-items: stretch;
    }

    .audience-grid-centered {
        display: flex;
        flex-direction: column;
        gap: 18px;
        align-items: center;
        margin-top: 18px;
    }

    .audience-grid-centered .audience-card {
        width: 100%;
        max-width: 680px;
    }

    .audience-card {
        padding: 20px;
        border-radius: 14px;
        text-align: left;
    }

    .audience-card:hover { transform: none; }

    .card-visual { justify-content: flex-start; margin-bottom: 12px; }

    .card-icon-wrap {
        width: 64px;
        height: 64px;
        border-radius: 12px;
    }

    .card-icon-wrap svg { width: 36px; height: 36px; }

    .audience-card h3 { font-size: 18px; margin-bottom: 10px; }

    .audience-card p { font-size: 14px; line-height: 1.5; color: rgba(24,34,89,0.95); font-weight: 600; }

    .card-examples { justify-content: flex-start; }

    .card-examples span { font-size: 13px; padding: 6px 10px; }
}

@media (max-width: 420px) {
    .card-icon-wrap { width: 56px; height: 56px; }
    .card-icon-wrap svg { width: 30px; height: 30px; }
    .cta-text h2 { font-size: 28px; }
}

/* Additional mobile polish for Sectores que Protegemos */
@media (max-width: 768px) {
    .target-audience {
        padding-top: 30px;
        padding-bottom: 140px; /* espacio para botones flotantes */
    }

    .target-audience .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .audience-bubbles { display: none; }

    .audience-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: stretch;
    }

    .audience-card {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
        padding: 18px 16px;
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(8,16,48,0.12);
        background: rgba(255,255,255,0.12);
    }

    .audience-card::before { left: -140%; }

    .card-visual { margin-bottom: 10px; }

    .card-examples { justify-content: flex-start; }

    .card-examples span { display: inline-block; margin-right: 8px; }

    /* Ensure last cards are fully visible above floating buttons */
    .audience-grid-centered { gap: 16px; }
    .audience-grid-centered .audience-card { width: 100%; max-width: 620px; }
}

.contact-form .select-wrap {
    z-index: 1500;
    position: relative;
}

/* Flecha personalizada para el select del formulario - solo si custom-select NO está activo */
.contact-form .select-wrap::after {
    content: '▼';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    font-size: 12px;
    z-index: 5;
    transition: transform 0.3s ease, color 0.3s ease;
    display: none; /* ocultar porque el custom-select ya tiene su propia flecha */
}

.contact-form .select-wrap select {
    padding-right: 45px;
}

/* Custom select component styles */
.custom-select {
    position: relative;
    width: 100%;
    z-index: 100;
}
.custom-select .cs-selected {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 18px 14px 18px;
    padding-right: 48px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,0.24), rgba(255,255,255,0.12));
    color: rgba(10,10,10,0.92);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
    transition: all 0.25s ease;
}
.custom-select .cs-selected:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.custom-select .cs-selected .arrow {
    width: 14px;
    height: 14px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.22s ease, right 0.18s ease;
}
.custom-select .cs-selected .arrow svg path { fill: currentColor; }
.custom-select.open .cs-selected .arrow { transform: translateY(-50%) rotate(180deg); }
.custom-select .cs-options {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    max-height: 260px;
    overflow: auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(16,24,115,0.12);
    padding: 8px;
    z-index: 9999;
    display: none;
}
.custom-select.open .cs-options { display: block; }
.custom-select .cs-options li {
    list-style: none;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-dark);
    transition: all 0.2s ease;
}
.custom-select .cs-options li:hover,
.custom-select .cs-options li.active {
    background: var(--accent-blue);
    color: #fff;
}

/* single arrow: rotate when open */
.custom-select .cs-selected .arrow { transform: rotate(0deg); transition: transform 0.22s ease; }
.custom-select.open .cs-selected .arrow { transform: rotate(180deg); }

/* ===== Dark variant for contact-form: SÓLIDO y visible ===== */
.contact-form .custom-select {
    z-index: 1500;
}

.contact-form .custom-select .cs-selected {
    background: rgba(255,255,255,0.15);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.30);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
}

.contact-form .custom-select .cs-selected:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.contact-form .custom-select.open .cs-selected {
    background: rgba(255,255,255,0.22);
    border-color: rgba(52, 126, 191, 0.6);
    box-shadow: 0 4px 16px rgba(52, 126, 191, 0.3);
}

.contact-form .custom-select .cs-options {
    background: #1A2563;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
    z-index: 9999;
    backdrop-filter: blur(20px);
}

.contact-form .custom-select .cs-options li {
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.contact-form .custom-select .cs-options li:last-child {
    border-bottom: none;
}

.contact-form .custom-select .cs-options li:hover {
    background: rgba(52, 126, 191, 0.5);
    color: #ffffff;
}

.contact-form .custom-select .cs-options li.active {
    background: var(--accent-blue);
    color: #ffffff;
    font-weight: 600;
}

/* Extra mobile fixes for Sectores que Protegemos (final adjustments) */
@media (max-width: 768px) {
    /* Force all audience cards to full-width and remove centering oddities */
    .audience-grid {
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
        gap: 16px;
    }

    .audience-grid .audience-card,
    .audience-grid-centered .audience-card {
        width: 100% !important;
        max-width: 680px !important;
        margin: 0 auto !important;
    }

    /* Reduce top empty space on the first card and make cards visually contiguous */
    .target-audience { padding-top: 14px; }
    .audience-card { margin-top: 0; }

    /* Improve chip contrast and sizing */
    .card-examples span {
        background: rgba(15,30,60,0.12);
        color: #071233;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 13px;
        box-shadow: none;
    }

    /* Make sure floating buttons don't overlap critical content */
    .target-audience { padding-bottom: 180px; }
}