* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(135deg, #bebebe, #eef6ff);
    color: #333;
}


/* HEADER */

/* ==========================
   HEADER PREMIUM
========================== */
.header{

    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 7%;

    background: #ffffff;

    box-shadow: 0 8px 25px rgba(0,0,0,.08);

}


.logo{

    font-size: 30px;

    font-weight: 800;

    color: #666;

    letter-spacing: .5px;
}



nav{

    display: flex;

    align-items: center;

    gap: 28px;

}



nav a{

    text-decoration: none;

    color: #555;

    font-weight: 600;

    font-size: 16px;

    transition: .3s;

    position: relative;

}



nav a::after{

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 3px;

    background: #0e0e0e;

    border-radius: 20px;

    transition: .3s;

}



nav a:hover{

    color: #080808;

}



nav a:hover::after{

    width: 100%;

}



/* HERO */

.hero {
    min-height: 85vh;
    padding: 50px 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}


.hero-text {
    max-width: 550px;
}


.hero-text h1 {
    font-size: 55px;
    line-height: 1.2;
    margin-bottom: 20px;
}


.hero-text h1 span {
    color: #1285d3;
}


.hero-text p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}



/* BOTON */

.btn-primary {

    display: inline-block;

    padding: 10px 25px;

    background: linear-gradient(
        45deg,
        #666,
        #b1b4d3);

    

    color: white;

    text-decoration: none;

    border-radius: 50px;

    font-weight: bold;

    border: none;

    cursor: pointer;

    transition: .3s;

}


.btn-primary:hover {

    transform: translateY(-5px);

}




/* TARJETA */

.hero-card {

    width: 330px;

    padding: 25px;

    background: rgba(255,255,255,.8);

    border-radius: 30px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.1);

}


.card-image {

    height:180px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:70px;

    background:linear-gradient(
        135deg,
        #a3a3a3,
        #dceeff
    );

    border-radius:25px;

    margin-bottom:20px;

}




.hero-card button {

    margin-top:15px;

    padding:12px 20px;

    border:none;

    border-radius:30px;

    background:#333;

    color:white;

}



/* SECCIONES */


.section {

    padding:80px 8%;

    text-align:center;

}


.section h1,
.section h2 {

    margin-bottom:30px;

}




/* TARJETAS */

/* ===================================
   TARJETAS PREMIUM
=================================== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:50px;

}



.card-premium{

    background:#ffffff;

    border-radius:28px;

    padding:35px;

    text-decoration:none;

    color:#333;

    border:1px solid #ececec;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}



.card-premium:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(18,133,211,.18);

    border-color:#1285d3;

}



.icono{

    width:75px;

    height:75px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    color:white;

    margin-bottom:25px;

}



/* Colores diferentes */

