/* ========================
HERO
======================== */

.hero{
position:relative;
padding:140px 0;
background:
radial-gradient(circle at 20% 20%, rgba(212,175,55,.15), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(212,175,55,.10), transparent 40%),
#0b0b0c;
overflow:hidden;
}

/* partículas de fondo */
.hero::before{
content:"";
position:absolute;
width:200%;height:200%;
top:-50%;left:-50%;
background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
background-size:50px 50px;
opacity:.12;
animation:particles 80s linear infinite;
pointer-events:none;
}

.hero::after{
content:"";
position:absolute;
top:0;left:0;
width:100%;height:100%;
background-image:radial-gradient(#d4af37 1px, transparent 1px);
background-size:70px 70px;
opacity:.08;
animation:heroParticles 50s linear infinite;
pointer-events:none;
}

@keyframes particles{
0%{transform:translate(0,0)}
100%{transform:translate(200px,200px)}
}

@keyframes heroParticles{
from{transform:translateY(0)}
to{transform:translateY(-200px)}
}

.hero-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:70px;
align-items:center;
position:relative;
z-index:1;
}

.hero-light{
position:absolute;
width:500px;height:500px;
background:radial-gradient(circle, rgba(212,175,55,.2), transparent 70%);
pointer-events:none;
mix-blend-mode:screen;
z-index:0;
transition:left .1s,top .1s;
}

/* ANIMACIONES ENTRADA */
.hero-left{
animation:heroFade 1.1s ease both;
transition:transform .6s ease;
}

.hero-right{
display:flex;
justify-content:center;
align-items:center;
animation:heroFadeRight 1.1s ease both;
transition:transform .6s ease;
}

@keyframes heroFade{
from{opacity:0;transform:translateY(50px);}
to{opacity:1;transform:translateY(0);}
}

@keyframes heroFadeRight{
from{opacity:0;transform:translateX(70px);}
to{opacity:1;transform:translateX(0);}
}

/* KICKER */
.kicker{
display:inline-flex;
align-items:center;
gap:8px;
font-size:13px;
color:#d4af37;
letter-spacing:.5px;
margin-bottom:18px;
background:rgba(212,175,55,.08);
padding:6px 14px;
border-radius:30px;
border:1px solid rgba(212,175,55,.2);
}

.k-dot{
width:6px;height:6px;
background:#d4af37;
border-radius:50%;
display:inline-block;
box-shadow:0 0 8px rgba(212,175,55,.8);
animation:dotPulse 2s infinite;
}

@keyframes dotPulse{
0%,100%{transform:scale(1);opacity:1;}
50%{transform:scale(1.5);opacity:.6;}
}

/* TÍTULO */
.title{
font-family:'Cinzel',serif;
font-size:50px;
line-height:1.18;
margin-bottom:20px;
}

.gold{
background:linear-gradient(90deg,#d4af37,#ffd86b);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 8px rgba(212,175,55,.35));
}

.lead{
color:#bdbdbd;
font-size:17px;
line-height:1.7;
margin-bottom:10px;
}

.cta{display:flex;gap:14px;margin-top:25px;flex-wrap:wrap;}

.meta{
display:flex;
gap:30px;
margin-top:28px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.06);
}

.meta-item span{font-size:11px;color:#888;letter-spacing:.3px;display:block;}
.meta-item b{font-size:15px;}

/* FRAME DERECHA */
.frame{
background:rgba(15,15,15,.85);
border:1px solid rgba(212,175,55,.15);
backdrop-filter:blur(14px);
border-radius:16px;
padding:45px 35px;
box-shadow:0 25px 70px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);
transition:.4s;
max-width:420px;
}

.frame:hover{
transform:translateY(-6px);
border-color:rgba(212,175,55,.3);
box-shadow:0 35px 80px rgba(0,0,0,.8);
}

.sigil img{
width:280px;
margin:0 auto 30px;
display:block;
filter:drop-shadow(0 0 15px rgba(212,175,55,.7)) drop-shadow(0 0 40px rgba(212,175,55,.4));
animation:logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-7px);}
}

