/* =========================================
   FUENTES Y CONFIGURACIÓN BÁSICA
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');

body {
    background-color: #E5E7EB;
    color: #111111;
}

/* =========================================
   TRAMAS Y FONDOS
   ========================================= */
.bg-industrial-dark-pattern {
    background-color: #111111;
    background-image: repeating-linear-gradient(45deg, rgba(250, 204, 21, 0.1) 0, rgba(250, 204, 21, 0.1) 1px, transparent 0, transparent 10px);
}
.bg-industrial-pattern {
    background-color: #FACC15;
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 2px, transparent 0, transparent 10px);
}
.vibrant-bg-anim {
    background: radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.1) 0%, transparent 50%), linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0.8));
    background-size: 200% 200%; position: relative; overflow: hidden;
}

/* =========================================
   TIPOGRAFÍA Y UTILIDADES
   ========================================= */
h1, h2, h3, h4, h5 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-style: normal !important; transform: none !important; }
.text-shadow-hard { text-shadow: 3px 3px 0px rgba(0,0,0,0.8); }

/* Ocultar scrollbar para SwipeView */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* =========================================
   COMPONENTES UI
   ========================================= */
.btn-industrial {
    transition: all 0.3s ease; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 2px;
}
.btn-industrial:hover { transform: translateY(-2px); }

/* LOGO ESTÁTICO */
.logo-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    transition: none;
}
.logo-static:hover { transform: none; }

/* =========================================
   TARJETAS Y MÓDULOS
   ========================================= */
/* Tarjetas de Servicios */
.card-service-yellow {
    background-color: #FACC15;
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0, rgba(0,0,0,0.05) 1px, transparent 0, transparent 10px);
    border-bottom: 4px solid #000;
    color: #000;
    transition: all 0.3s ease;
}
.card-service-yellow i, .card-service-yellow h3, .card-service-yellow p, .card-service-yellow li {
    color: #000 !important;
    transition: color 0.3s ease;
}
.card-service-yellow:hover {
    background: linear-gradient(145deg, #1F2937, #111827);
    border-bottom: 4px solid #FACC15;
}
.card-service-yellow:hover h3, .card-service-yellow:hover p, .card-service-yellow:hover li { color: #fff !important; }
.card-service-yellow:hover i { color: #FACC15 !important; }

/* Tarjetas Tecnología */
.card-tech-active {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    border: 2px solid #FACC15;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}
.card-tech-active:hover {
    transform: translateY(-5px);
    box-shadow: 6px 6px 0px #000000, 10px 10px 0px #ffffff;
}

/* Iconos Industriales */
.icon-box-static {
    background-color: #FACC15;
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 2px, transparent 0, transparent 10px);
    box-shadow: 6px 6px 0px #000000, 10px 10px 0px #ffffff;
    color: #000000;
    transition: transform 0.3s ease;
    position: relative; z-index: 1;
}
.icon-box-static:hover { transform: translateY(-8px); }
.icon-box-static h5, .icon-box-static i { color: #000000 !important; }

/* =========================================
   ANIMACIONES
   ========================================= */
/* Cursor typing */
.typing-cursor::after { content: '|'; animation: blink 1s step-start infinite; color: #FACC15; }
@keyframes blink { 50% { opacity: 0; } }

/* Fade in text */
.fade-in-text { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-text.visible { opacity: 1; transform: translateY(0); }

/* Grid Vibrante */
.vibrant-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(250, 204, 21, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(250, 204, 21, 0.1) 1px, transparent 1px);
    background-size: 40px 40px; animation: grid-move 20s linear infinite; opacity: 0.3;
}
@keyframes grid-move { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } }

/* Radar */
.radar-pulse {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 300px; height: 300px; border-radius: 50%; border: 2px solid rgba(250, 204, 21, 0.3); opacity: 0; animation: sonar-effect 4s infinite linear;
}
.radar-pulse:nth-child(2) { animation-delay: 2s; }
@keyframes sonar-effect { 0% { width: 0; height: 0; opacity: 0.8; } 100% { width: 600px; height: 600px; opacity: 0; } }

/* Datos Flotantes */
.floating-data {
    position: absolute; left: -100%; 
    background: rgba(0,0,0,0.8); border-left: 3px solid #FACC15;
    padding: 5px 15px; color: white; font-family: 'Oswald', sans-serif; text-transform: uppercase;
    font-size: 0.8rem; box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    animation: slide-in-data 6s infinite;
}
.floating-data:nth-child(4) { top: 30%; animation-delay: 0s; }
.floating-data:nth-child(5) { top: 60%; animation-delay: 2s; }
.floating-data:nth-child(6) { top: 80%; animation-delay: 4s; }

@keyframes slide-in-data {
    0% { left: -50%; opacity: 0; }
    20% { left: 10%; opacity: 1; }
    80% { left: 10%; opacity: 1; }
    100% { left: -50%; opacity: 0; }
}

/* Escáner CDA */
.cda-scanner-line {
    position: absolute; left: 0; top: -100%; width: 100%; height: 20%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8) 50%, transparent);
    animation: scan-vertical 3s linear infinite; z-index: 0; opacity: 0.3; pointer-events: none;
}
@keyframes scan-vertical { 0% { top: -20%; } 100% { top: 120%; } }

.pulse-step { animation: pulse-border 2s infinite; }
@keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }

/* Marquee Infinito (Marcas) */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    animation: marquee 20s linear infinite;
}

