html{
touch-action: pan-y;  
}
body{
    margin:0;
    padding: 0;   
    /*Fuente*/
    font-family: 'Work Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;


    
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Merriweather', serif;
  color: #2c2c2c;
}

h1{color:white !important;}
.colores_empresa{
    background-color:#3d9ed6; /* cambiado, anterior: #8DB590;*/
}
.btn {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 1rem;
  padding: 0.6em 1.2em;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
  /* Degradado inicial */
  background: linear-gradient(135deg, #6E8EF5 0%, #A777E3 100%);
  color: #ffffff;
  /* Sombra sutil para “levantar” el botón */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Animaciones suaves */
  transition: 
    background-position 0.4s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
  /* Para que el degradado se anime */
  background-size: 200% 200%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor:pointer;
}

.btn:hover {
  /* Desplazamos el degradado para un efecto dinámico */
  background-position: 100% 0;
  /* Elevamos un poco el botón y reforzamos la sombra */
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.btn:active {
  /* Texto más claro y efecto “presionado” */
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1{color:black;font-size:4em;margin:0;text-align:center;}
.subtitulo_1{color:white;;font-size:1.2em;text-align:center;}
.subtitulo_2{color:black;text-align:center;font-size:3em;}
.subtitulo_3{color:black;text-align:center;font-size:2em;}
/*LINEA*/

.linea_color_empresa{
    background-color:#3d9ed6; /* cambiado */
    padding:0.1px;
    font-size:2em;
    text-align:center;
}

.linea_color_empresa_vacia{
        background-color:#3d9ed6; /* cambiado */
    padding:0.1px;
    font-size:2em;
    text-align:center;
    padding:10px;
    height:10vh
}








/*MENU*/
    /* Navbar */

    :root {
      --primary-color: #2c3e50;
      --accent-color: #3d9ed6; /* cambiado, anterior: #8DB590;*/
      --text-color: #ecf0f1;
      --transition-speed: 0.3s;
    }


    .navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--primary-color);
      padding: 1rem 2rem;
      position: relative;
    }
    .navbar .logo {
      font-size: 1.5rem;
      font-weight: bold;
      color: white;
    }
    .navbar nav {
      display: flex;
      gap: 1.5rem;
    }
    .navbar nav a {
      text-decoration: none;
      color: var(--text-color);
      font-size: 1rem;
      position: relative;
      transition: color var(--transition-speed);
    }

    .navbar nav a::after {
      content: '';
      display: block;
      width: 0;
      height: 2px;
      background: var(--accent-color);
      transition: width var(--transition-speed);
      position: absolute;
      bottom: -4px; left: 0;
    }
    .navbar nav a:hover {
      color: var(--accent-color);
    }
    .navbar nav a:hover::after {
      width: 100%;
    }

    /* Hamburger Icon */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
    }
    .hamburger div {
      width: 25px;
      height: 3px;
      background: var(--text-color);
      transition: transform var(--transition-speed);
    }

    /* Mobile Menu */
    .mobile-menu {
      display: none;
      flex-direction: column;
      background: var(--primary-color);
      position: absolute;
      top: 100%; left: 0;
      width: 100%;
      overflow: hidden;
      max-height: 0;
      transition: max-height var(--transition-speed) ease-in-out;
      z-index: 1000;
    }
    .mobile-menu a {
      padding: 1rem 2rem;
      border-top: 1px solid rgba(236, 240, 241, 0.1);
    }

    .navbar a{text-decoration: none;color:white;}

/*PRIMER CONTENEDOR*/
.imagen_1 {
  width: 100%;
  height: 90vh;
  object-fit: cover;      
  object-position: center; 
  display: block; 
      
}

.contenedor_principal{display:block;position:relative;padding:0;margin:0}

.texto_contenedor_1 {
  position: absolute;   
  top: 0;               
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;    
  align-items: center; 
  justify-content: center; 

  z-index: 10;         
}

.glass{
  filter: brightness(90%);  
  opacity:0.7;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 50%;

  /* desplazamos el origen al centro del propio elemento */
  transform: translate(-50%, -50%);

  background: rgba(225, 225, 225, 0.3);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.30);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);

  z-index: 5;
}

.botones_principales{display:block;margin:0;text-align:center;}


/*SEGUNDO CONTENEDOR*/
.secciones{display:flex;flex-direction:row;justify-content: space-evenly;text-align:center;margin:100px;}
.secciones > div {
  flex: 1 1 300px;               
  max-width: 400px;              
}
.secciones p {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: break-word;    
  font-size:1.2em;
}

.secciones img{margin-bottom:20px;}

.icon-secciones{margin-bottom:20px;}

/*TERCER CONTENEDOR*/
.contenedor_3{
    border-top: 1px solid transparent;
    display:block;
    padding:0;
    margin:0;
}

.servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;      
  padding: 1rem;
  padding-bottom:100px;
  justify-content:space-evenly;
   max-width: 1200px;       
  margin: 0 auto 2rem;    

}

.servicio {
  display: flex;
  flex-direction: row;     /* círculo y texto lado a lado */
  align-items: center;     /* centra verticalmente el contenido */
  gap: 1rem;               /* espacio entre círculo y párrafo */
  font-size:1.2em;
  /* dos por fila, como antes */
  flex: 0 0 calc(40% - 1rem);
  padding: 1rem;
  box-sizing: border-box;
  text-align: left;
}

.servicio > svg {width:50px;}

.servicio p{max-width:400px;}


.texto_3{
  margin:0 auto;
  padding:30px;
  font-size:1.2em;
  text-align:center;
  max-width: 80%;
}

.texto_3>p{text-align:left;}

/*CUARTO CONTENEDOR*/
.contenedor_4 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;  /* espacio igual entre imagen y texto */
  align-items: center;            /* centra verticalmente imagen y texto */
  max-width: 1200px;
  margin: 0 auto;                 /* centra el .contenedor_4 en la página */
  padding: 2rem 1rem;             /* opcional: espacio interior */
  gap: 2rem;                      /* separación garantizada */
  box-sizing: border-box;
}

.imagen_contenedor_4_A{
  /* Tamaño de la ventana de recorte:
     aquí el 70 % de un original de 500×300 → 350×210 */
  width: 350px;   /* o cualquier valor fijo/relativo que necesites */
  height: 500px;  /* mantén la proporción o la que tú quieras */
  overflow: hidden;
  position: relative;
  /* opcional: borde y sombra del recorte */
  border: 5px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* La imagen: tamaño fijo o relativo, con sombra y borde si lo deseas */
.imagen_contenedor_4_A img {
  position: absolute;
  /* pon la imagen “anclada” al centro del contenedor: */
  top: 50%;
  left: 50%;
  /* traduce de vuelta la mitad de su propio ancho/alto y aplica zoom out: */
  transform: translate(-50%, -50%) scale(0.4);
  /* el punto de escala por defecto es el centro de la propia imagen */
  transform-origin: center center;
  /* no escalamos con width/height: */
  width: auto;
  height: auto;
}



/* El texto: ocupa el resto del espacio */
.text_contenedor_4 {
  flex: 1;                        /* crece para llenar el hueco */
  max-width: 600px;               /* opcional, para no exceder */
}

/* Ajustes tipográficos */
.text_contenedor_4 h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.text_contenedor_4 h4 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.text_contenedor_4 p {
  line-height: 1.6;
  color: #333;
  margin-bottom: 1rem;
}

.contenedor_4_B > div.imagen_contenedor_4_A {order:1}



/*QUINTO CONTENEDOR*/
    .contenedor_5{
        margin-top:100px;
        margin-bottom:100px;
    }
    /*Contenedor principal*/
    .servicios-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      max-width: 1000px;
      margin: 0 auto;
      background: #d5e4ea; 
      padding: 1.5rem;
      border-radius: 6px;
      font-size:1.2em;
    }

    /* Columnas*/
    .incluye, .extra {
      display: flex;
      flex-direction: column;
    }
    .incluye h2, .extra h2 {
      margin-bottom: 1rem;
    }

    /* Ítems */
    .item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1rem;
    }
    .item:last-child {
      margin-bottom: 0;
    }

    /* Iconos circulares */
    .item .icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      color: #fff;
      margin-right: 0.75rem;
      margin-top: 0.25rem;
    }
    .icon.check {
      background: #28a745; 
    }
    .icon.plus {
      background: #007bff; 
    }

    /* Título interno de cada ítem */
    .item .contenido > strong {
      display: block;
      font-weight: bold;
      color: #333;
    }




    
/*SEXTO CONTENEDOR*/

.contenedor_6{
    display:block;
    text-align:center;
    max-width: 80%;
    margin:0 auto;
    font-size:1.2em;
    margin-bottom:100px;
}

.contenedor_6 > h3{
    font-size:2em;
}

/* SEPTIMO CONTENEDOR */
.contenedor_7{
background:#F7F7F7;padding:50px;
text-align:center;
}

.contenedor_7>h2{
    font-size:2.5em;
}



.elegirnos{display:flex;flex-direction: row;justify-content: space-evenly;text-align:center;font-size:1.2em;}
.elegirnos > .elegir > img {width:80px;  aspect-ratio: 1 / 1;object-fit: cover; display: block; }



/*CONTENEDOR 8*/
.contenedor_8{
display:flex;flex-direction: row;
}

.contenedor_8_izq{
  flex:0 0 30%;background-color:#3d9ed6; /* cambiado, anterior: #8DB590;*/
}

