/* 27in. Monitor 2560px */

@media only screen and (min-width:1921px) and (max-width:2560px) {

.gallery-two-popup-links li {
  margin-left: 9.7%;
}

}

/* 17in. Workstation: 1920px */
@media only screen and (min-width:1679px) and (max-width:1920px) {

.gallery-two-popup-links li {
  margin-left: 9.7%;
}

}


/* MacBook Pro */

@media only screen and (min-width:1368px) and (max-width:1680px) {

.gallery-two-popup-links li {
  margin-left: 9.5%;
}

}

/* iPad Landscape 1024px */

@media only screen and (min-width:1024px) and (max-width:1340px) {

.popup-links-button li {
  float: left;
  margin-right: 10%;
  margin-left: 0;
}
.team-grid-1{
  min-height: 506px;
}
.team-grid-2{
  min-height: 506px;
}
.team-grid-3 {
  background: none repeat scroll 0 0 #ccc8b6;
  min-height: 506px;
  padding: 10% 2% 0;
  position: relative;
  text-align: center;
}
.team-grid-4{
  min-height: 506px;
}
.team-grid-5 {
  background: none repeat scroll 0 0 #ccc8b6;
  min-height: 506px;
  padding: 10% 2% 0;
  position: relative;
  text-align: center;
}
ul.social li {
  display: inline-block;
  margin-right: 3%;
}
.newsletter_grid {
  background: none repeat scroll 0 0 #f2efe5;
  min-height: 506px;
  padding: 12% 2% 0;
}
.testimonial h4 {
  color: #f2efe5;
  float: right;
  font-size: 22px;
  font-style: italic;
  margin-right: 26%;
  margin-top: 4%;
  text-transform: uppercase;
}
.zooming {
  /* margin-top: 45px; */
  margin-top: 40%;
}
.gallery-title {
  background-color: #000000;
  float: left;
  min-height: 201px;
  text-align: center;
  width: 40%;
}


}  


.gallery_btn {
  margin-top: 43px;
}
.gallery-two-row-one {
  min-height: 201px;
}
ul.gallery-grid-one li {
  float: left;
  height: 201px;
  width: 33.33%;
}
.gallery-two-row-two {
  min-height: 201px;
}
ul.gallery-grid-two li {
  float: left;
  height: 201px;
  width: 20%;
}
.gallery-two-row-three {
  min-height: 201px;
}
ul.gallery-grid-three li {
  float: left;
  height: 201px;
  width: 20%;
}
.gallery-two-row-four {
  min-height: 201px;
}
ul.gallery-grid-four li {
  float: left;
  height: 201px;
  width: 20%;
}
.gallery-two-popup-links li {
  margin-left: 16px;
}



/* Tablet Layout: 768px. */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .splash{
    .neonText{
      
      line-height: 126px;
      /* padding:9rem 0; */
    }
    .nombre{
      margin-top:75%;
      

    }

  }
  .about_right p
  {
    /* & p{ */
      font-size: 18px;
      letter-spacing: 2px;
      /* 24 */
    /* } */
  }

  .location-info  p{    font-size: 20px;   }
  /* .about_left {	height: 836px;} */
  /* .terms-conditions{    margin:5px auto;   } */


   .nav > ul > li {
    padding: 0 20px;
    }



.payment-info{
  min-height:866px;
  padding: 20px 44px;
}


.mobile-display-on{display:none;}
.mobile-display-off{display: block;}
ul.about_gallery li {
  float: left;
  width: 33.33%;
}
.popup-links-button li {
  margin-right: -3px;
}
.testimonial span.quotes {
  left: 5em;
  top: 7em;
}
.testimonial span.quotes-down {
  right: 5em;
  top: 13em;
}
.testimonial h4 {
  margin-right: 10%;
  /* margin-top: 10%; */
}

.gallery-title {
  float: none;
  min-height: 220px;
  text-align: center;
  width: 100%;
}
 





  .contact-section > * {
    position: relative;
    z-index: 2;
  }
}

@media screen and (max-width: 767px) {
  #language-icon {
    right: -20px; /* más a la izquierda */
  }
}


@media screen and (max-width: 768px) {
  .section-title, .section-title span {
    font-size: 38px !important;
    letter-spacing: 4px;
  }
}
@media screen and (max-width: 768px) {
  .about_text {
    margin-top: 20px !important; /* Reduce el espacio arriba */
    padding-bottom: 30px;
  }
}


.gallery_btn {
  margin-top: 54px;
}

