/*====================================================

 TusInvitaciones.com
 Style v1.0

====================================================*/

:root{

--gold:#c8a14b;
--gold-light:#e8cb86;
--brown:#4a2d1f;
--brown-dark:#2d1a12;
--cream:#fbf8f2;
--white:#ffffff;
--text:#3d342f;
--line:#ece4d8;

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

--radius:22px;

--transition:.35s ease;

--container:1240px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--cream);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(98%,var(--container));

margin:auto;

}

/*----HEADER-----*/

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:22px 0;

transition:.45s;

}

header.scrolled{
background:rgba(255,255,255,.92);
backdrop-filter:blur(16px);
box-shadow:0 10px 35px rgba(0,0,0,.08);
}

header.scrolled nav a{
    color: var(--text);
}

header .container{
display:flex;
align-items:center;
justify-content:space-between;
}

.logo img{

height:62px;

}

nav ul{

display:flex;

gap:38px;

}

nav a{

font-weight:500;

position:relative;

color:rgba(255,255,255,.92);

}


nav a{

font-weight:500;

position:relative;

}



nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--gold);

transition:.3s;

}

nav a:hover::after{

width:100%;

}

.acciones{

display:flex;

gap:16px;

align-items:center;

}

/*---BOTONES------*/

.btn-principal{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

border-radius:100px;

color:#fff;

font-weight:600;

transition:.35s;

box-shadow:0 10px 30px rgba(200,161,75,.35);

}

.btn-principal:hover{

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(200,161,75,.45);

}

.btn-secundario{
padding:6px 9px;
border-radius:100px;
border:2px solid rgba(255,255,255,.5);
color:#fff;
transition:.35s;
}

.btn-secundario:hover{
background:#fff;
color:var(--brown);
}


.btn-eventos{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
background:linear-gradient(135deg,var(--gold),var(--gold-light));
border-radius:50px;
color:#fff;
font-weight:600;
transition:.35s;
box-shadow:0 10px 10px rgba(200,161,75,.35);
margin-top:10px;

}

.btn-eventos:hover{
transform:translateY(-4px);
box-shadow:0 9px 20px rgba(200,161,75,.45);
}


/*----HERO-----*/

.hero{
height:100vh;
display:flex;
align-items:center;
position:relative;
overflow:hidden;
background:
linear-gradient(
    to bottom,
    rgba(74,45,31,.38) 0%,
    rgba(74,45,31,.48) 30%,
    rgba(40,28,20,.70) 70%,
    rgba(20,14,10,.88) 100%
),
url("../img/hero.webp")
center/cover;
}


.hero-content{
position:relative;
z-index:10;
max-width:720px;
color:#fff;
}


.hero h1{
  font-size:clamp(38px, 6vw, 70px);
  font-weight:700;
  color:#fff;
  line-height:1.08;
  margin-bottom:20px;
  text-shadow:0 2px 20px rgba(0,0,0,0.3);
}
.hero h1 span{ color:var(--coral); }
.hero-sub{
  font-size:clamp(18px, 2.5vw, 22px);
  color:rgba(255,248,236,0.9);
  max-width:560px;
  margin:0 auto 40px;
  font-weight:400;
}
.hero-flourish{
  display:block;
  font-family:'Caveat', cursive;
  font-size:28px;
  color:var(--mustard);
  margin-bottom:40px;
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--coral);
  color:#fff;
  padding:16px 40px;
  border-radius:50px;
  font-family:'Baloo 2', sans-serif;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:0.5px;
  text-decoration:none;
  border:2px solid var(--coral);
  transition:all 0.35s ease;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(228,87,63,0.3);
}
.hero-cta:hover{
  background:transparent;
  color:var(--coral);
  border-color:var(--coral);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(228,87,63,0.2);
}
.hero-overlay{
position:absolute;
inset:0;
background:
radial-gradient(circle at top right,
rgba(200,161,75,.18),
transparent 60%);
}

.hero h1{
font-family:'Playfair Display',serif;
font-size:74px;
font-weight:700;
line-height:1.08;
margin-bottom:28px;
}

.hero h1 span{
display:block;
color:var(--gold-light);
}

.hero p{
font-size:22px;
opacity:.95;
margin-bottom:42px;
}