.card-premium:nth-child(1) .icono{

    background:linear-gradient(135deg,#1285d3, #25d366);

}

.card-premium:nth-child(2) .icono{

    background:linear-gradient(135deg,#d4af37,#f4d03f);

}

.card-premium:nth-child(3) .icono{

    background:linear-gradient(135deg,#62c6ff,#1285d3);

}

.card-premium:nth-child(4) .icono{

    background:linear-gradient(135deg,#5f6caf,#3949ab);

}



.card-premium h3{

    font-size:24px;

    margin-bottom:15px;

}



.card-premium p{

    color:#666;

    line-height:1.7;

    margin-bottom:25px;

}



.card-premium span{

    

    font-weight:700;

    font-size:16px;

}



.card-premium:hover span{

    color:#ff4f9a;

}



.section-subtitle{

    max-width:650px;

    margin:0 auto 40px;

    color:#777;

    font-size:18px;

    line-height:1.7;

}


/* FORMULARIO */

.formulario {

    max-width:600px;

    margin:auto;

    background:white;

    padding:40px;

    border-radius:25px;

    box-shadow:0 10px 40px rgba(0,0,0,.1);

    text-align:left;

}


.formulario label {

    display:block;

    margin-top:20px;

    margin-bottom:8px;

    font-weight:bold;

}


.formulario input,
.formulario select,
.formulario textarea {


    width:100%;

    padding:12px;

    border-radius:10px;

    border:1px solid #ddd;

    font-size:16px;

}


.formulario textarea {

    resize:none;

}


.formulario button {

    margin-top:30px;

    width:100%;

}





/* PASOS */


.steps {

    display:flex;

    justify-content:center;

    gap:30px;

}


.steps div {

    background:white;

    padding:30px;

    border-radius:20px;

}





/* FOOTER */

footer {

    padding:40px;

    background:#222;

    color:white;

    text-align:center;

}





/* RESPONSIVE CELULAR */

@media(max-width:900px){


.header {

    flex-direction:column;

    gap:20px;

}


.hero {

    flex-direction:column;

    text-align:center;

}


.hero-text h1 {

    font-size:40px;

}


.cards {

    grid-template-columns:1fr;

}


.steps {

    flex-direction:column;

    align-items:center;

}


.hero-card {

    width:100%;

}



}

/* =========================
   INVITACION FINAL
   ========================= */


.invitacion {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}



.invitacion-card {

    max-width:420px;

    width:100%;

    background:white;

    border-radius:35px;

    overflow:hidden;

    box-shadow:

    0 20px 60px rgba(0,0,0,.15);

}



.portada img {

    width:100%;

    height:260px;

    object-fit:cover;

}



.contenido {

   

    text-align:center;

}



.contenido h1 {

   

    margin-bottom:15px;

}



.datos p {

    margin:15px 0;

    font-size:18px;

}



.mensaje {

    margin:30px 0;

    

   

    border-radius:20px;

}



.contador {

    margin:25px 0;

}



#cuenta {

    font-size:30px;

    font-weight:bold;

 
}



.acciones button {


    width:100%;

    padding:15px;

    border:none;

    border-radius:30px;

    background:#25D366;

    color:white;

    font-size:17px;

    cursor:pointer;

}
/* =====================
   CONFIRMACION ASISTENCIA
   ===================== */


   .confirmacion {

    margin-top:30px;

    padding:25px;

    background:#f8f8f8;

    border-radius:25px;

}



.confirmacion input {

    width:100%;

    padding:12px;

    border-radius:15px;

    border:1px solid #ddd;

    margin:15px 0;

    font-size:16px;

}



.botones-confirmacion {

    display:flex;

    gap:15px;

}



.botones-confirmacion button {


    flex:1;

    padding:12px;

    border:none;

    border-radius:30px;

    cursor:pointer;

    color:white;

    font-weight:bold;

}



#asistir {

    background:#25D366;

}



#noAsistir {

    background:#ff4f4f;

}



#respuesta {

    margin-top:15px;

    font-weight:bold;

}
/* ===================
   PANEL EVENTO
   =================== */


   .resumen {

    display:flex;

    justify-content:center;

    gap:30px;

    margin-bottom:40px;

}



.contador-box {

    background:white;

    padding:30px;

    border-radius:25px;

    width:220px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



.listas {

    display:flex;

    justify-content:center;

    gap:40px;

}



.lista {

    background:white;

    padding:30px;

    border-radius:25px;

    width:300px;

}



.lista li {

    list-style:none;

    padding:10px;

    border-bottom:1px solid #eee;

}



@media(max-width:700px){

.resumen,
.listas{

    flex-direction:column;

    align-items:center;

}

}


/*==================================
        FAQ PREMIUM
==================================*/

.faq-section{

    padding:90px 8%;

    text-align:center;

}

.faq-section h2{

    font-size:42px;

    margin-bottom:15px;

}

.faq-subtitle{

    color:#777;

    max-width:650px;

    margin:0 auto 50px;

    font-size:18px;

    line-height:1.7;

}

.faq{

    max-width:850px;

    margin:auto;

}

.faq details{

    background:#fff;

    border-radius:22px;

    margin-bottom:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    overflow:hidden;

    transition:.3s;

}

.faq details:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 45px rgba(18,133,211,.12);

}

