/* ========================================================================
   1. HERO GLOBAL Y VIDEO DE FONDO
   ======================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  background: #000; /* Fallback si no hay video */
  color: var(--txt);
  overflow: hidden;
}

/* Video/imagen de fondo global (fijo) */
.hero-video,
.hero .hero-bg {
  position: fixed; /* Clave: Fijo para que se mantenga detrás de todo */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;      /* Capa base */
  pointer-events: none; /* Los clics atraviesan el video */
}

/* Superposición de contraste (fija) */
.hero-overlay {
  position: fixed; /* Clave: Fija para cubrir el video */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;      /* Encima del video, debajo del contenido */
  background: radial-gradient(1200px 600px at 70% 30%, rgba(0,255,255,0.10), rgba(0,0,0,0.0) 55%), rgba(0,0,0,0.25);
}

/* Todo el contenido debe estar por encima del overlay */
.hero-container,
.home-services, 
.home-stats, 
.home-work, 
.home-cta,
.page .entry-content {
  position: relative;
  z-index: 4;
}

/* Contenedor general del Hero */
.hero-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* CLAVE: Añadir padding superior para que el contenido no quede bajo el nav fijo */
    
    padding-top: calc(75px + clamp(16px, 4vw, 40px));
}

/* Grid del Hero: 2 columnas */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  /* Ajuste de min-height para que se acomode al espacio visible */
    min-height: calc(100vh - 75px - clamp(32px, 8vw, 80px)); 
}

/* Izquierda: Card del Logo */
.logo-card {
  background: rgba(255, 255, 255, 0.103);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: clamp(28px, 4.8vw, 48px);
  display: grid;
  place-items: center;
  min-height: 320px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.514);
  z-index: 5; /* aseguro por encima del overlay si procede */
}

.logo-img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(0, 255, 255, 0.274));
}

/* Derecha: Contenido del Hero */
.hero-content {
  text-align: left;
}

.hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--accent);
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}

.hero-subtitle {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px;
}

.hero-location {
  margin: 10px 0 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--txt);
  opacity: .9;
}

.social-inline {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.social-inline .btn-3d {
  white-space: nowrap;
  line-height: 1;
}


/* ========================================================================
   2. BOTONES 3D & GLOW (Estilos Base y Variantes)
   ======================================================================== */

:root{
  --btn3d-bg-top: #242525bb;
  --btn3d-bg-bottom: #0a1518;
  --btn3d-text: #eaf6ff;
  --btn3d-depth: 16px;
  --btn3d-shadow: 26px;
  --glow-a:#ff0040;
  --glow-b:#00d1ff;
  --glow-c:#ff006a;
}

/* Base del Botón 3D */
.btn-3d {
  position: relative;
  display: inline-block;
  padding: 16px 32px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--btn3d-text);
  background: linear-gradient(180deg, var(--btn3d-bg-top), var(--btn3d-bg-top));
  border: 1px solid rgba(255,255,255,.10);
  transform: translateY(calc(-1 * var(--btn3d-depth)));
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease, filter .18s ease;
  isolation: isolate;
  box-shadow:
    0 var(--btn3d-shadow) calc(var(--btn3d-shadow) * 1.2) rgba(37, 37, 37, 0.55),
    inset 0 2px 0 rgba(255,255,255,.08);
  overflow: hidden;
}

/* Canto frontal que da la altura */
.btn-3d::after {
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: calc(-1 * var(--btn3d-depth));
  height: var(--btn3d-depth);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  background: linear-gradient(180deg, var(--btn3d-bg-top), var(--btn3d-bg-bottom));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.55);
  z-index:-1;
}

/* Sombra en el "suelo" */
.btn-3d::before {
  content:"";
  position:absolute;
  left:-18%; right:-18%;
  bottom: calc(-1 * (var(--btn3d-depth) + 8px));
  height: calc(var(--btn3d-depth) * .9);
  background: radial-gradient(60% 140% at 50% 0%, rgba(0,0,0,.55), rgba(0,0,0,0));
  filter: blur(6px);
  z-index:-2;
}