.hero-buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.hero-scroll{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
color:#fff;
letter-spacing:4px;
font-size:13px;
text-transform:uppercase;
opacity:.75;

}
/*-----Estadisticas----*/

.estadisticas{

padding:90px 0;

background:#fff;

}

.estadisticas .container{

display:grid;

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

gap:30px;

}

.stat{

text-align:center;

padding:40px;

border-radius:var(--radius);

background:var(--cream);

transition:.35s;

}

.stat:hover{

transform:translateY(-10px);

box-shadow:var(--shadow);

}

.stat h2{

font-size:52px;

color:var(--gold);

font-family:'Playfair Display';

margin-bottom:10px;

}

.stat p{

font-size:17px;

}

/*-----Títulos de Sección----*/

.titulo{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.titulo span{

display:inline-block;

padding:8px 18px;

background:rgba(200,161,75,.12);

color:var(--gold);

border-radius:100px;

font-size:.82rem;

font-weight:600;

letter-spacing:2px;

margin-bottom:18px;

}

.titulo h2{

font-family:'Playfair Display',serif;

font-size:3rem;

color:var(--brown-dark);

margin-bottom:20px;

}

.titulo p{

font-size:1.1rem;

opacity:.8;

}

/*----Eventos-----*/

.eventos{
    padding:120px 0;
}

.grid-eventos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    align-items:start;
}

.card-evento{
    background:#fff;
    border-radius:26px;
    padding:40px 30px;
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
    transition:.4s;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    min-height:280px;   /* Todas iguales, sin aire de más */
}

.card-evento::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,var(--gold),#f2d48b);
    transform:scaleX(0);
    transition:.4s;
}

.card-evento:hover::before{
    transform:scaleX(1);
}

.card-evento:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.icono{
    font-size:52px;
    margin-bottom:20px;
}

.icono img{
    width:120px;
    height:auto;
}

.card-evento h3{
    margin-bottom:15px;
}

.card-evento p{
    margin-bottom:24px;
}



