@import url('https://fonts.googleapis.com/css2?family=Century+Gothic:wght@400;700&display=swap');

body {
    font-family: 'Century Gothic', sans-serif;
    margin: 0;
    padding: 0;
     width: 100%;
    overflow-x: hidden;
  max-width: 100%;
       box-sizing: border-box;
}




.image-container {
    width: 100%;
    overflow: hidden; /* Opcional: oculta cualquier parte de la imagen que sobresalga del contenedor */
}

/* Sección de parallax */

/* Contenido */


.parallax-container {
  position: relative;
  height: 300px; /* Ajusta según necesites */
  background-image: url('cover3.png');
  background-attachment: fixed; /* Esto crea el efecto parallax */
  background-size: cover;
  background-position: center;
vertical-align:middle;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Negro con 50% de opacidad */
  z-index: 1;
}

.content {
  position: relative;
  z-index: 2; /* El contenido queda encima del overlay */
  color: white;
  text-align: center;
  display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    min-height: 300px; /* Ajusta la altura según sea necesario */
    text-align: center; /* Centra el texto horizontalmente dentro del contenedor */
    font-family: 'Dancing Script', cursive; /* Aplica la fuente script aquí */
    color: white;
    font-size:3em;
}



/* Imagen al 100% del ancho del contenedor */
.image-container img {
    width: 100%;
    height: auto; /* Mantiene la relación de aspecto */
}
/* Contenedor principal para centrar el contenido */
.container {
    width: 100%;
padding:0;
      margin: 0;
        overflow-x: hidden;
  max-width: 100%;
       box-sizing: border-box;
 }

/* Estilos para la barra superior */
.barra-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
    border-bottom: 1px solid #a0b0c0;
    font-size: 14px;

  }

.barra-superior div {
    display: flex;
    align-items: center;
}

.barra-superior i {
    color: #800080; /* Morado para todos los íconos */
    margin-right: 5px;
}

.barra-superior a {
    text-decoration: none;
    color: black;
    margin-left: 10px;
}

.barra-superior a.email {
    color: #800080; /* Morado para el correo */
}

/* Ocultar la barra superior en pantallas pequeñas */
@media (max-width: 768px) {
    .barra-superior {
        display: none;
    }
}
/* Contenedor principal del slider */

.internet {
    display: block;
    background-color: white;
    width:90%;
padding:5%;
 border-bottom: 1px solid #a0b0c0;
}

.columnleft {
    text-align: center;
  width: 100%;
    position:relative;
    display: inline-block;
margin:auto;
}

.columnright {
    text-align: right;
  width: 0%;
    position:relative;
    display: inline-block
}

.columnleft .title {
   color: #800080; /* Color morado */
    font-size: 36px;
    margin-bottom: 20px;
}

.columnleft .subtitle {
    color:black;
    font-size: 20px;
}

.columnright img {
    width: 80%;

 }
.columnleft1 {
    text-align: center;
  width: 68%;
    position:relative;
    display: inline-block;
margin:auto;
}

.columnright1 {
    text-align: right;
  width: 30%;
    position:relative;
    display: inline-block
}

.columnleft1 .title {
   color: #800080; /* Color morado */
    font-size: 36px;
    margin-bottom: 20px;
}

.columnleft1 .subtitle {
    color:black;
    font-size: 20px;
}

.columnright1 img {
    width: 80%;

 }
.btn2 {
    display: block;
    width:60%;
    padding: 10px 20px;
    background-color: #CE3780;
    color:white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
  margin: 20px auto;

}

@media (max-width: 768px) {
    .internet {
display:block;
        padding: 5%;
        width:90%; 
       text-align:center;
    }
    .columnright {
      padding: 5%;
        width:90%; 
        text-align:center;
    }
  .columnright img{
          width:90%; 
        }
.columnleft {
        width: 100%;
    text-align:center;
    }
     .columnleft .title {
        font-size: 28px;
    }
     .columnleft .subtitle {
        font-size: 20px;
    }
}




.services-section {
    text-align: center;
background-color:ligthgray;

}