.contenedor_8_der{
  flex:0 0 70%;display:flex;flex-direction: column;
}

.contenedor_8_izq_1{margin:20px}

.contenedor_8_izq_titulo{margin-top:100px;}

.contenedor_8_derecha_1{
  padding-bottom:10px;background-color: black;color:white;font-size:1.2em;font-weight:bold;display:flex;justify-content: space-evenly;align-items:center;
}

.contenedor_8_derecha_1 a{text-decoration: none;color:white;}

.contenedor_8_derecha_logo{margin-left:10%;text-align:left;display:block;}

.contenedor_8_derecha_hero{font-size:0.7em;text-align:left;margin:30px;}

.contenedor_8_derecha_linea_abajo{
  margin-top:auto; background-color:#F1F1F1; height:50px;display:flex;justify-content:space-evenly;align-items:center;
}


/*MOVIL*/
/* En pantallas pequeñas (móvil) pasa a columna */
@media (max-width: 600px) {

/*MENU*/
      .navbar nav { display: none; }
      .hamburger { display: flex; }
      .mobile-menu { display: flex; }
      .mobile-menu.show { max-height: 500px; /* ajusta según ítems */}


  /*CONTENDOR PRINCIPAL*/
  .imagen_1 {
    height: 90vh;
  }

  .glass {
    width: 80vw;
    
    height: 70%;
    padding: 2.5rem;
  }

.texto_contenedor_1 div > h2{display:block;margin:0 auto; text-align:center;width:80%;padding-bottom:10px;}

.botones_principales {
    flex-direction: row;
    justify-content: center;
  }

  .botones_principales .btn {
    width: auto;
    margin: 0 0.5rem;
    max-width: 200px;
  }


/**/

  .secciones {
    flex-direction: column;
    align-items: center;   
    margin-bottom: 10px;
  }
  .secciones > div {
    flex: none;            
    width: 100%;            
    max-width: none;     
    margin-bottom:50px; 
  }

  .servicio {
    flex: 0 0 100%;      
  }


  /*CONTENEDOR 4*/

    /* Ambos contenedores, 4 y 4_B */
  .contenedor_4,
  .contenedor_4_B {
    flex-direction: column;     /* apilar en columna */
    padding: 1.5rem 1rem;       /* reduce un poco los paddings */
    gap: 1.5rem;                /* espacio entre bloques */
  }

    /* La imagen ahora ocupa todo el ancho disponible */
  .imagen_contenedor_4_A img,
  .contenedor_4_B .imagen_contenedor_4_A img {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  

    .text_contenedor_4,
  .contenedor_4_B .text_contenedor_4_B {
    flex: none;
    max-width: 100%;
    width: 100%;
    text-align: left;           /* más legible en móvil */
  }
.contenedor_4_B > div.imagen_contenedor_4_A {order:0}



.text_contenedor_4 .btn{
  display:block;
  margin:0 auto;
}
/*CONTENEDOR 8*/
 .contenedor_8 {
  display:block;
  }

  .contenedor_8_izq {
    background-color: #3d9ed6; /* cambiado, anterior: #8DB590;*/
    padding:50px;
  }
.contenedor_8_derecha_logo{display:block;margin:0 auto;}
  
/* CONENEDOR 9 ESTADOS */

  .stats {
    flex-direction: row;
    flex-wrap:wrap;
  }
.stat-block{display:block;}


/*CONTEDOR 7*/
.elegirnos{display:block;}
.elegir{margin-bottom:4rem;}
.elegir>img{margin:0 auto;}

/*WHATSAPP MOVIL*/
.whatsapp-sticky {
  /* márgenes extra para no quedar en el límite de la caja que recorta DevTools */
  bottom: 140px !important;
  right: 44px !important;
  
}

.gallery-wrap {
  width: 800px;              /* o el ancho que necesites */
  position: relative;        /* para que el translateX se aplique sobre sí mismo */
  left: 50%;                 /* lo coloca su origen al 50% del viewport */
  transform: translateX(-50%) scale(0.8);
  transform-origin: top center;


}

}



/*CIRCULO*/
.circle {
  width: 100px;
  height: 100px;
  flex: 0 0 auto;          /* ni shrink ni grow */
  
  background-color: white;
  border: 5px solid black;;
  border-radius: 50%;
  

  display: flex;
  align-items: center;
  justify-content: center;
}


.circle > svg {
  width: 60%;
  height: auto;
}



/*GALERIA*/

.contenedor-galeria{
  padding: 75px 0;
  margin: 0 auto;

}
.contenedor-galeria button{
  display:block;
  margin:0 auto;
  margin-top:50px;
}


.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}

.item_galeria {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  
  &:hover{
    flex: 7;
  }
}

.item_1_galeria { 
  background-image: url('img\insta\comingsoon1.jpg');
}

