/* 🎨 Reset básico */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body{

    background-color: #000000;

    justify-content: center;

    align-items: center;

}



/* 🟣 Barra de navegación */

.navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 30px;

    position: fixed;

    width: 100%;

    top: 0;

    left: 0;

    z-index: 1000;

    transition: background 0.5s ease, backdrop-filter 0.5s ease;

    background: rgb(255 114 147 / 30%); /* Fondo inicial con opacidad */

    backdrop-filter: blur(5px); /* Efecto difuminado */

}



/* ✨ Agrega opacidad al hacer scroll */

.navbar.scrolled {

    background: rgb(90 2 2 / 90%);

    backdrop-filter: blur(10px);

}



/* 📌 Lista de enlaces */

.nav-links {

    list-style: none;

    display: flex;

}



.nav-links li {

    margin: 0 15px;

}



.nav-links a {

    color: #fff;

    text-decoration: none;

    font-size: 18px;

    font-weight: 500;

    transition: color 0.3s ease;

}



.nav-links a:hover {

    color: #ffd700;

}



/* 🍔 Menú hamburguesa */

.menu-toggle {

    display: none;

    flex-direction: column;

    cursor: pointer;

}



.menu-toggle span {

    background: #fff;

    width: 25px;

    height: 3px;

    margin: 4px;

    transition: transform 0.3s ease;

}



.logocss{

    width: 25%;

}



.mennavtext{

    color: #fff; /* Color normal */

    text-decoration: none;

    transition: color 0.3s ease; /* Transición suave */

}



.banner-slider {

    position: relative;

    width: 100%;

    height: 850px;

    overflow: hidden;

}

.slides {

    display: flex;

    width: 300%;

    animation: slideAnimation 12s infinite;

}

.slide {

    width: 100vw;

    height: 850px;

    background-size: contain;

    background-position: center;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}

.overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

}

.banner-text {

    position: absolute;

    color: white;

    text-align: center;

    z-index: 2;

}

.whatsapp-button {

    position: fixed;

    bottom: 20px;

    right: 20px;

    width: 60px;

    height: 60px;

    background-color: #25D366;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);

    transition: transform 0.3s ease-in-out;

    z-index: 10;

}



.whatsapp-button img {

    width: 40px;

    height: 40px;

}



.whatsapp-button:hover {

    transform: scale(1.1);

}



a.whatsapp-button {

    color: #f0f8ff00;

    animation: pulse 1s infinite;

}



.foatt{

    animation: pulse 1s infinite;

}



i.fa.fa-whatsapp {

    color: white;

    font-size: 40px;

}



.btnbann {

    background-color: red;

    padding: 10px 20px;

    border-radius: 15px;

    color: white;

    text-decoration: none;

    animation: pulse 1s infinite;

}



.fa.fa-whatsapp.bnn {

    font-size: 20px;

    margin-right: 10px;

}



.grid-section {

    padding: 50px 20px;

    background-color: #1a1a2e;

    color: white;

    text-align: center;

}



.grid-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr); /* 3 columnas */

    gap: 20px;

    max-width: 1000px;

    margin: auto;

}