/* Brillo especular (gloss) */
.btn-3d .btn-3d__gloss {
  position:absolute;
  left: 8%; right: 8%;
  top: 8%;
  height: 38%;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0));
  pointer-events:none;
  mix-blend-mode: screen;
  transition: transform .18s ease, opacity .18s ease;
}

/* Interacción 3D */
.btn-3d:hover{ transform: translateY(calc(-1 * var(--btn3d-depth) - 3px)); filter: saturate(1.05);}
.btn-3d:active{ transform: translateY(calc(-1 * var(--btn3d-depth) + 2px)); }
.btn-3d:focus-visible{ outline: 2px solid rgba(0,255,255,.65); outline-offset: 4px; }

/* Efecto Glow */
.btn-glow .glow-layer {
  pointer-events:none;
}
.btn-3d.btn-glow > .glow-layer {
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: 16px; /* Coincide con el radio del botón */
  background: conic-gradient(from 0deg, var(--glow-a), var(--glow-b), var(--glow-c), var(--glow-a));
  filter: blur(12px);
  opacity: .16;
  z-index: -1;
}
.btn-3d.btn-glow:hover > .glow-layer {
  opacity:.38;
  animation: glowSpin 3s linear infinite;
}

/* Variantes de Botones */
.btn-3d--primary { color:#fff; }
.btn-3d--secondary {
  background: linear-gradient(180deg, #141922, #0c0f16);
  border-color: rgba(255,255,255,.08);
  color:#e7f4ff;
}
.btn-3d--secondary.btn-glow > .glow-layer { opacity:.12; }
.btn-3d--secondary:hover { filter: saturate(1.02); }

.btn-3d--link {
  background: linear-gradient(180deg, #0f1b1e, #0b1416);
  color:#cfefff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight:700;
  text-transform:none;
  letter-spacing:.3px;
}
.btn-3d--link.btn-glow > .glow-layer{ opacity:.10; }

.btn-3d--pill { border-radius:999px; padding:12px 22px; text-transform:none; font-weight:700; }
.btn-3d--lg { padding:18px 36px; font-size:1.06rem; }

/* ========================================================================
   3. SECCIONES DE LA PÁGINA DE INICIO (HOME)
   ======================================================================== */

.home-wrap { 
  max-width:1200px; 
  margin:0 auto; 
  padding: clamp(24px, 6vw, 60px);
  box-sizing: border-box;
  
}

/* Services */
.home-services { background: rgba(247, 242, 242, 0.103); border-top:1px solid rgba(255,255,255,0.06); }
.svc-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px, 3vw, 28px); }
.svc-card {
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:24px;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.svc-card h3 { font-family:'Orbitron',sans-serif; color:var(--accent); margin:0 0 8px; }
.svc-card p { color:var(--muted); margin:0 0 14px; }

/* Stats */
.home-stats { background: radial-gradient(1000px 500px at 10% 50%, rgba(0,255,255,.12), transparent), #0b0d104b; }
.stats-row { 
  display:flex; 
  flex-wrap: wrap; /* CLAVE: Permite que los elementos pasen a la línea de abajo */
  gap: clamp(18px, 6vw, 60px); 
  justify-content: center; 
  text-align:center; 
}
/* QUITAMOS el 'min-width:180px' y ponemos un ancho flexible */
.stats-row div { width: 30%; max-width: 180px; min-width: 120px; } 
.stats-row strong { display:block; font-size: clamp(1.8rem, 4vw, 2.4rem); color:#fff; }
.stats-row span { color: var(--muted); }

/* Ajuste específico para móvil (opcional: poner en columna si queda muy estrecho) */
@media (max-width: 480px) {
    .stats-row { flex-direction: column; gap: 30px; }
    .stats-row div { width: auto; max-width: none; min-width: 100%; }
}

/* Work Teaser */
.home-work { background: #0a0c0f96; border-top:1px solid rgba(255,255,255,.06); text-align:center; }
.home-work h2 { font-family:'Orbitron',sans-serif; color:var(--accent); margin:0 0 8px; }
.home-work .lead { color:var(--muted); margin:0 0 18px; }

/* Contact CTA */
.home-cta { background: linear-gradient(180deg,#0b1113ab,#0a0d10ad); border-top:1px solid rgba(255,255,255,.06); }
.cta-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.cta-row h3 { margin:0; font-size: clamp(1.2rem, 3vw, 1.6rem); }


/* ========================================================================
   4. PÁGINA DE CONTACTO
   ======================================================================== */
   
.hero.contact-hero {
    min-height: 100vh;
    height: 100vh; 
    display: flex; 
    align-items: center;
    justify-content: center;
    padding: 0; 
    overflow: hidden;
}
.contact-hero .hero-container {
    width: 100%;
    max-width: 1200px;
    padding: clamp(10px, 2vh, 20px) 15px; 
    max-height: 100vh; 
    overflow-y: auto; 
    overflow-x: hidden;
}

.contact-card {
    max-width: 960px; 
    margin: 0 auto;
    padding: 0; 
    border-radius: 15px; 
    overflow: hidden;
    position: relative; 
    z-index: 10;
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.7); 
}

.contact-card::before {
    content: '';
    position: absolute;
    inset: -3px; 
    border-radius: 18px; 
    z-index: -1; 
    background: linear-gradient(
        45deg, #4400ff7a, #002fff65, #ffff0057, #00aeff67, #00ffff62, #00f7ff46, #9900ff57, #00c3ff41 
    );
    background-size: 300% 300%; 
    animation: rainbow-border 6s linear infinite, moving-gradient 10s ease infinite alternate;
    filter: blur(2px); 
    opacity: 0.9;
}

.contact-split-container {
    display: grid;
    align-items: center; 
    grid-template-columns: 55% 45%; 
    position: relative;
    z-index: 1; 
}

.contact-form-column {
    padding: clamp(20px, 4vw, 35px);
}
.contact-info-column {
    padding: clamp(20px, 4vw, 35px);
    color: #b0c4de; 
    border-left: 1px solid rgba(255, 255, 255, 0.08); 
}

.form-title-h2, .info-title-h2 {
    font-size: 1.5rem;
    color: #fff; 
    margin-bottom: 20px;
}

.semprini-form input[type="text"],
.semprini-form input[type="email"],
.semprini-form textarea {
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 1rem;
    color: #eaf6ff; 
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px);
    margin-bottom: 18px; 
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3); 
    transition: all 0.2s ease;
}
.semprini-form textarea {
    margin-bottom: 25px;
}
.semprini-form input:focus, .semprini-form textarea:focus {
    border-color: #00ffff;
    outline: none;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.2);
}
.semprini-form ::placeholder { 
    color: rgba(255, 255, 255, 0.5); 
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px; 
    padding: 12px; 
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.1);
}
.info-item strong { display: block; } 
.info-item .icon { font-size: 1.6rem; color: #00ffff; }
.info-item a { color: #87CEEB; text-decoration: none; }
.info-item a:hover { color: #00ffff; }


/* Alertas del Formulario de Contacto */
.form-alert-container { min-height: 20px; margin-bottom: 20px; }
.form-alert {
    padding: 15px 20px; border-radius: 10px; font-weight: 600; text-align: center; border: 1px solid;
    backdrop-filter: blur(8px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    animation: fadeIn .4s ease-out;
}
.form-alert.success { background: rgba(0, 255, 128, 0.15); color: #00ff80; border-color: rgba(0, 255, 128, 0.6); box-shadow: 0 0 15px rgba(0, 255, 128, 0.6); }
.form-alert.error { background: rgba(255, 70, 70, 0.15); color: #ff4646; border-color: rgba(255, 70, 70, 0.6); box-shadow: 0 0 15px rgba(255, 70, 70, 0.6); }
.field-error-alert {
    padding: 8px 12px; margin-top: -10px; margin-bottom: 10px; font-size: 0.85rem; text-align: left; border-radius: 8px; 
    box-shadow: 0 0 8px rgba(255, 70, 70, 0.3); 
    /* Hereda los colores de .form-alert.error */
    background: rgba(255, 70, 70, 0.15); color: #ff4646; border: 1px solid rgba(255, 70, 70, 0.6);
}


/* ========================================================================
   5. PÁGINA DE ENTRADA INDIVIDUAL (single.php)
   ======================================================================== */

/* --- FIX DE CAPAS: Trae el contenido de la página al frente  blog --- */

main {
    /* CLAVE: Establece un nuevo contexto de apilamiento */
    position: relative; 
    
    /* CLAVE: Lo eleva por encima del hero-video (z-index: 0) y hero-overlay (z-index: 1) */
    z-index: 2;         
}

/* Estilos de la Tarjeta Principal (el contenedor card) */
.single-post-card {
    position: relative;
    /* Estilos de Card: Esquinas redondeadas, fondo semitransparente, sombra */
    border-radius: 12px;
    background: var(--card-bg, rgba(17, 25, 40, 0.9)); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    /* Padding interior: Ajuste responsivo */
    padding: clamp(30px, 5vw, 60px); 
    
    margin: 40px auto; /* Centrar y separación vertical */
    max-width: 900px; /* Ancho máximo para facilitar la lectura */
    z-index: 3; /* Asegura que esté por encima del video de fondo fijo */
    
    /* Efecto de cristal */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Estilos del Título y Meta data */
.single-post-card .single-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--accent, #00ffff);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: clamp(2rem, 4vw, 3rem);
}

.single-post-card .single-meta {
    display: block;
    color: var(--muted, #aaa);
    font-size: 0.9em;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Línea de separación sutil */
}

/* Estilos para la Imagen Destacada (la hace "full-width" dentro del card) */
.single-featured-image {
    /* Margen negativo para extender la imagen al borde del padding */
    margin: 0 calc(-1 * clamp(30px, 5vw, 60px)) 30px; 
    overflow: hidden;
    /* Redondea solo las esquinas superiores si la imagen va arriba */
    border-radius: 12px 12px 0 0; 
}
.single-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Estilos para el Contenido (párrafos, listas, etc.) */
.single-post-card .entry-content {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--txt);
}
.single-post-card .entry-content p:last-child {
    margin-bottom: 30px; /* Separación del botón de volver */
}
.single-post-card .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}

/* Estilo del botón de Volver */
.single-post-card .back-to-blog {
    margin-top: 30px;
    display: inline-block;
}


/* --- Tablet / Pantallas Pequeñas (max-width: 900px - Reglas de Layout) --- */
@media (max-width: 900px) {
    /* -------------------------- Mobile NAV Layout -------------------------- */
    /* 1. Mostrar Hamburguesa y Ocultar Desktop Menu */
    
    /* ---------------------- Fin Mobile NAV Layout -------------------------- */

    /* Reglas de layout existentes */
    .hero-grid { grid-template-columns: 1fr; }
    .logo-card { min-height: 220px; }
    .hero-content { text-align: center; }
    .svc-grid { grid-template-columns:1fr; }
    .cta-row { flex-direction: column; text-align:center; }
    .contact-split-container { grid-template-columns: 1fr; }
    .contact-info-column { border-left: none !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; }
    .hero.contact-hero { height: auto; min-height: 100vh; }
    .contact-hero .hero-container { max-height: none; overflow-y: visible; }
}

/* --- Celulares / Pantallas Pequeñas (max-width: 768px - Optimizaciones) --- */
@media (max-width: 768px) {
    /* CLAVE: Ocultamos el video y el robot para móviles */
    .hero-video { display: none; }
    .hero-3d-model-container,
    .spline-watermark-hider { display: none; }
    .hero-bg { display: block !important; }
    
    /* Regla móvil para botones sociales */
    .social-inline{ 
        flex-wrap: wrap;
         justify-content: center; 
         margin-bottom: 25px;
        }

    /* Ajuste de Modal de Video para móvil (movido desde el final) */
    .video-modal { max-width: 100%; }
    .video-overlay { padding: 0; }
    .vm-close {
        top: 10px; 
        right: 10px;
        color: var(--accent);
        background: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        padding: 5px 12px;
        font-size: 1.5rem;
    }

    .home-wrap{
        padding-top: 20px;
        padding-bottom: 55px;
        
    }

    /* Botón 3D base */
.btn-3d {
    /* ... otros estilos ... */
    
    /* Ajuste de PADDING para un tamaño más compacto y elegante */
    padding: 8px 14px; /* Vertical | Horizontal */
    font-size: 1.2rem; /* Letra un poco más pequeña, opcional */
    font-weight: 600;
    line-height: 1.2;
    
}

.hero-title{
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    
    padding-left: 20px;
        padding-right: 20px;
}

.logo-card{
   bottom: 80px;
    min-height: 180px;}


}


/* --- Media Query para accesibilidad --- */
@media (prefers-reduced-motion: reduce){ 
    .btn-3d, .btn-glow, .btn-3d.btn-glow > .glow-layer{ 
        transition:none !important; 
        animation:none !important; 
    } 
} 

/* =======================================================
   MEDIA QUERY: AJUSTES PARA DISPOSITIVOS MÓVILES (<= 768px)
   ======================================================= */
@media (max-width: 768px) {

    /* 1. Redefinir el contenedor principal para apilar las columnas */
    .contact-split-container {
        /* Asumiendo que usa Grid o Flex, forzamos la pila vertical */
        display: block; /* La solución más robusta para resetear Grid/Flex */
        /* Alternativa (si es un Grid explícito): grid-template-columns: 1fr; */
        gap: 32px; /* Espacio entre los dos bloques (Formulario y Info) */
    }

    /* 2. Ajustar la columna del Formulario (contact-form-column) */
    .contact-form-column {
        width: 100%; 
        max-width: 100%; /* Eliminar límites de ancho */
        
        /* Reducir el padding lateral para evitar que se corte */
        padding: 0 20px; 
        box-sizing: border-box; /* Asegurar que el padding se incluya en el 100% del ancho */
    }

    /* 3. Ajustar la columna de Información (contact-info-column) */
    .contact-info-column {
        /* Como ahora están apiladas, la información debe ocupar todo el ancho */
        width: 100%; 
        max-width: 100%; 
        
        /* Reducir el padding lateral para evitar que se corte */
        padding: 0 20px; 
        box-sizing: border-box;
        margin-top: 32px; /* Asegurar un espacio extra si el .contact-split-container no tiene un buen 'gap' */
    }

    /* 4. Ajuste general del contenedor de la tarjeta (si aplica un padding excesivo) */
    .contact-card {
        padding: 0; /* Si el padding de la tarjeta es el que corta todo, lo eliminamos */
        max-width: 100%;
    }

    /* 4. AJUSTE CRÍTICO: Campos del Formulario */
    .semprini-form input[type="text"],
    .semprini-form input[type="email"],
    .semprini-form textarea {
        /* CLAVE 1: Forzamos el ancho a 100% */
        width: 100% !important; 
        max-width: 100% !important;
        
        /* CLAVE 2: Aseguramos que el padding y el borde se incluyan en el 100% */
        box-sizing: border-box !important; 
        
        /* Opcional: Reducir el padding interno de los campos si es muy grande */
        padding: 12px 10px !important; 
    }
    
    /* Ajuste para el contenedor general del formulario si es necesario (semprini-form) */
    .semprini-form {
        gap: 16px; /* Ajusta el espacio vertical entre los campos si usa Flex/Grid */
    }
    /* 4. AJUSTE CRÍTICO: Evitar que los textos internos desborden */
    .contact-info-column * {
        /* Fuerza la ruptura de palabras para textos o URLs muy largos */
        overflow-wrap: break-word; /* Estándar moderno */
        word-wrap: break-word;     /* Fallback */
        /* También puede ser útil para forzar la ruptura de texto largo sin guiones */
        word-break: break-word; 
    }

    /* Ajuste extra para enlaces (como el correo electrónico o teléfono) */
    .contact-info-column a {
        display: block; /* Aseguramos que el enlace se comporte como un bloque y pueda romperse */
    }
    /* 5. AJUSTE DE APILAMIENTO: .info-item */
    .contact-info-column .info-item {
        /* Asumimos que el .info-item o su contenido usa Flex/Grid para la disposición horizontal */
        display: block; /* La forma más segura de resetearlo a un bloque vertical */
        text-align: center; /* Centrar el contenido apilado para una mejor estética móvil */
        margin-bottom: 24px; /* Espacio entre cada info-item */
    }
    
    /* 6. Mejorar la presentación de los bloques internos (Icono/Título) */
    .contact-info-column .info-item .icon {
        /* Asegura que el ícono esté en una línea separada y centrado */
        display: block;
        margin: 0 auto 8px; /* Centrar y darle espacio inferior */
        font-size: 1.5rem; /* Opcional: Aumentar el tamaño del ícono para que destaque */
    }

    .contact-info-column .info-item strong {
        /* Asegura que el texto fuerte (título) esté en su propia línea */
        display: block; 
        margin-bottom: 1px; /* Pequeño espacio debajo del título */
    }

    /* Asegurar que la dirección de email (el enlace) también se comporte bien */
    .contact-info-column .info-item a {
        display: block;
    }
}

/* ========================================================================
   7. ANIMACIONES (@keyframes)
   ======================================================================== */

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

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

@keyframes rainbow-border {
    0% { filter: hue-rotate(0deg) brightness(1.2); }
    100% { filter: hue-rotate(360deg) brightness(1.2); }
}

@keyframes moving-gradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* ===========================================================
   8. ESTILOS DE ARCHIVO DE PORTAFOLIO (CPT Proyecto) - (ÚNICO BLOQUE)
   =========================================================== */

/* --- Grid de Proyectos --- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: clamp(20px, 4vw, 40px);
}

/* --- Tarjeta de Proyecto (Card) --- */
.portfolio-card {
    position: relative;
    border-radius: 12px;
    /* Fondo Glassmorphism/Oscuro */
    background: var(--card-bg, rgba(17, 25, 40, 0.9)); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    min-height: 350px;
    z-index: 1; 
    transition: transform 0.3s ease;
}

/* Efecto hover */
.portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------
   Efectos de Borde (Arcoíris)
   ---------------------------------------------------- */

/* Borde de arcoíris animado (::before) */
.portfolio-card::before {
    content: '';
    position: absolute;
    inset: -1px; 
    border-radius: inherit;
    background: linear-gradient(
        45deg,
        #ff02ff, #00ffff, #770e0e, #00ffff, #320a7c
    );
    background-size: 300% 300%;
    filter: blur(1px); 
    z-index: 0;
    /* La animación 'rainbow-border-anim' debe estar definida globalmente */
    animation: rainbow-border-anim 2s linear infinite; 
    pointer-events: none;
}

/* Bisel interior (::after) - Fija el fondo oscuro dentro del borde */
.portfolio-card::after {
    content: '';
    position: absolute;
    inset: 1px; 
    border-radius: inherit;
    background: var(--card-bg, rgba(17, 25, 40, 0.9)); 
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 0; 
    pointer-events: none;
}

/* ----------------------------------------------------
   Contenido y Botones
   ---------------------------------------------------- */

/* Imagen de Proyecto (Thumbnail) */
.card-thumb {
    display: block;
    position: relative;
    height: 250px; /* Altura de la imagen */
    overflow: hidden;
    z-index: 2; /* Siempre encima del borde/bisel */
    
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

/* Título que aparece en la imagen */
.card-title {
    position:relative;
    bottom: 20px;
    
    right: 0;
    padding: 10px 15px 5px;
    font-size: 1.1rem;
    font-family: 'Orbitron', sans-serif;
    color: var(--accent, #00ffff);
    
    z-index: 3;
    background: transparent; 
    backdrop-filter: none;
    display: block;
}

/* Contenedor de Botones */
.card-actions {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0px 0px 0px; 
    bottom: 0px;
    z-index: 2; /* Contenido sobre el bisel */
    left: 6px;
}

/* ===========================================================
   9. CSS para el Modal de Video (Usado por js/modal-video.js) - (ÚNICO BLOQUE)
   =========================================================== */

/* 1. Overlay (Fondo oscuro que cubre toda la pantalla) */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.158); /* Fondo muy oscuro para centrar la atención */
    backdrop-filter: blur(10px);
    z-index: 9999; /* Asegura que esté por encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 1;
    transition: opacity 0.2s ease;
}


/* ========================================================================
   3. KEYFRAMES DE ANIMACIÓN (Añadir al final de hero.css)
   ======================================================================== */
@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(0, -5px) scale(1.05); /* Ligeramente hacia arriba y más grande */
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}


/* ============================================================
   EFECTO DE PARTÍCULAS PARA MÓVILES (Ligero)
   ============================================================ */
#mobile-particles {
  display: none;
}

@media (max-width: 768px) {
  #mobile-particles {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
  }

  .particle {
    position: absolute;
    top: 0px; /* empieza fuera de pantalla */
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.247) 0%, rgba(0, 255, 255, 0.151) 70%);
    border-radius: 50%;
    animation: windFlow linear infinite;
    will-change: transform, opacity;
  animation-timing-function: ease-in-out;
  }

  /* Ajustamos el hero-container y overlay */
  .hero-overlay {
    z-index: 0; /* Fondo intermedio */
  }
   .hero-container {
    position: relative;
    z-index: 3; /* Asegura que texto y logo estén arriba */
  }

  .mobile-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 255, 255, 0.342);
    opacity: 0.6;
    animation: swirl 10s linear infinite;
  }


 @keyframes windFlow {
  0% {
    transform: translate(0, var(--offset, 0)) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  40% {
    transform: translate(40vw, calc(var(--offset, 0) + 8vh)) rotate(120deg);
    opacity: 1;
  }
  70% {
    transform: translate(80vw, calc(var(--offset, 0) - 6vh)) rotate(270deg);
    opacity: 0.9;
  }
  100% {
    transform: translate(100vw, calc(var(--offset, 0) + 5vh)) rotate(360deg);
    opacity: 0;
  }
}
 
}



/* particles.css - canvas global y ajustes para que quede encima del overlay (opción 🅐) */

#global-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 25; /* encima de hero-overlay (1) y del contenido (2) — ajustado para que partículas queden visibles */
  pointer-events: none; /* no interfieren con clicks */
  mix-blend-mode: screen; /* efecto ligero sobre fondo */
}

/* Ajustamos overlay para que no tape todo */
.hero-overlay {
  z-index: 2; /* overlay debajo del canvas */
  pointer-events: none;
  background: radial-gradient(1200px 600px at 70% 30%, rgba(0,255,255,0.06), rgba(0,0,0,0.0) 55%), rgba(0, 0, 0, 0.116);
}

/* Hero video: no bloquear render */
.hero-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 0.99;
}