.payment-info {
    min-height:772px;
    padding: 20px 44px;

     .terms-right{
        margin-top:0;
    }
    .terms-left{
      min-height:440px;
      height:460px;
      margin: 0 auto 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  
    
}



.mobile-display-on {display:block !important;}
.mobile-display-off {display: none !important;}
.gallery-two-row-one {
  float: none;
  min-height: 250px;
  width: 100%;
}
ul.gallery-grid-one li {
  float: left;
  height: 250px;
  width: 33.33%;
}
.gallery-two-row-two {
  min-height: 250px;
}
ul.gallery-grid-two li {
  float: left;
  height: 250px;
  width: 33.33%;
}
.gallery-two-row-three {
  min-height: 250px;
}
ul.gallery-grid-three li {
  float: left;
  height: 250px;
  width: 33.33%;
}
.gallery-two-row-four {
  min-height: 250px;
}
ul.gallery-grid-four li {
  float: left;
  height: 250px;
  width: 33.33%;
}
.gallery-two-popup-links li {
  margin-left: 0px;
}

ul.contact-social {
  margin-bottom: 40px;
}







/* Wide Mobile Layout: 480px. */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .splash{
    .neonText{
     
      line-height: 112px;
      /* padding:7rem 0; */
    }
    .nombre{
      margin-top:100%;

    }

  }


  .payment-info{
    /* background: url(../images/ladrillo3_mob.jpg )no-repeat center center;
    background-size: cover; */
    /* padding: 6px 65px; */
    min-height: 500px;
  }


  .location-info {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 34px;
    padding-bottom: 34px;
    p{
      font-size: 34px;
    }
  }
  .about_right
  {
    height: 480px;
    & p{
      font-size: 22px;
    }
  }


 


.top-header {
  display: block;
  width: 60%;
  margin-left: 20%;
}

.footer-section {
  font-size:14px;
}

.nav > ul > li {
  padding: 0 10px;
   a{
      font-size: 24px;
   }
  }



  ul.open { 

    border: 1px solid #ffc002;
    /* border-radius: 6px; */
     /* background: linear-gradient(to bottom, #444444, #222222,#000000 ); */
     background: rgba(0,0,0,0.7);
     box-shadow: 4px 4px 1px rgb(0, 0, 0);;
     /* background:none; */
    display: flex;
    list-style: none;
    margin: 0;
    /* padding: 0; */
    position: absolute;
    right: 10px;
    top: 65px;
    width: auto;
    z-index: 500;
    height: auto;
    flex-direction: column;

    
	}
	ul.open li { display: block; list-style: none; text-align: center; }
	ul.open li a { 
		    display: block; 
		    padding:6px 0px; 
		    /* border-bottom:1px solid #E9E7D1; */
		    text-decoration: none;
		    -webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
			transition: all 0.5s ease;
			margin:0;
      color:#fcbe04;
      font-size: 2rem;
 	}


   nav > ul > li::after{
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    width: 0%; /* Change this to whatever width you want to have before hover. */
    padding-top: 5px; /* This creates some space between the element and the border. */
    border-bottom: 0;
    transition: .3s; /* This establishes the amount of time in seconds the animation should take from start to finish */
    margin:auto;
    
     }




	ul.open li a:hover { 
    animation: none;
       /* background-color:#9a977a; */
       color:#ffebaa;
       font-size:28px;
       text-shadow: 0 0 1px #000000,0 0 6px #ffffff, 2px 2px 10px #ffffff;
       /* font-weight: bold; */
       transition: .3s;

  }
.button-type-one {
  font-size: 20px;
}
.about_left {
  height: 586px;
}
.about_btn {
  margin-top: 80px;
}
ul.about_gallery li {
  float: left;
  width: 33.33%;
}
ul.popup_links li {
  display: none;
}
.zooming {
  margin-top: 35%;
}
.testimonial span.quotes {
  left: 10%;
  top: 20%;
}
.testimonial span.quotes-down {
  right: 10%;
  top: 55%;
}
.testimonial h4 {
  margin-right: 20%;
  margin-top: 8%;
}
.testimonial p {
  /* margin-top: 70px; */
}
.team-grid-1 {
  min-height: 250px;
}
.team_btn {
  margin-top: 85px;
}
.team-grid-2 {
  min-height: 400px;
}
.team-grid-3 {
  padding: 6em 1em 0;
}
.team-grid-4 {
  min-height: 400px;
}
.team-grid-5 {
  padding: 6em 1em 0;
}
.newsletter_grid {
  padding: 8em 1em 0;
}
ul.social li {
  margin-right: 30px;
}
.twitter-div {
  padding-top: 60px;
}
.gallery-title {
  min-height: 230px;
  width: 100%;
}
.gallery_btn {
  margin-top: 72px;
}
.gallery-two-row-one {
  width: 100%;
  min-height: 154px;
}
ul.gallery-grid-one li {
  float: left;
  width: 33.33%;
  height: 154px;
}
.gallery-two-row-two {
  width: 100%;
  min-height: 154px;
}
ul.gallery-grid-two li {
  float: left;
  width: 33.33%;
  height: 154px;
}
.gallery-two-row-three {
  width: 100%;
  min-height: 154px;
}

ul.gallery-grid-three li {
  float: left;
  width: 33.33%;
  height: 154px;
}
.gallery-two-row-four {
  width: 100%;
  min-height: 154px;
}
ul.gallery-grid-four li {
  float: left;
  width: 33.33%;
  height: 154px;
}
.mobile-display-on {display:block !important;}
.mobile-display-off {display: none !important;}
ul.contact-list-one {
  float: none;
  /* padding-left: 10%; */
  text-align: right;
  width: 50%;
  margin-bottom: 20px;
}
ul.contact-list-two {
  float: none;
  padding-left: 50%;
  text-align: left;
  width: 100%;
}
.contact-left h4 {
  color: #000;
  font-size: 16px;
  line-height: 22px;
  margin: 50px 0;
  /* padding: 0 20px; */
}
ul.contact-social {
  margin-top: 30px;
  padding: 0;
  text-align: center;
  margin-bottom: 30px;
}
ul.contact-social li {
  display: inline-block;
  margin-right: 10px;
}
.copyright {
  color: #000000;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 50px;
  padding: 0 15px;
  text-align: center;
}
}
/* Mobile Layout: 320px. */

@media only screen and (min-width: 320px) and (max-width: 479px) {
  .splash{
    .neonText{
     
      line-height: 90px;
      /* padding:15rem 0; */
    }
    .nombre{
      margin-top:100%;

    }
  }
  .location-info  p{

    font-size: 22px;
   }

   .terms-conditions h1 {
    font-size: 60px;
    }
  


    .payment-info{
      /* background: url(../images/ladrillo3a_mob.jpg )no-repeat center center;
      background-size: cover; */
      /* padding: 6px 65px; */
      min-height: 500px;
    }

    #btnPayOK{
      font-size: 28px;
    }

  



    .footer-section {
      font-size:14px;
    }

  .about_right{
    height: 600px;
  
  }

.header {
  min-height: 200px;
}
.top-header {
  display: block;
  margin-left: 20%;
  width: 60%;
}

.nav-list .logo{display:none;}
ul.nav-list { display: none; }
#menu-toggle, #mobile-nav {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}
  ul.open { 
	/* background-color:#f2efe5; */
  background-image: url("../images/universe.png");
    display: flex;
    flex-direction: column;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    right:0px;
    top:100px;
    width:100%;
    z-index: 500; 
    height: 44vh;
	}
	ul.open li { display: block; list-style: none; text-align: center; }
	ul.open li a { 
		    display: block; 
		    padding:10px 0px; 
		    border-bottom:0;
		    text-decoration: none;
		    -webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
			transition: all 0.5s ease;
			margin:0;
      font-size: 2rem;
 	}

   nav > ul > li::after{
    border-bottom:0;
   }
	ul.open li a:hover { 
    animation: flicker3 1.5s infinite alternate;
     border:0;
       /* background-color:#9a977a; */
       color:#ffde74;
  }