/* Firma Cyberpunk UntrixnAI */
.cyber-link {
    font-weight: 900;
    letter-spacing: 0.05em;
    text-decoration: none;
    position: relative;
    z-index: 10;
    background: linear-gradient(90deg, #ff00cc, #3333ff, #00ccff, #ff00cc);
    background-size: 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: cyber-flow 4s ease-in-out infinite;
}
.cyber-link:hover {
    text-shadow: 0 0 15px rgba(0, 204, 255, 0.8), 0 0 30px rgba(255, 0, 204, 0.6);
    filter: brightness(1.2);
}
@keyframes cyber-flow {
    0% { background-position: 0% 50%; text-shadow: 0 0 2px rgba(255,0,204,0.1); }
    50% { background-position: 100% 50%; text-shadow: 0 0 10px rgba(0,204,255,0.6); }
    100% { background-position: 0% 50%; text-shadow: 0 0 2px rgba(255,0,204,0.1); }
}

/* =========================================
   NUEVOS ESTILOS (FUSIÓN LANDING)
   ========================================= */

/* Cinta de Peligro (Industrial Tape) */
.bg-caution-pattern {
    background-image: repeating-linear-gradient(
        -45deg,
        #FACC15,
        #FACC15 10px,
        #000000 10px,
        #000000 20px
    );
}

/* Animación Rotación Lenta (Logo) */
.animate-spin-slow {
    animation: spin 8s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Efecto Ken Burns (Zoom suave fondo Hero) */
.animate-ken-burns {
    animation: kenBurns 20s infinite alternate;
}
@keyframes kenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* Botón Diagonal (Estilo Landing adaptado) */
.btn-skew {
    transform: skewX(-10deg);
    transition: all 0.3s ease;
}
.btn-skew > span, .btn-skew > i {
    transform: skewX(10deg);
    display: inline-block;
}
.btn-skew:hover {
    transform: skewX(-10deg) translateY(-2px);
    box-shadow: 0 10px 20px rgba(250, 204, 21, 0.2);
}

/* =========================================
   NUEVO HERO GEOMÉTRICO (SHARD DESIGN)
   ========================================= */

/* Contenedor Principal */
.hero-geo-container {
    position: relative;
    overflow: hidden;
    background-color: #0F1012; /* Fondo base oscuro */
}

/* Patrón de Líneas Finas (Negro con líneas amarillas sutiles) */
.bg-tech-lines {
    background-color: #111;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(250, 204, 21, 0.05) 0,
        rgba(250, 204, 21, 0.05) 1px,
        transparent 0,
        transparent 20px
    );
}

/* FORMA 1: El Gran Triángulo Amarillo (Patrón Industrial) */
.geo-shard-yellow {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%; /* Ocupa gran parte de la derecha */
    height: 100%;
    background-color: #FACC15;
    /* Patrón de puntos sutiles para textura */
    background-image: radial-gradient(rgba(0,0,0,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    /* CORTE DIAGONAL AGRESIVO */
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 10;
}

/* FORMA 2: La Placa Negra (Tech Lines) */
.geo-shard-black {
    position: absolute;
    top: 0;
    right: 15%; /* Se solapa con el amarillo */
    width: 60%;
    height: 100%;
    background-color: #000;
    /* Borde amarillo falso usando box-shadow no sirve con clip-path, usamos pseudo-elemento si fuera necesario, 
       pero aquí el contraste basta */
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%);
    z-index: 15; /* Encima del amarillo */
}

/* FORMA 3: La Imagen recortada */
.geo-image-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%; /* Ocupa la izquierda */
    height: 100%;
    z-index: 5;
    /* Corte opuesto para encajar */
    clip-path: polygon(0 0, 85% 0, 55% 100%, 0% 100%);
}

.geo-image-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(80%) contrast(120%); /* Efecto dramático */
    transition: transform 10s ease;
}

