:root {
  --color-primario: #102542;
  --color-secundario: #f3f3f3;
  --color-acento: #d72638;
  --texto: #1a1a1a;
  --fondo: #ffffff;
}

[data-theme="oscuro"] {
  --color-primario: #ffffff;
  --color-secundario: #1a1a1a;
  --texto: #ffffff;
  --fondo: #121212;
}

/* ================= MEDIA QUERIES COMPLETO ================= */

/* ---------------- HASTA 1024px ---------------- */
@media (max-width:1024px){
  /* Navbar */
  nav { font-size:14px; }
  nav ul { gap:10px; flex-wrap:wrap; }

  /* Formulario */
  form { max-width:90%; gap:0.7rem; }
  input,textarea { padding:0.5rem; font-size:14px; }
  button[type="submit"] { width:120px; height:28px; font-size:13px; }

  /* Team */
  .team-grid1 { gap:25px; justify-content:center; }
  .team-member { width:140px; height:75px; }
  .team-member img { width:50px; height:50px; }

  /* Carruseles */
  .contenedoramazon,.contenedorjitas,.contenedorjitastopdown,.contenedorjitasdown,.contenedorjitasdownold,.mi-div { width:90%; overflow:hidden; }
  .carrusel,.carruseltopdown,.carruseldown,.carruseldownold { flex-wrap:wrap; justify-content:center; }
  .carrusel img,.carruseltopdown img,.carruseldown img,.carruseldownold img { width:55px; height:55px; }

  /* Backgrounds sections */
  .section,.sectionwerobot { background-size:cover; background-position:center; padding:2rem 2rem; }

  /* Robot / Intro */
  .sectionwerobot img { max-width:90%; height:auto; }

  /* Audio */
  .audio { top:6%; right:10%; }

  /* Camión */
  .camion-wrapper { width:120px; }
  .camion { width:120px; }
}

/* ---------------- HASTA 800px ---------------- */
@media (max-width:800px){
  /* Navbar / menú compacto */
  nav { font-size:13px; }
  nav ul { flex-direction:column; gap:5px; }

  /* Formulario */
  form { max-width:95%; gap:0.5rem; }
  input,textarea { padding:0.45rem; font-size:13px; }
  button[type="submit"] { width:100px; height:25px; font-size:12px; }

  /* Team */
  .team-grid1 { gap:18px; flex-direction:column; align-items:center; }
  .team-member { width:120px; height:70px; }
  .team-member img { width:45px; height:45px; }

  /* Carruseles adaptativos */
  .carrusel,.carruseltopdown,.carruseldown,.carruseldownold { flex-wrap:wrap; justify-content:center; animation:none; }
  .carrusel img,.carruseltopdown img,.carruseldown img,.carruseldownold img { width:45px; height:45px; }

  /* Backgrounds sections */
  .section,.sectionwerobot { background-size:cover; background-position:center top; padding:1.5rem 1.5rem; }

  /* Robot / intro */
  .sectionwerobot img { max-width:100%; height:auto; }

  /* Audio */
  .audio { top:5%; right:8%; }

  /* Camión */
  .camion-wrapper { width:100px; top:2%; }
  .camion { width:100px; }
}

/* ---------------- HASTA 480px ---------------- */
@media (max-width:480px){
  /* Navbar / menú muy compacto */
  nav { font-size:12px; }
  nav ul { flex-direction:column; gap:4px; text-align:center; }

  /* Formulario */
  form { max-width:100%; gap:0.4rem; }
  input,textarea { padding:0.35rem; font-size:12px; }
  button[type="submit"] { width:90px; height:22px; font-size:11px; }

  /* Team */
  .team-grid1 { gap:12px; flex-direction:column; align-items:center; }
  .team-member { width:100px; height:60px; }
  .team-member img { width:35px; height:35px; }

  /* Carruseles adaptativos */
  .carrusel,.carruseltopdown,.carruseldown,.carruseldownold { flex-wrap:wrap; justify-content:center; animation:none; }
  .carrusel img,.carruseltopdown img,.carruseldown img,.carruseldownold img { width:35px; height:35px; }

  /* Backgrounds sections */
  .section,.sectionwerobot { background-size:cover; background-position:center top; padding:1rem 1rem; }

  /* Robot / intro */
  .sectionwerobot img { max-width:100%; height:auto; }

  /* Audio */
  .audio { top:4%; right:5%; }

  /* Camión */
  .camion-wrapper { width:80px; top:1%; }
  .camion { width:80px; }
}

/* ---------------- HASTA 320px ---------------- */
@media (max-width:320px){
  form { gap:0.3rem; }
  input,textarea { padding:0.3rem; font-size:11px; }
  button[type="submit"] { width:80px; height:18px; font-size:11px; }

  .team-member { width:90px; height:55px; }
  .team-member img { width:30px; height:30px; }

  .carrusel img,.carruseltopdown img,.carruseldown img,.carruseldownold img { width:30px; height:30px; }

  .section,.sectionwerobot { padding:0.7rem 0.5rem; }

  .camion-wrapper { width:70px; top:1%; }
  .camion { width:70px; }
}


/* Intro full-screen */
#intro-screen{
    position:fixed;top:0;left:0;width:100%;height:100%;
    display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
    z-index:9999;transition: opacity 1s ease;
}
.hide-intro{opacity:0;}

#particle-canvas{
    position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;
}

