/** import font family delius/
@import url('https://fonts.googleapis.com/css2?family=Delius&display=swap');
/* 🔁 Reset y base tipográfica mejorado */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



    /*  background-image: url('img/fpanal.png');*/
    .bodyindex {
         background-image: url('f3.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
font-family: 'Delius';
  width: 100%;
  overflow-x: hidden;

   
    }
        /*  background-image: url('img/fpanal.png');*/
    .bodyselecion {
  
       /* background-image: url('img/ff.jpg');*/ /* Cambia esto por la ruta real */
         background-image: url('f3.jpg');

  background-size: cover;      /* Ajusta la imagen para cubrir todo el contenedor */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat;/* Evita que la imagen se repita */
  background-attachment: fixed;/* Opcional: hace que la imagen quede fija al hacer scroll */
    /*background: #ffffff;
background: linear-gradient(90deg,rgba(255, 255, 255, 1) 22%, rgba(0, 0, 0, 1) 24%, rgba(77, 190, 255, 1) 26%, rgba(48, 207, 255, 1) 26%, rgba(255, 74, 249, 1) 27%, rgba(255, 249, 71, 1) 29%, rgba(255, 255, 255, 1) 31%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 100%);*/
      font-family: 'Delius';
      min-height: 100vh;
     /* background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(51, 51, 51, 1) 25%, rgba(164, 189, 187, 1) 26%, rgba(239, 138, 255, 1) 28%, rgba(254, 255, 181, 1) 29%, rgba(0, 0, 0, 1) 32%, rgba(212, 212, 212, 1) 40%, rgba(255, 255, 255, 1) 100%);*/
    }


   /* ---------------------------
       🧱 Cabecera (logo principal)
    --------------------------- */
    .top-header {
      background: white;
      
      text-align: center;
      padding: 1rem;
    }

    .top-header img {
      max-width: 100%;
      height: auto; /* Responsive */
      max-height: 80px;
    }



    /* ---------------------------
       📌 Barra superior con botón
    --------------------------- */
   .top-nav {
  
  position: fixed;                /* Se queda fija en la parte superior */
  top: 30px;
  left: 0;
  width: 100%;                    /* Ocupa todo el ancho */
  z-index: 1000;                  /* Se superpone a otros elementos */
  display: flex;                  /* Flex para alineación */
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px 20px;
  background-color: rgba(255, 255, 255, 0.315);  /* Fondo semitransparente */
  backdrop-filter: blur(5px);   /* Difumina el fondo para efecto glass */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);   /* Sombra más elegante */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}


/* Responsive */
@media (max-width: 768px) {
 

  .logo-container {
    height: 40px;
  }

  .logo-video {
    max-width: 120px;
  }
}

@media (max-width: 480px) {
  .logo-container {
    height: 35px;
  }

  .logo-video {
    max-width: 100px;
  }

}
     
/* IZQUIERDA: LOGO + TEXTO */
.nav-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/*styles logo movimiento*/
@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
.nav-logo {
  

  
 height:90px;
 width: 200px;
  color: #000;
  text-decoration: none;
  font-weight: bold;

   object-fit: cover;
  animation: floatUpDown 3s ease-in-out infinite;
  transition: transform 0.3s ease;
}
@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
.nav-logoimg {
  position:relative;
top:30px;
 height:50px;
 color: #000;
  text-decoration: none;
  font-weight: bold;
   animation: floatUpDown 3s ease-in-out infinite;
   }

.nav-slogan {
  font-size: 0.85rem;
  color: #444;
  font-style: italic;
  margin-top: 2px;
}
/* DERECHA: BOTONES */
.nav-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
font-family: 'Delius';

}

/* BOTONES */
/* BOTONES */
.open-menu-btn {
  font-size: 17px;
  background: transparent;
  font-family: 'Delius', cursive;
  font-weight: 700; /* pseudo negrita (Delius no tiene bold real, pero reforzamos con sombra) */
  color: #000000;
  padding: 0.5rem 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.4s ease;
  border: none;
  width: 252px;
  letter-spacing: 1px;

  /* ✨ Efecto futurista 2030 */

  position: relative;
  overflow: hidden;
}

.open-menu-btn a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  width: 100%;
}

/* 🌌 Hover efecto neón animado */
.open-menu-btn:hover {
  color: #000000;


}


/*.open-menu-btn a:hover {
  background-color: white;
  backdrop-filter: blur(10px);
  color: black;
  text-shadow:
    0 0 5px #238bc7ff,
    0 0 10px #ffffffff,
    0 0 20px #ffffffff,
    0 0 40px #238bc7ff;
}*/


/* 💡 Estilo base del botón */
 
.hover-menu {
  position: relative;
  overflow: hidden;

 
  
  border-radius: 5px;
  cursor: pointer;

 
  border:none;
 /* font-weight: bold;*/
 /* text-transform: uppercase;*/

  z-index: 1;
 
  
}

/* SVG animado como overlay */
.hover-menu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 200%;
  height: 100%;
  background: url("linea-hover.svg") repeat-x;
  background-size: 100% 100%;
  pointer-events: none;
  transition: transform 2s ease;
  z-index: 0;
}

/* Hover: desliza el SVG de derecha a izquierda */
.hover-menu:hover::after {
  transform: translateX(-100%);
  left: 0;
}

/* RESPONSIVE NAV */
@media (max-width: 1338px) {
  .top-nav {
  
    flex-direction: column;
    align-items: center;
  }

  .nav-left {
    align-items: center;
  }

  .nav-buttons {
    width: 100%;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    align-items: center;

  }

  .open-menu-btn {
    width: 100%;
    text-align: center;
  box-shadow: 0 0 10px rgba(4, 70, 114, 0.466);
  
font-family: 'Delius';
  }
}

/*open menu btn 2*/


    /* ---------------------------
       🧩 Sidebar (menú lateral)
    --------------------------- */
    .sidebar {
      border-top:none;
      position: fixed;
      top: 50px;
       transition: left 0.4s ease;
      left: -100%;
      width: 100%;
      max-width: 900px;
      height: 100%;  
 
  background-attachment: fixed;/* Opcional: hace que la imagen quede fija al hacer scroll */
      background-color: #ffffffc7;
       backdrop-filter: blur(20px);  /*Borra el fondo detrás */
      color:black ;
      padding: 2rem;
      overflow-y: auto;
     
      z-index: 1000;
     
    }

    .sidebar.open {
      left: 0;
    }

    /* ❌ Botón para cerrar panel */
    .close-btn {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: transparent;
      color: white;
      font-size: 2rem;
      font-family: 'Delius';
      border: none;
      cursor: pointer;
      text-shadow:
    0 0 5px #17619ecc,
    0 0 10px #00ffff,
    0 0 20px #ffffffff,
    0 0 40px #0e5b9be7;}
    .close-btn:hover{
      text-shadow:
    0 0 5px #0067bbcc,
    0 0 10px #001e80ff,
    0 0 20px #6effecff,
    0 0 40px #0551b4e7;}
    
    @media(max-width:480px){
      .close-btn{
        text-align: right;
      }
    }

    /* Contenido del sidebar */
    .sidebar h2 {
      font-family: 'Delius';
      font-size: 2rem;
      border-bottom: 2px solid #55c9fffd;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
       
      text-align:center;
    }

    .sidebar p {
      font-family: 'Delius';
      line-height: 1.6;
      margin-bottom: 1rem;
      text-align:center;
    }
    .sidebar h1{
        font-family: 'Delius';
      line-height: 1.6;
      margin-bottom: 1rem;
      text-align:center;
    
    }

    .sidebar img {
         width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 1.5rem;
     /* width: 100%;
      max-height: 300px;
      object-fit: cover;
      border-radius: 10px;
      margin-bottom: 1.5rem;*/
    }


    /*flechita arriba del sidebar*/
    .scroll-top-btn {
  position: sticky;
  bottom: 50px;
  left: 10%;
  transform: translateX(-50%);
  background-color: #007BFF;
  color: white;
  font-size: 1.2rem;
  font-family: 'Delius';
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 10;
  transition: background-color 0.3s ease;
}

.scroll-top-btn:hover {
  background-color: #0056b3;
}
    /* ---------------------------
       📄 Contenido principal
    --------------------------- */
    .main-content {
      padding: 2rem;
      text-align: center;
      font-family: 'Delius';
    }

    .main-content h1 {
      color: rgba(255, 255, 255, 0.69);
      backdrop-filter: blur(10px);
      font-size: 2.5rem;
      text-shadow: 0 0 10px black;
      margin-bottom: 1rem;
      text-align:center;
      font-family: 'Delius';
    }

    .main-content p {
      color: white;
      font-size: 1.2rem;
      font-family: 'Delius';
    }

    /* ---------------------------
       📱 Diseño responsive (mobile/tablets)
    --------------------------- */
    @media (max-width: 1000px) {
      .top-nav {
        margin-left:0px;
        padding: 1rem;
        flex-direction: column;
        align-items: center;
      }

      .open-menu-btn {
        margin-top: 1rem;
        width: 100%;
      }

      .main-content h1 {
        font-size: 2rem;
      }

      .main-content p {
        font-size: 1rem;
      }
    }

    @media (max-width: 768px) {
      .sidebar {
        padding: 1rem;
      }

      .sidebar h2 {
        font-size: 1.5rem;
      }

      .sidebar p {
        font-size: 1rem;
      }

      .main-content {
        padding: 1.5rem 1rem;
      }
    }

    @media (max-width: 480px) {
      .top-header img {
        max-height: 60px;
      }

      .open-menu-btn {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
      }

      .sidebar h2 {
        font-size: 1.3rem;
        font-family: 'Delius';
      }

      .main-content h1 {
        font-size: 1.5rem;
      }

      .main-content p {
        font-size: 1rem;
      }
      .nav-left{
        align-items: center;
      }
    }

    /*styles del carrusel*/
    /* Estilo general del carrusel */
/*stylos del container q centra el carrusel */
  .carousel {
    background-color:transparent;
  width: 1200px ;
  max-width: 100%;
  height: 300px; /* ↓ Cambiado para hacerlo más bajito */
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 0 20px rgb(255, 255, 255);
  /*bajar contenido del texoto principal*/
  margin:  auto;
}
@media (min-width: 1025px) {
  .carousel {
    margin-top: 200px; /* por ejemplo, si tu nav mide 120px */
  }
}

@media (max-width: 768px) {
  .carousel {
    margin-top: 100px;
  }
}
.slide {
  width: 100%;
  height: 100%;
  display: none;
  transition: opacity 0.5s ease-in-out;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Importante para que no se deformen */
  border-radius: 16px;
}

@media (max-width: 1338px) {
  .carousel {
    height: 200px; /* Para móviles */
    margin-top:450px;
    
  }
}
/* Responsive */
@media (max-width: 768px) {
  .carousel {
    height: 100px; /* Para móviles */
    margin-top:450px;
  }
}


/* Flechas modernas */
.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 255, 255, 0.1);
  border: 2px solid rgba(0, 255, 255, 0.4);
  color: cyan;
  font-size: 28px;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 50%;
  transition: 0.3s ease;
  backdrop-filter: blur(5px);

}