.faq summary{

    list-style:none;

    cursor:pointer;

    padding:24px 30px;

    font-size:20px;

    font-weight:700;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.faq summary::-webkit-details-marker{

    display:none;

}

.faq summary::after{

    content:"+";

    font-size:28px;

    color:#1285d3;

    transition:.3s;

}

.faq details[open] summary::after{

    content:"−";

    color:#666;

}

.faq details p{

    padding:0 30px 28px;

    color:#666;

    font-size:17px;

    line-height:1.8;

}

@media(max-width:768px){

    .faq-section h2{

        font-size:32px;

    }

    .faq summary{

        font-size:17px;

        padding:20px;

    }

    .faq details p{

        padding:0 20px 20px;

    }

}
/*==================================
        RESEÑAS PREMIUM
==================================*/

.review-section{

    padding:100px 8%;

}

.review-card{

    max-width:750px;

    margin:auto;

    background:#fff;

    border-radius:32px;

    padding:55px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    text-align:center;

    border:1px solid #ececec;

}

.review-badge{

    display:inline-block;

    background:#eef6ff;

   

    font-weight:700;

    padding:10px 18px;

    border-radius:50px;

    margin-bottom:25px;

}

.review-card h2{

    font-size:38px;

    margin-bottom:20px;

}

.review-text{

    color:#666;

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}

.review-card input,
.review-card select,
.review-card textarea{

    width:100%;

    margin-bottom:18px;

    padding:16px;

    border:1px solid #ddd;

    border-radius:18px;

    font-size:16px;

    transition:.3s;

}

.review-card input:focus,
.review-card select:focus,
.review-card textarea:focus{

    outline:none;

    border-color:#1285d3;

    box-shadow:0 0 0 4px rgba(18,133,211,.12);

}

.review-card textarea{

    resize:none;

}

.review-card button{

    width:100%;

    margin-top:10px;

}

.review-footer{

    margin-top:30px;

    color:#888;

    font-size:15px;

}

@media(max-width:768px){

.review-card{

    padding:35px 25px;

}

.review-card h2{

    font-size:30px;

}

.review-text{

    font-size:16px;

}

}
/* ==================================
   RESEÑAS PREMIUM INVITAFÁCIL
================================== */


.reseñas{

    padding:100px 8%;

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #f5f7ff
    );

    overflow:hidden;

}



/* TITULO */

.titulo-reseñas{

    text-align:center;

    max-width:750px;

    margin:0 auto 50px;

}



.titulo-reseñas h2{

    font-size:42px;

    font-weight:800;

    color:#222;

    margin-bottom:15px;

}



.titulo-reseñas p{

    color:#777;

    font-size:18px;

}



/* VENTANA DEL CARRUSEL */

.carrusel-contenedor{

    width:100%;

    max-width:450px;

    margin:auto;

    overflow:hidden;

    border-radius:35px;

}



/* LINEA QUE SE MUEVE */

.carrusel-track{

    display:flex;

    transition:
    transform .8s ease;

}



/* TARJETA INDIVIDUAL */

.reseña-card{

    min-width:100%;

    width:100%;

    height:300px;

    background:white;

    border-radius:35px;

    padding:35px;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


  
}



.reseña-card:hover{

    transform:translateY(-8px);

}



/* CIRCULO DEL USUARIO */

.reseña-avatar{

    width:75px;

    height:75px;

    border-radius:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    background:

    linear-gradient(
        135deg,
        #ff4f9a,
        #6b8cff
    );


    color:white;

    font-size:30px;

    font-weight:bold;

    margin-bottom:15px;

}



/* NOMBRE */

.reseña-card h3{

    font-size:21px;

    margin-bottom:10px;

    color:#333;

}



/* ESTRELLAS */

.estrellas{

    color:#ffc107;

    font-size:24px;

    margin-bottom:15px;

}



/* TEXTO */

.reseña-card p{

    text-align:center;

    color:#666;

    line-height:1.6;

    font-size:16px;

}