.services-section h2 {
    color: #800080; /* Color morado */
    font-size: 2rem;
    margin-bottom: 20px;
 border: 5px solid #CE3780; /* Línea de borde color rosa */
        border-radius: 8px; /* Opcional: bordes redondeados para el borde */
margin: 20px; /* Padding alrededor del contenido */
}

.services-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
border: 5px solid #CE3780; /* Línea de borde color rosa */
        border-radius: 8px; /* Opcional: bordes redondeados para el borde */
margin: 20px; /* Padding alrededor del contenido */

}

.service-box {
    flex: 1 1 calc(25% - 20px);
    margin: 10px;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-box img {
    height: 90px;
    border-radius: 8px;
    margin:auto;
}

.service-box h3 {
    color: #800080; /* Color morado */
    margin-top: 15px;
    font-size: 1.5rem;
}

.service-box p {
    color: black;
    font-size: 1rem;
    margin: 15px 0;
  flex-grow: 1;
}

.services-section .btn {
    display: block;
    width:33%;
    padding: 10px 20px;
    background-color: #800080; /* Color morado */
    color:white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
  margin: 20px auto;

}

/* Estilo responsivo */
@media (max-width: 768px) {
    .service-box {
        flex: 1 1 100%;
        margin-bottom: 20px;
    }
.columnleft1 {
  width: 100%;
 }

.columnright1 {
    text-align: center;
  width: 100%;
}
}


/* Estilos para el header principal */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    top:10px;
    width: 100%;
     padding:0, 0%;
margin:auto;

}
.logo{
width:20%;}


.logo img {
    width: 150px; /* Logo de 150px de ancho */
}

.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: #a0b0c0; /* Gris azulado */
    transform: scale(2, 1); /* Doble de largo */
    width:80%;
    padding:0;
    
}

.menu-mobile {
    display: none;
    flex-direction: column;
    position:absolute;
    top: 25%;
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    padding: 0%;
    border-top: 1px solid #a0b0c0;
z-index:1000;
}

.menu-mobile a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    padding: 10px 10px;
    display: block;
}

/* Estilos para los elementos del menú en pantallas pequeñas */
.menu-mobile a:hover,
.menu-mobile a.active {
    color: #800080; /* Morado al pasar el cursor o al estar activo */
}

/* Estilos para el menú desplegable en pantallas pequeñas */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .menu-mobile.active {
        display: flex;
    }
    
    /* Ocultar la barra superior en pantallas pequeñas */
    .barra-superior {
        display: none;
    }
}

/* Estilos para pantallas grandes */
@media (min-width: 769px) {
    .menu-mobile {
        display: flex;
        gap: 20px;
        flex-direction: row;
        position: static;
        width: auto;
        border-top: none;
    }

    .menu-toggle {
        display: none;
    }
    
    /* Estilos para los elementos del menú en pantallas grandes */
    .menu-mobile a:hover,
    .menu-mobile a.active {
        color: #800080; /* Morado al pasar el cursor o al estar activo */
    }
}

.carousel-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.carousel-item img {
  width: 100%;
  max-width: 400px;
  margin-bottom: 10px;
}

.carousel-item h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
}