.carousel button:hover {
  background: rgba(0, 255, 255, 0.4);
  color: black;
  border-color: cyan;
}

.carousel .prev {
 
  left: 15px;
}

.carousel .next {
  
  right: 15px;
}
@media(max-width:640px){
  .carousel button{
  width: 30px;
    height: 30px;
    font-size: 16px; /* ↓ Hace que la flecha no se salga del círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Elimina exceso de espacio */
    top: 50%;
    transform: translateY(-50%);
  }
}






/*stylos dela frase de la empresa pag principal */
/* Sección de información principal */
.info-empresa {
  padding: 60px 20px;
  text-align: center;
font-family: 'Delius';
  color: #1a1a1a;
}

.info-empresa .contenedor {
  max-width: 900px;
  margin: auto;
  padding: 0 15px; /* 👈 Evita que el texto toque los bordes */
  box-sizing: border-box;
}

.info-empresa h2 {
  font-family: 'Delius';
  font-size: 30px;
  color: black;
  margin-bottom: 20px;
}

.info-empresa p {
  font-family: 'Delius';
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 15px;
}


/* ✅ Media Queries para Responsividad */

@media (max-width: 900px) {
  .info-empresa .contenedor {
    max-width: 90%;
  }

  .info-empresa h2 {
    font-size: 28px;
  }

  .info-empresa p {
    font-size: 16px;
    line-height: 1.7;
  }
}
@media (max-width: 768px) {
  .info-empresa {
    padding: 40px 15px;
  }

  .info-empresa .contenedor {
    max-width: 95%;
  }

  .info-empresa h2 {
    font-size: 24px;
  }

  .info-empresa p {
    font-size: 15.5px;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .info-empresa h2 {
    font-size: 22px;
  }

  .info-empresa p {
    font-size: 14.5px;
  }
}


.seccion-mv .contenedor {
 
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin: 0 auto;
  padding: 0 20px; /* 👈 Añadido para evitar desbordes */
  max-width: 100%; /* 👈 Importante para el responsive */
  box-sizing: border-box; /* 👈 Asegura que el padding no rompa el ancho */
  font-family: 'Delius';
}

.tarjeta {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3);
  padding: 30px 20px;
  width: 100%;
  max-width: 350px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-family: 'Delius';
}

.tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(36, 160, 243, 0.36);
}

.tarjeta img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  /* Aquí va la magia para el triángulo */
  
  /*clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  object-fit: cover;*/
   
}

.tarjeta h3 {
  font-size: 24px;
  color: black;
  margin-bottom: 15px;
  font-family: 'Delius';
}

.tarjeta p {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.6;
  font-family: 'Delius';
}

.tarjeta ul {
  font-family: 'Delius';
  list-style: none;
  padding: 0;
  margin-bottom: 15px;
  color: #333;
}

.tarjeta ul li {
  margin-bottom: 5px;
}
@media (max-width: 1024px) {
  .tarjeta {
    flex: 1 1 45%;
    max-width: 45%;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .tarjeta {
    flex: 1 1 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
  }

  .seccion-mv .contenedor {
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
  }

  .tarjeta img {
    width: 50px;
    height: 50px;
  }

  .tarjeta h3 {
    font-size: 20px;
  }

  .tarjeta p,
  .tarjeta ul li {
    font-size: 15px;
  }
}
/*styles footer*/
/* ==== FOOTER GENERAL ==== */
.footer {
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(51, 51, 51, 1) 25%, rgba(164, 189, 187, 1) 26%, rgba(239, 138, 255, 1) 28%, rgba(254, 255, 181, 1) 29%, rgba(0, 0, 0, 1) 32%, rgba(212, 212, 212, 1) 40%, rgba(255, 255, 255, 1) 100%);
  color: #f0f0f0;
  padding: 15px 20px;
  width: 100%;
  box-shadow: 0 -4px 20px rgba(255, 255, 255, 1);
  position: relative;
}

/* ==== FOOTER STRUCTURE ==== */
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-family: 'Delius';
}

/* ==== LOGO ==== */
.footer-logo {
  flex: 0 0 auto;
}

.imglogoheader {
  width: 150px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 1);
}

/* ==== CONTENIDO PRINCIPAL ==== */
.footer-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  font-family: 'Delius';
  text-align: right;
}

/* ==== TEXTO Y REDES JUNTOS ==== */
.footer-redes-texto {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: 'Delius';
}

.footer-contacto {
  font-size: 1rem;
  color: #000;
  font-weight: bold;
 /* text-transform: uppercase;*/
  margin: 0;
}

/* ==== ICONOS ==== */
.footer-redes {
  display: flex;
  gap: 10px;
}

.icono {
  background-color: #111;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
 box-shadow: 0 -4px 20px rgba(96, 231, 114, 0.46);
  transition: all 0.3s ease;
  overflow: hidden;
}

.icono img {
  width: 60px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px #fcfcfcff);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.icono:hover {
  transform: scale(1.1);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.53);
}

.icono:hover img {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px #39f);
}

/* ==== COPYRIGHT ==== */
.footer-copy {
  font-size: 1.2rem;
  color: black;
  font-family: 'Delius';
 
  /*font-style: italic;*/
  margin: 0;
  padding-top: 5px;
}

/* ==== RESPONSIVE DESIGN ==== */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-main {
    align-items: center;
    text-align: center;
  }

  .footer-redes-texto {
    flex-direction: column;
    gap: 10px;
  }

  .imglogoheader {
    width: 70px;
  }

  .footer-contacto {
    font-size: 0.95rem;
  }

  .footer-copy {
    font-size: 0.75rem;
  }
}

/*.divblur{
   color: rgba(255, 255, 255, 0.47);
      backdrop-filter: blur(5px);
}*/
.ac{
  text-decoration:none;cursor: default;
  font-family: 'Delius';
}
.imglog{
  height:30px;
  width: 30px;
}
.ac .imglog {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ac:hover .imglog {
  opacity: 1;
}
/* Banner superior dinámico */
/* Banner superior */
.top-banner {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(20, 20, 20, 1);
  backdrop-filter: blur(20px);
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
font-family: 'Delius';
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 28, 121, 0.41);
  animation: slideDown 0.4s ease;
  transition: opacity 0.8s ease;
}

/* Entrada animada */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Animación de texto */
.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.8s ease;
}

.banner-text {
  text-align: center;
  flex: 1;
  transition: opacity 0.8s ease;
}

/* Botón para cerrar */
.banner-close {
  cursor: pointer;
  padding-left: 20px;
  font-size: 18px;
  color: #ccc;
  transition: color 0.2s ease;
}

.banner-close:hover {
  color: rgba(236, 0, 51, 0.69);
}

/* Espaciado dinámico del nav */
#mainNav {
  transition: margin-top 0.4s ease;
  margin-top: 50px;
}



/* Para que el contenido debajo no quede oculto por el banner */
/*body {
  padding-top: 50px;*/ /* Ajusta si el banner es más alto *//*
}*/
/*new wefecto florante*/
/*new wefecto florante*/
/* Nueva animación flotante más libre */


/* Nueva animación flotante más libre */
/*new wefecto florante*/
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

#chatbot {
    width: 100px;
    height: 150px;
    position: fixed;
    bottom: 150px;
    right: 20px;

    background-image: url('personaje.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Delius';
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    z-index: 10000;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;

    /* 👇 Aquí agregamos la animación */
    animation: float 3s ease-in-out infinite;
}

#chatbot:hover {
    transform: scale(1.1);
}
/* Estilo del formulario */
#formulario {
  font-family: 'Delius';
    display: none;
    position: fixed;
    bottom: 100px;
    right: 100px;
    background-color: #ffffffea;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(82, 110, 212, 0.596);
    width: 100%;
    max-width: 300px;
    z-index: 10000;/*1500*/
}
.cerrar-formulario {
  font-family: 'Delius';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    z-index: 1600;
    transition: color 0.2s ease;
}