/* RESPONSIVE CELULAR */

@media(max-width:700px){


.reseñas{

    padding:70px 20px;

}



.titulo-reseñas h2{

    font-size:30px;

}



.titulo-reseñas p{

    font-size:16px;

}



.carrusel-contenedor{

    max-width:330px;

}



.reseña-card{

    height:330px;

    padding:25px;

}



}
/* ==========================
   LISTAS PANEL CON DESPLIEGUE
========================== */


.lista ul{

    max-height:300px;

    overflow-y:auto;

    padding-right:10px;

}



/* Scroll más elegante */

.lista ul::-webkit-scrollbar{

    width:8px;

}


.lista ul::-webkit-scrollbar-track{

    background:#f1f1f1;

    border-radius:20px;

}


.lista ul::-webkit-scrollbar-thumb{

    background:#ff4f9a;

    border-radius:20px;

}



/* Animación al aparecer invitados */

.lista li{

    animation:
    aparecer .4s ease;

}



@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(10px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(135deg, #bebebe, #eef6ff);
    color: #333;
}


/* HEADER */

/* ==========================
   HEADER PREMIUM
========================== */
.header{

    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 7%;

    background: #ffffff;

    box-shadow: 0 8px 25px rgba(0,0,0,.08);

}


.logo{

    font-size: 30px;

    font-weight: 800;

    color: #666;

    letter-spacing: .5px;
}



nav{

    display: flex;

    align-items: center;

    gap: 28px;

}



nav a{

    text-decoration: none;

    color: #555;

    font-weight: 600;

    font-size: 16px;

    transition: .3s;

    position: relative;

}



nav a::after{

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 3px;

    background: #0e0e0e;

    border-radius: 20px;

    transition: .3s;

}



nav a:hover{

    color: #080808;

}



nav a:hover::after{

    width: 100%;

}



/* HERO */

.hero {
    min-height: 85vh;
    padding: 50px 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}


.hero-text {
    max-width: 550px;
}


.hero-text h1 {
    font-size: 55px;
    line-height: 1.2;
    margin-bottom: 20px;
}


.hero-text h1 span {
    color: #1285d3;
}


.hero-text p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}



/* BOTON */

/* =========================
   BOTON PREMIUM GLOBAL
========================= */

.btn-primary {

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:190px;

    height:52px;

    padding:0;

    background:linear-gradient(
        135deg,
        #666,
        #b1b4d3
    );

    color:white;

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    font-size:16px;

    border:none;

    cursor:pointer;

    transition:.3s;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);

}


.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.22);

}



/* CELULAR */

@media(max-width:600px){


.btn-primary{

   

    max-width:320px;

    height:52px;

    margin:auto;

}


}
.btn-primary:hover {

    transform: translateY(-5px);

}




/* TARJETA */

.hero-card {

    width: 330px;

    padding: 25px;

    background: rgba(255,255,255,.8);

    border-radius: 30px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.1);

}


.card-image {

    height:180px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:70px;

    background:linear-gradient(
        135deg,
        #a3a3a3,
        #dceeff
    );

    border-radius:25px;

    margin-bottom:20px;

}




.hero-card button {

    margin-top:15px;

    padding:12px 20px;

    border:none;

    border-radius:30px;

    background:#333;

    color:white;

}



/* SECCIONES */


.section {

    padding:80px 8%;

    text-align:center;

}


.section h1,
.section h2 {

    margin-bottom:30px;

}




/* TARJETAS */

/* ===================================
   TARJETAS PREMIUM
=================================== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:50px;

}



.card-premium{

    background:#ffffff;

    border-radius:28px;

    padding:35px;

    text-decoration:none;

    color:#333;

    border:1px solid #ececec;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}



.card-premium:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(18,133,211,.18);

    border-color:#1285d3;

}



.icono{

    width:75px;

    height:75px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    color:white;

    margin-bottom:25px;

}



/* Colores diferentes */