.button-type-one {
  font-size: 20px;
}
.about_left {
  min-height: 250px;
}
.about_btn {
  margin-top: 80px;
}
.about_text img {
  margin: 0 auto 0;
}
ul.about_gallery li {
  float: left;
  width: 33.33%;
}
ul.popup_links li {
  display: none;
}
.zooming {
  margin-top: 38%;
}
.testimonial span.quotes {
  left: 5%;
  top: 20%;
}
.testimonial span.quotes-down {
  right: 5%;
  top: 60%;
}
.testimonial p {
  margin-top: 70px;
}
.team-grid-1 {
  min-height: 400px;
}
.team_btn {
  margin-top: 150px;
}
.team-grid-2 {
  min-height: 300px;
}
.team-grid-3 {
  padding: 6em 1em 0;
}
.team-grid-4 {
  min-height: 300px;
}
.team-grid-5 {
  padding: 6em 1em 0;
}
.newsletter_grid {
  padding: 8em 1em 0;
}
ul.social li {
  display: inline-block;
  margin-right: 6px;
}
.twitter-div {
  padding-top: 55px;
}
.gallery-title {
  min-height: 187px;
  width: 100%;
}
.gallery_btn {
  margin-top: 70px;
}
.gallery-two-row-one {
  width: 100%;
  min-height: 101px;
}
ul.gallery-grid-one li {
  float: left;
  width: 33.33%;
  height: 101px;
}
.gallery-two-row-two {
  width: 100%;
  min-height: 101px;
}
ul.gallery-grid-two li {
  float: left;
  width: 33.33%;
  height: 101px;
}
.gallery-two-row-three {
  width: 100%;
  min-height: 101px;
}
ul.gallery-grid-three li {
  float: left;
  width: 33.33%;
  height: 101px;
}
.gallery-two-row-four {
  width: 100%;
  min-height: 101px;
}
ul.gallery-grid-four li {
  float: left;
  width: 33.33%;
  height: 101px;
}
.mobile-display-on {display:block !important;}
.mobile-display-off {display: none !important;}
ul.contact-list-one {
  float: none;
  padding-left: 10%;
  text-align: left;
  width: 90%;
  margin-bottom: 30px;
}
ul.contact-list-two {
  float: none;
  padding-left: 10%;
  text-align: left;
  width: 100%;
}
.contact-left h4 {
  color: #000;
  font-size: 16px;
  line-height: 22px;
  margin: 50px 0;
  padding: 0 20px;
}
ul.contact-social {
  margin-top: 30px;
  padding: 0;
  text-align: center;
  margin-bottom: 30px;
}
ul.contact-social li {
  display: inline-block;
  margin-right: 10px;
}
.copyright {
  color: #000000;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 50px;
  padding: 0 15px;
  text-align: center;
}

}

@media (max-width: 768px) {
  /* Mostrar correctamente fondo.png en Home y Services */
  /* #home,
  #location {
    background-image: url('../images/fondo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
  } */

  /* Asegurar que universe.png siga funcionando en Contact */
  #contact-section {
    background-image: url('../images/universe.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  /* Eliminar fondo rosado en About Us */

  .about_right {
    padding-top: 10px !important;
    margin-top: 0 !important;
  }

  /* Mover bandera */
  #language-icon {
    right: 15px !important;
    position: absolute !important;
    width: 5px !important;
  }
}
  @media only screen and (max-width: 768px) {
  .card {
    backdrop-filter: blur(2px); /* Menor desenfoque para no dañar fondo */
    -webkit-backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.4); /* Fondo más oscuro y translúcido */
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}


@media only screen and (max-width: 768px) {
  #testimonial-section video {
    pointer-events: none;
    object-fit: cover;
  }

  /* En caso de que aparezca overlay/play icon */
  video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
  }


}


  @media only screen and (max-width: 768px) {
  #comp_1::-webkit-media-controls,
  #comp_1::media-controls,
  #comp_1::-moz-media-controls {
    display: none !important;
  }

  #comp_1 {
    pointer-events: none;
    object-fit: cover;
  }
@media only screen and (max-width: 768px) {
  .testimonial h4 {
    transform: none !important;
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
  }

   

  }
}
















/* --- GRID 100% fluido (sin depender del breakpoint) --- */
#ds-contact-form{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Los campos que deben ir a lo ancho completo siguen funcionando */
#ds-contact-form .ds-full{ grid-column: 1 / -1; }

/* --- Ajustes de espacios y tipografías en móviles --- */
@media (max-width: 900px){
  #ds-contact-card{ width:min(860px, 94vw); padding:22px; }
  #ds-contact-card .ds-title{ font-size: clamp(18px, 4.5vw, 26px); }
  #ds-contact-card .ds-subtitle{ font-size: clamp(12px, 3.2vw, 14px); }
  .ds-field{ padding:10px; border-radius:14px; }
  .ds-label{ left:10px; bottom: calc(100% - 8px); font-size: 11px; }
  .ds-input, .ds-textarea, .ds-select{ 
    padding:12px; 
    font-size: clamp(14px, 3.6vw, 16px);
    border-radius:10px;
  }
  .ds-textarea{ min-height:120px; }
  #ds-result img{ width:60px; height:60px; }
  #ds-btn-contacto{
    --h:52px;
    width: min(90%, 360px);
    letter-spacing:.28em;
    margin-top: 12px;
  }
}

/* --- Extra pequeño (teléfonos angostos) --- */
@media (max-width: 420px){
  #ds-contact-card{ padding:18px; }
  .ds-label{ bottom: calc(100% - 6px); }
  .ds-input, .ds-textarea, .ds-select{ padding:11px; }
  #ds-result{ gap:6px; }
}

/* --- Evitar solape con botones flotantes (WhatsApp, etc.) --- */
#ds-contact-card{ padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.ds-actions{ margin-bottom: 6px; }

/* Si tienes un botón flotante, muévelo un poco más a la derecha en móviles */
@media (max-width: 720px){
  .btn-whatsapp-floating{ right: 12px; bottom: 12px; } /* Ajusta a tu clase real */
}

/* Mejor accesibilidad en el select (flecha e hit area) */
.ds-select{
  padding-right: 44px;
  background-position: right 12px center;
  background-size: 14px;
}

/* === Tamaño optimizado de bandera en versión móvil === */
@media (max-width: 768px){
  #bandera{
    width: 74px !important;
    height: 74px !important;
  }

  #bandera #flag-icon{
    width: 64px !important;  /* ← aquí puedes ajustar libremente */
    height: auto !important;
  }
}

@media (max-width: 420px){
  #bandera{
    width: 68px !important;
    height: 68px !important;
  }

  #bandera #flag-icon{
    width: 58px !important;
  }
}
/* === Ajuste de posición lateral de la bandera en móvil === */
@media (max-width: 768px){
  #bandera {
    margin: 0 !important;     /* elimina márgenes heredados */
    padding: 0 !important;    /* asegura que no tenga espacio interno */
    transform: translateX(14px); /* ✅ la empuja 10px a la derecha */
  }
}