.sigil{position:relative;}
.sigil::before{
content:"";
position:absolute;
width:160px;height:160px;
background:radial-gradient(circle,rgba(212,175,55,.3),transparent 70%);
top:-30px;left:50%;transform:translateX(-50%);
filter:blur(40px);
z-index:-1;
}

.panel-title{
font-size:12px;
color:#888;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:8px;
}

.panel-line{
width:40px;height:1px;
background:linear-gradient(90deg,#d4af37,transparent);
margin-bottom:18px;
}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px;}

.chip{
background:rgba(255,255,255,.04);
padding:7px 14px;
border-radius:30px;
border:1px solid rgba(255,255,255,.08);
font-size:12px;
transition:.3s;
cursor:default;
}

.chip:hover{
background:rgba(212,175,55,.15);
border-color:rgba(212,175,55,.4);
color:#d4af37;
transform:translateY(-2px);
}

.note{
font-size:12px;
color:#666;
border-top:1px solid rgba(255,255,255,.05);
padding-top:14px;
}

/* ========================
STATS
======================== */

.stats{
padding:65px 0;
border-bottom:1px solid rgba(255,255,255,.05);
}

.stats-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
text-align:center;
}

.stat{
background:rgba(20,20,20,.6);
padding:32px;
border-radius:14px;
border:1px solid rgba(255,255,255,.06);
transition:.3s;
}

.stat:hover{
transform:translateY(-6px);
border-color:rgba(212,175,55,.25);
box-shadow:0 20px 50px rgba(0,0,0,.6);
}

.num{
font-size:48px;
font-weight:800;
color:#d4af37;
display:block;
margin-bottom:8px;
font-family:'Cinzel',serif;
}

.stat p{color:#aaa;font-size:14px;}

/* ========================
SECCIONES
======================== */

.section{
padding:100px 0;
border-bottom:1px solid rgba(255,255,255,.04);
}

/* SIN background-attachment:fixed en móvil */
.section--edge{
background:
radial-gradient(circle at 80% 50%, rgba(212,175,55,.04), transparent 60%),
transparent;
}

.head{text-align:center;margin-bottom:50px;}

.head h2{
font-family:'Cinzel',serif;
font-size:38px;
margin-bottom:10px;
letter-spacing:.3px;
}

.head p{color:#aaa;font-size:16px;}

/* ========================
CARRUSEL
======================== */

.carousel{position:relative;margin-top:20px;}

.car-track{
display:flex;
overflow:hidden;
border-radius:14px;
box-shadow:0 20px 60px rgba(0,0,0,.7);
}

.car-slide{
min-width:100%;
position:relative;
transition:transform .55s cubic-bezier(.4,0,.2,1);
}

.car-slide img{
width:100%;
height:440px;
object-fit:cover;
display:block;
filter:brightness(.7);
}

.car-cap{
position:absolute;
bottom:0;left:0;right:0;
padding:40px 35px;
background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.4) 60%,transparent 100%);
}