/* Animación suave de la imagen */
.hero-geo-container:hover .geo-image-content {
    transform: scale(1.05);
    filter: grayscale(0%);
}

/* Elementos decorativos flotantes */
.deco-line {
    position: absolute;
    background-color: #FACC15;
    z-index: 20;
    transform: rotate(-15deg); /* Mismo ángulo aprox que los cortes */
}

/* RESPONSIVE: Ajustes para móvil */
@media (max-width: 1024px) {
    .geo-shard-yellow {
        width: 100%;
        height: 60%;
        top: auto;
        bottom: 0;
        clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
    }
    .geo-shard-black {
        width: 100%;
        height: 40%;
        top: auto;
        bottom: 20%;
        right: 0;
        clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
        opacity: 0.9;
    }
    .geo-image-mask {
        width: 100%;
        height: 70%;
        clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    }
}

/* =========================================
   ESTILOS ESPECÍFICOS: PÁGINA NOSOTROS
   ========================================= */

/* Hero Cinemático (Fondo con trama sutil) */
.hero-cinematic {
    position: relative;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
}

/* Tarjetas de Valores (Misión/Visión) */
.card-value {
    background: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}
.card-value:hover {
    border-color: #FACC15;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* Acento decorativo en hover */
.card-value::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #FACC15;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.card-value:hover::after {
    transform: scaleX(1);
}

/* Caja Flotante de Estadísticas (Sobre foto) */
.floating-stat-card {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    background-color: #000;
    border: 2px solid #FACC15;
    padding: 1.5rem;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
    z-index: 20;
    max-width: 280px;
}

/* Icono Circular en Fortalezas */
.icon-circle-industrial {
    width: 4rem;
    height: 4rem;
    background-color: #1F2937;
    border: 2px solid transparent;
    border-radius: 50%; /* Opcional: Si quieres mantenerlo redondo, o quitarlo para cuadrado industrial */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}
.group:hover .icon-circle-industrial {
    background-color: #FACC15;
    color: #000;
    border-color: #fff;
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.4);
}
.group:hover .icon-circle-industrial i {
    color: #000;
}

/* =========================================
   HERO BRUTALISTA (PÁGINA NOSOTROS)
   ========================================= */

.hero-brutalist-container {
    position: relative;
    background-color: #0F1012;
    overflow: hidden;
    border-bottom: 8px solid #FACC15;
}

/* Fondo de Plano Técnico (Blueprint) */
.bg-blueprint-grid {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* El Marco de la Imagen Principal */
.brutalist-image-frame {
    position: relative;
    border: 1px solid rgba(250, 204, 21, 0.3);
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
}

/* Esquinas Industriales */
.corner-bracket {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #FACC15;
    transition: all 0.3s ease;
}
.corner-tl { top: -2px; left: -2px; border-bottom: none; border-right: none; }
.corner-tr { top: -2px; right: -2px; border-bottom: none; border-left: none; }
.corner-bl { bottom: -2px; left: -2px; border-top: none; border-right: none; }
.corner-br { bottom: -2px; right: -2px; border-top: none; border-left: none; }

/* Efecto Hover en el Marco */
.brutalist-image-frame:hover .corner-bracket {
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

/* Texto Gigante de Fondo */
.bg-text-giant {
    position: absolute;
    font-size: 15vw;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    line-height: 0.8;
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
}

/* Línea de tiempo vertical */
.vertical-timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(250, 204, 21, 0.3);
    z-index: 5;
}

/* =========================================
   HERO YELLOW INDUSTRIAL (MAQUINARIA PESADA)
   ========================================= */

/* Contenedor Amarillo Dominante */
.hero-yellow-container {
    position: relative;
    background-color: #FACC15; /* Amarillo Base */
    /* Usaremos la clase .bg-industrial-pattern en el HTML para la trama */
    border-bottom: 8px solid #000;
}

/* Tarjeta Estática Invertida (Negra sobre Amarillo) */
.card-static-black {
    background-color: #0F1012;
    color: #fff;
    border: 4px solid #000;
    /* Sombra dura para dar volumen */
    box-shadow: 12px 12px 0px rgba(0,0,0,0.2), 20px 20px 0px rgba(255,255,255,0.5); 
    padding: 2rem;
    position: relative;
    transition: transform 0.3s ease;
}

.card-static-black:hover {
    transform: translateY(-5px);
}

/* Elementos de texto sobre amarillo */
.text-industrial-primary {
    color: #0F1012;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    line-height: 0.9;
}

/* Decoración de tornillos/remaches visuales */
.rivet {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 50%;
    box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5);
    z-index: 20;
}
.rivet-tl { top: 10px; left: 10px; }
.rivet-tr { top: 10px; right: 10px; }
.rivet-bl { bottom: 10px; left: 10px; }
.rivet-br { bottom: 10px; right: 10px; }