.cerrar-formulario:hover {
    color: red;
}

#formulario.visible {
    display: block;
}

/* Campos del formulario */
.input-field {
    margin-bottom: 15px;
    width: 100%;
}

.input-field input {
  font-family: 'Delius';
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
   
}
.input-field input:focus {
    outline: none; /* Elimina el borde predeterminado (negro) */
   
    box-shadow: 0 0 8px 2px #00ccff3a, 0 0 15px #76c0e244;
    background-color: #fefeff; /* Opcional: hace que se vea más suave */
    transition: box-shadow 0.3s ease, border 0.3s ease;
}

/* Botón del formulario */
.btnchat {
  font-family: 'Delius';
    background-color: #ffffff;
    color: rgb(5, 5, 5);
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    transition: background-color 0.3s ease;
    box-shadow: 0 6px 16px rgba(15, 77, 194, 0.623);

}

.btnchat:hover {
    box-shadow: 0 6px 16px rgba(43, 117, 255, 0.904);
    
}

/* Responsive para pantallas pequeñas */
@media screen and (max-width: 480px) {
    #chatbot {
        width: 80px;
        height: 110px;
        bottom: 70px;
        right: 15px;
    }

    #formulario {
        bottom: 90px;
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }

    .btnchat {
        font-size: 14px;
    }

    .input-field input {
        font-size: 13px;
    }
}
/*responsive bbrja de wasap*/
.whatsapp-float {
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 9999;
  width: 80px;
  height: 80px;
  background-color: #25D366; /* Verde de WhatsApp */
    box-shadow: 5px 0px 30px 5px rgb(27, 235, 54);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* Responsive ajuste para pantallas pequeñas */
@media (max-width: 480px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }

  .whatsapp-float img {
    width: 26px;
    height: 26px;
  }
}


/*stylese selecion de catalogo*/
.catalogosele {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1em;
  padding: 2em;
  font-family: 'Delius';
}

.productosele{
  background: white;
  border-radius: 10px;
  padding: 1em;
 font-family: 'Delius';

  box-shadow: 0 0 10px rgba(7, 7, 7, 0.555);
  text-align: center;
  transition: transform 0.2s;
  cursor: pointer;
}

.productosele:hover {
  /*background: #000000;
background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 25, 1) 2%, rgba(0, 0, 0, 1) 3%, rgba(250, 55, 214, 1) 5%, rgba(0, 0, 0, 1) 6%, rgba(25, 221, 255, 1) 7%, rgba(0, 0, 0, 1) 9%, rgba(247, 247, 255, 1) 11%, rgba(255, 255, 255, 1) 100%);*/
  transform: scale(1.03);
}

.productosele img {
  max-width: 100%;
  height: 150px;
  object-fit: contain;
    
  
}


.detallesele {
  padding: 2em;
  max-width: 600px;
  margin: auto;
  background: white;
  border-radius: 10px;
  font-family: 'Delius';
}

.detallesele img {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
}

/* Media Queries */
@media (max-width: 768px) {
  .botonessele {
    flex-direction: column;
    align-items: center;
  }

  .productosele img {
    height: 100px;
  }
}

@media (max-width: 480px) {
  .titulosele {
    font-size: 1.5em;
  }



  .detallesele {
    padding: 1em;
  }
}
.aa{
  font-family: 'Delius';
  font-size: 20px;
  display: block;
  text-align: center;
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(0, 0, 0),
    0 0 10px rgb(0, 0, 0),
    0 0 20px rgb(0, 0, 0),
    0 0 40px rgb(0, 0, 0);
     cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
    text-decoration: none;
}
.aa:hover{
  display: block;
  text-align: center;
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(11, 97, 255),
    0 0 10px rgba(64, 185, 255, 0.623),
    0 0 20px rgb(0, 15, 230),
    0 0 40px rgb(0, 91, 196);

}
.abtaz{
  font-family: 'Delius';
    display: block;
  text-align: center;
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(11, 97, 255),
    0 0 10px rgba(64, 185, 255, 0.623),
    0 0 20px rgb(0, 15, 230),
    0 0 40px rgb(0, 91, 196);
    text-decoration: none;
}
.abtaz:hover{
    display: block;
  text-align: center;
  color:rgb(0, 37, 247);
text-shadow:
    0 0 5px rgb(11, 97, 255),
    0 0 10px rgba(64, 185, 255, 0.623),
    0 0 20px rgb(0, 15, 230),
    0 0 40px rgb(0, 91, 196);
    text-decoration: none;
}

.abtr{
  font-family: 'Delius';
    display: block;
  text-align: center;
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(255, 11, 11),
    0 0 10px rgba(247, 0, 0, 0.979),
    0 0 20px rgb(230, 27, 0),
    0 0 40px rgb(255, 0, 0);
    text-decoration: none;

}
.abtr:hover{
    display: block;
  text-align: center;
  color:rgb(255, 0, 0);
text-shadow:
    0 0 5px rgb(255, 11, 11),
    0 0 10px rgba(247, 0, 0, 0.979),
    0 0 20px rgb(230, 27, 0),
    0 0 40px rgb(255, 0, 0);
    text-decoration: none;

}

.btad{
  font-family: 'Delius';
  background-color: white;
  backdrop-filter: blur(10px);
  color: black;
  text-shadow:
    0 0 5px #238bc7ff,
    0 0 10px #ffffffff,
    0 0 20px #ffffffff,
    0 0 40px #238bc7ff;
}

 .titulo {
  font-family: 'Delius';
  text-align: center;
 /* box-shadow:
    0 0 5px #aaaaaad0,
    0 0 5px #ffffffff,
    0 0 5px #ffffffff,
    0 0 5px #cacaca88;*/
  color: #000000a2;
  font-size: 25px;
  position: relative;
  z-index: 1;
}


.titulo::after {
 content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -25px;
  width: 540px;
  height: 40px;
  background: url('linea-techx.svg') no-repeat center;
  background-size: contain;
  filter:
    drop-shadow(0 0 6px #ffffffff) 
    drop-shadow(0 0 12px #ffffffff);
  z-index: -1;
}
  /*.titulo {
 text-align: center;
    margin-top: 30px;
    color: #1a1a1aff;
    text-shadow: 0 0 10px #8ed2e9ff;

}*/
/* Banner superior dinámico */
/* Banner superior */
.top-banner {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(20, 20, 20, 1);
   backdrop-filter: blur(20px);  /*Borra el fondo detrás */
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Delius';
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 28, 121, 0.41);
  animation: slideDown 0.4s ease;
}

/* Entrada animada del banner */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.banner-text {
  font-family: 'Delius';
  text-align: center;
  flex: 1; /* Hace que ocupe todo el espacio disponible */
}
/* Botón para cerrar */
.banner-close {
  cursor: pointer;
  padding-left: 20px;
  font-size: 18px;
  color: #ccc;
  transition: color 0.2s ease;
}

.banner-close:hover {
  color: rgba(236, 0, 51, 0.69);
}

/* Espaciado dinámico del nav */
#mainNav {
  transition: margin-top 0.4s ease;
  margin-top:20px; /* Altura del banner */
}

/*styles seleccion catalogo*/

  .contenedor_seleccion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 200px auto;
  padding: 0 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



/* Cada opción del catálogo */
.opcion {
  background: linear-gradient(145deg, #ffffff57, #ffffff44, #047ec533);
  border-radius: 12px;
  box-shadow:  5px 5px 15px #ffffff3a,
              -5px -5px 15px #88b7d34b;
 
  text-align: center;
  cursor: pointer;
  padding: 20px 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

/* Animación de flotación para las imágenes */
.opcion img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 3px rgba(108, 176, 207, 0.51));
    
}

/* Efecto cuando el usuario pasa el mouse */
.opcion:hover {
 transform: translateY(-8px);
  box-shadow:  8px 8px 20px rgba(132, 202, 230, 0.62),
}

.opcion:hover img {
  transform: scale(1.07);
}

/* Texto debajo de la imagen */
.opcion span {
  font-family: 'Delius';
 /*font-weight: 700;*/
  font-size: 18px;

  /*text-transform: uppercase;*/
}

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

/* Para que cada imagen flote con un pequeño desfase */
.opcion:nth-child(2) img { animation-delay: 0.5s; }
.opcion:nth-child(3) img { animation-delay: 1s; }
.opcion:nth-child(4) img { animation-delay: 1.5s; }
.opcion:nth-child(5) img { animation-delay: 2s; }

    /*.opcionesct .buttonct:hover {
      background-color: var(--azul-oscuro);
      color: rgb(110, 115, 124);
    }*/