@media (max-width: 420px){
  #bandera {
    transform: translateX(12px); /* un poco menos en pantallas pequeñas */
  }
}
/* ===== Título "Daevo Software" responsivo ===== */
/* === Ajuste móvil de logo y título (ligeramente más grande) === */
/* === Ajuste móvil de logo y título (un poco más grande) === */






/* === Evitar desbordamiento horizontal en móvil === */
html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}

/* Limita todo contenedor principal */
.header,
.container,
.container-fluid,
.row,
section {
  max-width: 100% !important;
  overflow-x: clip !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Corrige columnas con desbordes por grid o flex */
[class*="col-"] {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  overflow: hidden;
}

/* Si el parallax genera el overflow */
.parallax-bg, .sun {
  overflow: hidden;
  max-width: 100vw !important;
}

/* ===== Títulos de sección en móvil: NOSOTROS / CONTACTO ===== */
/* ===== NOSOTROS / CONTACTO: centrado y subrayado correcto en móvil ===== */



/* === Subrayado perfecto bajo los títulos en móvil === */



/* ===== Services: fondo nítido en móvil con pseudo-elemento ===== */
@media (max-width: 768px){
  #services{
    position: relative;
    /* background: none !important;     */
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;           /* iOS puede “suavizar” si hay transform en ancestros */
    -webkit-backface-visibility: hidden;  /* evita resampleo raro */
     
  }

  /* si tus hijos tenían overlay oscuro, lo quitamos aquí */
  #services > .container,
  #services > .row{
    background: transparent !important;
    filter: none !important;
  }



  /* el contenido queda por encima del pseudo-elemento */
  #services > *{
    position: relative;
    z-index: 1;
  }
}


/* ===== Footer centrado en móvil (override fuerte) ===== */
@media (max-width: 768px){
  /* El contenedor de filas no debe empujar a la derecha */
  .footer-section .row{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Columnas a 100% y sin floats */
  .footer-section .col-md-12,
  .footer-section .padded{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    float: none !important;
    margin: 0 auto !important;
  }

  /* Si existe alguna regla que pone el último bloque a la derecha */
  .footer-section .col-md-12:last-child,
  .footer-section .padded:last-child{
    text-align: center !important;
  }

  /* Íconos: en línea y centrados */
  .footer-section .padded a{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 10px !important;
    float: none !important;
  }

  /* Texto copyright centrado seguro */
  .footer-section .col-md-12 span{
    display: block !important;
    text-align: center !important;
    float: none !important;
  }
}
/* === Services: fondo nítido en móvil (sin velos encima) === */
@media (max-width: 768px){
  /* Usa la imagen directamente en la sección */
  #services{
    position: relative;
    /* background-image: url('../images/fondo.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important; */
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;            /* evita re-muestreo en iOS */
    -webkit-backface-visibility: hidden;   /* idem */
  }

  /* Quita la capa oscura de los contenedores hijos que estaba “lavando” el fondo */
  #services > .row,
  #services > .container{
    background: transparent !important;    /* <-- antes: rgba(0,0,0,0.5) */
  }

  /* Asegura que las cards no provoquen suavizado del fondo */
  .card{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(0,0,0,0.55) !important; /* mantiene contraste interno */
    border: 1px solid rgba(255,255,255,0.12) !important;
  }
}
@media (max-width: 768px){
  .no-parallax .parallax-bg{
    transform: none !important;
    background-attachment: scroll !important;
  }


 
}
/* ===============================
   LANG TOGGLE – AJUSTE MÓVIL
   =============================== */
/* ===== LANG TOGGLE (MÓVIL) - FORZADO ===== */
@media (max-width: 768px){
  .lang-toggle{
    right: 8px !important;     /* más a la derecha */
    top: 86px !important;

    padding: 6px 10px !important;
    gap: 6px !important;

    font-size: 8px !important;
    letter-spacing: .10em !important;
    line-height: 1 !important;

    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
  }

  .lang-toggle .sep{
    height: 8px !important;
  }

  /* Si hay íconos/flags dentro */
  .lang-toggle img,
  .lang-toggle svg{
    width: 14px !important;
    height: 14px !important;
  }
}

/* ===== FIX fondo borroso/pixelado SOLO en móvil (Services) ===== */
/* ===== SERVICES: fondo nítido SOLO móvil (arregla pixelado fuera de las cards) ===== */
@media (max-width: 768px){

  /* 1) NUNCA fixed en móvil (causa blur/pixelado) */
  /* body{
    background-image: url('../images/fondo.png');
    background-size: cover; 
  } */

  /* 2) La sección NO debe heredar nada raro (ni filtros ni transforms) */
  #services{
    position: relative !important;
    background: none !important;           /* apagamos el fondo directo */
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
    isolation: isolate;                    /* asegura capas */
  }


  /* 4) Todo el contenido de services por encima del fondo */
  #services > *{
    position: relative;
    z-index: 1;
  }

  /* 5) Por si bootstrap o algo mete capas raras */
  #services .container,
  #services .container-fluid,
  #services .row{
    background: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

/* @media (max-width:768px){
  #services::before{
    background-image: image-set(
      url('../images/fondo.png') 1x,
      url('../images/fondo@2x.png') 2x
    );
  }
} */
/* QUITAR AZUL DEL BANNER (quote) */
.test_wrap{
  background: transparent !important;
}
/* ===== TESTIMONIAL TEXT SIZE – MOBILE ===== */
@media (max-width: 768px){

  #faq .test_wrap p{
    font-size: 20px !important;     /* antes 32px */
    line-height: 1.4 !important;
    padding: 0 14px;
  }

  #faq h4{
    font-size: 14px !important;     /* STEVE JOBS */
    bottom: 10px !important;
    right: 14px !important;
  }

}
/* =========================
   HERO MOBILE – DAEVO EN UNA LÍNEA
========================= */



/* =========================
   FOOTER LOGO – MOBILE SIZE
========================= */
@media (max-width: 768px){

  /* COLUMNA COMPLETA DEL FOOTER */
  .footer-brand{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
  }

  /* WRAP DEL LOGO + TEXTO */
  .footer-logo-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
  }

  /* LOGO */
  .footer-logo-img{
    width: 100px;
    max-width: 100px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* TEXTO DAEVO SOFTWARE */
  .footer-logo-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    text-align: center;
  }

  /* DESCRIPCIÓN */
  .footer-desc{
    text-align: center;
    margin: 16px auto 0;
    max-width: 320px; /* 👈 para que no quede demasiado ancho */
  }

}