.item_2_galeria { 
  background-image: url('img\insta\comingsoon1.jpg');
}

.item_3_galeria { 
  background-image: url('img\insta\comingsoon1.jpg');
}

.item_4_galeria { 
  background-image: url('img\insta\comingsoon1.jpg');
}

.item_5_galeria { 
  background-image: url('img\insta\comingsoon1.jpg');
}

.social{
  position: absolute;
  right: 35px;
  bottom: 0;
  
  img{
    display: block;
    width: 32px;
  }
}

.contenedor-galeria a{text-decoration: none;}



/*WHATSAPP*/

.whatsapp-sticky {
  position: fixed;
  bottom: 20px;
  right: 20px;
  
  width: 56px;
  height: 56px;
  background-color: #25D366;  
  border-radius: 50%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 1000;                
}

.whatsapp-sticky:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}



/*PARALLAX*/
    /* Contenedor parallax */
    .parallax {
      /* La imagen como fondo, no como <img> */
      background-image: url('img/insta/rodillo.PNG');
      min-height: 60vh;               /* altura mínima */
      background-attachment: fixed;   /* efecto parallax */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;             /* para superponer texto */
      display: flex;
      align-items: center;
      justify-content: center;
      
    }


.parallax .overlay {
  background: rgba(0,0,0,0.5);   /* capa oscura para que contraste */
  padding: 1.5rem 2rem;
  /* nunca más ancho que 80% del viewport y como máximo 600px */
  width: clamp(1200px, 80%, 600px);
  text-align: center;
  border-radius: 8px;
  box-sizing: border-box;
  color:white;
  padding:40px;
}

    .parallax .overlay h2 {
      margin: 0 0 0.5rem;
      font-size: 2.5rem;
      font-size: clamp(1.5rem, 5vw, 2.5rem);
      line-height: 1.2;
  /* permitir quiebres de palabra y guillotinados si hace falta */
      overflow-wrap: break-word;
      hyphens: auto;
    }
    
    .parallax .overlay p {
      margin: 0;
      font-size: 1.1rem;
      line-height: 1.4;
    }

    .titulo_parallax{color:white;}


    /*LINEA HERO*/

/* Título principal */
.hero_title {
  display: inline-block;   /* para que el ancho se ajuste al texto */
  position: relative;      /* contenedor para ::before */
  margin: 0 0 1rem;        /* espacio bajo el título */
  font-size: 2.5rem;
  line-height: 1.2;
}

/* La línea roja centrada sobre el título */
.hero_title::before {
  content: "";
  position: absolute;
  top: -1.2rem;               /* ajusta para separarlo del texto */
  left: 50%;
  transform: translateX(-50%);
  width: 60px;                /* ancho de la línea */
  height: 10px;                /* grosor de la línea */
  background-color: #3d9ed6; /* cambiado, anterior: #8DB590;*/
  border-radius: 2px;         /* opcional */
}


/*ITEM 2*/
  .item2 {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;       /* espacio entre icono y texto */
    margin: 1rem 0;
  }
  .item2 i {
    flex-shrink: 0;
    color: #28a745;    /* color del icono */
    font-size: 1.2em;
    margin-top: 0.2em; /* alínea un poco con el texto */
  }
  .item2 p {
    margin: 0;         /* elimina márgenes extra */
    line-height: 1.4;
  }


  /*ESTADOS*/
      .stats {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-bottom:130px;
      /* para poder hacer scroll */
    }

    .counter {
      font-size: 3rem;
      font-weight: bold;
    }

    .label {
      text-align: center;
      margin-top: 0.5rem;
    }

    .stat-block {
      text-align: center;
      padding: 2rem;
      border-radius: 8px;
    }


    /*FAQ*/
        .faq {
      max-width: 800px;
      margin: 0 auto;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      margin-bottom:100px;
      font-size:1.2em;
    }

    .faq details {
      border-bottom: 1px solid #e0e0e0;
    }
    .faq details:last-of-type {
      border-bottom: none;
    }

    .faq summary {
      list-style: none;
      cursor: pointer;
      padding: 1.25rem 1.5rem;
      font-size: 1.1rem;
      font-weight: 500;
      position: relative;
      transition: background 0.2s;
    }
    .faq summary:hover {
      background: #fafafa;
    }

    /* Icono +/– */
    .faq summary::marker { content: none; }
    .faq summary::before {
      content: '+';
      position: absolute;
      right: 1.5rem;
      font-size: 1.3rem;
      transition: transform 0.2s;
    }
    .faq details[open] > summary::before {
      content: '−';
      transform: rotate(180deg);
    }

    .faq .answer {
      padding: 0 1.5rem 1.25rem;
      line-height: 1.6;
      color: #555;
      animation: fadeIn 0.3s ease-in;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }