cta/*====================================================

 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;cta
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;
text-align: center;
}


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

header{
    position:fixed;
    top:20px;
    left:20px;
    right:20px;
    width:auto;
    z-index:999;
    display:flex;
    align-items:center;
    padding:9px 24px;
    background:rgba(255,255,255,0.3);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:2px solid var(--gold);
    border-radius:30px;
    box-shadow:0 2px 12px rgba(46,38,32,0.06);
    transition:.3s;
}

header.scrolled{
    background:rgba(255,255,255,0.3);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 6px 20px rgba(46,38,32,0.10);
}

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

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

.logo img{
    height:64px;
    width:auto;
    display:block;
}




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 var(--gold);
color:var(--gold);
background:transparent;
transition:.35s;
}

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

.btn-primario{
padding:6px 9px;
border-radius:100px;
border:2px solid var(--brown);
color:var(--brown);
background:var(--gold);
transition:.35s;
}

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


.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;
font-size:12px;
transition:.35s;
box-shadow:0 10px 10px rgba(200,161,75,.35);
margin-top:10px;
}

.btn-eventos:hover {
  background-color: var(--gold, #8b5a2b);transform: translateY(-4px) scale(1.02);filter: brightness(1.08);
}


/*----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:70px 0;
    text-align: center;
}

.eventos .titulo{
    margin-bottom:36px;
}

.grid-eventos{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    align-items:start;
}

@media (max-width:1100px){
    .grid-eventos{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:700px){
    .grid-eventos{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:460px){
    .grid-eventos{ grid-template-columns:1fr; }
}

.card-evento{
    background:#fff;
    border-radius:20px;
    padding:26px 20px;
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
    transition:.4s;
    display: inline-flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.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;
}

/* Iconos compactos solo para las tarjetas de Eventos */
.card-evento .icono{
    margin-bottom:10px;
}

.card-evento .icono img{
    width:64px;
    height:64px;
    object-fit:contain;
}

.card-evento h3{
    margin-bottom:6px;
    font-size:1.15rem;
}

.card-evento p{
    margin-bottom:14px;
    font-size:.92rem;
    opacity:.8;
}

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

.servicios{

padding:70px 0;

background:#fff;

}

.servicios .titulo{

margin-bottom:36px;

}

.servicios-grid{

display:grid;

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

gap:16px;

}

@media (max-width:1100px){
.servicios-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:700px){
.servicios-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:460px){
.servicios-grid{ grid-template-columns:1fr; }
}

.servicio{

background:var(--cream);

padding:20px 14px;

border-radius:16px;

transition:.35s;

cursor:pointer;

border:1px solid transparent;

text-align:center;

}

.servicio:hover{

transform:translateY(-8px);

background:#fff;

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

box-shadow:var(--shadow);

}

.servicio .icono{

font-size:42px;

margin-bottom:8px;

}

.servicio .icono img{

width:46px;

height:46px;

object-fit:contain;

margin:0 auto;

}

.servicio h3{

margin-bottom:5px;

font-size:.95rem;


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:60px 0;
background:
linear-gradient(135deg,#4a2d1f,#2d1a12);
color:#fff;
}

.destacado .container{

display:grid;

grid-template-columns:7fr 3fr;

gap:60px;

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;

}

/* =========================================================
   TUSINVITACIONES.ONLINE
   TESTIMONIOS - CARRUSEL
   ========================================================= */

.testimonios {
    position: relative;
    width: 100%;
    padding: 90px 0;
    overflow: hidden;
    color: #fff;

    /* Fondo oscuro degradado */
    background:
        radial-gradient(circle at 15% 20%, rgba(180, 0, 113, .20), transparent 32%),
        radial-gradient(circle at 85% 75%, rgba(228, 0, 58, .16), transparent 35%),
        linear-gradient(135deg, #100c18 0%, #1a111f 45%, #0b0a10 100%);
}

/* Textura granulada sutil */
.testimonios::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .13;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
}

.testimonios-container {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.testimonios-titulo {
    text-align: center;
    margin-bottom: 42px;
}

.testimonios-titulo span {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .72;
}

.testimonios-titulo h2 {
    margin: 0;
    color: #fff;
}

/* CONTENEDOR DEL CARRUSEL */
.testimonios-slider {
    position: relative;
    width: 100%;
}

/* VENTANA */
.testimonios-viewport {
    width: 100%;
    overflow: hidden;
    padding: 8px 0 22px;
}

/* PISTA */
.testimonios-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    width: max-content;
    transform: translate3d(0, 0, 0);
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

/* TARJETA */
.testimonio {
    flex: 0 0 260px;
    width: 260px;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.045)
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.testimonio-foto-link {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    text-decoration: none;
}

.testimonio-foto {
    display: block;
    width: 100%;
    height: 185px;
    object-fit: cover;
    background: rgba(255,255,255,.06);
    transition: transform .4s ease;
}

.testimonio-foto-link:hover .testimonio-foto {
    transform: scale(1.04);
}

.testimonio-estrellas {
    margin: 15px 0 10px;
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 1;
    color: #ffd166;
}

.testimonio p {
    margin: 0 0 16px;
    color: rgba(255,255,255,.88);
    font-size: 15px;
    line-height: 1.65;
}

.testimonio h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 16px;
}

.testimonio-meta {
    display: block;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    line-height: 1.5;
}

/* FLECHAS */
.testimonios-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;

    width: 48px;
    height: 48px;

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

    padding: 0;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;

    color: #fff;
    background: rgba(15,10,20,.20);

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

    cursor: pointer;
    transform: translateY(-50%);

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease;
}