.card-premium:nth-child(1) .icono{

    background:linear-gradient(135deg,#1285d3, #25d366);

}

.card-premium:nth-child(2) .icono{

    background:linear-gradient(135deg,#d4af37,#f4d03f);

}

.card-premium:nth-child(3) .icono{

    background:linear-gradient(135deg,#62c6ff,#1285d3);

}

.card-premium:nth-child(4) .icono{

    background:linear-gradient(135deg,#5f6caf,#3949ab);

}



.card-premium h3{

    font-size:24px;

    margin-bottom:15px;

}



.card-premium p{

    color:#666;

    line-height:1.7;

    margin-bottom:25px;

}



.card-premium span{

    

    font-weight:700;

    font-size:16px;

}



.card-premium:hover span{

    color:#ff4f9a;

}



.section-subtitle{

    max-width:650px;

    margin:0 auto 40px;

    color:#777;

    font-size:18px;

    line-height:1.7;

}


/* FORMULARIO */

.formulario {

    max-width:600px;

    margin:auto;

    background:white;

    padding:40px;

    border-radius:25px;

    box-shadow:0 10px 40px rgba(0,0,0,.1);

    text-align:left;

}


.formulario label {

    display:block;

    margin-top:20px;

    margin-bottom:8px;

    font-weight:bold;

}


.formulario input,
.formulario select,
.formulario textarea {


    width:100%;

    padding:12px;

    border-radius:10px;

    border:1px solid #ddd;

    font-size:16px;

}


.formulario textarea {

    resize:none;

}


.formulario button {

    margin-top:30px;

    width:100%;

}





/* PASOS */


.steps {

    display:flex;

    justify-content:center;

    gap:30px;

}


.steps div {

    background:white;

    padding:30px;

    border-radius:20px;

}





/* FOOTER */

footer {

    padding:40px;

    background:#222;

    color:white;

    text-align:center;

}





/* RESPONSIVE CELULAR */

@media(max-width:900px){


.header {

    flex-direction:column;

    gap:20px;

}


.hero {

    flex-direction:column;

    text-align:center;

}


.hero-text h1 {

    font-size:40px;

}


.cards {

    grid-template-columns:1fr;

}


.steps {

    flex-direction:column;

    align-items:center;

}


.hero-card {

    width:100%;

}



}

/* =========================
   INVITACION FINAL
   ========================= */


.invitacion {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}



.invitacion-card {

    max-width:420px;

    width:100%;

    background:white;

    border-radius:35px;

    overflow:hidden;

    box-shadow:

    0 20px 60px rgba(0,0,0,.15);

}



.portada img {

    width:100%;

    height:260px;

    object-fit:cover;

}



.contenido {

   

    text-align:center;

}



.contenido h1 {

   

    margin-bottom:15px;

}



.datos p {

    margin:15px 0;

    font-size:18px;

}



.mensaje {

    margin:30px 0;

    

   

    border-radius:20px;

}



.contador {

    margin:25px 0;

}



#cuenta {

    font-size:30px;

    font-weight:bold;

 
}



.acciones button {


    width:100%;

    padding:15px;

    border:none;

    border-radius:30px;

    background:#25D366;

    color:white;

    font-size:17px;

    cursor:pointer;

}
/* =====================
   CONFIRMACION ASISTENCIA
   ===================== */


   .confirmacion {

    margin-top:30px;

    padding:25px;

    background:#f8f8f8;

    border-radius:25px;

}



.confirmacion input {

    width:100%;

    padding:12px;

    border-radius:15px;

    border:1px solid #ddd;

    margin:15px 0;

    font-size:16px;

}



.botones-confirmacion {

    display:flex;

    gap:15px;

}



.botones-confirmacion button {


    flex:1;

    padding:12px;

    border:none;

    border-radius:30px;

    cursor:pointer;

    color:white;

    font-weight:bold;

}



#asistir {

    background:#25D366;

}



#noAsistir {

    background:#ff4f4f;

}



#respuesta {

    margin-top:15px;

    font-weight:bold;

}
/* ===================
   PANEL EVENTO
   =================== */


   .resumen {

    display:flex;

    justify-content:center;

    gap:30px;

    margin-bottom:40px;

}