.intro-container{
    text-align:center;position:relative;z-index:2;
    margin-top:30vh; /* logo un poco más bajo */
}

.logo-container{ perspective:1200px; }
.logo{
    width:750px; /* logo grande */
    transform-style: preserve-3d;
    transition: transform 0.2s linear;
    margin-bottom:10px;
}

/* Texto fijo debajo del logo */
.intro-text h1{
    font-size:2rem;
    font-weight:900;
    color:#0033a0;
    text-shadow:
        3px 3px 2px #fcd116,
        -3px -3px 2px #d52b1e,
        2px 2px 12px #fff,
        0 0 25px #00bfff;
    margin:0;
}

.intro-text p{
    font-size:1.5rem;
    font-weight:700;
    color:#fff;
    text-shadow:
        1px 1px 2px #fcd116,
        -1px -1px 2px #d52b1e,
        0 0 15px #00bfff;
    margin-top:10px;
}





* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
   /*background-image: url('backwebsite.jpg'); /* Ruta de la imagen */
  /* background-size: cover;  /* Ajusta la imagen al tamaño de la pantalla */
  background-color:#000000;
  font-family: 'Segoe UI', sans-serif;
  repeat:y;
  /*background: var(--fondo);*/
  color: var(--texto);
  line-height: 1.9;
  padding: 0px; /* espacio fuera del marco */
  display: flex;
  justify-content: center;  /* centra horizontalmente */
  align-items: center;      /* centra verticalmente */
  
  

}

.marco {
  background-color: white;
  border: 3px solid #333; /* el marco */
  padding: 0px;
  width: 80%;
  max-width: 900px;
  box-shadow: 0 0 40px rgba(0,0,0,0.6); /* sombra para realce */
  border-radius: 10px; /* esquinas redondeadas, opcional */

}

/*.backgroundsdivs
{
background-image: url(backmarco.png)
}*/


.navbar {
  background: var(--color-primario);
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
   text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

.nav-links {
  display: flex;
  gap: 1rem;
  list-style: none;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}


.hero {
  background: url('logovenusabanner.png') center/cover no-repeat;
  padding: 8rem 2rem;
  text-align: center;
  color: white;
  background-color: #0008;
  
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

.logoarriba {

  /*margin-top: 0rem;*/
  animation: brillo 1s infinite alternate;
  filter: brightness(168.5); /* 1 es normal, >1 es más brillante */
  position: absolute;
  top: 26px;     /* Distancia desde arriba */
  left: 102px;    /* Distancia desde la izquierda */
  width: 287px;
  height: 124px;
}

@keyframes brillo {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.5);
  }

}

.logoabajo {

  margin-top: 2rem;
  animation: brillo 1s infinite alternate, agrandar 20s infinite alternate;
  filter: brightness(168.5); /* 1 es normal, >1 es más brillante */
  position: absolute;
  top: 46px;     /* Distancia desde arriba */
  left: 167px;    /* Distancia desde la izquierda */
  width: 60px;
  height: auto;
  transition: transform 1s ease-in-out;
}

@keyframes brillo {
  from { filter: brightness(1); }
  to { filter: brightness(1.685); }
}

@keyframes agrandar {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.9); /* Se agranda al 150% */
  }
}

/* .mi-divsemibaner {
  width: 895px;
  height: 20px;
  background-image: url('semiban.png');
  background-size: cover;      /* Ajusta la imagen al tamaño del div */
 /* background-position: center; /* Centra la imagen */
 /* background-repeat: no-repeat;/* Evita que se repita la imagen */
}


.btn {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-acento);
  color: white;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
}

.boton-elegante {
      background-color: #102542;   /* Verde suave */
      color: white;                /* Texto blanco */
      border: 1px solid rgba(255, 255, 255, 0.5);                /* Sin borde */
      padding: 1px 24px;          /* Espaciado interno */
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 11px;
      font-family: sans-serif;
      border-radius: 10px;          /* Bordes redondeados */
      cursor: pointer;
	  width: 95px;
      height: 20px;
	  box-sizing: border-box;
	  backdrop-filter: blur(19px); /* Efecto cristal */
	  background: rgba(255, 255, 255, 0.1); /* Transparencia */
	  transform: scale(1.05); /* Se agranda al hacer clic */
      /*transition: background-color 0.3s ease, transform 0.2s ease;*/
	  
	  box-shadow: 0 9px 10px rgba(0,0,0,0.2);
       /*transition: transform 0.3s;*/
	  transition: background-color 2s ease;  /* transición suave de 2 segundos */
    }
.boton-elegante:hover {
     background-color: #16659c;     /* color al pasar el mouse */
}

.logovenusaproductos {
  animation: agrandar 4s ease-in-out infinite; /* cada 4 segundos repite */
  transform-origin: center; /* asegura que crezca desde el centro */
  display: inline-block;
}

@keyframes agrandar {
  0%, 100% {
    transform: scale(1); /* tamaño normal */
  }
  50% {
    transform: scale(1.1); /* se agranda un 10% */
  }
}


.boton-elegantedef {
  position: relative;
  display: inline-block;
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(145deg, #1a4b8c, #2b6cb0, #3a80d0); /* azul más claro */
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
              inset 0 1px 3px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  backdrop-filter: blur(6px);
  animation: flotar 3s ease-in-out infinite; /* animación flotante suave */
}

/* Efecto hover: se eleva un poco más */
.boton-elegantedef:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 200, 255, 0.45),
              0 0 20px rgba(0, 200, 255, 0.3),
              inset 0 0 5px rgba(255, 255, 255, 0.2);
}