.testimonios-arrow span {
    display: block;
    margin-top: -4px;
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
}

.testimonios-prev {
    left: -24px;
}

.testimonios-next {
    right: -24px;
}

.testimonios-arrow:hover {
    background: rgba(180,0,113,.92);
    border-color: rgba(255,255,255,.45);
    transform: translateY(-50%) scale(1.08);
}

.testimonios-arrow:active {
    transform: translateY(-50%) scale(.96);
}

/* Evita que el texto/selección interfiera con el arrastre */
.testimonios-viewport {
    user-select: none;
    -webkit-user-select: none;
}

/* TABLET */
@media (max-width: 1050px) {

    .testimonios-prev {
        left: 8px;
    }

    .testimonios-next {
        right: 8px;
    }

}

/* MÓVIL */
@media (min-width: 1024px) {

    .testimonios-viewport {
        overflow: hidden;
    }

    .testimonios-track {
        width: 100%;
        gap: 24px;
    }

    .testimonio {
        flex: 0 0 calc(25% - 18px);
        width: calc(25% - 18px);
        padding: 14px;
    }

    .testimonio-foto {
        height: 160px;
    }

    .testimonio p {
        font-size: 13px;
        line-height: 1.55;
    }

    .testimonio h4 {
        font-size: 14px;
    }

    .testimonio-estrellas {
        font-size: 14px;
        margin: 10px 0 8px;
    }

    .testimonio-meta {
        font-size: 11px;
    }
}


/* DESKTOP — 4 tarjetas exactas, sin partidos */
@media (min-width: 1024px) {

    .testimonios-viewport {
        overflow: hidden;
    }

    .testimonios-track {
        width: max-content;
        gap: 24px;
    }

    .testimonio {
        flex: 0 0 282px;
        width: 282px;
        padding: 14px;
    }

    .testimonio-foto {
        height: 160px;
    }

    .testimonio p {
        font-size: 13px;
        line-height: 1.55;
    }

    .testimonio h4 {
        font-size: 14px;
    }

    .testimonio-estrellas {
        font-size: 14px;
        margin: 10px 0 8px;
    }

    .testimonio-meta {
        font-size: 11px;
    }
}


/*----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:70px 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:3rem;
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;
font-size:11px;
}

.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);
font-size:12px;
}

footer p,
footer li,
footer a{
font-size:14px;
line-height:1.5;
}

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,
.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;
}

/* --- SECCIÓN: EVENT PLANNERS CERTIFICADOS --- */

.planners-section{
  padding:80px 0;
  background:#FAF7F2;
}
.planners-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 28px;
}
.planners-intro{
  text-align:center;
  max-width:720px;
  margin:0 auto 56px;
}
.planners-intro h2{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:500;
  color:#2C1810;
  margin:0 0 18px;
  line-height:1.15;
}
.planners-intro h2 strong{
  color:#B85C6E;
  font-weight:600;
}
.planners-intro p{
  font-family:'Jost', sans-serif;
  font-size:17px;
  color:#6B5344;
  font-weight:300;
  line-height:1.7;
  margin:0;
}

.planners-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
@media (max-width:960px){ .planners-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .planners-grid{ grid-template-columns:1fr; } }

@media (max-width:520px){
  .planner-photo{
    height:200px;
  }
}