.contador-box {

    background:white;

    padding:30px;

    border-radius:25px;

    width:220px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



.listas {

    display:flex;

    justify-content:center;

    gap:40px;

}



.lista {

    background:white;

    padding:30px;

    border-radius:25px;

    width:300px;

}



.lista li {

    list-style:none;

    padding:10px;

    border-bottom:1px solid #eee;

}



@media(max-width:700px){

.resumen,
.listas{

    flex-direction:column;

    align-items:center;

}

}


/*==================================
        FAQ PREMIUM
==================================*/

.faq-section{

    padding:90px 8%;

    text-align:center;

}

.faq-section h2{

    font-size:42px;

    margin-bottom:15px;

}

.faq-subtitle{

    color:#777;

    max-width:650px;

    margin:0 auto 50px;

    font-size:18px;

    line-height:1.7;

}

.faq{

    max-width:850px;

    margin:auto;

}

.faq details{

    background:#fff;

    border-radius:22px;

    margin-bottom:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    overflow:hidden;

    transition:.3s;

}

.faq details:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 45px rgba(18,133,211,.12);

}

.faq summary{

    list-style:none;

    cursor:pointer;

    padding:24px 30px;

    font-size:20px;

    font-weight:700;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.faq summary::-webkit-details-marker{

    display:none;

}

.faq summary::after{

    content:"+";

    font-size:28px;

    color:#1285d3;

    transition:.3s;

}

.faq details[open] summary::after{

    content:"−";

    color:#666;

}

.faq details p{

    padding:0 30px 28px;

    color:#666;

    font-size:17px;

    line-height:1.8;

}

@media(max-width:768px){

    .faq-section h2{

        font-size:32px;

    }

    .faq summary{

        font-size:17px;

        padding:20px;

    }

    .faq details p{

        padding:0 20px 20px;

    }

}
/*==================================
        RESEÑAS PREMIUM
==================================*/

.review-section{

    padding:100px 8%;

}

.review-card{

    max-width:750px;

    margin:auto;

    background:#fff;

    border-radius:32px;

    padding:55px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    text-align:center;

    border:1px solid #ececec;

}

.review-badge{

    display:inline-block;

    background:#eef6ff;

   

    font-weight:700;

    padding:10px 18px;

    border-radius:50px;

    margin-bottom:25px;

}

.review-card h2{

    font-size:38px;

    margin-bottom:20px;

}

.review-text{

    color:#666;

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}

.review-card input,
.review-card select,
.review-card textarea{

    width:100%;

    margin-bottom:18px;

    padding:16px;

    border:1px solid #ddd;

    border-radius:18px;

    font-size:16px;

    transition:.3s;

}

.review-card input:focus,
.review-card select:focus,
.review-card textarea:focus{

    outline:none;

    border-color:#1285d3;

    box-shadow:0 0 0 4px rgba(18,133,211,.12);

}

.review-card textarea{

    resize:none;

}

.review-card button{

    width:100%;

    margin-top:10px;

}

.review-footer{

    margin-top:30px;

    color:#888;

    font-size:15px;

}

@media(max-width:768px){

.review-card{

    padding:35px 25px;

}

.review-card h2{

    font-size:30px;

}

.review-text{

    font-size:16px;

}

}
/* ==================================
   RESEÑAS PREMIUM INVITAFÁCIL
================================== */


.reseñas{

    padding:100px 8%;

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #f5f7ff
    );

    overflow:hidden;

}



/* TITULO */

.titulo-reseñas{

    text-align:center;

    max-width:750px;

    margin:0 auto 50px;

}



.titulo-reseñas h2{

    font-size:42px;

    font-weight:800;

    color:#222;

    margin-bottom:15px;

}



.titulo-reseñas p{

    color:#777;

    font-size:18px;

}



/* VENTANA DEL CARRUSEL */

.carrusel-contenedor{

    width:100%;

    max-width:450px;

    margin:auto;

    overflow:hidden;

    border-radius:35px;

}