@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
    .imagenes {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .imagenesct img{
      width: 120px;
      height: 120px;
      object-fit: contain;
      border-radius: 10px;
      background-color: white;
      
      padding: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      animation: floatUpDown 3s ease-in-out infinite;
    }
    .imagenesct img {
      width: 130px;
      height: 130px;
      object-fit: contain;
      border-radius: 10px;
      background-color: white;
      
      padding: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      animation: floatUpDown 3s ease-in-out infinite;
    }
/* Para pantallas medianas */
@media (max-width: 1338px) {
  .contenedor_seleccion {
    margin-top: 450px;
  }
}
@media (max-width: 1024px) {
  .contenedor_seleccion {
    margin-top: 450px;
  }
}
@media (max-width: 1000px) {
  .contenedor_seleccion {
    margin-top: 450px;
  }
}
    @media (max-width: 768px) {
     .contenedor_seleccion {
    margin-top: 470px;
  }

      .imagenesct img {
        width: 100px;
        height: 100px;
      }
    }
    @media (max-width: 468px) {
     .contenedor_seleccion {
    margin-top: 450px;
  }
      .imagenesct img {
        width: 100px;
        height: 100px;
      }
    }

/*styles formukario escritorio*/
.botones {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 2em;
  backdrop-filter: blur(10px);
  font-family: 'Delius';
 
}


 /* 💅 Diseño moderno y responsive */
    .catalogoes, .resultados-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      padding: 20px;
    }

    .productoes {
      position: relative;
      background: rgba(255,255,255,0.8);
      border-radius: 12px;
      padding: 12px;
      text-align: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      color: #222;
      cursor: pointer;
      backdrop-filter: blur(4px);
      
  /*white-space: pre-line;*/ /* ✅ respeta saltos de línea */
    }

    .productoes:hover {
      transform: scale(1.03);
      box-shadow: 0 0 15px rgba(33, 90, 165, 0.45);
    }

    .productoes img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 10px;
    }

    .etiqueta-agotado {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,123,255,0.9);
      color: white;
      font-weight: bold;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 0.85rem;
     /* text-transform: uppercase;*/
      z-index: 2;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

    


    /* 🪩 Modal moderno */
/* 🔷 Fondo del modal */
/* 💠 Fondo del modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999; /* más alto que el nav */
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center; /* centrado vertical */
  padding: 80px 15px 40px; /* espacio arriba por el nav */
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  font-family: 'Delius', sans-serif;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* ⚡ Contenedor principal */
.modal-contenido.futurista {
  position: relative;
  margin: auto;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(0, 140, 255, 0.4);
  width: 95%;
  max-width: 700px;
  max-height: calc(100vh - 120px);
  color: #000;
  transition: all 0.4s ease;
  transform: scale(0.9);
  opacity: 0;
  box-sizing: border-box;
  overflow: hidden; /* scroll solo en modal-body */
}

/* 🔹 Borde eléctrico */
.modal-contenido.futurista::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(120deg, #0077ff, #ffffff, #0077ff, #00e0ff);
  background-size: 400% 400%;
  animation: luzElectrica 3s linear infinite;
  filter: drop-shadow(0 0 20px #008cff);
  pointer-events: none;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* 🩵 Contenido con scroll */
.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 25px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #00b7ff transparent;
}

/* Scroll personalizado */
.modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal-body::-webkit-scrollbar-thumb {
  background: #00b7ff;
  border-radius: 10px;
}

/* 🌈 Animación borde */
@keyframes luzElectrica {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 🖤 Textos */
.modal-body h2,
.modal-body p,
.modal-body .precio {
  font-family: 'Delius', sans-serif;
  color: #000; /* letra negra */
  text-shadow:
    0 0 5px rgb(11, 97, 255),
    0 0 10px rgba(64, 185, 255, 0.623),
    0 0 20px rgb(0, 15, 230),
    0 0 40px rgb(0, 91, 196); /* borde neón azul */
  white-space: pre-line; /* respeta saltos de línea */
  margin: 10px 0;
}

/* Título */
.modal-body h2 {
  font-size: 22px;
  font-weight: bold;
}

/* Descripción */
.modal-body p {
  font-size: 18px;
}

/* Precio */
.modal-body .precio {
  font-size: 20px;
  font-weight: bold;
}


.aa{
  font-size: 20px;
  display: block;
  text-align: center;
  font-family: 'Delius';
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(0, 0, 0),
    0 0 10px rgb(0, 0, 0),
    0 0 20px rgb(0, 0, 0),
    0 0 40px rgb(0, 0, 0);
     cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
    text-decoration: none;
}
.aa:hover{
  display: block;
  text-align: center;
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(11, 97, 255),
    0 0 10px rgba(64, 185, 255, 0.623),
    0 0 20px rgb(0, 15, 230),
    0 0 40px rgb(0, 91, 196);

}
 /* Estilos modernos para la vista de detalle */

 
    .detalle-container {
      max-width: 1000px;
font-family: 'Delius';
      margin: 5em auto;
      padding: 2em;
      background:  rgba(255, 255, 255, 0.65);
      border-radius: 20px;
     
    }

    .detalle-flex {
      display: flex;
      flex-wrap: wrap;
      gap: 2em;
      align-items: center;
      justify-content: center;
      font-family: 'Delius';
    }

    .detalle-img {
      flex: 1 1 300px;
      max-width: 400px;
     
    }

    .detalle-img img {
      width: 100%;
      border-radius: 10px;
      object-fit: contain;
       max-height:300px;
    }

    .detalle-info {
      flex: 1 1 300px;
    }

    .detalle-info h1 {
      font-size: 2em;
      color: #000000b0;
      margin-bottom: 0.5em;
      font-family: 'Delius';
    }

    .detalle-info p {
      margin: 0.5em 0;
      line-height: 1.5;
      font-family: 'Delius';
    }

    .detalle-precio {
      font-size: 1.5em;
      color: #000000b0;
      font-family: 'Delius';
      margin-top: 1em;
    }

    

    @media (max-width: 768px) {
      .detalle-flex {
        flex-direction: column;
        text-align: center;
      }

      .detalle-info h1 {
        font-size: 1.7em;
      }
    }

    @media (max-width: 480px) {
      .detalle-container {
        padding: 1em;
      }

      .detalle-info h1 {
        font-size: 1.5em;
      }

      .detalle-precio {
        font-size: 1.3em;
      }
    }
    .aadt{
  font-size: 15px;
  display: block;
  text-align: center;
  color:rgba(0, 0, 0, 0.97);
font-family: 'Delius';
     cursor: pointer;
 

    text-decoration: none;
}

/*hover tecnlogico*/
.hover-menudt {
  position: relative;
  overflow: hidden;
font-family: 'Delius';
 

  border-radius: 5px;
  cursor: pointer;

  border:none;
  font-weight: bold;
  /*text-transform: uppercase;*/

  z-index: 1;
 
  
}

/* SVG animado como overlay */
.hover-menudt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 200%;
  height: 100%;
  background: url("linea-hover.svg") repeat-x;
  background-size: 100% 100%;
  pointer-events: none;
  transition: transform 2s ease;
  z-index: 0;
}

/* Hover: desliza el SVG de derecha a izquierda */
.hover-menudt:hover::after {
  transform: translateX(-100%);
  left: 0;
}

/*stylos del login */
/*stylos para centrar div login*/
.wrapperlg {
  margin-top: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh;
  width: 100%;
}

/* Contenedor principal */
.login-container {
   background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 15px;
 font-family: 'Delius';
  box-shadow: 0 8px 32px rgba(0, 92, 167, 0.64);
  width: 90%;
  max-width: 400px;
  text-align: center;
}

/* Formulario */
.login-box h2 {
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  color: black;
  font-family: 'Delius';
}

.login-box input {
  width: 100%;
  padding: 0.75rem;
  margin: 0.5rem 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: black;
  font-size: 1rem;
  outline: none;
  transition: background 0.3s ease;
  font-family: 'Delius';
}

.login-box input::placeholder {
  color: #ccc;
}

.login-box input:focus {
  background: rgba(255, 255, 255, 0.2);
}

/* Botón */
.login-box button {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  font-family: 'Delius';
  background-color: #ffffff;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  margin-top: 1rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.login-box button:hover {
  background-color: transparent;
  color: #000;
}

/* Responsivo */
@media(max-width:1100px){
  .wrapperlg{
    margin-top: 200px;
  }
  
}

@media(max-width:680px){
  .wrapperlg{
    margin-top: 300px;
  }
  
}
@media (max-width: 480px) {

  .wrapperlg{
    margin-top: 300px;
  }
  .login-container {
    padding: 1.5rem;
  }

  .login-box h2 {
    font-size: 1.5rem;
  }

  .login-box input,
  .login-box button {
    font-size: 0.9rem;
    padding: 0.6rem;
  }
}

/*stylos de noticias */
 /*stylos de noticias*/
    /* Estilos de noticias */
/* Contenedor */
.contenedornt {
 width: 100%;
  max-width: 1400px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 200px auto 0 auto; /* desktop por defecto */
  padding: 0 20px;
  font-family: 'Delius';
}

/* Tarjeta noticia */
.noticia {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 85, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
  width: calc(33.333% - 20px);
  box-shadow: 0 8px 20px rgba(0, 64, 128, 0.1);
  transition: transform 0.3s;
  font-family: 'Delius';
}

.noticia:hover {
  transform: translateY(-5px);
}

.noticia img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}
.titulo-noticia {
  font-family: 'Delius';
  text-align: center;
  font-size: 1.2em;
  color: #002b63;
  margin-bottom: 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3; /* más profesional */
  max-width: 90%;   /* evita líneas demasiado largas */
  margin-left: auto;
  margin-right: auto;
}