.planner-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(44,24,16,0.10);
  box-shadow:0 4px 20px rgba(44,24,16,0.06);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  display:flex;
  flex-direction:column;
}
.planner-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(44,24,16,0.10);
}
.planner-photo{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
.planner-body{
  padding:24px 22px 26px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.planner-name{
  font-family:'Cormorant Garamond', serif;
  font-size:22px;
  font-weight:600;
  color:#2C1810;
  margin:0 0 4px;
}

.planner-title{
  font-family:'Jost', sans-serif;
  font-size:11px;
  font-weight:500;
  color:#B85C6E;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:0 0 6px;
}

.planner-city{
  font-family:'Jost', sans-serif;
  font-size:16px;
  font-weight:600;
  color:#ba1c3b;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:0 0 6px;
}

.planner-info{
  font-family:'Jost', sans-serif;
  font-size:14px;
  font-weight:800;
  color:#B85C6E;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:0 0 12px;
}

.planner-phone{
  font-family:'Jost', sans-serif;
  font-size:14px;
  color:#6B5344;
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:6px;
}
.planner-phone svg{
  width:14px;
  height:14px;
  max-width:14px;
  max-height:14px;
  flex:none;
  color:#C9A227;
}
.planner-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:13px 16px;
  background:#25D366;
  color:#fff;
  border-radius:10px;
  font-family:'Jost', sans-serif;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  transition:background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  margin-top:auto;
}
.planner-btn svg{
  width:18px;
  height:18px;
  max-width:18px;
  max-height:18px;
  flex:none;
  fill:#fff;
}
.planner-btn:hover{
  background:#1ebe5a;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(37,211,102,0.30);
}


/* ═══════════════════════════════════════════════════════════════ */
/*  SHOWCASE — CSS LIMPIO (sin padding hardcodeado)              */
/*  El padding se calcula vía JS según el ancho real del stage   */
/* ═══════════════════════════════════════════════════════════════ */

.showcase-section {
  position: relative;
  padding: 5rem 0 3rem;
  background: linear-gradient(180deg, #f5f0e8 0%, #ffffff 40%, #f5f0e8 100%);
  overflow: hidden;
}

/* ─── Header ─── */
.showcase-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 0.75rem;
  padding: 0 0.5rem;
}

.showcase-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #a08450;
  margin-bottom: 0.5rem;
}

.showcase-header h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  line-height: 1.05;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.showcase-line1 {
  display: block;
  color: #e6dada;
  font-size: clamp(1.8rem, 4vw, 1.2rem);
}

.showcase-line2 {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 600;
  background: linear-gradient(135deg, #c9a96e, #a08450);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 0.25rem;
}

.showcase-desc {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.875rem, 1.5vw, 1.1rem);
  color: #666;
  line-height: 1.2;
  max-width: 480px;
  margin: 0.2rem auto 0;
}

/* ─── Stage ─── */
.showcase-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 3D solo en desktop */
.showcase-perspective {
  width: 100%;
}

.showcase-rotate {
  width: 100%;
}

@media (min-width: 768px) {
  .showcase-perspective {
    perspective: 1400px;
    perspective-origin: 50% 50%;
  }
  .showcase-rotate {
    transform-origin: 50% 100%;
    transform: translateY(-125px) scale(0.9) rotateX(12deg);
    transition: transform 0.6s ease-out;
  }
  /* El translateY de arriba sube visualmente el contenido pero no
     reduce el alto real del contenedor (los transforms no afectan
     el layout). Compensamos con un margen negativo para eliminar
     el espacio vacío que queda antes de los dots. */
  .showcase-stage {
    margin-bottom: -125px;
  }
}

/* ─── Track ─── */
.showcase-track {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  /* padding-left/right se inyecta vía JS */
}

.showcase-track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .showcase-track {
    gap: 2rem;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
  }
}

/* ─── Item ─── */
.showcase-item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
  animation: showcaseFadeIn 0.7s ease forwards;
}

.showcase-item:nth-child(1) { animation-delay: 0.1s; }
.showcase-item:nth-child(2) { animation-delay: 0.2s; }
.showcase-item:nth-child(3) { animation-delay: 0.3s; }
.showcase-item:nth-child(4) { animation-delay: 0.4s; }
.showcase-item:nth-child(5) { animation-delay: 0.5s; }
.showcase-item:nth-child(6) { animation-delay: 0.6s; }

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




/* ============================================================
   SHOWCASE — AJUSTES VISUALES V2
   Fondo oscuro/granate. Sin halos laterales.
   Los controles no alteran la geometría del carrusel.
   ============================================================ */

.showcase-section {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #09090c 0%,
            #171013 48%,
            #0a090c 100%
        );
}

/* Textura granulada */
.showcase-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    opacity: .09;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.72'/%3E%3C/svg%3E");

    background-repeat: repeat;
    background-size: 180px 180px;
}

/* Evitar los halos/degradados claros laterales anteriores */
.showcase-mask {
    display: none !important;
}