/* =========================
   MOBILE MENU – MÁS ALTURA Y ESPACIADO
========================= */
@media (max-width: 479px){

  ul.open{
    height: auto !important;        /* 🔥 que crezca según contenido */
    min-height: 60vh;               /* altura visual más cómoda */
    padding: 20px 0 28px;           /* aire arriba y abajo */
    gap: 14px;                      /* espacio entre items */
  }

  ul.open li a{
    padding: 16px 0 !important;     /* 🔥 más área táctil */
    line-height: 1.2;
    font-size: 2rem;
  }

}

/* =========================
   TESTIMONIAL – MOBILE HEIGHT FIX
========================= */
@media (max-width: 768px){

  #testimonial-section{
    min-height: 260px;   /* 🔥 altura nueva del banner */
    padding: 25px 14px;
  }

  .test_wrap{
    padding: 16px;
  }

  #testimonial-section p{
    font-size: 1.25rem;  /* texto más compacto */
    line-height: 1.4;
  }

  #faq h4{
    margin-top: 12px;
    font-size: 16px;
  }

}

/* =========================
   LOCATION – TEXT SIZE FIX MOBILE
========================= */

@media (max-width: 768px){

  .location-info p{
    font-size: 16px !important;   /* 🔥 antes 20–34px */
    letter-spacing: .5px;
    margin-top: 10px;
  }

  .location-info i,
  .location-info .fa,
  .location-info .fab{
    font-size: 45px !important;   /* 🔥 íconos más proporcionales */
  }

}
}


/* =========================
   HERO MOBILE (REBUILD CLEAN)
   Para: #logo, .splash, .piso, .neonText, .nombre, .btn-cta
========================= */
@media (max-width: 768px){

  /* 1) El header deja de depender de absolute/transform */
  .header{
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 120px;   /* espacio para navbar/hamburguesa */
    padding-bottom: 60px;
  }

  /* 2) Bloque del logo */
  .splash{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    margin: 0 auto 6px;  /* 🔥 más cerca del título */
    text-align: center;
  }

  #logo{
    width: min(210px, 62vw) !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 6px !important; /* 🔥 separacion pequeña */
    max-width: 100% !important;
  }

  /* 3) Bloque texto + CTA */
  .piso{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100%;
    padding: 0 16px;
    margin: 0 auto;
    text-align: center !important;
  }

  /* 4) Título: "Daevo Software" en una sola línea */
  .header .piso .neonText{
    display: block;
    width: 100%;
    text-align: center !important;

    font-size: clamp(26px, 8.5vw, 38px) !important;
    line-height: 1.02 !important;
    letter-spacing: .08em !important;   /* 🔥 menos separación */
    margin: 0 !important;

    white-space: nowrap !important;     /* 🔥 una sola línea */
  }

  /* 5) Subtítulo: una sola línea, pequeño (incluye AUTOMATIZACIÓN) */
  .header .piso .nombre{
    display: inline-block !important;
    text-align: center !important;

    margin-top: 8px !important;
    font-size: clamp(8px, 2.8vw, 11px) !important;
    letter-spacing: 1.6px !important;

    white-space: nowrap !important;     /* 🔥 una sola línea */
  }

  /* 6) Botón */
  .hero-cta{
    margin-top: 16px !important;
    text-align: center !important;
  }

  .btn-cta{
    display: inline-block !important;
    padding: 12px 22px !important;
    font-size: .78rem !important;
    letter-spacing: 2px !important;
  }
}

/* Extra compacto (iPhone pequeño) */
@media (max-width: 380px){

  #logo{
    width: min(200px, 70vw) !important;
    margin-bottom: 6px !important;
  }

  .header .piso .neonText{
    font-size: 27px !important;
    letter-spacing: .07em !important;
  }

  .header .piso .nombre{
    font-size: 12px !important;
    letter-spacing: 1.2px !important;
  }

  .btn-cta{
    font-size: .62rem !important;
    padding: 11px 18px !important;
  }
}

/* =========================
   FOOTER BRAND – CENTRADO REAL (MÓVIL) ✅
   Pegar al FINAL del responsive.css
========================= */
@media (max-width: 768px){

  /* 1) Neutraliza el grid que empuja (container/row/cols) */
  #site-footer .container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #site-footer .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #site-footer [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Centrado real del bloque BRAND */
  #site-footer .footer-brand{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* 3) ✅ El truco: inline-flex + fit-content para centrar “óptico” */
  #site-footer .footer-logo-wrap{
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    position: relative !important;
    left: 0 !important;
    transform: none !important;
  }

  /* 4) Imagen y texto */
  #site-footer .footer-logo-img{
    display: block !important;
    margin: 0 auto !important;
    width: 96px !important;     /* ajusta si quieres */
    height: auto !important;
  }

  #site-footer .footer-logo-text{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 8px auto 0 !important;
  }

  #site-footer .footer-desc{
    text-align: center !important;
    margin: 14px auto 0 !important;
    max-width: 320px !important;
    padding: 0 14px !important; /* un poco de aire sin descentrar */
  }
}


/* =========================
   UNIVERSE BG – RESTORE + NO BLUR (MOBILE)
========================= */
/* =========================================
   UNIVERSE BG – NO BLUR EN MÓVIL (FIX REAL)
   Pegar al FINAL de responsive.css
========================================= */
@media (max-width: 768px){

  /* 1) Mata el "fixed" (principal causa de blur en móvil) */
  #contact-section,
  #about-section .sun{
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
  }



  /* 3) Evita que algún transform/filtro “ensucie” el fondo */
  #contact-section,
  #about-section,
  #about-section .sun{
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
  }
}

/* =========================
   RESTORE OTHER BACKGROUNDS (MOBILE)
   (Pegar al FINAL del responsive.css)
========================= */
@media (max-width: 768px){

  /* HOME (tu hero vive dentro de #home) */
  #home{
    background-image: url("../images/fondo.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: scroll !important;
  }

  /* SERVICES */
  #services{
    background-image: url("../images/fondo.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: scroll !important;
    background-color: transparent !important;
  }

  /* LOCATION */
  #location{
    background-image: url("../images/fondo.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: scroll !important;
  }

  /* IMPORTANTÍSIMO: si antes tenías esto, lo neutraliza */
  #services{ background: unset !important; } /* le quita el "background: none !important" */
}