/* Halo de brillo tipo IA */
.boton-elegantedef::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 12px;
  background: linear-gradient(120deg, #00f5ff, #0088ff, #7f00ff);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.boton-elegantedef:hover::after {
  opacity: 0.7;
}

/* Enlaces dentro del botón */
.boton-elegantedef a {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Animación flotante */
@keyframes flotar {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}



.boton-eleganteyamir {
  position: relative;
  display: inline-block;
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(145deg, #0f2027, #203a43, #2c5364);
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
              inset 0 1px 3px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  backdrop-filter: blur(6px);
}

/* Efecto hover flotante */
.boton-eleganteyamir:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 255, 255, 0.4),
              0 0 15px rgba(0, 255, 255, 0.3),
              inset 0 0 5px rgba(255, 255, 255, 0.2);
}

/* Efecto de brillo IA (opcional) */
.boton-eleganteyamir::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 12px;
  background: linear-gradient(120deg, #00f5ff, #0066ff, #ff00ff);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.boton-eleganteyamir:hover::after {
  opacity: 0.7;
}

/* Enlaces dentro del botón */
.boton-eleganteyamir a {
  color: inherit;
  text-decoration: none;
  display: block;
}



.boton-3d {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  border-radius: 12px;
  background: linear-gradient(145deg, #1f1f1f, #2c2c2c);
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 8px 8px 16px rgba(0,0,0,0.6),
              -8px -8px 16px rgba(255,255,255,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

/* Efecto flotante al pasar el mouse */
.boton-3d:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 12px 12px 24px rgba(0,0,0,0.7),
              -12px -12px 24px rgba(255,255,255,0.15);
}

/* Efecto de brillo IA futurista */
.boton-3d::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0,255,255,0.2) 0%, transparent 70%);
  animation: glow 3s infinite linear;
}

@keyframes glow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




.imagen-texto {
  display: flex;
  align-items: center;     /* Centra verticalmente */
  gap: 2rem;               /* Espacio entre imagen y texto */
  padding: 2rem;
}

.imagen {
  width: 200px;
  height: auto;
  border-radius: 8px;      /* Opcional: bordes redondeados */
}

.logo-container {
  animation: fadeZoom 2s ease-in-out;
}

.contenido {
  flex: 1;                 /* Hace que el texto ocupe el espacio restante */
}


.section {
  padding: 4rem 2rem;
  text-align: center;
}

.areas-grid, .team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9rem;
  margin-top: 2em;
}


.img-circular {

      width: 80px;
      animation: girarTierra 10s linear infinite;
      transform-style: preserve-3d;
      
    }

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



/* Clase general para todas las imágenes circulares */
.img-circular2, .img-circular3 {
  width: 114px;          /* puedes ajustar el tamaño */
  height: 114px;         /* mantener proporción cuadrada */
  border-radius: 50%;    /* hace que sea circular */
  object-fit: cover;     /* mantiene la imagen dentro del círculo */
  
  /* Efecto 3D suave */
  box-shadow: 0 4px 8px rgba(0,0,0,0.3),   /* sombra inferior */
              inset 0 2px 4px rgba(255,255,255,0.5); /* brillo interno */
  
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* animación al pasar el mouse */
}

/* Efecto hover: se "levanta" la imagen */
.img-circular2:hover, .img-circular3:hover {
  transform: scale(1.1); /* agranda ligeramente */
  box-shadow: 0 8px 16px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.5);
}




/*.img-circular2 {
width: 130px;
height: 90;
}

.img-circular3 {
width: 130px;
height: 90;
}*/

.card {
  background: var(--color-secundario);
  padding: 1.5rem;
  border-radius: 8px;
  width: 200px;
}

.abogado {
  background: #e2cef6;
  padding: 1.5rem;
  border-radius: 8px;
  width: 211px;
  height:333px;
 
}

.logovenusaproductos
{
  animation: brillo 1s infinite alternate;
  filter: brightness(168.5); /* 1 es normal, >1 es más brillante */


 }

.abogado img {

  width: 40%;
  border-radius: 50%;
  margin-bottom: 1rem;
  box-shadow: 0 0 40px rgba(0,0,0,0.6); /* sombra para realce */
  border-radius: 12px; /* esquinas redondeadas, opcional */
 }
 
 .zona-hover {
      display: inline-block;
      padding: 30px; /* espacio "cerca del div" */
	  }
	  
	  .zona-hover:hover  {
      transform: scale(1.2);
      }
	  
 .zona-hoverbottom {
      /*display: inline-block;
      padding: 22px; /* espacio "cerca del div" */
     /*display: flex;                /* contenedor flexible */
    /*justify-content: center;      /* centra horizontalmente */
   /* align-items: center;          /* centra verticalmente */
    /*height: 60px;                 /* altura fija del botón */
    /*: 0 40px;              /* solo padding horizontal */
  /*font-size: 18px;
  background-color: #222;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;*/
  
   display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  padding: 0 40px;
  font-size: 18px;
  background-color: #222;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease; /* transición base */
	  }
	  
	  .zona-hoverbottom:hover  {
      transform: scale(1.2);
	
      }

 .zona-hoverbottombanner {
      display: inline-block;
    /*  padding: 17px; /* espacio "cerca del div" */
	  }
	  
	  .zona-hoverbottombanner:hover  {
      transform: scale(1.2);
      }

 .zona-hovertext {
      display: inline-block;
      padding: 10px; /* espacio "cerca del div" */
	  }
	  
	  .zona-hovertext:hover  {
      transform: scale(1.2);
      }