.cap-title{font-size:22px;font-weight:700;color:#fff;margin-bottom:5px;}
.cap-sub{color:#ccc;font-size:15px;}

.car-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:46px;height:46px;
border-radius:50%;
background:rgba(0,0,0,.65);
border:1px solid rgba(255,255,255,.12);
color:white;
font-size:26px;
cursor:pointer;
transition:.3s;
display:flex;align-items:center;justify-content:center;
z-index:2;
}

.car-btn:hover{background:#d4af37;color:#111;border-color:#d4af37;}

.prev{left:16px;}
.next{right:16px;}

.car-dots{
display:flex;
justify-content:center;
gap:8px;
margin-top:18px;
}

.dot{
width:8px;height:8px;
border-radius:50%;
background:rgba(255,255,255,.2);
cursor:pointer;
transition:.3s;
}

.dot.is-active{
background:#d4af37;
width:24px;
border-radius:4px;
box-shadow:0 0 8px rgba(212,175,55,.6);
}

/* ========================
DOS COLUMNAS
======================== */

.two-col{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:60px;
align-items:start;
}

.two-col--reverse{
grid-template-columns:.8fr 1.2fr;
}

.two-col h2{
font-family:'Cinzel',serif;
font-size:34px;
margin-bottom:14px;
}

.lead2{color:#bbb;font-size:16px;line-height:1.7;margin-bottom:20px;}

/* TIMELINE */
.timeline{
margin-top:35px;
display:flex;flex-direction:column;gap:28px;
position:relative;
}

.timeline::before{
content:"";
position:absolute;
left:6px;top:0;bottom:0;
width:2px;
background:linear-gradient(#d4af37,transparent);
}

.t-item{
display:flex;gap:20px;
position:relative;padding-left:28px;
}

.t-dot{
width:14px;height:14px;
background:#d4af37;
border-radius:50%;
box-shadow:0 0 12px rgba(212,175,55,.8);
position:absolute;left:0;top:5px;
flex-shrink:0;
}

.t-title{font-weight:700;font-size:16px;margin-bottom:3px;}
.t-sub{color:#999;font-size:14px;}

/* HIGHLIGHT CARD */
.highlight-card{
background:rgba(20,20,20,.75);
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
padding:35px;
backdrop-filter:blur(10px);
position:sticky;top:120px;
transition:.4s;
}

.highlight-card:hover{
border-color:rgba(212,175,55,.3);
transform:translateY(-5px);
box-shadow:0 25px 60px rgba(0,0,0,.6);
}

.hc-top{
display:flex;flex-direction:column;gap:6px;
margin-bottom:20px;
padding-bottom:20px;
border-bottom:1px solid rgba(255,255,255,.06);
}

.tag{
font-size:11px;
color:#d4af37;
letter-spacing:1px;
text-transform:uppercase;
}

.big{font-family:'Cinzel',serif;font-size:32px;}

.hc-body{color:#bbb;font-size:15px;line-height:1.7;}
.hc-body b{color:#fff;}

/* BULLETS */
.bullets{display:flex;flex-direction:column;gap:12px;margin-top:25px;}

.b{
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
padding:13px 18px;
border-radius:9px;
transition:.3s;
font-size:15px;
}

.b:hover{border-color:#d4af37;transform:translateX(7px);}

/* VIDEO */
.video-card{
background:rgba(15,15,15,.9);
border-radius:14px;
padding:16px;
border:1px solid rgba(255,255,255,.06);
box-shadow:0 20px 60px rgba(0,0,0,.7);
transition:.4s;
}

.video-card:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.2);}

.video-card video{
width:100%;
border-radius:10px;
display:block;
}

/* ========================
GALERÍA
======================== */

.gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:10px;
}

.g{overflow:hidden;border-radius:12px;}

.g img{
width:100%;
height:320px;
object-fit:cover;
transition:.55s;
filter:brightness(.85);
display:block;
}

.g:hover img{transform:scale(1.07);filter:brightness(1);}

/* ========================
TESTIMONIOS
======================== */

.testimonios-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-top:10px;
}

.testimonio{
background:rgba(20,20,20,.7);
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
padding:30px;
backdrop-filter:blur(8px);
transition:.4s;
position:relative;
}

.testimonio::before{
content:'"';
font-family:'Cinzel',serif;
font-size:60px;
color:rgba(212,175,55,.15);
position:absolute;
top:12px;left:20px;
line-height:1;
}

.testimonio:hover{
border-color:rgba(212,175,55,.3);
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,.6);
}

.test-stars{
color:#d4af37;
font-size:16px;
margin-bottom:14px;
letter-spacing:2px;
}

.test-text{
color:#ccc;
font-size:15px;
line-height:1.7;
margin-bottom:16px;
font-style:italic;
}

.test-autor{
font-size:13px;
color:#d4af37;
font-weight:600;
}

/* ========================
INFO GRID / TARJETA 3D
======================== */

.info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.card-photo{perspective:1100px;}

.card-tabs{display:flex;gap:10px;margin-bottom:14px;}

.tab{
background:rgba(20,20,20,.7);
border:1px solid rgba(255,255,255,.08);
color:#ccc;
padding:8px 16px;
border-radius:8px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:.25s;
backdrop-filter:blur(6px);
}

.tab:hover{color:#fff;border-color:#d4af37;transform:translateY(-1px);}

.tab.is-active{
background:linear-gradient(135deg,#d4af37,#ffd86b);
color:#111;
border-color:#d4af37;
box-shadow:0 4px 14px rgba(212,175,55,.35);
}

.card-3d{
position:relative;
width:100%;height:360px;
transform-style:preserve-3d;
transition:transform .8s cubic-bezier(.4,0,.2,1);
}

.card-face{
position:absolute;
width:100%;height:100%;
backface-visibility:hidden;
border-radius:12px;
overflow:hidden;
}

.card-face img{width:100%;height:100%;object-fit:cover;}
.card-face.back{transform:rotateY(180deg);}

.card-face.info{
transform:rotateY(90deg);
background:rgba(15,15,15,.95);
display:flex;align-items:center;justify-content:center;
text-align:center;padding:30px;
border:1px solid rgba(255,255,255,.08);
}

.card-info h3{font-family:'Cinzel',serif;margin-bottom:14px;color:#d4af37;}
.card-info p{color:#aaa;font-size:14px;margin-bottom:5px;}

/* SOCIAL CARD */
.social-card{
background:rgba(20,20,20,.7);
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
padding:32px;
backdrop-filter:blur(10px);
}

.social-card h3{font-family:'Cinzel',serif;margin-bottom:8px;}
.social-sub{color:#aaa;margin-bottom:22px;font-size:14px;}
.social-list{display:flex;flex-direction:column;gap:12px;}

.social-btn{
display:block;
padding:13px 18px;
border-radius:9px;
text-align:center;
font-weight:600;
transition:.3s;
border:1px solid rgba(255,255,255,.08);
text-decoration:none;
color:white;
font-size:14px;
}

.social-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.4);}
.wsp-btn{background:linear-gradient(135deg,#25D366,#1da851);}
.insta-btn{background:linear-gradient(45deg,#833AB4,#E1306C,#F77737);}
.map-btn{background:#1a73e8;}

/* ========================
RESPONSIVE MÓVIL
======================== */

@media(max-width:960px){
.hero-grid{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}

.hero-right{order:-1;}
.frame{max-width:380px;}
.sigil img{width:200px;}

.cta{justify-content:center;}
.meta{justify-content:center;}

.two-col,
.two-col--reverse{
grid-template-columns:1fr;
gap:40px;
}

.highlight-card{position:static;}

.gallery{grid-template-columns:1fr 1fr;}
.testimonios-grid{grid-template-columns:1fr;}
.info-grid{grid-template-columns:1fr;}
.stats-grid{grid-template-columns:1fr;}
}

@media(max-width:600px){
.title{font-size:34px;}
.car-slide img{height:280px;}
.gallery{grid-template-columns:1fr;}
.two-col h2{font-size:26px;}
.head h2{font-size:28px;}
}

/* ========================
¿POR QUÉ YO?
======================== */

.porque-section{
background:
radial-gradient(circle at 10% 50%, rgba(212,175,55,.06), transparent 50%),
transparent;
}

.porque-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-top:10px;
}

.porque-card{
background:rgba(20,20,20,.7);
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
padding:32px 26px;
backdrop-filter:blur(8px);
transition:.4s;
text-align:center;
}

.porque-card:hover{
border-color:rgba(212,175,55,.4);
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0,0,0,.6);
}

.porque-icon{
font-size:40px;
margin-bottom:16px;
display:block;
filter:drop-shadow(0 0 8px rgba(212,175,55,.4));
}

.porque-card h3{
font-family:'Cinzel',serif;
font-size:17px;
margin-bottom:10px;
color:#fff;
}

.porque-card p{
color:#aaa;
font-size:14px;
line-height:1.7;
}

.porque-cta{
text-align:center;
margin-top:50px;
}

.porque-cta .btn--gold{
padding:14px 36px;
font-size:16px;
}

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

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