/* El contenido permanece por encima de la textura */
.showcase-section > * {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
   FLECHAS
   ------------------------------------------------------------ */

.showcase-stage {
    position: relative;
}

.showcase-arrow {
    position: absolute;
    top: 50%;
    z-index: 30;

    width: 50px;
    height: 50px;

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

    margin: 0;
    padding: 0;

    border: 1px solid rgba(210, 118, 135, .65);
    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            rgba(104, 28, 45, .96),
            rgba(61, 20, 29, .96)
        );

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .42),
        0 0 0 1px rgba(255,255,255,.04) inset;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.showcase-arrow span {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
    margin-top: -4px;
}

.showcase-arrow:hover {
    background:
        linear-gradient(
            145deg,
            #8b3449,
            #641f30
        );

    border-color: rgba(255, 205, 214, .85);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .5),
        0 0 18px rgba(139, 52, 73, .25);

    transform: translateY(-50%) scale(1.06);
}

.showcase-arrow:active {
    transform: translateY(-50%) scale(.96);
}

.showcase-arrow:focus-visible {
    outline: 2px solid #d98a99;
    outline-offset: 3px;
}

/* Los ponemos pegados al borde útil del escenario,
   no sobre las pantallas. */
.showcase-arrow-prev {
    left: 12px;
}

.showcase-arrow-next {
    right: 12px;
}

/* ------------------------------------------------------------
   DESTACAR LOS BORDES DE LOS PHONES
   ------------------------------------------------------------ */

.phone-frame {
    border-color: rgba(185, 86, 104, .70) !important;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .45),
        0 0 0 1px rgba(185, 86, 104, .18),
        inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Si el proyecto utiliza pseudo-elementos para el borde */
.phone-frame::before,
.phone-frame::after {
    border-color: rgba(185, 86, 104, .45) !important;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .showcase-arrow {
        width: 44px;
        height: 44px;
    }

    .showcase-arrow span {
        font-size: 32px;
    }

    .showcase-arrow-prev {
        left: 6px;
    }

    .showcase-arrow-next {
        right: 6px;
    }
}

@media (max-width: 600px) {

    .showcase-arrow {
        width: 40px;
        height: 40px;
    }

    .showcase-arrow span {
        font-size: 29px;
    }

    .showcase-arrow-prev {
        left: 4px;
    }

    .showcase-arrow-next {
        right: 4px;
    }
}


/* ─── Phone Frame ─── */
.phone-frame {
  position: relative;
  width: 260px;
  height: 520px;
  background: #111827;
  border-radius: 2.5rem;
  border: 8px solid #111827;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.35);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.phone-frame:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -10px rgba(0,0,0,0.45);
}

@media (min-width: 768px) {
  .phone-frame {
    width: 280px;
    height: 560px;
    border-radius: 2.75rem;
    border: 10px solid #111827;
  }
}

/* Ya existe este bloque, agrega estas reglas dentro o justo después */
@media (min-width: 1024px) {
  .showcase-item {
    /* 4 phones exactos por pantalla: (100% - 3 gaps de 2rem) / 4 */
    width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    scroll-snap-align: start;
  }

  .showcase-track {
    /* Sin padding lateral en desktop: los 4 phones llenan el track */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* scroll-snap por inicio, no por centro */
    scroll-snap-type: x mandatory;
  }

  .phone-frame {
    /* Frame ocupa todo el ancho del item */
    width: 100%;
  }
}

/* Notch */
.phone-notch {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 20px;
  background: #000;
  border-radius: 999px;
  z-index: 30;
}

/* Botones laterales */
.phone-side {
  position: absolute;
  width: 3px;
  background: #374151;
  border-radius: 2px;
  z-index: 20;
}

.phone-side-left {
  left: -11px;
  top: 55px;
  height: 20px;
}

.phone-side-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 32px;
  width: 100%;
  height: 32px;
  background: #374151;
  border-radius: 2px;
}

.phone-side-right {
  right: -11px;
  top: 100px;
  height: 45px;
}

/* ─── Screen ─── */
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.75rem;
  overflow: hidden;
  background: #fff;
}

@media (min-width: 768px) {
  .phone-screen {
    border-radius: 2rem;
  }
}

.phone-screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 430px;
  height: 891px;
  border: 0;
  transform: scale(0.60) translateZ(0);
  transform-origin: top left;
  will-change: transform;
}

@media (min-width: 768px) {
  .phone-screen iframe {
    transform: scale(0.65) translateZ(0);
  }
}

@media (min-width: 1024px) {
  .phone-screen iframe {
    transform: scale(0.697) translateZ(0);
  }
}