.noticia p {
  color: #333;
  font-family: 'Delius';
  word-wrap: break-word;
  overflow-wrap: break-word;
  
  text-align: center; /* centradito y lindo */
  line-height: 1.4;   /* lectura más estética */
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* Fecha */
.fecha {
  font-size: 0.9em;
  color: #888;
  margin-top: 10px;
  font-family: 'Delius';
}

/* Botones de paginación */
.paginacion {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 40px auto;
  font-family: 'Delius';
}

.paginacion button {
  font-size: 25px;
  font-family: 'Delius';
  background-color: #ffffff86;
 /* color: rgba(56, 176, 231, 0.966);*/
   color:rgba(19, 19, 19, 0.432);
  text-shadow:
    0 0 5px rgba(227, 227, 228, 0.836),
    0 0 10px rgb(41, 133, 219),
    0 0 20px rgba(54, 144, 228, 0.726),
    0 0 40px rgb(247, 247, 247),
    0 0 80px rgba(19, 129, 231, 1);
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.paginacion button:hover {
  background-color: #edf1f767;
  font-size:27px ;
   transition: background 0.3s;
  
}

/* Responsive */

@media (max-width: 1338px) {
     .contenedornt {
    margin-top: 400px;
  }
  .noticia {
    width: calc(50% - 20px);
  }
}
/* Móviles grandes (landscape) */
@media (max-width: 768px) {
    .contenedornt {
    margin-top: 430px;
  }
  .noticia {
    width: 100%;
  }

}
/* Móviles pequeños (portrait) */
@media (max-width: 480px) {
  .contenedornt {
    margin-top: 400px;
  }
  .paginacion button {
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(16, 81, 202, 0.527);
 
  padding: 10px 20px;
  border: none;
 
}
.paginacion button:hover {
  background-color: #edf1f767;
  font-size:20px ;
   transition: background 0.3s;
  
}
}
/*styles del login mensaje error*/
.login-error {
    background-color: #e0f0ff;
    border: 1px solid #3399ff;
    color: #0066cc;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    animation: fadeIn 0.5s ease-in-out;
    font-family: 'Delius';
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
/*stylos del admin*/
.botonesadm {
  display: flex;
  justify-content: center;
  gap: 20px;
 
  backdrop-filter: blur(10px);
 
}


.catalogoadm {
  display: grid;
font-family: 'Delius';
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1em;
  padding: 2em;
}

.productoadm{
  background-color: #ffffff6c;
  border-radius: 10px;
  padding: 1em;
 
font-family: 'Delius';
  box-shadow: 0 0 10px rgba(131, 214, 235, 0.514);
  text-align: center;
  transition: transform 0.2s;
  cursor: pointer;
}

.productoadm:hover {
  /*background: #000000;
background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 25, 1) 2%, rgba(0, 0, 0, 1) 3%, rgba(250, 55, 214, 1) 5%, rgba(0, 0, 0, 1) 6%, rgba(25, 221, 255, 1) 7%, rgba(0, 0, 0, 1) 9%, rgba(247, 247, 255, 1) 11%, rgba(255, 255, 255, 1) 100%);*/
  transform: scale(1.03);
}

.productoadm img {
  max-width: 100%;
  height: 150px;
  object-fit: contain;
}

.detalleadm {
  padding: 2em;
  max-width: 600px;
  margin: auto;
  background: white;
  border-radius: 10px;
  font-family: 'Delius';
}

.detalleadm img {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
}
@media (max-width: 1338px){
 /* .catalogoadm{
    margin-top: 100px;
  }*/
  .botonesadm {
    flex-direction: column;
    align-items: center;
  }

  .productoadm img {
    height: 100px;
  }
}


/* Media Queries */
@media (max-width: 768px) {
 /* .catalogoadm{
    margin-top: 100px;
  }*/
  .botonesadm {
    flex-direction: column;
    align-items: center;
  }

  .productoadm img {
    height: 100px;
  }
}

@media (max-width: 480px) {

  /*.catalogoadm{
    margin-top: 100px;
  }*/
  .tituloadm {
    font-size: 1.5em;
  }

  button {
    width: 90%;
  }

  .detalleadm {
    padding: 1em;
  }
}
.aaadm{
  font-family: 'Delius';
  font-size: 20px;
  display: block;
  text-align: center;
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(0, 0, 0),
    0 0 10px rgb(0, 0, 0),
    0 0 20px rgb(0, 0, 0),
    0 0 40px rgb(0, 0, 0);
     cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
    text-decoration: none;
}
.aaadm:hover{
  display: block;
  text-align: center;
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(11, 97, 255),
    0 0 10px rgba(64, 185, 255, 0.623),
    0 0 20px rgb(0, 15, 230),
    0 0 40px rgb(0, 91, 196);

}
/* Fondo del visor */
/* 🌌 VISOR DETALLE (Modal principal) */
#visoradm {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}

/* 💎 CUADRO PRINCIPAL DEL VISOR */
.visor-contenido {
  position: relative;
  border-radius: 15px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  background: radial-gradient(circle at 30% 20%, #ffffff 0%, #e8f3ff 60%, #d0e8ff 100%);
  box-shadow: 0 0 30px rgba(0, 140, 255, 0.3);
  animation: visorFadeIn 0.4s ease;
  transition: all 0.3s ease;
}

/* ✨ EFECTO DE BORDE CON LUZ EN MOVIMIENTO */
.visor-contenido::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 3px;
  background: linear-gradient(
    120deg,
    #00ffff,
    #ffffff,
    #00aaff,
    #ffffff,
    #00ffff
  );
  background-size: 400% 400%;
  animation: bordeNeon 6s linear infinite;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* 🔦 EFECTO DE LUZ INTERIOR SUAVE */
.visor-contenido::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 50%, rgba(0, 180, 255, 0.2), transparent 70%);
  animation: luzInterior 5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* 🔁 ANIMACIONES */
@keyframes bordeNeon {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 0 15px #00ffff, 0 0 30px #008cff;
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 0 25px #00ffff, 0 0 50px #008cff;
  }
  100% {
    background-position: 0% 50%;
    box-shadow: 0 0 15px #00ffff, 0 0 30px #008cff;
  }
}

@keyframes luzInterior {
  0% {
    opacity: 0.6;
    background-position: 40% 60%;
  }
  50% {
    opacity: 0.9;
    background-position: 60% 40%;
  }
  100% {
    opacity: 0.6;
    background-position: 50% 50%;
  }
}

@keyframes visorFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 🖼️ IMAGEN DEL PRODUCTO */
.visor-contenido img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  border-radius: 10px;
  object-fit: contain;
  z-index: 2;
  position: relative;
}

/* 🅇 BOTÓN DE CIERRE */
#cerrarVisor {
  position: fixed;
  top: 20px;
  right: 25px;
  color: #00aaff;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 6px 12px;
  z-index: 10000;
}
#cerrarVisor:hover {
  color: #fff;
  background: #00aaff;
  box-shadow: 0 0 15px #00ffff, 0 0 30px #008cff;
  transform: scale(1.1);
}

/* 📝 TITULOS */
.visor-contenido h2 {
  text-align: center;
  color: #0a3d62;
  font-size: 1.4rem;
  margin-top: 15px;
  margin-bottom: 10px;
  font-family: 'Delius', sans-serif;
  z-index: 2;
  position: relative;
}

/* 🔘 BOTONES */
.visor-botones {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

/* 📱 RESPONSIVE AJUSTES */
@media (max-width: 768px) {
  .visor-contenido {
    max-width: 90vw;
    padding: 15px;
  }

  .visor-contenido img {
    max-height: 45vh;
  }

  #cerrarVisor {
    top: 15px;
    right: 15px;
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .visor-contenido {
    max-width: 95vw;
    padding: 12px;
    border-radius: 10px;
  }

  .visor-contenido img {
    max-height: 40vh;
  }

  #cerrarVisor {
    top: 10px;
    right: 10px;
    font-size: 22px;
    padding: 5px 9px;
  }

  .visor-contenido h2 {
    font-size: 1.1rem;
  }
}
/*stylos de adminitracion*/
    /* Botón de apertura */
#openmenuadm {
  color:black;
  font-size: 20px;
  margin: 20px;
  padding: 10px 15px;
  cursor: pointer;
  font-family: 'Delius';
}
/* ===== MENÚ LATERAL (SIDEBAR) ===== */
.sidebaradm{
  height: 100vh; /* ocupa el ALTO COMPLETO REAL */
  width: 0; /* se abre con JS */
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  font-family: 'Delius';
  overflow-x: hidden;
  transition: width 0.4s ease;
  padding-top: 60px;
  z-index: 5000;

   overflow-x: hidden;
  overflow-y: hidden; /* ← evita la barra vertical */
/*  box-shadow: 4px 0 20px rgba(0, 200, 255, 0.15);*/
}


/* ============================================
   CIRCUITO SVG EN EL BORDE DERECHO (SVG EXTERNO)
============================================ */
.sidebaradm::after {
  content: "";
  position: absolute;
  right: 0;
  top: -300px; /* arranca más arriba */
  width: 42px;
  height: 300px; /* mismo alto que el SVG */

  background-image: url("circuit_adm.svg"); /* AJUSTA ESTA RUTA */
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 42px 300px;



  opacity: 0;
  transition: opacity 0.4s ease;
}


/* ============================================
   HOVER ACTIVA EL CIRCUITO EN MOVIMIENTO
============================================ */
.sidebaradm:hover::after {
  opacity: 1;
  animation: circuitDown 2.2s linear infinite;
}

@keyframes circuitDown {
  0% { top: -300px; }
  100% { top: 100%; }
}


/* ============================================
   ENLACES DEL MENÚ
============================================ */
.sidebaradm a {
  font-family: 'Delius';
  padding: 15px 30px;
  text-decoration: none;
  font-size: 18px;
  color: #000000;
  display: block;
  transition: 0.3s ease;
}

.sidebaradm a:hover {
  color: #194acfa6;
  text-shadow: 0 0 6px #ffffff;
}


/* ============================================
   BOTÓN PARA CERRAR EL MENÚ
============================================ */
.back-arrow {
  font-family: 'Delius';
  position: absolute;
  bottom: 20px;
  left: 30px;
  background-color: #ffffff22;
  color: rgb(0, 0, 0);
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s, box-shadow 0.3s;
}