.texto-relieve {
  font-family: 'Arial', sans-serif;
  font-weight: 900;
  font-size: 22px;
  text-align: center;
  margin-bottom: -4px;
  line-height: 1;
  
  /* Relleno de las letras azul cielo */
  color: #00BFFF;
  -webkit-text-stroke: 0.5px black;

  /* Sombra y efecto 3D tipo holograma */
  text-shadow: 
    2px 2px 4px rgba(0,191,255,0.8), 
    -2px -2px 4px rgba(128,0,128,0.5),
    0 0 6px rgba(0,191,255,0.9);

  /* Contenedor rectangular con esquinas suaves tipo cristal */
  display: inline-block;
  padding: 5px 20px;
  border-radius: 12px; /* ? más rectangular pero aún con bordes suaves */
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(5px);
  box-shadow: 
    0 3px 12px rgba(0,191,255,0.2), 
    0 0 20px rgba(128,0,128,0.2);

  /* Animación flotante tipo IA */
  animation: floatIA 3s ease-in-out infinite alternate;

  /* Efectos de destello sobre el texto */
  position: relative;
  overflow: hidden;
}


.texto-relieve {
  font-family: 'Arial', sans-serif;
  font-weight: 900;
  font-size: 22px;
  text-align: center;
  margin-bottom: -4px;
  line-height: 1;
  
  /* Color del texto y borde de letras */
  color: #00BFFF;
  -webkit-text-stroke: 0.5px black;

  /* Sombra y efecto 3D tipo holograma */
  text-shadow: 
    2px 2px 4px rgba(0,191,255,0.8),
    -2px -2px 4px rgba(128,0,128,0.5),
    0 0 6px rgba(0,191,255,0.9);

  /* Contenedor rectangular con esquinas suaves tipo cristal */
  display: inline-block;
  padding: 5px 24px;
  border-radius: 5px 5px;; /* Rectangular con esquinas suaves */
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(6px);
  width: 323px;
 height: 40px;

  /* ? Borde brillante tipo cristal */
  border: 1px solid rgba(0,191,255,0.4);
  box-shadow: 
    0 0 10px rgba(0,191,255,0.4),
    0 0 20px rgba(128,0,255,0.3),
    inset 0 0 10px rgba(0,191,255,0.2),
    inset 0 0 20px rgba(128,0,255,0.1);

  /* Animación flotante tipo IA */
  animation: floatIA 3s ease-in-out infinite alternate;

  /* Efectos de destello sobre el texto */
  position: relative;
  overflow: hidden;
}

.texto-relieve::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0,191,255,0.5) 0%, transparent 70%);
  animation: shine 4s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* Animación de flotación */
@keyframes floatIA {
  0% {
    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translateY(-4px) rotateX(3deg) rotateY(-3deg);
  }
  100% {
    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
  }
}

/* Animación de destello */
@keyframes shine {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translate(50%, 50%) rotate(45deg);
    opacity: 0.6;
  }
  100% {
    transform: translate(100%, 100%) rotate(90deg);
    opacity: 0.3;
  }
}

















/* .texto-relieve {
  font-size: 25px;
  color: #000000;
  text-align:center;
  justify-content: center;  /* Centrado horizontal */
  /* text-shadow:
    1px 1px 0 #ccc,
    2px 2px 0 #999,
    3px 3px 0 #ddd,
    4px 4px 0 #999,
    3px 3px 0 #fff;
}*/

 /* Imagen flotante */
    .gif-flotante {
         position: relative; /* Para que el GIF esté dentro de esta sección */
       bottom: -35px;   /* posición desde abajo */
      right: -307px;    /* posición desde la derecha */
      width: 200px;
      transform: translate(-50%, -50%);
       /*width: 100px;*/
      z-index: 2; /* encima de todo */
      opacity: 1; /* comienza invisible */
      /*animation: aparecerDesaparecer 10s ease-in-out infinite;
      /*pointer-events: none; /* no bloquea clics en el contenido */
	  pointer-events: auto; /* permite que reciba el hover */
      cursor: pointer; /* la manito solo sobre el robot */
	  margin-bottom:0;
	  padding-bottom:0;
    }

    /* Animación: aparece y desaparece */
    @keyframes aparecerDesaparecer {
      0% { opacity: 0; }
      10% { opacity: 1; }   /* aparece */
      40% { opacity: 1; }   /* se mantiene visible */
      50% { opacity: 0; }   /* se va */
      100% { opacity: 0; }  /* invisible hasta que reinicia */
    }

.contenedorboot {
  position: relative;
  display: inline-block;
  /*cursor:pointer;*/
 margin-bottom: 0;  /* elimina espacio debajo del robot */
  padding-bottom: -15;
  height:50px;
  
}