/* Loader */
.phone-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf8f5;
  z-index: 5;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.phone-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.phone-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid #c9a96e;
  border-top-color: transparent;
  border-radius: 50%;
  animation: phoneSpin 0.8s linear infinite;
}

@keyframes phoneSpin {
  to { transform: rotate(360deg); }
}

/* Placeholder */
.phone-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-placeholder-text {
  text-align: center;
  padding: 1.5rem;
}

.ph-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: rgba(0,0,0,0.75);
  margin-bottom: 0.25rem;
}

.ph-hint {
  font-family: 'Poppins', sans-serif;
  font-size: 0.6rem;
  color: rgba(0,0,0,0.45);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* ─── Meta ─── */
.showcase-meta {
  margin-top: 1.25rem;
  text-align: center;
  opacity: 0;
  transform: translateY(15px);
  animation: showcaseFadeIn 0.6s ease forwards;
  animation-delay: 0.3s;
}

.showcase-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: #e6dada;
  margin-bottom: 0.1rem;
}

.showcase-type {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  color: #a0a0a0;
  font-weight: 500;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.showcase-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a08450;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  transition: all 0.3s ease;
  min-height: 44px;
}

.showcase-link:hover {
  color: #c9a96e;
  background: rgba(201, 169, 110, 0.08);
}

.showcase-link svg {
  transition: transform 0.3s ease;
}

.showcase-link:hover svg {
  transform: translate(2px, -2px);
}

/* ─── Máscaras laterales ─── */
.showcase-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 10;
}

.showcase-mask-left {
  left: 0;
  background: linear-gradient(90deg, #f5f0e8 0%, transparent 100%);
}

.showcase-mask-right {
  right: 0;
  background: linear-gradient(-90deg, #f5f0e8 0%, transparent 100%);
}

@media (min-width: 768px) {
  .showcase-mask { width: 100px; }
}

@media (min-width: 1024px) {
  .showcase-mask { width: 140px; }
}

/* ─── Hint ─── */
.showcase-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  color: #a0a0a0;
}

.showcase-swipe-hint span {
  font-family: 'Poppins', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
}

.showcase-swipe-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a96e, transparent);
  opacity: 0.6;
}

/* ─── Dots ─── */
.showcase-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin-top: 0.75rem;
}

.showcase-dots button {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.showcase-dots button:active {
  transform: scale(0.9);
}

.showcase-dots button span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #c9a96e;
  opacity: 0.2;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 8px;
}

.showcase-dots button[aria-selected="true"] span {
  width: 28px;
  opacity: 1;
  background: linear-gradient(90deg, #c9a96e, #a08450);
}

/* ─── Scroll Progress (opcional) ─── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, #c9a96e, #a08450, #e8d5b0);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

.boton-llamativo {
  display: inline-flex;margin: 12px 0 0;align-items:center;justify-content:center;
  background: linear-gradient(145deg, #D9B44A 0%, #C99A24 25%, #A8750D 100%);
  color: #fffce3; padding: 16px 44px; border-radius: 50px;
  font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700;
  letter-spacing: 0.5px; border: 2px solid rgba(255,255,255,0.15);
  transition: all 0.35s ease; cursor: pointer;
  box-shadow:
    0 8px 24px rgba(191,135,0,0.45),
    0 2px 4px rgba(255,255,255,0.25) inset,
    0 -3px 6px rgba(0,0,0,0.2) inset;
}

.boton-llamativo:hover {
    box-shadow:
        0 16px 32px rgba(180, 135, 45, 0.40),
        inset 0 1px 0 rgba(255,255,255,0.60);
    background: linear-gradient(145deg,#e0b93d 10%,#D4A52B 60%,#B98212 100%); color:#fcf097; border-color:#ffea4f;transform: translateY(-4px) scale(1.02);filter: brightness(1.08);
}

/* ============================================================
   SHOWCASE — CORRECCIONES FINALES
   ============================================================ */

/* Mantener ocultas las máscaras laterales */
.showcase-mask {
    display: none !important;
}

/* Borde granate REAL de los teléfonos.
   Debe ir después de la definición original de .phone-frame. */
.phone-frame {
    border-color: #b95668 !important;
    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        0 0 0 2px rgba(185,86,104,.35),
        inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* Mantener las flechas por encima del contenido */
.showcase-stage {
    position: relative;
}

.showcase-arrows {
    z-index: 100 !important;
    pointer-events: none;
}

.showcase-arrow {
    z-index: 101 !important;
    pointer-events: auto !important;
}
/* ============================================================
   MEJORA VISUAL — SECCIONES EVENTOS Y SERVICIOS
   Mismo criterio aplicado en Planes / Formulario:
   títulos más grandes, color propio por tarjeta ("frames"),
   botones tipo cta-btn. Los <img> de los íconos no se tocan.
   ============================================================ */

:root{
  --acc-1:var(--gold-light);
  --acc-2:var(--gold);
  --acc-3:#8b6b2f;
  --acc-tint:#fff8ed;
  --acc-shadow:rgba(139,107,47,.30);
}

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

.eventos .titulo h2,
.servicios .titulo h2{
  font-size:3.4rem;
  line-height:1.16;
  letter-spacing:-.01em;
  position:relative;
  display:inline-block;
  padding-bottom:20px;
}

.eventos .titulo h2::after,
.servicios .titulo h2::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:86px;
  height:4px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold),#8b6b2f);
}