.back-arrow:hover {
  background-color: #ffffff44;
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.4);
}

.bt_adm{
width:200px;
height:40px;
background-color:rgba(255, 255, 255, 0.31);
  color: #131313;
  font-family: 'Delius';

}
.btbsadm{
  color:black;
}
/*styles de bsuqueda catalogo*/
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.51);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  margin-top: 180px; /* Se ajusta con media queries */
}

.search-container input[type="text"],
.search-container select {
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(5, 125, 194, 0.64);
  max-width: 90vw;
  font-family: 'Delius';
}

.search-container button {
  background-color: #ffffff8c;
  color: #131313;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-family: 'Delius';
  transition: background 0.3s ease;
}

/* 📱 Responsivo */
@media (max-width: 1350px) {
  .search-container {
    margin-top: 350px;
  }
}

@media (max-width: 1024px) {
  .search-container {
    margin-top: 380px;
  }
}

@media (max-width: 768px) {
  .search-container {
    flex-direction: column;
    margin-top: 380px;
  }

  .search-container input[type="text"],
  .search-container button,
  .search-container select {
    width: 90%;
  }
}
@media (max-width: 468px) {
  .search-container {
    flex-direction: column;
    margin-top: 380px;
  }}
/*styles resultado container*/

.resultados-container {
  font-family: 'Delius';
  margin: 30px auto;
  max-width: 1000px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.233);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 174, 255, 0.1);
  color: #002b49;
}

.grid-resultados {
  font-family: 'Delius';
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.tarjeta-producto {
  font-family: 'Delius';
  background: rgba(255, 255, 255, 0.685);
  border: 1px solid #cdefff;
  padding: 20px;
  border-radius: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0, 174, 255, 0.2);
}
.tarjeta-producto img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0,174,255,0.2);
}
.tarjeta-producto:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 174, 255, 0.3);
}

.tarjeta-producto h3 {
  margin: 0 0 10px;
  color: #007cc7;
  font-family: 'Delius';
}

.tarjeta-producto p {
  margin: 0;
  color: #333;
  font-size: 15px;
  font-family: 'Delius';
}

/* 💠 Fondo del modal */
/* 💠 Fondo del modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999; /* 🔼 más alto que el nav */
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center; /* 🔹 centrado vertical */
  padding: 80px 15px 40px; /* 🔹 deja espacio arriba por el nav */
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  font-family: 'Delius', sans-serif;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow-y: auto; /* 🔹 permite hacer scroll si es muy largo */
  scroll-behavior: smooth;
}

/* ⚡ Contenedor principal */
/* ⚡ Contenedor principal */
.modal-contenido.futurista {
  position: relative;
  margin: auto;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(0, 140, 255, 0.4);
  width: 95%;
  max-width: 700px;
  max-height: calc(100vh - 120px); /* espacio por el nav */
  color: #000;
  transition: all 0.4s ease;
  transform: scale(0.9);
  opacity: 0;
  box-sizing: border-box;
  overflow: hidden; /* ❌ quitamos overflow aquí */
}

/* 🔹 Borde eléctrico */
.modal-contenido.futurista::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(120deg, #0077ff, #ffffff, #0077ff, #00e0ff);
  background-size: 400% 400%;
  animation: luzElectrica 3s linear infinite;
  filter: drop-shadow(0 0 20px rgba(0, 140, 255, 1));
  pointer-events: none;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* 🩵 Contenido con scroll separado */
.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 25px;
  max-height: calc(100vh - 160px); /* deja espacio para nav y padding */
  overflow-y: auto; /* scroll solo aquí */
  scrollbar-width: thin;
  scrollbar-color: #00b7ff transparent;
}

/* Scroll personalizado */
.modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal-body::-webkit-scrollbar-thumb {
  background: #00b7ff;
  border-radius: 10px;
}

/* 🌈 Animación borde */
@keyframes luzElectrica {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 🩵 Cuerpo del modal */
.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 25px;
}

/* 🖼 Imagen */
.modal-imagen img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 140, 255, 0.2);
}

/* 🩵 Información */
.modal-info {
  width: 100%;
  text-align: center;
}

/* ❌ Botón cerrar */
.modal-cerrar {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 34px;
  font-weight: bold;
  color: #0077ff;
  cursor: pointer;
  transition: 0.3s ease;
}

.modal-cerrar:hover {
  color: #00e0ff;
  transform: rotate(90deg) scale(1.2);
  text-shadow: 0 0 20px #00e0ff;
}

/* ✨ Textos */
.modal-info h2 {
  font-family:'Delius' ;
  color: black;
  font-size: 24px;
  text-shadow:
    0 0 5px #0077ff,
    0 0 15px #00e0ff;
  margin-bottom: 10px;
}

.modal-info p {
  font-family:'Delius' ;

  font-size: 18px;
  white-space: pre-line;
  text-shadow:
    0 0 5px rgba(0, 140, 255, 0.3);
}

/* 🩵 Descripción scrollable */
.descripcion {
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  box-shadow: inset 0 0 15px rgba(0, 140, 255, 0.1);
  margin-bottom: 15px;
}

/* 💰 Precio */
.precio {
  font-size: 22px;
  font-weight: bold;
  color: #000;
  text-shadow:
    0 0 5px #0077ff,
    0 0 15px #00e0ff;
  margin-top: 10px;
}

/* 📱 RESPONSIVE */
@media (max-width: 768px) {
  .modal-body {
    padding: 20px;
  }

  .modal-info h2 {
    font-size: 20px;
  }

  .modal-info p {
    font-size: 16px;
  }

  .precio {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .modal-contenido.futurista {
    border-radius: 15px;
    padding: 15px;
  }

  .modal-imagen img {
    max-height: 200px;
  }

  .descripcion {
    max-height: 150px;
  }
}

/*styles del busqueda de admin*/
/* Contenedor principal de la página */
.main-content {
  padding-top: 170px; /* altura estimada del nav (aprox 140px + top 30px) */
}

/* Barra de búsqueda */
/*styles del busqueda de admin*/ .search-containerbq { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 20px; background-color: rgba(255, 255, 255, 0.51); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); flex-wrap: wrap; margin-top: 180px; /* Se ajusta con media queries */ } .search-containerbq input[type="text"], .search-containerbq select { padding: 10px 15px; font-size: 16px; border: none; border-radius: 5px; box-shadow: 0 2px 5px rgba(5, 125, 194, 0.64); max-width: 90vw; font-family: 'Delius'; } .search-containerbq button { background-color: #ffffff8c; color: #131313; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 16px; font-family: 'Delius'; transition: background 0.3s ease; } /* 📱 Responsivo */ @media (max-width: 1350px) { .search-containerbq { margin-top: 350px; } } @media (max-width: 1024px) { .search-containerbq { margin-top: 300px; } } @media (max-width: 768px) { .search-containerbq { flex-direction: column; margin-top: 300px; } .search-containerbq input[type="text"], .search-containerbq button, .search-containerbq select { width: 90%; } } @media (max-width: 468px) { .search-containerbq { flex-direction: column; margin-top: 300px; }}
/*styles de admin carrusel*/
.h2, .h3 {
    text-align: center;
  font-size:20px;
    color: rgb(0, 0, 0);
  /*  text-shadow: 0 0 10px #8ed2e9ff;*/
  font-family: 'Delius';
  }

  .formadmc {
    max-width: 500px;
    margin: 30px auto;
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
font-family: 'Delius';
    border-radius: 15px;
    box-shadow: 0 0 20px #6aa3c960;
    backdrop-filter: blur(10px);
    text-align: center;
  }


  

  .btnadmc[type="submit"] {
    padding: 10px 25px;
    background-color: #2885a1ff;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
    box-shadow: 0 0 15px #024380c7;
    font-family: 'Delius';
  }

  .btnadmc[type="submit"]:hover {
    background-color: #ffffff;
    color: #014d94ff;
    box-shadow: 0 0 25px #0347a0ff;
    font-family: 'Delius';
  }

  .ulcrr {
    max-width: 1000px;
    margin: 30px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    font-family: 'Delius';
  }

  .ulcrr li {
    font-family: 'Delius';
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
    text-align: center;
  
    box-shadow: 0 0 10px #53b8da71;
    transition: transform 0.3s ease;
  }

  .ulcrr li:hover {
    transform: scale(1.03);
  }

  .ulcrr img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
  }

  .aadmc {
  font-family: 'Delius';
      color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(255, 11, 11),
    0 0 10px rgba(247, 0, 0, 0.979),
    0 0 20px rgb(230, 27, 0),
    0 0 40px rgb(255, 0, 0);
    text-decoration: none;
    font-weight: bold;
  }

  .aadmc:hover {
  color:rgb(255, 0, 0);
text-shadow:
    0 0 5px rgb(255, 11, 11),
    0 0 10px rgba(247, 0, 0, 0.979),
    0 0 20px rgb(230, 27, 0),
    0 0 40px rgb(255, 0, 0);
    text-decoration: none;
  }

  /* Responsive para pantallas pequeñas */
  @media (max-width: 600px) {
    .formadmc {
      margin: 20px;
      padding: 20px;
    }

    .ulcrr {
      grid-template-columns: 1fr;
    }

   
  }
  /*styles del input tipo file */
  .inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
 
}