/* LINEA QUE SE MUEVE */

.carrusel-track{

    display:flex;

    transition:
    transform .8s ease;

}



/* TARJETA INDIVIDUAL */

.reseña-card{

    min-width:100%;

    width:100%;

    height:300px;

    background:white;

    border-radius:35px;

    padding:35px;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


  
}



.reseña-card:hover{

    transform:translateY(-8px);

}



/* CIRCULO DEL USUARIO */

.reseña-avatar{

    width:75px;

    height:75px;

    border-radius:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    background:

    linear-gradient(
        135deg,
        #ff4f9a,
        #6b8cff
    );


    color:white;

    font-size:30px;

    font-weight:bold;

    margin-bottom:15px;

}



/* NOMBRE */

.reseña-card h3{

    font-size:21px;

    margin-bottom:10px;

    color:#333;

}



/* ESTRELLAS */

.estrellas{

    color:#ffc107;

    font-size:24px;

    margin-bottom:15px;

}



/* TEXTO */

.reseña-card p{

    text-align:center;

    color:#666;

    line-height:1.6;

    font-size:16px;

}



/* RESPONSIVE CELULAR */

@media(max-width:700px){


.reseñas{

    padding:70px 20px;

}



.titulo-reseñas h2{

    font-size:30px;

}



.titulo-reseñas p{

    font-size:16px;

}



.carrusel-contenedor{

    max-width:330px;

}



.reseña-card{

    height:330px;

    padding:25px;

}



}
/* ==========================
   LISTAS PANEL CON DESPLIEGUE
========================== */


.lista ul{

    max-height:300px;

    overflow-y:auto;

    padding-right:10px;

}



/* Scroll más elegante */

.lista ul::-webkit-scrollbar{

    width:8px;

}


.lista ul::-webkit-scrollbar-track{

    background:#f1f1f1;

    border-radius:20px;

}


.lista ul::-webkit-scrollbar-thumb{

    background:#ff4f9a;

    border-radius:20px;

}



/* Animación al aparecer invitados */

.lista li{

    animation:
    aparecer .4s ease;

}



@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(10px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}

#formOpinion select{

    display:block !important;

    width:100% !important;

    height:55px !important;

    margin:15px 0 !important;

    padding:10px 15px !important;

    background:#fff !important;

    border-radius:15px !important;

    border:1px solid #ddd !important;

}
/* =====================================
   SELECT RESEÑAS - AJUSTE FINAL
===================================== */


.review-card #formOpinion{

    display:flex;

    flex-direction:column;

    width:100%;

}



.review-card #formOpinion input,
.review-card #formOpinion select,
.review-card #formOpinion textarea{

    width:100%;

    display:block;

    box-sizing:border-box;

}



.review-card #calificacion{

    height:60px !important;

    min-height:60px !important;

    width:100% !important;

    padding:0 20px !important;

    margin:18px 0 !important;

    border-radius:18px !important;

    border:1px solid #ddd !important;

    background:#fff !important;

    font-size:17px !important;

    color:#333 !important;

    line-height:60px !important;

}



/* Evita que las opciones queden con estilos raros */

.review-card #calificacion option{

    background:white;

    color:#333;

    font-size:16px;

}
/* =================================
   ESTRELLAS PREMIUM
================================= */


.estrellas-selector{

    display:flex;

    flex-direction:row-reverse;

    justify-content:center;

   
}



.estrellas-selector input{

    display:none;

}



.estrellas-selector label{

    font-size:45px;

    color:#ddd;

    cursor:pointer;

    transition:.3s;

}



.estrellas-selector label:hover,
.estrellas-selector label:hover ~ label{

    color:#ffc107;

}



.estrellas-selector input:checked ~ label{

    color:#ffc107;

}
html, body{

    min-height:100%;

}


body{

    min-height:100vh;

    display:flex;

    flex-direction:column;

}


main{

    flex:1;

}


footer{

    margin-top:auto;

    width:100%;

}