.eventos .titulo span,
.servicios .titulo span{
  font-size:.86rem;
  letter-spacing:3px;
  padding:9px 22px;
  border:1px solid rgba(200,161,75,.35);
  background:linear-gradient(180deg,rgba(200,161,75,.14),rgba(200,161,75,.03));
}

.eventos .titulo p,
.servicios .titulo p{
  font-size:1.18rem;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- Paleta por tarjeta: EVENTOS (orden del HTML) ---------- */

.grid-eventos .card-evento:nth-child(1){ --acc-1:#e0aeab; --acc-2:#D08E8B; --acc-3:#a66360; --acc-tint:#fbeeed; --acc-shadow:rgba(166,99,96,.32); }
.grid-eventos .card-evento:nth-child(2){ --acc-1:#e8cb86; --acc-2:#c8a14b; --acc-3:#8b6b2f; --acc-tint:#fff8ed; --acc-shadow:rgba(139,107,47,.30); }
.grid-eventos .card-evento:nth-child(3){ --acc-1:#eab08f; --acc-2:#d3835a; --acc-3:#a85a37; --acc-tint:#fdf0e7; --acc-shadow:rgba(168,90,55,.30); }
.grid-eventos .card-evento:nth-child(4){ --acc-1:#c9d9ec; --acc-2:#8fa8cf; --acc-3:#5f7ba8; --acc-tint:#eef3fa; --acc-shadow:rgba(95,123,168,.28); }
.grid-eventos .card-evento:nth-child(5){ --acc-1:#c3cdec; --acc-2:#8c9bd6; --acc-3:#5567ab; --acc-tint:#f0f2fb; --acc-shadow:rgba(85,103,171,.28); }
.grid-eventos .card-evento:nth-child(6){ --acc-1:#e6c1d3; --acc-2:#c37a9b; --acc-3:#954f72; --acc-tint:#fbeff5; --acc-shadow:rgba(149,79,114,.28); }
.grid-eventos .card-evento:nth-child(7){ --acc-1:#a9d8cd; --acc-2:#5fa896; --acc-3:#3a7566; --acc-tint:#eaf6f2; --acc-shadow:rgba(58,117,102,.28); }
.grid-eventos .card-evento:nth-child(8){ --acc-1:#d3bfe9; --acc-2:#a97ac9; --acc-3:#7a4f9e; --acc-tint:#f4eefa; --acc-shadow:rgba(122,79,158,.28); }
.grid-eventos .card-evento:nth-child(9){ --acc-1:#b7c7da; --acc-2:#6a89ab; --acc-3:#3f5b7d; --acc-tint:#eef2f6; --acc-shadow:rgba(63,91,125,.28); }

/* ---------- Paleta por tarjeta: SERVICIOS (orden del HTML) ---------- */

.servicios-grid .servicio:nth-child(1){ --acc-1:#a9d8cd; --acc-2:#5fa896; --acc-3:#3a7566; --acc-tint:#eaf6f2; --acc-shadow:rgba(58,117,102,.26); }
.servicios-grid .servicio:nth-child(2){ --acc-1:#e8cb86; --acc-2:#c8a14b; --acc-3:#8b6b2f; --acc-tint:#fff8ed; --acc-shadow:rgba(139,107,47,.28); }
.servicios-grid .servicio:nth-child(3){ --acc-1:#d3bfe9; --acc-2:#a97ac9; --acc-3:#7a4f9e; --acc-tint:#f4eefa; --acc-shadow:rgba(122,79,158,.26); }
.servicios-grid .servicio:nth-child(4){ --acc-1:#e0aeab; --acc-2:#D08E8B; --acc-3:#a66360; --acc-tint:#fbeeed; --acc-shadow:rgba(166,99,96,.28); }
.servicios-grid .servicio:nth-child(5){ --acc-1:#dba7a9; --acc-2:#b4636a; --acc-3:#823c42; --acc-tint:#f9ecec; --acc-shadow:rgba(130,60,66,.26); }
.servicios-grid .servicio:nth-child(6){ --acc-1:#bcdcbb; --acc-2:#7ea77e; --acc-3:#4f7550; --acc-tint:#eef7ee; --acc-shadow:rgba(79,117,80,.26); }
.servicios-grid .servicio:nth-child(7){ --acc-1:#c9d9ec; --acc-2:#6a89ab; --acc-3:#3f5b7d; --acc-tint:#eef3fa; --acc-shadow:rgba(63,91,125,.26); }
.servicios-grid .servicio:nth-child(8){ --acc-1:#c3cdec; --acc-2:#8c9bd6; --acc-3:#5567ab; --acc-tint:#f0f2fb; --acc-shadow:rgba(85,103,171,.26); }
.servicios-grid .servicio:nth-child(9){ --acc-1:#eab08f; --acc-2:#d3835a; --acc-3:#a85a37; --acc-tint:#fdf0e7; --acc-shadow:rgba(168,90,55,.26); }
.servicios-grid .servicio:nth-child(10){ --acc-1:#a8cfe0; --acc-2:#5a94b8; --acc-3:#376786; --acc-tint:#eaf4f8; --acc-shadow:rgba(55,103,134,.26); }
.servicios-grid .servicio:nth-child(11){ --acc-1:#bcd4e8; --acc-2:#7da8c9; --acc-3:#4f7896; --acc-tint:#eef5fa; --acc-shadow:rgba(79,120,150,.26); }
.servicios-grid .servicio:nth-child(12){ --acc-1:#ddcba7; --acc-2:#b8945a; --acc-3:#8a6a37; --acc-tint:#f8f1e4; --acc-shadow:rgba(138,106,55,.26); }

/* ---------- Tarjetas de Eventos ---------- */

.grid-eventos .card-evento{
  border-radius:22px;
  padding:36px 24px 28px;
  box-shadow:0 10px 28px rgba(74,45,31,.06);
}

.grid-eventos .card-evento::before{
  height:6px;
  background:linear-gradient(90deg,var(--acc-1),var(--acc-2) 50%,var(--acc-3));
  transform:scaleX(1);
  opacity:.85;
}

.grid-eventos .card-evento::after{
  content:"";
  position:absolute;
  top:-70px;
  right:-70px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle,var(--acc-1) 0%,transparent 70%);
  opacity:.30;
  pointer-events:none;
  transition:opacity .4s ease,transform .4s ease;
}

.grid-eventos .card-evento:hover{
  box-shadow:0 22px 46px var(--acc-shadow),0 20px 45px rgba(0,0,0,.08);
  border-color:var(--acc-2);
}

.grid-eventos .card-evento:hover::before{
  opacity:1;
}

.grid-eventos .card-evento:hover::after{
  opacity:.5;
  transform:scale(1.15);
}

.grid-eventos .card-evento .icono{
  position:relative;
  z-index:1;
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(160deg,var(--acc-tint),#ffffff);
  border:1px solid var(--acc-1);
  box-shadow:0 8px 20px var(--acc-shadow),0 1px 0 rgba(255,255,255,.6) inset;
  margin:0 auto 16px;
  transition:transform .35s ease;
}

.grid-eventos .card-evento:hover .icono{
  transform:scale(1.08) rotate(-4deg);
}

.grid-eventos .card-evento h3{
  position:relative;
  z-index:1;
  font-family:'Playfair Display',serif;
  font-size:1.5rem;
  color:var(--brown-dark);
  margin-bottom:8px;
}

.grid-eventos .card-evento p{
  position:relative;
  z-index:1;
  font-size:.95rem;
  min-height:40px;
}

/* ---------- Botón "Más información" (y reutilizado en Tips) ---------- */

.btn-eventos{
  position:relative;
  z-index:1;
  padding:14px 30px;
  background:linear-gradient(145deg,var(--acc-1),var(--acc-2) 50%,var(--acc-3));
  border:2px solid rgba(255,255,255,.2);
  border-radius:50px;
  font-family:'Poppins',sans-serif;
  font-size:13px;
  gap:9px;
  box-shadow:
    0 8px 20px var(--acc-shadow),
    0 2px 4px rgba(255,255,255,.25) inset,
    0 -3px 6px rgba(0,0,0,.15) inset;
}

.btn-eventos::after{
  content:"→";
  transition:transform .3s ease;
}

.btn-eventos:hover{
  background:transparent;
  color:var(--acc-3);
  border-color:var(--acc-2);
  transform:translateY(-3px) scale(1);
  filter:none;
  box-shadow:0 14px 30px var(--acc-shadow);
}

.btn-eventos:hover::after{
  transform:translateX(3px);
}

/* ---------- Tarjetas de Servicios ---------- */

.servicios-grid .servicio{
  position:relative;
  border-radius:20px;
  padding:30px 18px 26px;
  overflow:hidden;
}

.servicios-grid .servicio::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--acc-1),var(--acc-2) 50%,var(--acc-3));
  opacity:.7;
  transition:opacity .3s ease;
}

.servicios-grid .servicio:hover::before{
  opacity:1;
}

.servicios-grid .servicio:hover{
  border-color:var(--acc-2);
  box-shadow:0 16px 34px var(--acc-shadow);
}

.servicios-grid .servicio .icono{
  width:76px;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  border-radius:50%;
  background:linear-gradient(160deg,var(--acc-tint),#ffffff);
  border:1px solid var(--acc-1);
  box-shadow:0 6px 16px var(--acc-shadow);
  transition:transform .3s ease;
}

.servicios-grid .servicio:hover .icono{
  transform:scale(1.08) rotate(-4deg);
}

.servicios-grid .servicio h3{
  font-family:'Playfair Display',serif;
  font-size:1.08rem;
}

.servicios-grid .servicio p{
  font-size:.86rem;
}

@media (max-width:600px){
  .eventos .titulo h2,
  .servicios .titulo h2{
    font-size:2.2rem;
  }
  .grid-eventos .card-evento .icono{
    width:88px;
    height:88px;
  }
}

/*====================================================
  AJUSTE COMPACTO — SECCIÓN EVENTOS
  Solo desktop. Tablet y móvil conservan sus medidas.
====================================================*/

@media (min-width:1101px){

  .eventos{
    padding:38px 0 42px;
  }

  .eventos .titulo{
    margin-bottom:22px;
  }

  .eventos .titulo span{
    padding:6px 16px;
    font-size:.76rem;
    margin-bottom:10px;
  }

  .eventos .titulo h2{
    font-size:2.7rem;
    line-height:1.08;
    padding-bottom:13px;
    margin-bottom:10px;
  }

  .eventos .titulo p{
    font-size:.98rem;
    line-height:1.45;
  }

  .grid-eventos{
    grid-template-columns:repeat(5,1fr);
    gap:10px;
  }

  .grid-eventos .card-evento{
    border-radius:16px;
    padding:17px 10px 15px;
    min-height:0;
  }

  .grid-eventos .card-evento .icono{
    width:70px;
    height:70px;
    margin:0 auto 8px;
  }

  .grid-eventos .card-evento .icono img{
    width:50px;
    height:50px;
  }

  .grid-eventos .card-evento h3{
    font-size:1.15rem;
    line-height:1.15;
    margin-bottom:5px;
  }

  .grid-eventos .card-evento p{
    font-size:.78rem;
    line-height:1.35;
    min-height:32px;
    margin-bottom:7px;
  }

  .grid-eventos .btn-eventos{
    padding:8px 14px;
    font-size:11px;
    gap:5px;
    box-shadow:0 5px 12px var(--acc-shadow);
  }

  .eventos > .container > .boton-llamativo{
    margin-top:14px;
    padding:11px 28px;
    font-size:14px;
  }
}

/*====================================================
  AJUSTE COMPACTO — SECCIÓN SERVICIOS
  Solo desktop. Tablet y móvil conservan sus medidas.
====================================================*/

@media (min-width:1101px){

  .servicios{
    padding:38px 0 42px;
  }

  .servicios .titulo{
    margin-bottom:22px;
  }

  .servicios .titulo span{
    padding:6px 16px;
    font-size:.76rem;
    margin-bottom:10px;
  }

  .servicios .titulo h2{
    font-size:2.7rem;
    line-height:1.08;
    padding-bottom:13px;
    margin-bottom:10px;
  }

  .servicios .titulo p{
    font-size:.98rem;
    line-height:1.45;
  }

  .servicios-grid{
    grid-template-columns:repeat(6,1fr);
    gap:10px;
  }

  .servicios-grid .servicio{
    border-radius:16px;
    padding:17px 10px 15px;
    min-height:0;
  }

  .servicios-grid .servicio .icono{
    width:64px;
    height:64px;
    margin:0 auto 8px;
  }

  .servicios-grid .servicio .icono img{
    width:40px;
    height:40px;
  }

  .servicios-grid .servicio h3{
    font-size:1rem;
    line-height:1.15;
    margin-bottom:5px;
  }

  .servicios-grid .servicio p{
    font-size:.76rem;
    line-height:1.35;
  }
}