.grid-item {

    padding: 20px;

    background: linear-gradient(135deg, #ff0080, #8000ff);

    border-radius: 10px;

    font-size: 18px;

    font-weight: bold;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



/* Efecto al pasar el cursor */

.grid-item:hover {

    transform: translateY(-5px);

    box-shadow: 0px 5px 15px rgba(255, 0, 128, 0.5);

}



.seropc{

    text-decoration: none;

    color: white;

}



.section-container {

    display: flex;

    flex-wrap: wrap;

    max-width: 900px;

    background: #222;

    padding: 20px;

    border-radius: 30px;

    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);

    margin: 40px auto;

}



.column {

    flex: 1;

    padding: 20px;

}



.column img {

    max-width: 100%;

    border-radius: 10px;

}



.column h2, .column p {

    text-align: center;

}



.form-container {

    display: flex;

    flex-direction: column;

    gap: 10px;

    align-items: center;

}



.form-container input, .form-container textarea, .form-container button {

    width: 100%;

    padding: 10px;

    border: none;

    border-radius: 5px;

}



.form-container button {

    background: #bd0000;

    color: white;

    font-size: 16px;

    cursor: pointer;

    transition: 0.3s;

}



.form-container button:hover {

    background: #8000ff;

}



.titsec3{

    color: white;

    margin-bottom: 25px;

}



.textdesc2{

    color: white;

    margin-bottom: 25px;

}



.select{

    width: 100%;

    height: 35px;

    border-radius: 5px;

}



.bnform{

    font-size: 80% !important;

}



.titsec4{

    color: #000000;

    text-align: center;

    margin-bottom: 25px;

    font-size: xxx-large;

}



.textdesc3{

    text-align: center;

    font-size: 17px;

    color: #393939;

    margin-bottom: 25px;

}



.sec-container{

    width: 100%; /* o un ancho fijo en píxeles, por ejemplo, 600px */

    margin: 0 auto;

    background-color: white;

    justify-items: center;

}



.sec3{

    align-items: center;

    padding: 30px 0px;

    width: 80%;

}



/*seccion 4*/



.services {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    max-width: 1100px;

    margin: auto;

    padding: 40px 20px;

}



.service {

    background: #222;

    padding: 20px;

    border-radius: 10px;

    text-align: center;

    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.service:hover {

    transform: translateY(-10px);

    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);

}



.service img {

    width: 100%;

    max-height: 180px;

    object-fit: cover;

    border-radius: 10px;

}



.service h1 {

    margin: 15px 0 10px;

    color: #ff0080;

    font-size: 20px;

}



.service p {

    font-size: 14px;

    color: #bbb;

}



.btn {

    background: #ff0080;

    color: white;

    border: none;

    padding: 10px 15px;

    margin-top: 10px;

    border-radius: 5px;

    cursor: pointer;

    transition: background 0.3s ease, transform 0.2s ease;

}



.btn:hover {

    background: #8000ff;

    transform: scale(1.05);

}



/*CALL TO ACTION*/



/* Sección CTA */

.cta {

    background: linear-gradient(135deg, #ff0080, #8000ff);

    color: white;

    text-align: center;

    padding: 60px 20px;

    position: relative;

    overflow: hidden;

    border-radius: 10px;

    margin: 80px auto;

    max-width: 900px;

    box-shadow: 0 10px 25px rgba(255, 0, 128, 0.4);

}



/* Contenido */

.cta-content {

    position: relative;

    z-index: 2;

}



.cta h2 {

    font-size: 32px;

    margin-bottom: 10px;

    font-weight: bold;

}



.cta p {

    font-size: 18px;

    margin-bottom: 20px;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

}



/* Botón CTA */

.btn-cta {

    display: inline-block;

    padding: 12px 25px;

    background: white;

    color: #ff0080;

    font-size: 18px;

    font-weight: bold;

    text-decoration: none;

    border-radius: 5px;

    transition: all 0.3s ease;

    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);

    position: relative;

    overflow: hidden;

}



/* Efecto de resplandor */

.btn-cta::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 300%;

    height: 300%;

    background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);

    transform: translate(-50%, -50%);

    opacity: 0;

    transition: opacity 0.5s ease;

}



.btn-cta:hover::before {

    opacity: 1;

}



.btn-cta:hover {

    background: #fff;

    color: #8000ff;

    transform: scale(1.05);

    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.5);

}



/* Responsive */

@media (max-width: 768px) {

    .cta h2 {

        font-size: 26px;

    }

    

    .cta p {

        font-size: 16px;

    }

    

    .btn-cta {

        font-size: 16px;

        padding: 10px 20px;

    }

}



/*Sección 6*/



/* Sección de Amor para el mismo sexo */

.same-sex-love {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 50px 20px;

    max-width: 1000px;

    margin: auto;

    background: #222;

    border-radius: 10px;

    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);

    gap: 30px;

    text-align: center;

}