/* Estiliza la etiqueta como botón personalizado */
.inputfile + label {
  text-align:center;
font-family: 'Delius';
  
  color: white;
  background-color: #2885a1ff;
  display: inline-block;
  padding: 11px 65px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 0 7px 4px rgba(18, 123, 155, 0.49);
  transition: all 0.3s ease;

  text-shadow:
    0 0 5px rgb(0, 18, 51),
    0 0 10px rgb(0, 18, 51),
    0 0 20px rgb(0, 18, 51),
    0 0 40px rgb(0, 18, 51),
    0 0 80px rgb(0, 18, 51);
  font-weight: bold;
  font-size:15px;
}

/* Hover efecto */
.inputfile + label:hover {
  background-color: #18839ed3;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
/*styles admin novedades */
/*styles del titulo h1 de administracion novedades*/
.h1adnv{
  position: relative;
  font-family: 'Delius';
font-size:20px;
color:rgba(0, 0, 0, 0.55)
}
  

.contenedoradmnv {
  display: flex;
  font-family: 'Delius';
  justify-content: center;
  align-items: center;
  flex-direction: column; /* importante para mantener verticalidad en móviles */
  min-height: 100vh;       /* ocupa toda la altura de la pantalla */
  padding-top: 100px;      /* espacio para dejar hueco bajo el nav */
  box-sizing: border-box;  /* evita que padding desborde el 100vh */
}

/* Pantallas <= 1338px */
@media (max-width: 1338px) {
  .contenedoradmnv {
    margin-top: 100px;
  }
}

/* Pantallas <= 780px */
@media (max-width: 780px) {
  .contenedoradmnv {
    margin-top: 100px;
  }
}

/* Pantallas <= 400px */
@media (max-width: 400px) {
  .contenedoradmnv {
    margin-top: 100px;
  }
}


/* Estilo del formulario */
.mi-div {
  background-color: rgba(235, 236, 236, 0.38);
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 2, 34, 0.68);
  width: 350px;
  align-items: center;
  font-family: 'Delius';

}

/* Estilo de los inputs y textarea */
.inputnv[type="text"],
.textareanv {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
  

  box-shadow: 0 5px 15px rgba(117, 119, 128, 0.548);
}
.inputnv[type="text"]:focus,
.textareanv:focus,
.inputnv[type="file"]:focus {
  outline: none; /* Quita el borde negro por defecto */
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.8); /* Efecto visual personalizado */
  border: 1px solid #3498db; /* También puedes cambiar el color del borde */
}

/* Textarea más alto */
.textareanv {
  resize: vertical;
  height: 100px;
}

/* Estilo del botón */
.btnv[type="submit"] {
  font-family: 'Segoe UI', sans-serif;
  background-color:rgba(255, 255, 255, 1);
   color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgba(25, 103, 148, 1),
    0 0 10px rgba(7, 78, 145, 0.98),
    0 0 20px rgba(31, 99, 119, 1),
    0 0 40px rgba(38, 64, 148, 1);
    text-decoration: none;
    font-weight: bold;
  box-shadow: 0 0 8px rgba(27, 88, 138, 0.25);
  
  border: none;
  padding: 12px;
  margin-top: 10px;
  border-radius: 5px;
  cursor: pointer;
 font-family: 'Delius';
  width: 100%;
  
  font-size:15px;
}

/*styles nuevo producto/
 /*stylos del nuevo producto */
       /* Estilo general del formulario */
.formnp-container {
  max-width: 500px;
  margin: 40px auto;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
 font-family: 'Delius';
}
   /* Inputs y textarea */
.formnp-input,
.formnp-textarea,
.formnp-select,
.formnp-file {
  width: 100%;
  font-family: 'Delius';
  padding: 12px 14px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 15px;
  transition: border 0.3s, box-shadow 0.3s;
}

.formnp-input:focus,
.formnp-textarea:focus,
.formnp-select:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
  outline: none;
  font-family: 'Delius';
}

/* Textarea altura */
.formnp-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Botón */
.formnp-button {
font-size:18px;
font-family: 'Delius';
background-color:transparent;
 border:none;
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgba(25, 103, 148, 1),
    0 0 10px rgba(7, 78, 145, 0.98),
    0 0 20px rgba(31, 99, 119, 1),
    0 0 40px rgba(38, 64, 148, 1);
    text-decoration: none;
    font-weight: bold;
}

.formnp-button:hover {

 color:rgba(29, 88, 143, 1);
text-shadow:
    0 0 5px rgba(25, 103, 148, 1),
    0 0 10px rgba(7, 78, 145, 0.98),
    0 0 20px rgba(31, 99, 119, 1),
    0 0 40px rgba(38, 64, 148, 1);
    text-decoration: none;
    font-weight: bold;
}

/* Enlace cancelar */

.formnp-button-cancel {
 border:none;
font-size:18px;
font-family: 'Delius';
background-color:transparent;
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(255, 11, 11),
    0 0 10px rgba(247, 0, 0, 0.979),
    0 0 20px rgb(230, 27, 0),
    0 0 40px rgb(255, 0, 0);
    text-decoration: none;
    font-weight: bold;
}
  

.formnp-button-cancel:hover {

  color:rgba(177, 2, 2, 1);
text-shadow:
    0 0 5px rgb(255, 11, 11),
    0 0 10px rgba(247, 0, 0, 0.979),
    0 0 20px rgb(230, 27, 0),
    0 0 40px rgb(255, 0, 0);
    text-decoration: none;
    font-weight: bold;
}

/* Alineación de los botones */
.formnp-actions {
  display: flex;
  justify-content: center;  /* Esto es lo que centra horizontalmente */
  align-items: center;
  gap: 100px; /* Opcional: separa los botones */
}
  /*styles del input tipo file */

  .contcenter_file{
  text-align:center;
    
  }
 /*styles de ver novedades */
    /* Contenedor con scroll horizontal y diseño limpio */
/* Contenedor de la tabla con scroll horizontal para móviles */
.table-containervn{
  overflow-x: auto;
 font-family: 'Delius';
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  margin: 0 auto;
  height:auto;
  
 
}

/* Estilos de la tabla */
.tablevn {

  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 500px;
  table-layout: auto;
   font-family: 'Delius';
  
}

/* Encabezados y celdas */
.tablevn th,
.tablevn td {
  font-family: 'Delius';
  background-color:rgba(255, 255, 255, 0.38);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  word-break: break-word;
  border-bottom: 1px solid #ddd;
  color: #333;
  border:none;
   box-shadow: 5px 0px 30px 5px rgba(55, 118, 207, 0.44);
  text-align:center;
}

/* Encabezado especial */
.tablevn th {
  background-color: #f1f6ff;
  color: rgb(0, 17, 32);
  font-weight: bold;
  font-size: 18px;
  font-family: 'Delius';
}


/* Botones */
a.buttonvn,
a.deletevn {
  padding: 8px 0px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
  transition: background 0.3s ease;
  text-decoration: none;
  color: #fff;
 font-family: 'Delius';
}

/* Botón normal */
a.buttonvn {
font-family: 'Delius';
  width:90px;
  color:white;
  text-shadow:
    0 0 5px rgba(7, 88, 155, 0.42),
    0 0 10px rgba(27, 96, 160, 1),
    0 0 20px rgb(1, 31, 129),
    0 0 40px rgb(11, 0, 112),
    0 0 80px rgba(19, 129, 231, 1);
     
}
a.buttonvn:hover {
  color:rgba(24, 125, 165, 1);
  text-shadow:
    0 0 5px rgba(1, 43, 77, 1),
    0 0 10px rgba(30, 131, 179, 1),
    0 0 20px rgb(1, 31, 129),
    0 0 40px rgb(11, 0, 112),
    0 0 80px rgba(9, 86, 150, 1);
 
  /*box-shadow: 0 5px 15px rgba(0, 11, 58, 0.86);*/
}

/* Botón delete */
a.deletevn {
font-family: 'Delius';
  text-shadow:
    0 0 5px rgb(224, 0, 0),
    0 0 10px rgb(255, 1, 1),
    0 0 20px rgb(233, 0, 0),
    0 0 40px rgb(243, 3, 3),
    0 0 80px rgb(185, 0, 0);
}
a.deletevn:hover {
  color:red;
  text-shadow:
    0 0 5px rgb(224, 0, 0),
    0 0 10px rgb(255, 1, 1),
    0 0 20px rgb(233, 0, 0),
    0 0 40px rgb(243, 3, 3),
    0 0 80px rgb(185, 0, 0);
  /*box-shadow: 0 5px 15px rgb(255, 0, 0);*/
}

/* Contenedor de botones */
.botones-accionesvn {
  font-family: 'Delius';
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  position: relative;
  left:30px;
}



/* Responsive para tablets */
@media (max-width: 768px) {
  .tablevn {
    font-size: 12px;
    min-width: 100%; /* asegura el scroll */
  }

  .tablevn th,
  .tablevn td {
    padding: 8px;
    
  }

  a.buttonvn,
  a.deletevn {
    width:90px;
    font-size: 13px;
    padding: 6px 14px;

  }

  .botones-accionesvn {
    flex-direction: column;
    align-items: flex-start;
    
    
  }

 
}

/* Responsive extra para móviles pequeños */
@media (max-width: 480px) {
  .table-containervn {
    padding: 10px;
  }

  .tablevn {
    font-size: 11px;
    min-width: 360px;
   
  }

  a.buttonvn,
  a.deletevn {
    width:90px;
    font-size: 12px;
    padding: 5px 10px;
  }

  
}