.texto-superpuestoboot {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  color: #000000; /* texto negro */
  font-family: sans-serif;
  z-index: 3;
  pointer-events: none;
  width: 250px;
  text-align: center;
  overflow: hidden; /* necesario para que el rayo se mantenga dentro */

  /* Fondo tipo vidrio IA */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);

  /* Borde negro con resplandor azul */
  border-radius: 10px;
  border: 1px solid #000000;
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.6),
              0 0 30px rgba(0, 200, 255, 0.4);

  /* Espaciado interno */
  padding: 10px 20px;

  /* Resplandor del texto */
  text-shadow: 0 0 5px #00c8ff, 0 0 10px #00c8ff, 0 0 15px #00c8ff;

  /* Oculto por defecto */
  opacity: 0;
  transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  animation: flotarBurbuja 3s ease-in-out infinite;
}

/* ? Línea de luz holográfica */
.texto-superpuestoboot::before {
  content: "";
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,255,255,0) 0%, rgba(0,255,255,0.4) 50%, rgba(0,255,255,0) 100%);
  opacity: 0;
  pointer-events: none;
}

/* Al pasar el mouse sobre el robot */
.robot-container:hover .texto-superpuestoboot {
  opacity: 1;
  animation:
    flotarBurbuja 3s ease-in-out infinite,
    resplandorTexto 2s ease-in-out infinite,
    resplandorBorde 2s ease-in-out infinite,
    hologramaActivacion 1.2s ease-out;
}

/* Activa el rayo de luz */
.robot-container:hover .texto-superpuestoboot::before {
  opacity: 1;
  animation: rayoHolografico 1s ease-out;
}

/* Flotación IA */
@keyframes flotarBurbuja {
  0% {
    transform: translate(-50%, -50%) translateY(0) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px) rotateX(5deg) rotateY(5deg);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0) rotateX(0deg) rotateY(0deg);
  }
}

/* Resplandor dinámico del borde */
@keyframes resplandorBorde {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 200, 255, 0.6),
                0 0 30px rgba(0, 200, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 200, 255, 0.8),
                0 0 50px rgba(0, 200, 255, 0.6);
  }
}

/* Resplandor dinámico del texto */
@keyframes resplandorTexto {
  0%, 100% {
    text-shadow: 0 0 5px #00c8ff, 0 0 10px #00c8ff, 0 0 15px #00c8ff;
  }
  50% {
    text-shadow: 0 0 10px #00c8ff, 0 0 20px #00c8ff, 0 0 30px #00c8ff;
  }
}

/* ? Efecto de encendido holográfico */
@keyframes hologramaActivacion {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    filter: brightness(200%) blur(6px);
    box-shadow: 0 0 60px rgba(0, 255, 255, 0.9), 0 0 120px rgba(0, 255, 255, 0.6);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
    filter: brightness(150%) blur(2px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(100%) blur(0);
  }
}

/* ?? Animación del rayo holográfico */
@keyframes rayoHolografico {
  0% {
    bottom: -100%;
    opacity: 0.2;
  }
  50% {
    bottom: 0%;
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}







.contenedorboot:hover .texto-superpuestoboot {
  opacity: 1;
}

  .contenedor {
      position: relative;
      /*width: 66vw;
      height: 9vh;
	  right: 895px;
	  */
	  width: 790px;
      height: 50px;
	  left: 0vw;
	  
	   border: 0px solid #fff;
      margin: 0px auto;
    }

.fondoadinamic {
  position: absolute;
  inset: 0;
  background-color:#000000;
  background-size: cover;
  background-position: center;
  z-index: 1;
  animation: desvanecerFondo 5s linear infinite;
}

    .estrella {
      width: 69px;
      height: 69px;
	  left:0;
      background-image: url('iconsamazoncarrete.png'); /* Imagen principal */
      background-size: cover;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
       
	    background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
   }

    .chispa {
      position: absolute;
      width: 15px;
      height: 15px;
	  left: calc(100vw - 50px); 
       background-image: url('cometa.png'); /* Imagen de rastro */
       background-size: contain;
      opacity: 0.8;
      pointer-events: none;
	  background-repeat: no-repeat;
      animation: desvanecer 2.5s linear forwards;
      z-index: 5;
	  border-radius: 50%;

    }

    @keyframes desvanecer {
    
	0% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(0.3);
      }
    }
	
	
	 /* 0% { opacity: 0.8; transform: scale(1); }
      100% { opacity: 0; transform: scale(0.1); }
    }*/
	
#contenedor1, #contenedor2 {
  position: relative;
  width: 70vw; /* o el tamaño deseado */
  height: 9vh; /* o altura deseada */
  overflow: hidden; /* para que nada se salga del marco */
}	

form {
  max-width: 400px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input, textarea {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button[type="submit"] {
  background: var(--color-primario);
  color: white;
  border: none;
  cursor: pointer;
  height: 20px;
  width: 150px;
  justify-content: center;   /*centra horizontalmente*/
}

.team {
  background-color: var(--light);
  padding: 0rem 0;

  margin: 0 auto;

}

.team-grid1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 5rem;
  place-items: center;
  margin: auto;
  
}

.team-grid2gap {

  gap: 50px;

  
}






.team-grid1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 5rem;
  place-items: center;
  margin: auto;
}

.team-grid1 {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
}

.team-memberia a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: flotarSuave 3.5s ease-in-out infinite;
  transition: transform 0.3s ease;
  margin-bottom: -2px;
}



/* Hover */
.team-memberia:hover {
  transform: translateY(-6px) scale(1.03);
}