/* ✅ QUITAR CUADRO/PASTILLA ROSA DEL TÍTULO ABOUT EN MÓVIL */
@media (max-width: 768px){
  #about-section .ttl_about{
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;

    /* si el cuadro viene por padding + radius */
    padding: 0 !important;
    border-radius: 0 !important;

    /* mantiene el look centrado */
    display: block;
    text-align: center;
  }
}

/* ✅ FIX: quitar franja negra entre ABOUT (universe) y el banner en móvil */
/* =========================
   FIX FONDOS NEGROS EN MÓVIL
========================= */

/* =========================
   ABOUT – QUITAR ESPACIO NEGRO (MÓVIL)
========================= */
@media (max-width: 768px){

  #about-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* ❌ elimina alturas fijas del template */
  .about_left,
  .about_right{
    height: auto !important;
    min-height: auto !important;
  }

  /* contenedor interno */
  #about-section .sun{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* texto */
  .about_text{
    margin-bottom: 0 !important;
  }

}

/* =========================
   ABOUT – FIX COMPLETO (MÓVIL)
   - Elimina franja negra arriba
   - Restaura about_left (foto)
   - Quita alturas fijas que crean espacios
========================= */
@media (max-width: 768px){

  /* Quita padding del section que crea “franja” negra */
  #about-section{
    padding: 0 !important;
    margin: 0 !important;
    background: #000 !important;
  }

  /* Evita offsets del grid */
  #about-section .container-fluid,
  #about-section .row{
    margin: 0 !important;
    padding: 0 !important;
  }

  #about-section [class*="col-"]{
    padding: 0 !important;
  }

  /* ✅ RESTAURA la parte izquierda (foto) */
  #about-section .about_left{
    display: block !important;
    width: 100% !important;

    /* altura “hero” pequeña para móvil (sin franja negra enorme) */
    height: 220px !important;
    min-height: 220px !important;

    background-image: url("../images/about-gallery/myself.jpg") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 60% !important;

    overflow: hidden !important;
  }

  /* ✅ Derecha: NO más height fijo (esto era lo que creaba huecos) */
  #about-section .about_right{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* ✅ .sun deja de ser absolute en móvil (otro causante de espacios) */
  #about-section .about_right .sun{
    position: relative !important;
    inset: auto !important;

    padding: 26px 16px 26px !important;

    /* Fondo universo nítido en móvil */
    background-color: #000 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;

    /* usa tu versión mobile si ya la tienes */
  
  }

  /* Ajuste del texto para que no se “pegue” raro */
  #about-section .about_text{
    margin: 0 auto !important;
    max-width: 560px;
  }
}

/* Extra pequeño */
@media (max-width: 380px){
  #about-section .about_left{
    height: 200px !important;
    min-height: 200px !important;
  }
}
@media (max-width: 768px){
  #about-section{ margin-bottom: 0 !important; }
  #testimonial-section{ margin-top: 0 !important; padding-top: 0 !important; }
}

/* =========================================
   FIX MÓVIL: ABOUT + TESTIMONIAL (sin gaps negros)
   Pegar al FINAL de responsive.css
========================================= */
@media (max-width: 768px){

  /* -------------------------
     ABOUT: sin espacio negro y con altura correcta
  ------------------------- */

  /* El fondo lo ponemos en TODO el section (no solo en .sun) */
  #about-section{

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Quita paddings/margins del grid dentro de About (solo aquí) */
  #about-section .container-fluid,
  #about-section .row{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* En móvil: las 2 columnas apiladas y a 100% */
  #about-section .about_left,
  #about-section .about_right{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* ✅ La foto (left) recupera altura en móvil */
  #about-section .about_left{
    min-height: 320px !important;      /* ajusta si quieres 280–420 */
    height: 42vh !important;           /* mantiene buena proporción */
    background-size: cover !important;
    background-position: center top !important;
  }

  /* La derecha ya NO necesita fondo propio */
  #about-section .about_right{
    background: transparent !important;
  }

  /* Importantísimo: quita el fondo duplicado en .sun y dale padding */
  #about-section .sun{
    background: transparent !important;
    padding: 26px 16px 18px !important;
    margin: 0 !important;
  }

  /* Evita “aire” extra abajo que deja negro antes del banner */
  #about-section .about_text{
    margin: 0 !important;
    padding-bottom: 0 !important;
  }

  /* -------------------------
     TESTIMONIAL: regresa el video de fondo (y sin negro arriba)
  ------------------------- */

  /* Asegura que el section tenga caja y no empuje */
  #testimonial-section{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ✅ El contenedor que tiene el video debe ser relativo */
  #faq{
    position: relative !important;
    overflow: hidden !important;
    min-height: 260px !important; /* ajusta si quieres */
    background: transparent !important;
  }

  /* ✅ Capa del video: full cover */
  #faq .video_bkg{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    opacity: .55 !important;
  }

  #faq .video_bkg video{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Contenido encima del video */
  #faq .test_wrap{
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
  }
}

/* ===============================
   ABOUT – MÁS ALTURA EN MÓVIL
=============================== */
@media (max-width: 768px){

  /* Altura total de la sección */
  #about-section{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* Columna izquierda (foto) */
  #about-section .about_left{
    height: 48vh !important;      /* antes 42vh */
    min-height: 360px !important; /* más presencia visual */
  }

  /* Columna derecha (texto) */
  #about-section .about_right{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Caja del contenido */
  #about-section .sun{
    padding-top: 30px !important;
    padding-bottom: 26px !important;
  }

}
/* ===============================
   ABOUT – MÁS ALTURA IMAGEN IZQUIERDA (MÓVIL)
=============================== */
@media (max-width: 768px){

  #about-section .about_left{
    height: 66vh !important;        /* 🔥 más alta visualmente */
    min-height: 420px !important;   /* asegura presencia en teléfonos pequeños */

    background-size: cover !important;
    background-position: center top !important; /* enfoca mejor la imagen */
    background-repeat: no-repeat !important;
  }

}

/* ===============================
   TESTIMONIAL BANNER – MOBILE FIX
=============================== */
@media (max-width:768px){

  #testimonial-section{
    min-height: 280px !important;   /* 🔻 menos alto */
    padding: 40px 15px !important;  /* espacio interno controlado */
  }

  /* Video siempre visible y ocupando la sección */
  #testimonial-section video{
    height: 100%;
    object-fit: cover;
  }

  /* Contenedor del texto */
  .test_wrap{
    margin-top: 40px !important;   /* 🔻 baja el texto */
    padding: 15px !important;
    background: rgba(0,0,0,0.45) !important;
    border-radius: 14px;
  }

  /* Frase */
  #testimonial-section p{
    font-size: 1.4rem !important;
    line-height: 1.6 !important;
  }

  /* Autor */
  #testimonial-section h4{
    margin-top: 15px !important;
    font-size: 16px !important;
    text-align: center;
  }

}