/* Columna de texto */

.text-content {

    flex: 1;

    color: white;

    text-align: center;

}



.text-content h2 {

    font-size: 28px;

    color: #ff0080;

    margin-bottom: 15px;

}



.text-content p {

    font-size: 18px;

    margin-bottom: 20px;

    line-height: 1.5;

}



/* Botón de WhatsApp */

.whatsapp-btn {

    display: inline-flex;

    align-items: center;

    padding: 12px 20px;

    background: red;

    color: white;

    font-size: 18px;

    font-weight: bold;

    text-decoration: none;

    border-radius: 5px;

    transition: all 0.3s ease;

    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);

}



.whatsapp-btn i {

    margin-right: 10px;

    font-size: 22px;

}



.whatsapp-btn:hover {

    background: #1eb14a;

    transform: scale(1.05);

}



/* Columna de imagen */

.image-content {

    flex: 1;

    text-align: center;

}



.image-content img {

    max-width: 100%;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);

}



/* Sección de imágenes */

.image-section {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    max-width: 100%;

    flex-wrap: wrap;

}



/* Columnas de imágenes */

.image-column {

    flex: 1;

    max-width: 300px;

}



.image-column img {

    width: 100%;

    border-radius: 10px;

    box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.2);

    transition: transform 0.3s ease-in-out;

}



/* Efecto hover */

.image-column img:hover {

    transform: scale(1.05);

}



.image-grid {

    display: flex;

    justify-content: center;

    align-items: stretch;

    gap: 20px;

    padding: 40px 20px;

    flex-wrap: wrap;

    max-width: 1200px;

    margin: auto;

}



.image-box {

    flex: 1 1 22%; /* cuatro columnas */

    min-width: 200px;

    max-width: 250px;

    height: 250px;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #222;

    border-radius: 10px;

    box-shadow: 0px 5px 15px rgba(255, 255, 255, 0.1);

    transition: transform 0.3s ease;

}



.image-box:hover {

    transform: scale(1.05);

}



.image-box img {

    max-width: 90%;

    max-height: 90%;

    object-fit: contain;

    border-radius: 8px;

}



.footer {

    background-color: #111;

    color: #ccc;

    text-align: center;

    padding: 20px 10px;

    font-size: 14px;

    position: relative;

    width: 100%;

    margin-top: 40px;

    border-top: 1px solid #333;

}



.footer p {

    margin: 0;

    font-family: 'Arial', sans-serif;

    letter-spacing: 0.5px;

}



.linkcop{

    vertical-align: middle;

}



.imgcop{

    width: 7%;

}

/* Fondo oscuro del pop-up */
.overlay2 {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}