/* =========================================
   NUEVAS ANIMACIONES (HERO DOORS & TIMELINE)
   ========================================= */

/* --- HERO DOORS EFFECT --- */
.hero-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    z-index: 50;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    /* Sombras para dar profundidad cuando se cierran */
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

/* Estado inicial: Fuera de la pantalla */
.door-left {
    left: 0;
    transform: translateX(-100%);
    border-right: 4px solid #FACC15;
}

.door-right {
    right: 0;
    transform: translateX(100%);
    border-left: 4px solid #000;
}

/* Trigger: Al hacer hover en el contenedor padre (#inicio), las puertas entran */
#inicio:hover .door-left {
    transform: translateX(0);
}
#inicio:hover .door-right {
    transform: translateX(0);
}

/* Color Amarillo-Naranja específico para la puerta derecha */
.bg-amber-industrial {
    background-color: #F59E0B; /* Ámbar más naranja */
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 2px, transparent 0, transparent 10px);
}

/* --- TIMELINE HORIZONTAL --- */
.timeline-line-h {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #333;
    z-index: 0;
    transform: translateY(-50%);
}

.timeline-node {
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative; /* Para el tooltip */
}

.timeline-node:hover {
    transform: scale(1.1);
}

/* Tooltip Personalizado */
.timeline-tooltip {
    position: absolute;
    bottom: 120%; /* Encima del nodo */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 280px;
    background-color: #000;
    border: 2px solid #FACC15;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 100;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* Triangulito del tooltip */
.timeline-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #FACC15 transparent transparent transparent;
}

/* Mostrar tooltip al hover del nodo */
.timeline-node:hover .timeline-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Efecto imagen timeline */
.timeline-img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}
.timeline-node:hover .timeline-img {
    filter: grayscale(0%);
}


/* =========================================
   HERO INTERACTIVO (HOVER DOORS)
   ========================================= */

/* Estilo Base de las Puertas */
.hero-door-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    z-index: 40;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Suavizado industrial */
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Puerta Izquierda (Negra) */
.door-panel-left {
    left: 0;
    transform: translateX(-101%); /* Oculta a la izquierda */
    background-color: #0F1012; /* Negro Profundo */
    background-image: repeating-linear-gradient(45deg, rgba(250, 204, 21, 0.05) 0, rgba(250, 204, 21, 0.05) 1px, transparent 0, transparent 20px);
    border-right: 4px solid #FACC15;
    text-align: right;
    align-items: flex-end;
}

/* Puerta Derecha (Ámbar) */
.door-panel-right {
    right: 0;
    transform: translateX(101%); /* Oculta a la derecha */
    background-color: #F59E0B; /* Ámbar Intenso */
    background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 1px, transparent 0, transparent 20px);
    border-left: 4px solid #000;
    text-align: left;
    align-items: flex-start;
}

/* 1. EL CONTENEDOR (Maneja la entrada, posición y escala) */
.hero-logo-reveal {
    position: absolute;
    left: 50%;
    /* ESTADO INICIAL (Sin Hover): */
    top: 0; /* Empieza arriba */
    transform: translate(-50%, -200%) scale(0.5); /* Muy arriba y pequeño */
    opacity: 0;
    
    width: 380px; /* Base size */
    z-index: 60; /* Encima de todo */
    pointer-events: none; /* Para no bloquear el mouse */
    
    /* Transición suave para la caída y el agrandamiento */
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- ACCIONES AL HACER HOVER EN EL HERO (#inicio) --- */

#inicio:hover .door-panel-left {
    transform: translateX(0);
}

#inicio:hover .door-panel-right {
    transform: translateX(0);
}