@media (max-width:768px){

  /* SECTION sin aire extra */
  #testimonial-section{
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
  }

  /* CONTENEDOR DEL VIDEO */
  #faq{
    position: relative !important;
    overflow: hidden !important;
    height: 260px !important;   /* 🔥 controla la altura real del banner */
    min-height: unset !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* VIDEO FULL COVER */
  #faq .video_bkg{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* TEXTO ENCIMA DEL VIDEO */
  #faq .test_wrap{
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;

    display: flex;
    flex-direction: column;
    justify-content: center;   /* 🔥 centra vertical */
    align-items: center;

    margin: 0 !important;
    padding: 20px 16px !important;

    background: transparent !important;
  }

}

/* =========================
   ABOUT MOBILE FIX PRO
========================= */
@media (max-width: 768px){

  /* 🔥 QUITAR espacio sobrante en la imagen LEFT */
  .about_left{
    height: 420px !important;      /* ajusta si quieres más/menos */
    min-height: auto !important;
    background-position: center top !important;
  }

  /* 🔥 QUE NO SE VEA el universe.png debajo */
  #about-section{
    padding: 0 !important;
  }

  .row{
    margin: 0 !important;
  }

  /* =========================
     RIGHT – quitar sombra inferior
  ========================= */

  .sun{
    padding: 40px 20px !important;
    min-height: auto !important;

    /* 👇 elimina el efecto oscuro */
    box-shadow: none !important;
    background-blend-mode: normal !important;
  }

  /* ❌ si había overlay oscuro */
  .sun::before{
    display: none !important;
  }

  /* ❌ quitar velo oscuro del glass si se pasa abajo */
  .about_text p{
    box-shadow:
      0 0 15px rgba(0,0,0,.35) !important;  /* sombra suave limpia */
  }

}

/* =========================
   ABOUT – LEFT SIN ESPACIO SOBRANTE
========================= */
@media (max-width: 768px){

  .about_left{
    height: 390px !important;     /* 🔥 ajusta fino si quieres */
    min-height: unset !important;

    display: block !important;
  }

  /* 🔥 evita que Bootstrap iguale alturas */
  #about-section .row{
    display: block !important;
  }

  #about-section .col-md-6{
    width: 100% !important;
    max-width: 100% !important;
  }

}

/* =========================
   ABOUT (MÓVIL) – QUITAR ESPACIO SOBRANTE BAJO LA FOTO (LEFT)
========================= */
@media (max-width: 768px){

  /* 0) Quita paddings que crean “aire” */
  #about-section,
  #about-section .container-fluid,
  #about-section .row{
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 1) Apila columnas en móvil */
  #about-section .row{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #about-section .about_left,
  #about-section .about_right{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* 2) LEFT: forzar que NO se vea universe debajo */
  #about-section .about_left{
    /* Ajusta este alto si quieres un pelín más o menos */
    height: 420px !important;           /* 🔥 sube/baja aquí */
    min-height: 420px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #000 !important;  /* por si hay transparencias */
    
    /* ✅ si la foto LEFT es background-image */
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  /* 3) ✅ si la foto LEFT es un <img> dentro */
  #about-section .about_left img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 4) Asegura que la derecha no “empuje” dejando huecos raros */
  #about-section .about_right{
    margin: 0 !important;
    padding: 0 !important;
  }
}



/* =========================
   CONTACT BG — FIX BLUR (MOBILE)
========================= */
@media (max-width: 820px){
  #contact-section{
    background-attachment: scroll !important;  /* evita blur por fixed en móvil */
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    /* usa la imagen mobile en alta */
   

    /* opcional: si algún estilo viejo aplica filtros */
    filter: none !important;
    transform: none !important;
  }
}


/* ===== CONTACT: fondo nítido SOLO en móvil ===== */
@media (max-width: 768px){

  #contact-section{
   
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    /* IMPORTANTE: en móvil el fixed suele verse mal/borroso */
    background-attachment: scroll !important;
  }

}

/* =====================================
   ABOUT RIGHT - RESTORE UNIVERSE MOBILE
===================================== */
@media (max-width:768px){

  #about-section .about_right{
    background: none !important;
  }

  #about-section .about_right .sun{

    background-image:url("../images/universe.png") !important;

    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;

    background-attachment:scroll !important;

    /* importante */
    display:block !important;
    min-height:auto !important;

    /* por si algún overlay la tapa */
    box-shadow:none !important;
  }

  /* mata cualquier pseudo overlay oscuro */
  #about-section .sun::before,
  #about-section .sun::after{
    display:none !important;
    content:none !important;
  }

}


/* =====================================
   HERO MOBILE FIX
   - hamburguesa arriba derecha
   - menos espacio arriba/abajo en hero
===================================== */
@media (max-width: 768px){

  /* header más compacto */
  #header,
  .header,
  #home{
    min-height: 100svh !important;
    height: auto !important;
  }

  .header{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    padding-top: 28px !important;
    padding-bottom: 22px !important;
    position: relative !important;
  }

  /* contenedor nav pegado arriba */
  .top-nav{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    pointer-events: none;
  }

  .top-nav .nav{
    position: relative !important;
    width: 100% !important;
    min-height: 56px !important;
    pointer-events: auto;
  }

  /* hamburguesa en esquina superior derecha */
  #menu-toggle{
    position: absolute !important;
    top: 0 !important;
    right: 12px !important;
    display: block !important;
    z-index: 1001 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  #menu-toggle img{
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
  }

  /* menú desplegable alineado con el botón */
  .nav ul.open,
  ul.open{
    top: 64px !important;
    right: 10px !important;
  }

  /* toggle de idioma un poco más arriba */
  .lang-toggle{
    top: 10px !important;
    right: 78px !important;
    z-index: 1000 !important;
  }

  /* centro del hero con menos aire */
  .hero-center-wrap{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 52px 16px 0 !important;
  }

  .splash{
    margin: 0 auto 2px !important;
    padding: 0 !important;
  }

  #logo{
    width: min(200px, 58vw) !important;
    margin: 0 auto !important;
  }

  .piso{
    margin: 0 auto !important;
    padding: 0 14px !important;
  }

  .header .piso .neonText{
    margin: 0 !important;
    line-height: .98 !important;
  }

  .header .piso .nombre{
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }

  .hero-cta{
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }

  .btn-cta{
    padding: 11px 22px !important;
  }
}