/* --- ESTILOS PARA EL BOTÓN QUE FALTABAN --- */
.btn-eventos {
  display: inline-block;
  padding: 12px 28px;
  background-color: var(--gold, #d4a373); /* Usa tu variable de dorado o un fallback */
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  transition: 0.3s ease;
  margin-top: auto; /* Empuja el botón al fondo de la card */
}

.btn-eventos:hover {
  background-color: var(--brown, #8b5a2b);
  transform: translateY(-2px);
}

/*----Servicios-----*/

.servicios{

padding:130px 0;

background:#fff;

}

.servicios-grid{

display:grid;

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

gap:26px;

}

.servicio{

background:var(--cream);

padding:38px;

border-radius:24px;

transition:.35s;

cursor:pointer;

border:1px solid transparent;

}

.servicio:hover{

transform:translateY(-8px);

background:#fff;

border-color:var(--gold-light);

box-shadow:var(--shadow);

}

.servicio .icono{

font-size:42px;

margin-bottom:20px;

}

.servicio h3{

margin-bottom:12px;

font-size:22px;

color:var(--brown);

}

.servicio p{

opacity:.75;

}

/*----Cómo funciona-----*/

.como-funciona{

padding:140px 0;

}

.pasos{

display:grid;

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

gap:60px;

}

.paso{

text-align:center;

position:relative;

}

.numero{

width:90px;

height:90px;

border-radius:50%;

margin:auto;

margin-bottom:30px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,var(--gold),var(--gold-light));

color:#fff;

font-size:34px;

font-weight:700;

box-shadow:0 15px 35px rgba(200,161,75,.30);

}

.paso h3{

font-size:28px;

margin-bottom:18px;

font-family:'Playfair Display',serif;

color:var(--brown);

}

/*----INVITACIONES VIVAS™-----*/

.destacado{

padding:140px 0;

background:

linear-gradient(135deg,#4a2d1f,#2d1a12);

color:#fff;

}

.destacado .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.destacado span{

color:var(--gold-light);

letter-spacing:2px;

font-size:.9rem;

}

.destacado h2{

font-size:3.3rem;

font-family:'Playfair Display';

margin:25px 0;

}

.destacado p{

font-size:1.1rem;

margin-bottom:30px;

opacity:.9;

}

.destacado ul li{

margin-bottom:14px;

}

.imagen img{

border-radius:30px;

box-shadow:0 25px 60px rgba(0,0,0,.35);

}

/*----INTELIGENCIA ARTIFICIAL----*/

.ia{

padding:140px 0;

background:

linear-gradient(135deg,#fbf8f2,#ffffff);

}

.ia-box{

padding:80px;

border-radius:32px;

background:#fff;

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

text-align:center;

}

.ia-box span{

color:var(--gold);

letter-spacing:2px;

}

.ia-box h2{

font-size:3rem;

font-family:'Playfair Display';

margin:25px 0;

color:var(--brown);

}

.ia-box p{

max-width:760px;

margin:auto;

margin-bottom:40px;

font-size:1.1rem;

}

/*----GALERÍA-----*/

.galeria{

padding:140px 0;

background:#fff;

}

.galeria-grid{

display:grid;

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

gap:35px;

}

.demo{

height:320px;

border-radius:30px;

position:relative;

overflow:hidden;

cursor:pointer;

display:flex;

align-items:flex-end;

padding:35px;

font-family:'Playfair Display',serif;

font-size:2rem;

color:#fff;

transition:.45s;

background-size:cover;

background-position:center;

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

}

.demo:nth-child(1){

background-image:url("../img/demo-boda.jpg");

}

.demo:nth-child(2){

background-image:url("../img/demo-cumple.jpg");

}

.demo:nth-child(3){

background-image:url("../img/demo-xv.jpg");

}

.demo:nth-child(4){

background-image:url("../img/demo-corporativo.jpg");

}

.demo:nth-child(5){

background-image:url("../img/demo-graduacion.jpg");

}

.demo:nth-child(6){

background-image:url("../img/demo-baby.jpg");

}

.demo::before{

content:"";

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.70)

);

transition:.35s;

}

.demo:hover{

transform:scale(1.03);

}

.demo:hover::before{

background:

linear-gradient(

180deg,

rgba(200,161,75,.15),

rgba(0,0,0,.78)

);

}

.demo::after{

content:"Ver demostración";

position:absolute;

top:25px;

right:25px;

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

backdrop-filter:blur(12px);

padding:10px 18px;

border-radius:50px;

font-size:.82rem;

opacity:0;

transition:.35s;

}

.demo:hover::after{

opacity:1;

}

/*----Planes-----*/

.planes{

padding:50px 0;

background:var(--cream);

}

.planes-grid{

display:grid;

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

gap:20px;

align-items:center;

}

.plan{

background:#fff;

padding:50px;

border-radius:32px;

box-shadow:0 18px 45px rgba(0,0,0,.06);

transition:.35s;

position:relative;

overflow:hidden;

}

.plan:hover{

transform:translateY(-12px);

}

.plan-header{

margin-bottom:35px;

text-align:center;

}

.plan h3{

font-family:'Playfair Display';

font-size:2rem;

color:var(--brown);

}

.plan h4{

font-size:3rem;

margin-top:15px;

color:var(--gold);

}

.plan li{

padding:14px 0;

border-bottom:1px solid #eee;

}

.plan .btn-plan{

display:block;

margin-top:40px;

padding:18px;

text-align:center;

border-radius:100px;

background:#f6f2ea;

font-weight:600;

transition:.35s;

}

.plan .btn-plan:hover{

background:var(--gold);

color:#fff;

}

/*-----Premium----*/

.premium{

transform:scale(1.06);

border:3px solid var(--gold);

box-shadow:

0 35px 70px rgba(200,161,75,.22);

}

.etiqueta{

position:absolute;

top:20px;

right:-40px;

background:var(--gold);

padding:10px 60px;

transform:rotate(45deg);

font-size:.8rem;

font-weight:700;

color:#fff;

}

/*-----Testimonios----*/

.testimonios{

padding:140px 0;

background:#fff;

}

.testimonios-grid{

display:grid;

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

gap:35px;

}

.testimonio{

padding:45px;

border-radius:26px;

background:var(--cream);

transition:.35s;

}

.testimonio:hover{

transform:translateY(-10px);

box-shadow:var(--shadow);

}

.testimonio p{

font-style:italic;

font-size:1.08rem;

margin-bottom:30px;

}

.testimonio h4{

color:var(--gold);

}

/*----FAQ-----*/

.faq{

padding:140px 0;

}

.acordeon{

max-width:900px;

margin:auto;

}

.pregunta{

background:#fff;

border-radius:20px;

margin-bottom:18px;

padding:30px;

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

transition:.3s;

cursor:pointer;

}

.pregunta:hover{

transform:translateX(8px);

}

.pregunta h3{

font-size:1.2rem;

color:var(--brown);

margin-bottom:15px;

}

/*----CTA-----*/

.cta{
    position: relative;
    overflow: hidden;
    padding:170px 0;
    text-align:center;
    color:#fff;
}

.cta::before{
    content:"";
    position:absolute;
    inset:-20px;
    z-index:0;

    background:
        linear-gradient(
            135deg,
            rgba(8,8,8,.78) 0%,
            rgba(20,20,20,.58) 38%,
            rgba(10,10,10,.70) 68%,
            rgba(0,0,0,.85) 100%
        ),
        url("https://tusinvitaciones.online/img/AudiAtto.webp") center center / cover no-repeat;

    filter: blur(6px);
    transform: scale(1.08);
}

.cta::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0) 25%,
            rgba(0,0,0,.18) 60%,
            rgba(0,0,0,.55) 100%
        );
}