/* 2. ESTADO ACTIVO (Con Hover en #inicio) */
#inicio:hover .hero-logo-reveal {
    /* POSICIÓN FINAL: */
    top: 85%; /* Mucho más abajo (casi al borde inferior) */
    transform: translate(-50%, -50%) scale(1.2); /* Centrado en su punto y MUCHO MÁS GRANDE */
    opacity: 1;
    transition-delay: 0.1s;
}

/* 3. ANIMACIÓN DE FLOTACIÓN (Aplicada a la imagen interna) */
@keyframes softFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); } /* Flota hacia arriba suavemente */
}

/* Aplicamos la flotación a la imagen, no al contenedor, para no romper la transición */
.hero-logo-reveal img {
    animation: softFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.9)); /* Sombra profunda */
}

/* Ajuste móvil: Ocultar para no tapar contenido en pantallas pequeñas */
@media (max-width: 1024px) {
    .hero-logo-reveal {
        display: none !important;
    }
}

/* =========================================
   ANIMACIÓN AUTO TIMELINE
   ========================================= */

.timeline-car-icon {
    position: absolute;
    top: -22px; /* Ajuste vertical para que las llantas toquen la línea */
    left: 0;
    font-size: 28px; /* Tamaño del auto */
    color: #FACC15; /* Amarillo Frenocosta */
    z-index: 20; /* Por encima de la línea pero debajo de los puntos */
    
    /* Efecto de brillo de luces */
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.6));
    
    /* La animación: dura 12 segundos y se repite infinitamente */
    /* Ahora: 1 sola vez, y 'forwards' para que no se resetee al inicio */
    animation: drive-across 12s linear 1 forwards;
    
    /* OPCIONAL: Un pequeño retraso de 2s para que no arranque
       inmediatamente apenas abre la página */
    animation-delay: 2s;
}

@keyframes drive-across {
    0% { 
        left: 0; 
        opacity: 0; 
        transform: scale(0.8); 
    }
    5% { 
        opacity: 1; 
        transform: scale(1); 
    }
    95% { 
        opacity: 1; 
        transform: scale(1); 
    }
    100% { 
        left: 100%; /* Llega al final */
        opacity: 0; 
        transform: scale(0.8) translateX(20px); 
    }
}


/* =========================================
   CORRECCIÓN HOVER: ESTILO PLANO TÉCNICO (BLANCO)
   ========================================= */

/* Sobrescribimos el hover oscuro anterior */
.card-service-yellow:hover {
    /* 1. Fondo Blanco Puro */
    background: #ffffff !important;
    
    /* 2. Patrón de líneas grises sutiles (Papel milimetrado/Técnico) */
    background-image: repeating-linear-gradient(
        45deg,
        #e5e7eb 0,        /* Color gris muy suave */
        #e5e7eb 1px,
        transparent 0,
        transparent 10px
    ) !important;
    
    /* 3. Borde inferior negro para mantener peso visual */
    border-bottom: 4px solid #000000 !important;
    
    /* 4. Eliminar cualquier sombra de color previa */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

/* Forzar que TODOS los textos e iconos se vuelvan NEGROS para contrastar con el blanco */
.card-service-yellow:hover h3, 
.card-service-yellow:hover p, 
.card-service-yellow:hover li, 
.card-service-yellow:hover span, 
.card-service-yellow:hover i {
    color: #000000 !important;
    text-shadow: none !important;
}

/* Opcional: Si los iconos de lista (bullets) no cambian, forzarlos aquí */
.card-service-yellow:hover li span {
    background-color: #000000 !important; /* Bolitas de la lista negras */
}

/* PATRÓN BLANCO TÉCNICO (Hoja de cuaderno/Plano) */
.bg-industrial-white-pattern {
    background-color: #ffffff;
    background-image: repeating-linear-gradient(
        45deg,
        #e5e7eb 0,        /* Color gris muy suave */
        #e5e7eb 1px,      /* Grosor de la línea */
        transparent 0,
        transparent 10px  /* Espaciado */
    );
}