/* Ajustes para secciones que deben estar por encima del overlay + particles */
.hero-container,
.home-services,
.home-stats,
.home-work,
.home-cta,
.page .entry-content {
  position: relative;
  z-index: 4; /* por encima del canvas para que botones y texto sean interactivos */
}

/* En móviles reducimos opacidad para mejor legibilidad */
@media (max-width: 768px) {
  .global-particles { z-index: 10; } 
 
  .hero-container, .site-header { z-index: 6; } /* nav y contenido por encima */
}



/* hero overrides para compatibilidad con canvas particles y video lazyload */

/* Asegurar el stacking context */
.hero, .hero * { -webkit-font-smoothing: antialiased; }

/* Ajustes específicos para el hero container */
.hero-container { position: relative; z-index: 4; }

/* Evitar que hero-video capture pointer events */
.hero-video { pointer-events: none; }

/* Si usas poster grande, asegurar que no haya CLS por cambio de tamaño */
.hero-video[poster] { image-rendering: auto; }

/* Tweak small for mobile */
@media (max-width: 768px) {
  .hero-overlay { background: radial-gradient(1000px 500px at 60% 25%, rgba(0, 255, 255, 0.24), rgba(0, 0, 0, 0.575)), rgba(0, 0, 0, 0.521); }
}