* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.linea-morada {
  background: #A64D79;
  height: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: 'Montserrat', sans-serif;
    font-size: 13px;
}

.linea-morada a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1.2px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}

.link-acceso{
  position:absolute;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  padding:10px 18px;
  border-radius:30px;
  border:1px solid rgba(221, 221, 221, 0.35);
  background:rgba(255, 255, 255, 0.08);
  backdrop-filter:blur(10px);
  transition:.3s;
}

.link-acceso:hover{
  background:#fff;
  color:#A64D79;
}

.encabezado {
  position: relative;
  background: #fff;
  padding: 20px 0;
  box-shadow: 0 13px 10px rgb(138, 46, 77, 0.12);
  
}

.encabezado-contenido {
  max-width: 1200px;
  margin: auto;
  padding: 20px 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.logo {
  position: absolute;
  left: 100px;
  top: 30px;
  transform: translateY(-50%);
  z-index: 10;
  
}

.logo img {
  width: 130px;
  display: block;
}

.navbar a {
  margin-left: 25px;
  text-decoration: none;
  color: #000;
  font-size: 14px;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  
}


.principal {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 80px 490px 100px;
}

.principal-texto {
  max-width: 540px;
  margin-top:-30px;
  margin-right:-420px;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


.principal-texto h1 {
  font-size: 55px; 
  line-height: 1.15;
  margin-bottom: 26px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

.principal-texto p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 38px;
  color: #444;
  font-family: 'Montserrat', sans-serif;
}

.celulares-hero{
position:absolute;
left:180px;
top:190px;
width:420px;
height:420px;
}

/* ========================= */
/* TELEFONOS */
/* ========================= */

.telefono{
position:absolute;
width:180px;
height:360px;
background:linear-gradient(
145deg,
#111,
#000
);
border-radius:38px;
padding:7px;
box-shadow:
0 18px 45px rgba(0,0,0,.20),
0 8px 15px rgba(0,0,0,.12);
overflow:hidden;
transition:.4s ease;
}

/* BORDE BLANCO INTERNO */

.telefono::before{
content:"";
position:absolute;
top:9px;
left:9px;
right:9px;
bottom:9px;
background:#fff;
border-radius:30px;
z-index:1;
}

/* CAMARA SUPERIOR */

.telefono::after{
content:"";
position:absolute;
top:18px;
left:50%;
transform:translateX(-50%);
width:70px;
height:12px;
background:#111;
border-radius:20px;
z-index:5;
}

/* ========================= */
/* PANTALLA */
/* ========================= */

.pantalla{
position:absolute;
top:28px;
left:18px;
right:18px;
bottom:18px;
border-radius:22px;
overflow:hidden;
z-index:2;
background:#ddd;
}

.pantalla img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* ========================= */
/* POSICIONES */
/* ========================= */

.tel1{
left:0;
top:40px;
transform:rotate(-12deg);
z-index:2;
}

.tel2{
left:160px;
top:85px;
transform:rotate(10deg);
z-index:3;
}

/* ========================= */
/* HOVER */
/* ========================= */

.telefono:hover{
transform:
scale(1.04)
rotate(0deg);
}

/* ========================= */
/* BRILLOS */
/* ========================= */

.celulares-hero span{
position:absolute;
color:#f3d57b;
font-size:18px;
animation:estrella 3s infinite ease-in-out;
pointer-events:none;
}

.star1{
top:20px;
left:30px;
}

.star2{
top:120px;
right:20px;
animation-delay:1s;
}

.star3{
bottom:40px;
left:80px;
animation-delay:2s;
}

@keyframes estrella{

0%{
opacity:.3;
transform:scale(1);
}

50%{
opacity:1;
transform:scale(1.5);
}

100%{
opacity:.3;
transform:scale(1);
}

}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:900px){

.celulares-hero{
position:relative;
left:auto;
top:auto;
margin:auto;
width:320px;
height:360px;
}

.telefono{
width:150px;
height:300px;
}

.tel2{
left:120px;
}

}

@media(max-width:600px){

.celulares-hero{
transform:scale(.9);
left:-20px;
}

}

.letras-moradas {
  color: #97165d;
}


.botones-principales {
  display: flex;
  gap: 18px;
  margin-top: 10px;
}


.boton-crear-invitacion {
  background: #fcb2c2;
  color: #52042F;
  padding: 16px 30px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.6px;
  transition: all 0.3s ease;
  border-color: transparent;
}

.boton-crear-invitacion:hover {
  background: #e78298;
}

.boton-whatsapp {
  background: transparent;
  color: #25D366;
  border: 1.8px solid #25D366;
  padding: 15px 32px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  transition: all 0.3s ease;
  margin-left:20px;
}

.boton-whatsapp:hover {
  background: #25D366;
  color: #ffffff;
}

.titulo-plantillas {
  font-size: 2.2rem;             
  font-weight: 800;              
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  color: #111111;                
  letter-spacing: -0.1px;
  line-height: 1.2;
  margin: 10px 0 10px 0;         
  position: relative;
}

.plantillas {
    width: 90%;
    max-width: 1400px;
    margin: 120px auto;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 60px;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


.modelos{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    align-items:center;
  
}

.tarjetas-modelos {
    background-color: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #f0d6e2; 
    transition: all 0.4s ease;
    cursor: pointer;
    width: 300px;
}

.tarjetas-modelos:hover {
    transform: translateY(-10px);
    border-color: #e6b5cb;
}

.imagen-modelo {
    overflow: hidden;
}

.imagen-modelo img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tarjetas-modelos:hover img {
    transform: scale(1.07);
}


.informacion-tarjeta {
    padding: 30px 20px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.informacion-tarjeta h3 {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 12px;
    letter-spacing: 1px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}


.linea {
    display: block;
    width: 40px;
    height: 2px;
    background-color: #92245c;
    margin: 10px auto 15px auto;
    border-radius: 5px;
}

.ver {
    font-size: 17px;
    color: #c02c79;
    transition: opacity 0.4s ease;
    
}


.abajo-plantillas {
    margin-top: -30px;
    text-align: center;
}


.boton-plantillas {
    display: inline-block;
    padding: 16px 55px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(135deg, #92245c, #b8326f);
    border-radius: 50px;
    transition: all 0.4s ease;
    margin-top: -300px;
    font-family: 'Montserrat', sans-serif;

}



.titulo-plantillas::after {
  content: '';
  position: absolute;
  width: 100px;                  
  height: 4px;
  background: linear-gradient(90deg, #92245c, #c02c79); 
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 70px;
}



.texto-abajo-boton {
    margin-top: 18px;
    font-size: 18px;
    color: #7e7e7e;
  
}

.beneficios{
  padding:40px 4% 40px 4%;
  text-align:center;
background:
radial-gradient(circle at 80% 70%, rgba(255,230,242,0.45), transparent 55%),
radial-gradient(circle at 20% 40%, rgba(255,214,236,0.45), transparent 55%),
#ffffff;
}

.beneficios h2{
  font-size:2.6rem;
  font-weight:700;
  margin-bottom:90px;
  font-family:'Montserrat',sans-serif;
  color:#2c2c2c;
  position:relative;
}

.beneficios h2::after{
  content:"";
  width:80px;
  height:4px;
  background:linear-gradient(90deg,#ff8ec5,#b9377e);
  display:block;
  margin:18px auto 0;
  border-radius:30px;
}

.general-beneficios{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:45px;
}

.beneficio-tarjetas{
  position:relative;
  padding:65px 35px 50px;
  border-radius:22px;
  background:linear-gradient(160deg,#ffffff,#fff5fa);
  text-align:center;
  cursor:pointer;
  overflow:hidden;
  box-shadow:
  0 15px 40px rgba(0,0,0,0.08),
  0 5px 10px rgba(0,0,0,0.05);
  transition:all .35s cubic-bezier(.25,.8,.25,1);
  opacity:0;
  transform:translateY(50px) scale(.96);
  animation:formar .8s ease forwards;
}

.beneficio-tarjetas::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#ff8ec5,#b9377e);
  border-radius:22px 22px 0 0;
}

.beneficio-tarjetas::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background:linear-gradient(
  120deg,
  transparent,
  rgba(255,255,255,0.6),
  transparent
  );
  transition:.7s;
}

.beneficio-tarjetas:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:
  0 30px 60px rgba(0,0,0,0.12),
  0 10px 25px rgba(0,0,0,0.08);
}

.beneficio-tarjetas:hover::after{
  left:120%;
}

.iconos{
  position:relative;
  z-index:1;
}

.iconos i{
  font-size:36px;
  color:#fff;
  background:linear-gradient(135deg,#ff8dc2,#b9377e);
  width:75px;
  height:75px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 25px;
  box-shadow:
  0 8px 20px rgba(185,55,126,0.35);
  transition:.35s;
}

.beneficio-tarjetas:hover .iconos i{
  transform:scale(1.15) rotate(6deg);
  box-shadow:
  0 12px 30px rgba(185,55,126,0.45);
}

.beneficio-tarjetas h4{
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:12px;
  color:#2b2b2b;
  font-family:'Montserrat',sans-serif;
}

.beneficio-tarjetas p{
  font-size:.95rem;
  color:#6b6b6b;
  line-height:1.6;
}

@keyframes formar{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}



.planes {
  padding: 120px 8%;
  background: #ffffff;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.titulo-planes {
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 12px;
  margin-top: -100px;
  color: #000;
  text-decoration: none;
  

}

.subtitulo-planes {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 80px;
}

.cuadros-planes {
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: stretch;
  margin-top: 150px;
}

.plan {
  width: 360px;
  padding: 60px 40px;
  border-radius: 30px;
  text-align: left;
  position: relative;
  transition: 0.4s ease;
  display: flex;
  flex-direction: column;
  font-size: 1.35rem;
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
  margin-top: -65px;
  color: white;
}

.plan:hover {
  transform: translateY(-15px) scale(1.02);
}

.plan-titulo {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 15px;
  text-align: center;
  color: white;
}

.precio {
  font-size: 3.3rem;
  font-weight: 900;
  margin-bottom: 35px;
  text-align: center;
  color: white;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
  flex-grow: 1;
}

.plan ul li {
  margin-bottom: 16px;
  padding-left: 34px;
  position: relative;
  font-size: 1.15rem;
  font-weight: 500;
  color: white;
}

.plan ul li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: white;
  font-size: 1.2rem;
}

.plan button {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 40px;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
  margin-top: auto;
  background: white;
  color: black;
}

.plan button:hover {
  transform: scale(1.05);
}

.basico {
  background: linear-gradient(135deg,#4facfe,#3f8cff);
}

.basico button {
  color: #3f8cff;
  font-family: 'Montserrat', sans-serif;
}

.premium {
  background: linear-gradient(135deg,#ff2e74,#ff5a96);
}

.premium button {
  color: #ff2e74;
  font-family: 'Montserrat', sans-serif;
}

.decoracion-premium {
  position: absolute;
  top: 38px;
  right: -55px;
  background: #ff2e74;
  color: white;
  padding: 8px 70px;
  font-weight: 700;
  font-size: 0.9rem;
  transform: rotate(45deg);
  text-align: center;
}

.diamante2 {
  background: linear-gradient(135deg,#f5c400,#d8a800);
}

.diamante2 button {
  color: #d8a800;
  font-family: 'Montserrat', sans-serif;
  
}

.seccion-pasos{
padding:100px 20px;
text-align:center;
}


.titulo-pasos{
font-size:44px;
font-weight:800;
margin-bottom:70px;
color:#A64D79;
letter-spacing:3px;
font-family: 'Montserrat', sans-serif;
text-shadow:
0 3px 10px rgba(212, 109, 173, 0.418);
margin-top: -40px;

}



.contenedor-pasos{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:nowrap;

}



.tarjeta-paso{
position:relative;
width:240px;
padding:35px 25px;
background:white;
border-radius:20px;
border:2px solid rgba(166,77,121,0.25);
transition:all .35s ease;
cursor:pointer;
overflow:hidden;

}



.tarjeta-paso p{
color:#000000;
line-height:1.6;
font-size:16px;
font-family: 'Montserrat', sans-serif;

}



.numero{
display:inline-block;
background:#fcb2c2;
color:#640e3e;
padding:8px 14px;
border-radius:12px;
font-weight:700;
margin-bottom:15px;
font-size:15px;
}



.tarjeta-paso:hover{
transform:translateY(-10px);
border:2px solid #A64D79;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}



.tarjeta-paso::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:120%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(166,77,121,0.25),
transparent
);
transform:skewX(-25deg);
transition:.6s;
}

.tarjeta-paso:hover::before{
left:130%;
}


.diamante{
background:linear-gradient(145deg,#fff,#fff2f7);
}


.badge{
position:absolute;
top:15px;
right:15px;
background:#A64D79;
color:white;
padding:6px 14px;
border-radius:20px;
font-size:12px;
font-weight:600;
letter-spacing:1px;
}


.contenedor-cta{

max-width: 1100px;
margin: -40px auto;
padding: 50px 40px;
text-align: center;
background: #ffffff;
border-radius: 22px;
box-shadow:
0 20px 50px rgba(0,0,0,0.08);
border: 1px solid #eeeeee;

}


.contenedor-cta h2{
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
}


.contenedor-cta p{
    font-size: 16px;
    color: #666;
    margin-bottom: 28px;
    font-family: 'Montserrat', sans-serif;
}



.boton-crea{
    display: inline-block;
    padding: 14px 45px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg,#92245c,#c43b7b);
    border-radius: 40px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 8px 20px rgba(184,50,111,0.35);
}

.boton-crea:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(184,50,111,0.45);
}



.footer{
background:#0f0f12;
color:#dcdcdc;
padding:90px 20px 40px;
font-size:17px;
margin-top: 100px;
}


.footer-contenedor{
max-width:1200px;
margin:auto;
display:flex;
gap:50px;
justify-content:space-between;
flex-wrap:wrap;
}



.footer h3{
color:white;
font-size:28px;
margin-bottom:20px;
}

.footer h4{
color:white;
font-size:20px;
margin-bottom:18px;
}



.footer p{
margin-bottom:12px;
font-size:16px;
}



.footer i{
margin-right:10px;
color:#fcb2c2;
font-size:18px;
}


.redes{
display:flex;
gap:15px;
margin-top:10px;

}

.redes a{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#1c1c22;
color:white;
font-size:18px;
transition:.3s;
}

.redes a:hover{
background:#A64D79;
transform:translateY(-3px);
}


.form-footer input,
.form-footer textarea{
width:100%;
padding:10px;
margin-bottom:10px;
border:none;
border-radius:8px;
background:#1c1c22;
color:white;
}


.form-footer textarea{
height:70px;
resize:none;
}


.form-footer button{
width:100%;
background:#A64D79;
color:white;
border:none;
padding:10px;
border-radius:25px;
cursor:pointer;
transition:.3s;
}

.form-footer button:hover{
background:#97165d;

}


.footer-abajo{
text-align:center;
margin-top:50px;
border-top:1px solid #2a2a30;
padding-top:20px;
font-size:13px;
color:#aaa;
}

.mapa iframe{
.mapa iframe{
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.5);
width:100%;
height:200px;

}
}

html{
scroll-behavior: smooth;
}

.faq{
max-width:1000px;
margin:120px auto;
padding:0 20px;
font-family:'Montserrat', sans-serif;
}

.faq-titulo{
text-align:center;
font-size:40px;
font-weight:800;
margin-bottom:60px;
color:#222;
}

.faq-contenedor{
display:flex;
flex-direction:column;
gap:25px;
}

.faq-categoria{
background:#ffffff;
border-radius:16px;
box-shadow:0 12px 35px rgba(0,0,0,0.08);
overflow:hidden;
transition:0.3s;
}

.faq-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 30px;
font-size:20px;
font-weight:700;
cursor:pointer;
border-bottom:1px solid #f0f0f0;
}

.flecha{
font-size:18px;
transition:0.35s;
}

.faq-contenido{
max-height:0;
overflow:hidden;
transition:0.4s ease;
background:#fafafa;
}

.faq-item{
padding:20px 30px;
border-bottom:1px solid #eeeeee;
}

.faq-item:last-child{
border-bottom:none;
}

.pregunta{
font-weight:700;
font-size:17px;
margin-bottom:6px;
color:#222;
}

.respuesta{
font-size:15px;
color:#666;
line-height:1.5;
}

.faq-categoria.active .faq-contenido{
max-height:900px;
}

.faq-categoria.active .flecha{
transform:rotate(180deg);
}

.premium-layout{
    width:100%;
    padding:110px 8%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:70px;
    background:#fff;
    font-family:'Poppins',sans-serif;
    flex-wrap:wrap;
}
.premium-info{
    flex:1;
    min-width:320px;
    max-width:580px;
}
.mini-badge{
    display:inline-block;
    padding:9px 20px;
    border-radius:50px;
    background:#ffe2ec;
    color:#ff2e74;
    font-size:.85rem;
    font-weight:700;
    margin-bottom:26px;
    letter-spacing:1px;
}
.premium-title{
    font-size:3.4rem;
    line-height:1.1;
    font-weight:800;
    color:#111;
    margin-bottom:24px;
    letter-spacing:-2px;
}
.premium-description{
    font-size:1.08rem;
    color:#666;
    line-height:1.9;
    margin-bottom:40px;
}
.premium-features{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-bottom:45px;
}
.feature-item{
    font-size:1rem;
    font-weight:500;
    color:#333;
}
.premium-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 34px;
    background:
    linear-gradient(
    135deg,
    #ff2e74,
    #ff5d99
    );
    color:white;
    text-decoration:none;
    border-radius:60px;
    font-weight:700;
    font-size:1rem;
    transition:.35s ease;
    box-shadow:
    0 15px 30px rgba(255,46,116,0.25);
}
.premium-cta:hover{
    transform:translateY(-4px);
    box-shadow:
    0 20px 40px rgba(255,46,116,0.35);
}
.premium-card{
    position:relative;
    width:390px;
    padding:55px 38px;
    border-radius:36px;
    background:
    linear-gradient(
    135deg,
    #ff2e74,
    #ff5c98,
    #ff7bad
    );
    color:white;
    overflow:hidden;
    box-shadow:
    0 30px 70px rgba(255,46,116,0.25);
    transition:.4s ease;
}
.premium-card:hover{
    transform:translateY(-10px);
}
.premium-card::before{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(255,255,255,0.08);
    border-radius:50%;
    top:-120px;
    right:-80px;
}
.premium-tag-card{
    display:inline-block;
    padding:8px 18px;
    border-radius:40px;
    background:rgba(255,255,255,0.15);
    border:1px solid rgba(255,255,255,0.2);
    font-size:.8rem;
    font-weight:700;
    margin-bottom:24px;
}
.premium-card h3{
    font-size:2.2rem;
    font-weight:800;
    margin-bottom:18px;
}
.premium-price{
    font-size:4rem;
    font-weight:900;
    line-height:1;
    margin-bottom:10px;
}
.premium-price span{
    font-size:1rem;
}
.premium-small-text{
    opacity:.9;
    margin-bottom:35px;
    font-size:.95rem;
}
.premium-card ul{
    list-style:none;
    padding:0;
    margin-bottom:40px;
}
.premium-card ul li{
    position:relative;
    padding-left:30px;
    margin-bottom:15px;
    line-height:1.7;
    font-size:.98rem;
}
.premium-card ul li::before{
    content:"✦";
    position:absolute;
    left:0;
}
.btn-card-premium{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:16px;
    border-radius:50px;
    background:white;
    color:#ff2e74;
    text-decoration:none;
    font-weight:800;
    transition:.35s ease;
}
.btn-card-premium:hover{
    transform:translateY(-4px);
    background:#fff3f8;
}
@media(max-width:900px){
    .premium-layout{
        padding:90px 20px;
    }
    .premium-title{
        font-size:2.6rem;
    }
    .premium-card{
        width:100%;
    }
}

.footer-link{

    display:block;

    margin:12px 0;

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    transition:.3s;

}

.footer-link:hover{

    color:#ffd4e7;

    transform:translateX(5px);

}  

.modal-legal{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:99999;

}

.modal-legal-card{

    width:90%;
    max-width:500px;

    background:white;

    border-radius:25px;

    padding:35px;

    text-align:center;

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

    border-top:6px solid #A64D79;

}

.modal-legal-card h2{

    color:#A64D79;

    margin-bottom:15px;

    font-size:28px;

}

.modal-legal-card p{

    color:#555;

    line-height:1.8;

    margin-bottom:15px;

}

.acciones-legal{

    display:flex;

    justify-content:center;

    gap:15px;

    margin:25px 0;

}

.acciones-legal a{

    text-decoration:none;

    background:#f8edf4;

    color:#A64D79;

    padding:10px 16px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}

.acciones-legal a:hover{

    background:#A64D79;

    color:white;

}

.modal-legal-card button{

    background:
    linear-gradient(
        135deg,
        #A64D79,
        #c25c90
    );

    border:none;

    color:white;

    padding:14px 30px;

    border-radius:14px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

}


/* ================================= */
/* RESPONSIVE GENERAL INVITART */
/* ================================= */

.menu-toggle{
display:none;
background:none;
border:none;
font-size:32px;
cursor:pointer;
color:#A64D79;
font-weight:bold;
}

@media (max-width:768px){

body{
overflow-x:hidden;
}

/* Barra superior */

.linea-morada{
height:auto;
padding:12px;
flex-direction:column;
gap:10px;
}

.link-acceso{
position:static;
transform:none;
display:block;
margin:0 auto;
width:max-content;
}

/* Header */

.encabezado{
padding:15px;
}

.logo{
position:static;
transform:none;
text-align:center;
margin-bottom:15px;
}

.logo img{
width:110px;
margin:auto;
}

.encabezado-contenido{
padding:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

/* BOTON MENU */

.menu-toggle{
display:block;
margin-bottom:10px;
}

/* MENU OCULTO */

.navbar{
display:none;
flex-direction:column;
width:100%;
text-align:center;
gap:15px;
padding:20px 0;
}

.navbar a{
margin:0;
font-size:13px;
}

/* MENU ABIERTO */

.navbar.mostrar-menu{
display:flex;
}

/* Hero */

.principal{
flex-direction:column;
padding:40px 20px;
text-align:center;
}

.principal-texto{
margin:0;
max-width:100%;
}

.principal-texto h1{
font-size:34px;
line-height:1.2;
}

.principal-texto p{
font-size:16px;
}

.celulares-hero{
position:relative;
left:auto;
top:auto;
margin:auto;
width:320px;
height:350px;
margin-bottom:30px;
}

/* Botones */

.boton-crear-invitacion,
.boton-whatsapp{
display:block;
width:100%;
max-width:320px;
margin:12px auto;
}

/* Plantillas */

.tarjetas-modelos{
width:100%;
max-width:340px;
}

/* Pasos */

.contenedor-pasos{
flex-wrap:wrap;
justify-content:center;
}

.tarjeta-paso{
width:100%;
max-width:330px;
}

/* Beneficios */

.general-beneficios{
grid-template-columns:1fr;
}

/* Premium */

.premium-title{
font-size:2rem;
}

.premium-card{
width:100%;
}

/* FAQ */

.faq-header{
padding:18px;
font-size:17px;
}

.faq-item{
padding:18px;
}

/* Footer */

.footer-contenedor{
flex-direction:column;
gap:35px;
}

.footer-columna{
width:100%;
}

}