/* ajuste fino para teléfonos pequeños */
@media (max-width: 479px){

  .header{
    padding-top: 18px !important;
    padding-bottom: 16px !important;
  }

  .top-nav{
    top: 6px !important;
    right: 8px !important;
  }

  #menu-toggle{
    top: 0 !important;
    right: 8px !important;
  }

  #menu-toggle img{
    width: 52px !important;
    height: 52px !important;
  }

  .lang-toggle{
    top: 8px !important;
    right: 68px !important;
  }

  .hero-center-wrap{
    padding-top: 38px !important;
    padding-bottom: 0 !important;
  }

  #logo{
    width: min(190px, 56vw) !important;
  }
}


/* =========================================
   MOBILE FIX FINAL
   - elimina width extra
   - hamburguesa más pequeña
   - pill idioma más abajo y más a la derecha
========================================= */
@media (max-width: 768px){

  /* ===== 1) QUITAR DESBORDE HORIZONTAL REAL ===== */
  html, body{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #header,
  #home,
  .header,
  .hero-center-wrap,
  .top-nav,
  .nav,
  .container,
  .container-fluid,
  .row,
  section{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Bootstrap row suele causar overflow lateral */
  .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .container,
  .container-fluid,
  [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* evita que cualquier elemento absoluto empuje el ancho */
  img,
  video,
  iframe,
  canvas,
  svg{
    max-width: 100% !important;
  }

  /* ===== 2) NAV SUPERIOR MÓVIL ===== */
  .top-nav{
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 110px !important;
    z-index: 1200 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .top-nav .nav{
    position: relative !important;
    height: 110px !important;
    min-height: 110px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* ===== 3) HAMBURGUESA MÁS PEQUEÑA ===== */
  #menu-toggle{
    position: absolute !important;
    top: 18px !important;
    right: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    z-index: 1300 !important;
  }

  #menu-toggle img{
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
  }

  /* menú abierto alineado con el botón */
  ul.open,
  .nav ul.open{
    top: 68px !important;
    right: 8px !important;
    left: auto !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* ===== 4) PÍLDORA DE IDIOMA MÁS ABAJO Y MÁS A LA DERECHA ===== */
  .lang-toggle{
    position: absolute !important;
    top: 24px !important;
    right: 64px !important;
    z-index: 1250 !important;

    padding: 7px 12px !important;
    gap: 6px !important;

    max-width: calc(100vw - 130px) !important;
    transform: none !important;
  }

  .lang-toggle .chip{
    white-space: nowrap !important;
  }

  /* ===== 5) HERO SIN EMPUJAR EL WIDTH ===== */
  .hero-center-wrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .splash,
  .piso{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .header .piso .neonText,
  .header .piso .nombre{
    max-width: 100% !important;
  }

  /* WhatsApp y back to top no deben crear width extra */
  .fn-whats,
  #toTop{
    right: 10px !important;
  }
}

/* ===== AJUSTE FINO iPhone angosto ===== */
@media (max-width: 480px){

  #menu-toggle{
    top: 16px !important;
    right: 6px !important;
  }

  #menu-toggle img{
    width: 40px !important;
    height: 40px !important;
  }

  .lang-toggle{
    top: 26px !important;
    right: 56px !important;
    padding: 6px 10px !important;
    transform: scale(.96);
    transform-origin: top right;
  }

  ul.open,
  .nav ul.open{
    top: 64px !important;
    right: 6px !important;
  }
}

/* =========================================
   CONTACT MOBILE FIX
   - pill idioma más a la derecha y más abajo
   - quitar glass/velo extra en contacto móvil
========================================= */
@media (max-width: 768px){

  /* =========================
     LANG TOGGLE
  ========================= */
  .lang-toggle{
    position: fixed !important;

    top: 70px !important;       /* antes 46px */
    right: 10px !important;     /* antes 28px */

    z-index: 9999 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 7px 12px !important;
    gap: 6px !important;

    max-width: calc(100vw - 72px) !important;

    transform: none !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .lang-toggle .chip{
    white-space: nowrap !important;
  }

  .lang-toggle .sep{
    height: 9px !important;
  }

  /* =========================
     CONTACT BG MOBILE
  ========================= */
  #contact-section{
    background-image: url("../images/universe_mobile.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-color: #000 !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
  }

  /* quitar cualquier glass/overlay del section */
  #contact-section::before,
  #contact-section::after,
  #contact-section .container::before,
  #contact-section .container::after,
  #contact-section .row::before,
  #contact-section .row::after{
    display:none !important;
    content:none !important;
  }

  /* contenedores transparentes */
  #contact-section .container,
  #contact-section .container-fluid,
  #contact-section .row,
  #contact-section .contacto_fnd,
  #contact-section .ds-contact-wrap{
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:0 !important;
  }

  /* quitar velos fuera del form */
  #contact-section .ttl_contact,
  #contact-section .ds-contact-head,
  #contact-section .ds-contact-kicker,
  #contact-section .ds-subtitle{
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* mantener el form limpio */
  #contact-section .ds-contact-card{
    background: rgba(10,10,10,.58) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.26) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    border:1px solid rgba(255,255,255,.08) !important;
  }

}

/* =========================
   IPHONE / TELÉFONOS PEQUEÑOS
========================= */
@media (max-width:480px){

  .lang-toggle{
    top:58px !important;      /* antes 52px */
    right:14px !important;    /* antes 20px */

    padding:6px 11px !important;

    transform:scale(.96) !important;
    transform-origin:top right !important;
  }

}

/* =========================================
   FORCE LANG TOGGLE REAL POSITION
========================================= */
@media (max-width:768px){

  .lang-toggle{
    position: fixed !important;

    top: 80px !important;     /* más abajo */
    right: 6px !important;    /* más a la derecha */

    left: auto !important;
    bottom: auto !important;

    margin: 0 !important;
    max-width: none !important;
    width: auto !important;

    transform: none !important;
    translate: none !important;
    scale: 1 !important;

    z-index: 999999 !important;
  }

}


@media (max-width:480px){

  .lang-toggle{
    top: 80px !important;
    right: 2px !important;

    transform: none !important;
    translate: none !important;
    scale: 1 !important;
  }

}