/* Animación flotante */
@keyframes flotarSuave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Imagen dentro del bloque */
.team-memberia img {
  transition: transform 0.3s ease;
   /* margin-bottom: -62px; antes era -12px, ahora más cerca del texto */
  width: 40px;
  height: 50px;

}

/* Texto debajo */
.team-memberia h3 {
  margin-top: -6px; /* <-- antes 6px, más cerca de la imagen */
  font-weight: 600;
  color: #000000 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000000 !important;
  -webkit-text-stroke: 0px transparent;
   margin-bottom: 0px;
}







.sectionwerobot {
  padding: 1rem 8rem;
  text-align: center;
  height: 530px;
}

.section{
  padding: 1rem 8rem;
  text-align: center;

}

 .contenedoramazon {
      width: 898px;
      height: 50px;
      border: 0px solid #ccc;
      overflow: hidden;
      position: relative;
	  margin:0px ;
    }
	

  .imagencarrete {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      animation: mover 20s linear infinite;
	 
    }

    @keyframes mover {
      0% {
        left: -100px; /* empieza fuera del div */
      }
      100% {
        left: 100%; /* se mueve hasta salir por la derecha */
      }
    }
	

}

.parrafo-estilo {
  color: #000000; /* negro base */
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-align: justify;
  margin-bottom: 16px;
  text-shadow: 0 0 1px rgba(0,0,0,0.1); /* sutil sombra inicial */
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

.parrafo-estilo:hover {
  color: #000000; /* sigue negro */
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.8), /* azul intenso */
               0 0 12px rgba(0, 200, 255, 0.5);
}




.ziselines
{
width: 490px;
margin-left: 110px; /* desplaza el h3 30px desde la izquierda */
margin-top: 15px;
}

.ziselinesred
{
width: 400px;
margin-left: 150px; /* desplaza el h3 30px desde la izquierda */
margin-top: 10px;
}

.ziselinesseparator
{
 background-image:url(logovenusabannerpiesterye.png);
 height:10px;
 
}


.audio {
      position: absolute;
      top: 9%;
	  right: 14%;
	  background: transparent;
     border: none;
     outline: none;
	 text-decoration:overline;
	 text-shadow:#FFFF00;
    }
	
audio::-webkit-media-controls-panel {
  background: transparent !important; /* Quita el fondo del panel */
  border: none !important;             /* Quita el borde del panel */
  text-shadow:#FFFF00;
}

audio::-webkit-media-controls-enclosure {
  background: transparent !important; /* Quita el fondo externo */
  border: none !important;             /* Quita el borde externo */

	 text-shadow:#FFFF00;
}




.contenedorjitas {
  width: 895px;
  height: 75px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
}

/* Cinta transportadora con SVG repetible */
.cinta {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%; /* permite movimiento continuo */
  height: 100%;
  z-index: 1;

  /* Fondo con SVG inline como textura */
  background-image: url('svgviewer-output.svg');
  background-repeat: repeat-x;
  background-size: contain;

  animation: moverCinta 18s linear infinite;
}

/* Carrusel encima de la cinta */
.carrusel {
  display: flex;
  gap: 20px;
  position: relative;
  z-index: 2;
  animation: moverCarrusel 10s linear infinite;
}

.carrusel img {
  width: 90px;
  height: 85px;
  object-fit: contain;
  flex-shrink: 0;

}

/* Animación del carrusel (infinito) */
@keyframes moverCarrusel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-56%); } /* mitad del contenedor duplicado */
}

/* Animación de la cinta de fondo */
@keyframes moverCinta {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}



.contenedorjitastopdown {
  width: 895px;
  overflow: hidden;
  border: 1px solid #ccc;
  height: 90px;  
  margin-top: 0px;
  padding-top: 0px;
  position: relative;
  z-index: 1; /* contenedor detrás del fondo holográfico */
  background-color: transparent;
}

/* Fondo holográfico flotante detrás de las imágenes */
.carruseltopdown-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* detrás de las imágenes */
  border-radius: 15px;
  background: linear-gradient(120deg, #00BFFF, #8000FF, #00FFFF, #4B0082);
  background-size: 400% 400%;
  box-shadow: 0 0 30px rgba(0,191,255,0.5), 0 0 40px rgba(128,0,255,0.3), 0 0 50px rgba(0,255,255,0.2);
  animation: gradientBG 8s ease infinite;
}

/* Carrusel de imágenes */
.carruseltopdown {
  display: flex;
  gap: 20px;
  animation: moverIzq 30s linear infinite;
  position: relative;
  z-index: 1; /* encima del fondo */
  padding: 10px 0;
}