.cta > *{
    position:relative;
    z-index:2;
}

.cta h2{

font-size:3.8rem;

font-family:'Playfair Display';

margin-bottom:30px;

}

.cta p{

font-size:1.2rem;

max-width:750px;

margin:auto;

margin-bottom:45px;

opacity:.9;

}

.btn-grande{

padding:22px 50px;

font-size:1.1rem;

}

/*----Footer-----*/

footer{

padding:90px 0 30px;

background:#201510;

color:#ddd;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

margin-bottom:60px;

}

.footer-logo{

width:220px;

margin-bottom:25px;

}

footer h4{

margin-bottom:25px;

color:var(--gold-light);

}

footer li{

margin-bottom:12px;

}

footer a{

transition:.3s;

}

footer a:hover{

color:var(--gold-light);

padding-left:8px;

}

.copyright{

border-top:1px solid rgba(255,255,255,.08);

padding-top:30px;

text-align:center;

font-size:.9rem;

opacity:.7;

}

/*---WhatsApp------*/

.whatsapp{

position:fixed;

right:30px;

bottom:30px;

width:68px;

height:68px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 15px 40px rgba(37,211,102,.35);

z-index:999;

transition:.35s;

}

.whatsapp:hover{

transform:scale(1.12) rotate(8deg);

}

.whatsapp img{

width:34px;

}

/*----Animaciones JS---*/

.card-evento,
.servicio,
.plan,
.demo,
.paso,
.testimonio,
.pregunta{

opacity:0;

transform:translateY(60px);

transition:.8s;

}

.visible{

opacity:1;

transform:none;

}

/*---FAQ js---*/

.pregunta p{

display:none;

margin-top:20px;

}

.pregunta.abierta p{

display:block;

animation:fade .4s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(-8px);

}

to{

opacity:1;

transform:none;

}

}

/*------Boton flot------*/

.toTop{

position:fixed;

left:30px;

bottom:30px;

width:58px;

height:58px;

border-radius:50%;

background:var(--gold);

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

color:#fff;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

box-shadow:0 12px 35px rgba(0,0,0,.2);

z-index:999;

}

.toTop.show{

opacity:1;

visibility:visible;

}

.toTop:hover{

transform:translateY(-5px);

}

#loader{
position:fixed;
inset:0;
background:#fbf8f2;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:.30s;
}

.loader-logo{
  width:680px;        /* antes: 480px */
  max-width:80vw;      /* evita que se corte en pantallas angostas */
  animation:zoom 1s infinite alternate;
}

.loader-logo img{
  width:100%;          /* fuerza a la imagen a llenar el contenedor */
  height:auto;
}

.icono img{
  width:120px;
  height:120px;
  object-fit:contain;
  margin:0 auto;
}