.carousel-item a {
  text-decoration: none;
  color: white;
  background-color: #007bff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.carousel-item a:hover {
  background-color: #0056b3;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
footer {
    background-color: #f4f4f4;
    padding: 20px 0;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 90%;
    margin: auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.footer-left {
    flex: 1;
}

.footer-logo {
    max-width: 250px;
}

.footer-right {
    flex: 1;
    text-align: right;
}

.footer-right h4 {
    color: #333;
    margin-bottom: 10px;
}

.footer-right p,a{
    color: #555;
    margin-bottom: 5px;
}

.footer-bottom {
    background-color: #000;
    padding: 10px 0;
    text-align: center;
}

.footer-bottom p {
    color: #fff;
    font-size: 14px;
}
@media (max-width: 690px) {
.footer-container {
    display: block;
    align-items: center;
    max-width: 100%;
    margin: auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}
  .footer-left {
   display:block;
width:100%;
text-align:center;
}

.footer-right {
  display:block;
width:100%;
text-align:center;
}
}
.productos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.producto {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  background-color: #f7f7f7;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.producto img {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-bottom: 15px;
  border-radius: 8px;
}

.info-producto {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-producto h2 {
  color: #6a1b9a;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.info-producto ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 10px;
  text-align: left;
}

.info-producto ul li {
  color: #333;
  margin-bottom: 5px;
}

.precio {
  color: #000;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.btn-pedido {
  display: inline-block;
  padding: 10px 20px;
  background-color: #6a1b9a;
  color: white;
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn-pedido:hover {
  background-color: #4e0b6a;
}

@media (max-width: 768px) {
  .producto {
    width: 100%;
    margin-bottom: 20px;
  }
}


.internet {
    display: block;
    background-color: white;
    width:90%;
padding:5%;
 border-bottom: 1px solid #a0b0c0;
}

.columnleft {
    text-align: center;
  width: 100%;
    position:relative;
    display: inline-block;
margin:auto;
}

.columnright {
    text-align: right;
  width: 0%;
    position:relative;
    display: inline-block
}

.columnleft .title {
   color: #800080; /* Color morado */
    font-size: 36px;
    margin-bottom: 20px;
}

.columnleft .subtitle {
    color:black;
    font-size: 20px;
}

.columnright img {
    width: 80%;

 }
.columnleft1 {
    text-align: center;
  width: 68%;
    position:relative;
    display: inline-block;
margin:auto;
}

.columnright1 {
    text-align: right;
  width: 30%;
    position:relative;
    display: inline-block
}

.columnleft1 .title {
   color: #800080; /* Color morado */
    font-size: 36px;
    margin-bottom: 20px;
}

.columnleft1 .subtitle {
    color:black;
    font-size: 20px;
}

.columnright1 img {
    width: 80%;

 }
.btn2 {
    display: block;
    width:60%;
    padding: 10px 20px;
    background-color: #CE3780;
    color:white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
  margin: 20px auto;

}

@media (max-width: 768px) {
    .internet {
display:block;
        padding: 5%;
        width:90%; 
       text-align:center;
    }
    .columnright {
      padding: 5%;
        width:90%; 
        text-align:center;
    }
  .columnright img{
          width:90%; 
        }
.columnleft {
        width: 100%;
    text-align:center;
    }
     .columnleft .title {
        font-size: 28px;
    }
     .columnleft .subtitle {
        font-size: 20px;
    }
}


.titulo{
width:100%;
 background-color:#25A19A;
font-size:2em;
color:white;
text-align:center;
padding:5px;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* CONTENEDOR DE BOTONES */
.float-buttons {
    position: fixed;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 8px; /* separación entre botones */
    z-index: 999;
}

/* BOTÓN WHATSAPP */
.btn-whatsapp-float {
    width: 45px;
    height: 45px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
    transition: transform .25s;
}

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

/* BOTÓN SUBIR */
.btn-top-float {
    width: 45px;
    height: 45px;
    background: #C61D73;
    color: #fff;
    border-radius: 50%;
    border: none;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
    transition: transform .25s;
    margin-top:-50px;
}

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

/* Ocultar botón de subir cuando estás arriba */
#btnTop.hidden {
    display: none;
}
/* ====== ESTILO GENERAL DE SECCIONES ====== */
.section {
    padding: 70px 20px;
}

.container {
    max-width: 1100px;
    margin: auto;
}

/* ====== TÍTULOS PRINCIPALES ====== */
.section h2 {
    font-size: 2.4rem;
    font-weight: 800;
    text-align: center;
    color: #C61D73; /* Color del branding */
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ====== SUBTÍTULOS Y TEXTOS ====== */
.section-subtitle,
.section p {
    text-align: center;
    color: #444;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 25px auto;
    line-height: 1.6;
}

/* ====== GRID PORTAFOLIO ====== */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin-top: 35px;
}

.portfolio-item {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform .3s ease, box-shadow .3s ease;
    background: #fff;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

/* Hover */
.portfolio-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.portfolio-item:hover img {
    transform: scale(1.07);
}