.carruseltopdown img {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  object-fit: contain;

  /* Flotación sobre el fondo */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* Hover: imágenes flotan y brillan */
.carruseltopdown img:hover {
  transform: scale(1.2) translateY(-5px);
  z-index: 2;
  box-shadow: 0 0 15px rgba(0,191,255,0.8), 0 0 10px rgba(128,0,255,0.6);
}

/* Animaciones */
@keyframes moverIzq {
  0% { transform: translateX(-1620px); }
  100% { transform: translateX(0); }
}

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






.contenedorjitasdown {
  width: 895px;
  overflow: hidden;
  border: 1px solid #ccc;
  height: 90px;  
  margin-top: 0px;
  padding-top: 0px;
  position: relative;
  z-index: 1; /* contenedor detrás del fondo holográfico */
  background-color: transparent;
}

/* Fondo holográfico flotante detrás de las imágenes */
.carruseldown-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* detrás de las imágenes */
  border-radius: 15px;
  background: linear-gradient(120deg, #00BFFF, #8000FF, #00FFFF, #4B0082);
  background-size: 400% 400%;
  box-shadow: 0 0 30px rgba(0,191,255,0.5), 0 0 40px rgba(128,0,255,0.3), 0 0 50px rgba(0,255,255,0.2);
  animation: gradientBG 8s ease infinite;
}

/* Carrusel de imágenes */
.carruseldown {
  display: flex;
  gap: 20px;
  animation: moverIzq 30s linear infinite;
  position: relative;
  z-index: 1; /* encima del fondo */
  padding: 10px 0;
}

.carruseldown img {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  object-fit: contain;

  /* Flotación sobre el fondo */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* Hover: imágenes flotan y brillan */
.carruseldown img:hover {
  transform: scale(1.2) translateY(-5px);
  z-index: 2;
  box-shadow: 0 0 15px rgba(0,191,255,0.8), 0 0 10px rgba(128,0,255,0.6);
}

/* Animaciones */
@keyframes moverIzq {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1620px); }
}

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


.contenedorjitasdownold {
  width: 895px;      /* tamaño visible */
  overflow: hidden;  /* ocultar imágenes fuera del contenedor */
  border: 1px solid #ccc;
  left: 0px;    /* Distancia desde la izquierda */
   height: 70px;  
   top: 0px;
   position:relative;
   margin-top: 0px;
}

.carruseldownold {
  display: flex;
  gap: 20px;  /*espacio entre imágenes */
  animation: moverDer 30s linear infinite;
  transform: translateX(-100%);  /*punto inicial */
  background-color: transparent;  /*? el fondo se mueve con las imágenes */
  position:relative;
 
}

.carruseldownold img {
  width: 70px;
  height: 70px;
  flex-shrink: 0; /* evitar que se reduzcan */
  object-fit: contain;

  /* Transición suave para agrandarse */
  transition: transform 0.3s ease;
}

/* Efecto al pasar el mouse */
.carruseldownold img:hover {
  transform: scale(1.2); /* agranda la imagen un 20% */
  z-index: 3; /* para que quede encima de las otras imágenes */
}



/* Animación que mueve el carrusel de izquierda a derecha*/
@keyframes moverDer {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1620px);
  }
} 






/* .backgroundteam {
background-color: #EBF4FA;  /*Cambia este color como quieras */
/* background-image: url('backmarco.png'),      /* Imagen para arriba */
   /*  url('backmarcoder.png');     /* Imagen para derecha */
 /*  background-repeat: 
    /*repeat-x,               /* Solo horizontal */
 /*    repeat-y;               /* Solo vertical */
/*   background-position: 
 /*    top left,               /* Parte superior */
   /*  top right;              Lado derecho */

/* }*/

.backgroundteam {
  background-color: #BBDEFB; /* Color de fondo */
  background-image: url('backmarco.png'), url('backmarcoder.png');
  background-repeat: repeat-y, repeat-y; /* Repetir solo verticalmente */
  background-position: left top, right top; /* Una a la izquierda y otra a la derecha */
  background-attachment: scroll; /* Opcional: asegura que se muevan con la página */

  /* background-blend-mode: lighten; /* Mezcla color + imagen */
  /*opacity: 0.9;  Ajusta opacidad general si quieres aún más tenue */
}

.backgroundteam12 {
 background-color: #EBF4FA;  /*F0FFF0Cambia este color como quieras */
 background-image:url(backmarco.png);
  /*background-repeat: 
 repeat-x, 
 repeat-y;        /* Repite solo horizontalmente */
  /* background-position: top,
  top left;;   */         
   background-repeat: repeat-y;
   background-position: right top;
  
  /* Ubica la imagen en la parte superior */  
}

.mi-div {
  width: 1200px;   /* ancho fijo */
  height: 80px;  /* alto fijo */
}

.team-member {
  background-color: white;
  padding: 0rem;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  transition: transform 0.3s;
  width: 175px;
  height: 90px;
  margin: auto;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  transition: background-color 2s ease;  /* transición suave de 2 segundos */
}


.team-member:hover {
  transform: translateY(-9px);
  background-color: #FAF3BE;     /* color al pasar el mouse */
}

.team-member img {
  border-radius: 50%;
  width: 60px;
  margin-bottom: 0.0rem;
 margin-top: 0px; /* Añade 15 píxeles de espacio a la derecha */
  margin: auto;
}


/* ?? Efecto flotante IA 3D sin bordes ni fondo */
.socialsnew {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.zona-hovertextnew {
  display: inline-flex;
  align-items: center;
  color: #00BFFF;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.6s ease, color 0.4s ease, text-shadow 0.4s ease;
  animation: floatIA 4s ease-in-out infinite alternate;
  transform-style: preserve-3d;
}

/* Íconos */
.zona-hovertextnew img {
  filter: drop-shadow(0 0 5px rgba(0,191,255,0.6));
  transition: transform 0.6s ease, filter 0.4s ease;
}

/* ? Hover con efecto IA 3D flotante */
.zona-hovertextnew:hover {
  transform: translateY(-8px) rotateX(4deg) rotateY(-4deg) scale(1.05);
  color: #ffffff;
  text-shadow: 
    0 0 10px rgba(0,191,255,0.8),
    0 0 20px rgba(0,191,255,0.6);
}

.zona-hovertextnew:hover img {
  transform: translateY(-2px) scale(1.1) rotateY(6deg);
  filter: drop-shadow(0 0 12px rgba(0,191,255,0.9));
}

/* ?? Animación flotante continua tipo IA */
@keyframes floatIA {
  0% {
    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translateY(-6px) rotateX(3deg) rotateY(-3deg);
  }
  100% {
    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
  }
}



.socialsold a {
  margin: 0 0px;
  color: white;
  text-decoration: none;
}



footer {
  background: var(--color-primario);
  color: white;
  text-align: center;
  padding: 0rem;
  margin-top: 0rem;
}

.footer-venusa {
  background-color: #102542;
  padding: 12px 11px;
  font-family: Arial, sans-serif;
  color: #f3f3f3;
  font-size: 12px; /* letras más pequeñas */
}

.footer-secciones {
  display: flex;
  flex-wrap: wrap;
  gap: 60px; /* menos separación entre columnas */
  margin-bottom: 1x;
}

.footer-col h4 {
  font-weight: bold;
  margin-bottom: 0px; /* menos espacio debajo del título */
  font-size: 13px; /* título más pequeño */
}

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

.footer-col ul li {
  margin-bottom: 0px; /* menos espacio entre los enlaces */
}

.footer-col ul li a {
  color: #f3f3f3;
  text-decoration: none;
}

.footer-col ul li a:hover {
  text-decoration: underline;
}

.footer-pagos h4 {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 13px;
  text-align: center; /* centrar título de pagos */
}

.pagos-logos {
  display: flex;
  justify-content: center; /* centrar las imágenes */
  gap: 10px; /* menos espacio entre logos */
  flex-wrap: wrap;
}

.pagos-logos img {
  height: 25px; /* tamaño más pequeño */
  object-fit: contain;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-secciones {
    flex-direction: column;
    gap: 10px;
  }

  .pagos-logos {
    justify-content: center;
  }
}


/* CONTENEDOR GENERAL QUE SE MUEVE */
.camion-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 150px;
    z-index: 999999;

    /* Esta es la animación principal */
	 animation: idaVuelta 14s linear 1; /* se reproduce solo 1 vez */
 animation-fill-mode: none; /* No mantiene posición final */

}

/* Imagen del camión con sombra */
.camion {
    width: 150px;
    transition: transform 0.3s;
    filter: drop-shadow(6px 6px 10px rgba(0,0,0,0.5));
}

/* ---------- ANIMACIÓN PRINCIPAL ---------- */
/* Añadir zigzag extra en la ida (izquierda ? derecha) */
@keyframes idaVuelta {
    0% {
        transform: translateX(-200px) translateY(0vh) scaleX(1); 
    }

    10% {
        transform: translateX(15vw) translateY(5vh) scaleX(1);
    }

    20% {
        transform: translateX(30vw) translateY(10vh) scaleX(1);
    }

    30% {
        transform: translateX(45vw) translateY(18vh) scaleX(1);
    }

    40% {
        transform: translateX(60vw) translateY(25vh) scaleX(1);
    }

    45% {
        transform: translateX(80vw) translateY(30vh) scaleX(1);
    }

    49% {
        transform: translateX(110vw) translateY(35vh) scaleX(1);
    }

    50% {
        transform: translateX(110vw) translateY(35vh) scaleX(-1); 
    }

    /* Zigzag extra en la vuelta (derecha ? izquierda) */
    60% {
        transform: translateX(80vw) translateY(42vh) scaleX(-1);
    }

    70% {
        transform: translateX(60vw) translateY(50vh) scaleX(-1);
    }

    77% {
        transform: translateX(45vw) translateY(60vh) scaleX(-1);
    }

    85% {
        transform: translateX(30vw) translateY(70vh) scaleX(-1);
    }

    92% {
        transform: translateX(15vw) translateY(80vh) scaleX(-1);
    }

    100% {
        transform: translateX(-200px) translateY(90vh) scaleX(-1);
    }
}


/* ------------ HUMO TRASERO ------------ */
.humo {
    position: absolute;
    right: -10px;
    top: 40%;
    width: 15px;
    height: 15px;
    background: rgba(200, 200, 200, 0.7);
    border-radius: 50%;
    filter: blur(3px);
    animation: humoAnim 1s infinite;
}

@keyframes humoAnim {
    0%   { opacity: 0.8; transform: scale(1) translateX(0); }
    100% { opacity: 0; transform: scale(2) translateX(30px); }
}

/* ------------ LUZ DELANTERA ------------ */
.luz-adelante {
    position: absolute;
    left: -10px;
    top: 38%;
    width: 25px;
    height: 10px;
    background: rgba(255,255,150,0.9);
    filter: blur(6px);
    animation: luces 0.4s infinite alternate;
}

/* ------------ LUZ TRASERA ------------ */
.luz-atras {
    position: absolute;
    right: -6px;
    bottom: 22%;
    width: 15px;
    height: 9px;
    background: rgba(255,30,30,0.9);
    filter: blur(4px);
    animation: luces 0.4s infinite alternate;
}

@keyframes luces {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}