/* Contenedor del modal */
.popup {
  background-color: #fff;
  padding: 30px 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.popup h2 {
  margin-bottom: 15px;
  font-size: 20px;
}

.popup p {
  font-size: 16px;
  margin-bottom: 20px;
}

.popup button {
  width: 100%;
  padding: 12px;
  margin: 5px 0;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.popup .yes {
  background-color: #28a745;
  color: #fff;
}

.popup .no {
  background-color: #dc3545;
  color: #fff;
}

/* Media query para pantallas pequeñas */
@media screen and (max-width: 768px) {
  .popup {
    padding: 25px 15px;
  }

  .popup h2 {
    font-size: 18px;
  }

  .popup p {
    font-size: 15px;
  }

  .popup button {
    font-size: 15px;
    padding: 10px;
  }
}



/* Responsive */

@media (max-width: 992px) {

    .image-box {

        flex: 1 1 45%;

    }

}



@media (max-width: 600px) {

    .image-box {

        flex: 1 1 100%;

    }

}





/* Responsive */

@media (max-width: 768px) {

    .image-section {

        flex-direction: column;

        align-items: center;

    }



    .image-column {

        max-width: 90%;

    }

}



.sec8{

    text-align: center;

    padding: 80px 0px;

}



.titsec8{

    color: white;

}





/* Responsive */

@media (max-width: 768px) {

    .same-sex-love {

        flex-direction: column;

        text-align: center;

    }



    .text-content {

        text-align: center;

    }



    .whatsapp-btn {

        justify-content: center;

    }

}





@media (max-width: 900px) {

    .services {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 600px) {

    .services {

        grid-template-columns: 1fr;

    }

}





@media (max-width: 768px) {

    .section-container {

        flex-direction: column;

    }

}



@keyframes slideAnimation {

    0%, 33% { transform: translateX(0); }

    34%, 66% { transform: translateX(-100vw); }

    67%, 100% { transform: translateX(-200vw); }

}



@keyframes pulse {

    0% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(1.2);

        opacity: 0.7;

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

}



/* 📱 RESPONSIVE - Modo PC */



@media (max-width: 2560px){

    .slide {

        background-repeat: no-repeat;

        top: 144px;

        height: 1270px;

    }



    .pc{

        display: none;

    }



    .banner-slider {

        height: 1270px;

    }



    .textdesc {

        margin-bottom: 100px;

    }



    .btnbann {

        font-size: 60px !important;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 50px !important;

    }



    .btnbann.secc3{

        margin: 0px 570px;

        font-size: 40px !important;

    }



    .fasecc3{

        font-size: 35px !important;

    }



    .textdesc3 {

        font-size: 23px;

    }



    .sec3{

        padding: ;

    }



    .texttit8{

        font-size: xxx-large;

        margin-bottom: 30px;

    }

}



@media (max-width: 1600px){

    .slide {

        background-repeat: no-repeat;

        top: 143px;

        height: 1068px;

    }



    .pc{

        display: none;

    }



    .banner-slider{

        height: 1210px;

    }



    .textdesc {

        margin-bottom: 100px;

    }



    .btnbann {

        font-size: 60px !important;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 50px !important;

    }



    .btnbann.secc3{

        margin: 0px 470px;

        font-size: 40px !important;

    }



    .fasecc3{

        font-size: 35px !important;

    }



    .textdesc3 {

        font-size: 23px;

    }

}



@media (max-width: 1440px){

   .pc{

        display: none;

    }



    .slide{

        background-repeat: no-repeat;

        top: 143px;

        height: 960px;

    }



    .banner-slider{

        height: 1098px;

    }



    .textdesc {

        margin-bottom: 100px;

    }



    .btnbann {

        font-size: 45px !important;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 40px !important;

    }



    .tittextsec2 {

        font-size: 86px;

        margin-bottom: 50px;

    }



    .btnbann.secc3{

        margin: 0px 410px;

        font-size: 40px !important;

    }



    .fasecc3{

        font-size: 35px !important;

    }



    .textdesc3 {

        font-size: 23px;

    }

}



@media (min-width: 1024px){

    .tittext {

        font-size: 70px;

    }



    .textdesc {

        font-size: 35px;

    }

}



@media (max-width: 1024px){

    .slide{

        height: 973px;

        background-repeat: no-repeat;

        top: 0px;

    }



    .pc{

        display: none;

    }



    .banner-slider {

        height: 828px;

    }



    .textdesc {

        margin-bottom: 100px;

    }



    .btnbann {

        font-size: 45px !important;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 40px !important;

    }



    .tittextsec2 {

        font-size: 86px;

        margin-bottom: 50px;

    }



    .btnbann.secc3{

        margin: 0px 280px;

        font-size: 30px !important;

    }



    .fasecc3{

        font-size: 25px !important;

    }

}



/* 📱 RESPONSIVE - Modo móvil */



/* Responsivo: En pantallas pequeñas, 2 columnas */

@media (max-width: 768px) {

    .grid-container {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* Responsivo: En móviles, 1 columna */

@media (max-width: 480px) {

    .grid-container {

        grid-template-columns: repeat(1, 1fr);

    }

}





@media (min-width: 768px){

    .btnbann{

        font-size: 30px;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 30px;

    }

}



@media (max-width: 768px) {

    .nav-links {

        display: none;

        flex-direction: column;

        position: absolute;

        top: 60px;

        right: 0;

        background: rgba(128, 0, 255, 0.9);

        width: 200px;

        border-radius: 5px;

        padding: 10px 0;

        text-align: center;

    }



    .nav-links.active {

        display: flex;

        margin: 50px 30px 0px 0px;

    }



    .menu-toggle {

        display: flex;

    }



    .pc{

        display: none;

    }



    .slide{

        height: 512px;

        background-repeat: no-repeat;

        top: 142px;

    }



    .banner-slider {

        height: 651px;

    }



    .tittext {

        font-size: xxx-large;

    }



    .textdesc {

        font-size: x-large;

        padding-bottom: 50px;

    }



    .tittextsec2 {

        font-size: 65px;

        margin-bottom: 50px;

    }



    .titsec4{

        font-size: 35px;

    }



    .btnbann.secc3{

        margin: 0px 165px;

        font-size: 30px !important;

    }



    .fasecc3{

        font-size: 25px !important;

    }



    .texttit8{

        font-size: 35px;

        margin-bottom: 30px;

    }



    .imgcop{

        width: 15%;

    }

    

    .logocss {

        width: 35%;

    }

}



@media (max-width: 650px){

    .btnbann.secc3 {

        margin: 0px 80px;

    }

}



@media (max-width: 500px){

    .btnbann.secc3{

        margin: 0px 55px;

        font-size: 20px !important;

    }

}



@media (max-width: 425px){

    .pc{

        display: none;

    }



    .slide{

        height: 283px;

        background-repeat: no-repeat;

        top: 117px;

    }



    .banner-slider {

        height: 400px;

    }



    .tittext {

        font-size: xx-large;

    }



    .textdesc {

        font-size: medium;

        padding-bottom: 45px;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 20px;

        margin-right: 10px;

    }



    .textdesc {

        margin-bottom: 0px;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 28px !important;

    }



    .tittextsec2 {

        font-size: 38px;

        margin-bottom: 50px;

    }



    .titsec4{

        font-size: 35px;

    }



    .btnbann.secc3{

        margin: 0px 55px;

        font-size: 20px !important;

    }



    .fasecc3{

        font-size: 18px !important;

    }



    .btnbann {

        font-size: 20px !important;

    }



    .imgcop{

        width: 30%;

    }

    

    .logocss {

        width: 60%;

    }

}



@media (max-width: 375px){

    .pc{

        display: none;

    }



    .slide{

        height: 250px;

        background-repeat: no-repeat;

        top: 104px;

    }



    .banner-slider {

        height: 354px;

    }



    .textdesc {

        font-size: medium;

        padding-bottom: 35px;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 20px;

        margin-right: 10px;

    }



    .textdesc {

        margin-bottom: 0px;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 28px !important;

    }



    .tittextsec2 {

        font-size: xx-large;

        margin-bottom: 50px;

    }



    a.btnbann.secc3.foatt{

        margin: 0px 32px;

        font-size: 20px !important;

    }



    .fasecc3{

        font-size: 18px !important;

    }



    .btnbann {

        font-size: 20px !important;

    }



}



@media (max-width: 320px){

    .pc{

        display: none;

    }



    .slide{

        height: 215px;

        background-repeat: no-repeat;

        top: 90px;

    }



    .banner-slider {

        height: 300px;

    }



    .textdesc {

        font-size: medium;

        padding-bottom: 25px;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 20px;

        margin-right: 10px;

    }



    a.btnbann.secc3.foatt {

        font-size: 20px !important;

        margin: 0px 25px;

    }



    .textdesc {

        margin-bottom: 0px;

    }



    .fa.fa-whatsapp.bnn {

        font-size: 28px !important;

    }



    .tittextsec2 {

        font-size: xx-large;

        margin-bottom: 50px;

    }



    .btnbann {

        font-size: 20px !important;

    }

}