/*styles del registro clientes*/
  /*styles dela table registros*/
 .hadm {
         text-align: center;
    margin-top: 30px;
    color: rgba(26, 26, 26, 0.315);
    text-shadow: 0 0 10px #8ed2e9ff;
    font-family: 'Delius';
    }

    .tabla-responsiverc {
        overflow-x: auto;
    }

    .tablerc {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
       color: black;
        box-shadow: 0 0 5px rgba(11, 120, 192, 0.69);
         background-color: rgba(255, 255, 255, 0.52); 
    backdrop-filter: blur(-20px);font-family: 'Delius';
    }

    .thrc, .tdrc {
      
        padding: 12px 15px;
       /* border: 1px solid #ddd;*/
         box-shadow: 0 0 3px rgba(17, 127, 230, 0.51);
        text-align: left;
        font-family: 'Delius';
    }

    .thrc {
        background-color: rgba(255, 255, 255, 0.53); 
    backdrop-filter: blur(-20px);
        color: black;
        font-family: 'Delius';
    }

    .trc:nth-child(even) {
         background-color: rgba(60, 164, 224, 0.46); 
    backdrop-filter: blur(-20px);
    color: rgb(0, 0, 0);
    font-family: 'Delius';
    }

    /* Responsivo */
    @media (max-width: 600px) {
        .tablerc, .theadrc, .tbodyrc, .thrc, .tdrc, .trc {
            display: block;
        }

        thead {
            display: none;
        }

        .trc {
            margin-bottom: 15px;
          background-color: rgba(0, 0, 0, 0.527); 
    backdrop-filter: blur(-20px);
            padding: 10px;
            box-shadow: 0 0 3px rgba(0,0,0,0.1);
        }

        .tdrc {
            text-align: right;
            padding-left: 50%;
            position: relative;
        }

        .tdrc::before {
            content: attr(data-label);
            position: absolute;
            left: 15px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }
    }
    /*styles del editar*/
.divedit {
  margin: 10px auto ;
  padding: 20px 30px;
  max-width: 500px;
  background-color:rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 7px 4px  rgba(1, 28, 66, 0.2);
  border-radius: 10px;
  border:none;
  position: relative;
}

/* ======== TÍTULO DEL FORMULARIO ======== */
.h2edit {
 font-family: 'Delius';
  text-align: center;
  color: black;
  font-size: 1.5rem;
 
}

/* ======== ETIQUETAS ======== */
.labeledit,
.pedit {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
  font-size: 20px;
  
     color:#14083b;
  font-family: 'Delius';
   
}

/* ======== INPUTS GENERALES ======== */
.inputedit,
.txtareaedit/*inputfile*/
 {
font-family: 'Delius';
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 10px;
  outline: none;
  font-size: 16px;
  box-shadow: 0 0 7px 4px  rgba(1, 28, 66, 0.2);
  transition: box-shadow 0.3s ease;
  margin-bottom: 16px;
}

/* ======== ÁREA DE TEXTO ======== */
.txtareaedit {
  font-family: 'Delius';
  height: 100px;
  resize: vertical;
}







/*center de input file novedades editcion*/
.centerfile_editnv{
  text-align:center;
    
}


/* ======== IMAGEN DE PREVISUALIZACIÓN ======== */
.imgedit {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
  padding: 2px;
   box-shadow: 0 0 7px 4px  rgba(1, 28, 66, 0.2);
}

/* ======== BOTÓN DE GUARDAR/EDITAR ======== */
.btedit {
  font-family: 'Delius';  
  width: 400px;
  max-width:100%;
 
  height: 50px;
  background-color: transparent;
  
  font-size: 20px;
text-shadow:
    0 0 5px rgba(25, 103, 148, 1),
    0 0 10px rgba(7, 78, 145, 0.98),
    0 0 20px rgba(31, 99, 119, 1),
    0 0 40px rgba(38, 64, 148, 1);
    text-decoration: none;
    font-weight: bold;
     color:white;
  box-shadow: 0 0 7px 4px #ffffffff;
  border-radius:10px;
  border:none;
}
.btedit:hover{
  text-shadow:
    0 0 5px rgba(25, 103, 148, 1),
    0 0 10px rgba(7, 78, 145, 0.98),
    0 0 20px rgba(31, 99, 119, 1),
    0 0 40px rgba(38, 64, 148, 1);
    text-decoration: none;
    font-weight: bold;
     color:rgba(4, 120, 155, 0.89);
  box-shadow: 0 0 7px 4px #ffffffff;
}


/* ======== RESPONSIVE DESIGN ======== */
@media (max-width: 768px) {
  .divedit {
    padding: 20px;
    width: 90%;
  }

  .h2edit {
    font-size: 1.6rem;
  }

  .inputedit,
  .txtareaedit,
  .inputfile {
    font-size: 15px;
  }

  .btedit {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .divedit {
    margin-top: 150px;
    padding: 15px;
  }

  .h2edit {
    font-size: 1.4rem;
  }

  .labeledit,
  .pedit {
    font-size: 16px;
  }

  .btedit {
    height: 45px;
    font-size: 15px;
  }

  .imgedit {
    max-width: 100%;
    height: auto;
  }
}
/*stylos de resultado*/
.admin-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  font-family: 'Delius';
}

.btn-admin {
  padding: 8px 14px;
  font-family: 'Delius';
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: white;
  transition: background 0.3s ease;
}

.btn-admin.editar {
  font-size: 19px;
font-family: 'Delius';
 display: block;
  text-align: center;
  color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(11, 97, 255),
    0 0 10px rgba(64, 185, 255, 0.623),
    0 0 20px rgb(0, 15, 230),
    0 0 40px rgb(0, 91, 196);
}

.btn-admin.editar:hover {
  color:rgba(24, 125, 165, 1);
  text-shadow:
    0 0 5px rgba(1, 43, 77, 1),
    0 0 10px rgba(30, 131, 179, 1),
    0 0 20px rgb(1, 31, 129),
    0 0 40px rgb(11, 0, 112),
    0 0 80px rgba(9, 86, 150, 1);
}

.btn-admin.eliminar {
  font-size: 19px;
font-family: 'Delius';
       color:rgb(255, 255, 255);
text-shadow:
    0 0 5px rgb(255, 11, 11),
    0 0 10px rgba(247, 0, 0, 0.979),
    0 0 20px rgb(230, 27, 0),
    0 0 40px rgb(255, 0, 0);
    text-decoration: none;
    font-weight: bold;
}

.btn-admin.eliminar:hover {
 display: block;
  text-align: center;
  color:rgb(255, 0, 0);
text-shadow:
    0 0 5px rgb(255, 11, 11),
    0 0 10px rgba(247, 0, 0, 0.979),
    0 0 20px rgb(230, 27, 0),
    0 0 40px rgb(255, 0, 0);
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
  .admin-actions {
    flex-direction: column;
  }

  .btn-admin {
    width: 100%;
    text-align: center;
  }
}
/*styles de resultados2*/
/* 🌐 Contenedor de los resultados */
  .resultados-containeradm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 20px;
  }

  /* 🧊 Tarjeta de producto */
  .producto-card {
    background: rgba(255, 255, 255, 0.89);
    border-radius: 15px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px rgba(0, 140, 255, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .producto-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 140, 255, 0.25);
  }

  .producto-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
  }

  .producto-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .producto-info h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #0a3d62;
    font-weight: 600;
  }

  .producto-info p {
    flex-grow: 1;
    margin: 0 0 12px;
    font-size: 14px;
    color: #333333cc;
    line-height: 1.4;
  }

  .producto-info .precio {
    font-size: 16px;
    font-weight: bold;
    color: #00aaff;
  }

  /* 🧠 Responsive */
  @media (max-width: 768px) {
    .producto-card img { height: 140px; }
    .producto-info h3 { font-size: 16px; }
    .producto-info p { font-size: 13px; }
    .producto-info .precio { font-size: 15px; }
  }

  /* 🌌 MODAL */
  /* 🌌 MODAL MEJORADO */
.modalad {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
  animation: fadeIn 0.3s ease;
  box-sizing: border-box;
}

.modal-content {
  background: linear-gradient(135deg, #ffffff 10%, #e9f3ff 100%);
  border-radius: 15px;
  max-width: 500px;
  width: 100%;
  padding: 20px;
  position: relative;
  box-shadow: 0 0 25px rgba(0,140,255,0.3);
  animation: scaleIn 0.3s ease;
  margin: auto;
  max-height: 90vh; /* 👈 evita que se salga de la pantalla */
  overflow-y: auto; /* 👈 permite desplazarse si es largo */
  box-sizing: border-box;
}

.modal-content img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  max-height: 60vh; /* 👈 limita tamaño de imagen */
  object-fit: contain;
}

.modal-content h2 {
  margin: 15px 0 10px;
  color: #0a3d62;
  font-size: 1.2rem;
}

.modal-content p {
  color: #333;
  font-size: 0.95rem;
}

.modal-content .precio {
  color: #00aaff;
  font-weight: bold;
  font-size: 1.1rem;
  margin-top: 10px;
}

/* ❌ Botón de cerrar fijo */
.close-btnad {
  position: fixed;
  top: 15px;
  right: 20px;
  font-size: 28px;
  color: #00aaff;
  cursor: pointer;
  transition: 0.3s;
  z-index: 1100;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  padding: 5px 10px;
}

.close-btnad:hover {
  color: red;
  background: rgba(255,255,255,0.4);
  transform: scale(1.1);
}

/* 📱 Responsive ajustes */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    padding: 15px;
  }

  .close-btnad {
    top: 10px;
    right: 15px;
    font-size: 24px;
  }
}

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

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}