:root{
--bg:#080604;
--gold:#c9a56a;
--red:#7d1218;
--text:#efe7d8;
}

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

body{
background:#050505;
color:var(--text);
font-family:Inter,sans-serif;
}

.hero{
min-height:90vh;
background:
linear-gradient(to right,rgba(0,0,0,.35),rgba(0,0,0,.10)),
url('../assets/img/MENU ESPECIAL/fortaleza-medieval-cena-romantica-atardecer.webp') center/cover;
display:flex;
align-items:center;
padding:80px;
}


.back-link{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:35px;
padding:10px 18px;
border:1px solid rgba(255,255,255,.35);
border-radius:999px;
background:rgba(255,255,255,.04);
backdrop-filter:blur(4px);

color:#ffffff;
text-decoration:none;
font-size:.85rem;
letter-spacing:.10em;
text-transform:uppercase;

transition:all .25s ease;
}

.back-link:hover{
border-color:rgba(255,255,255,.65);
background:rgba(255,255,255,.08);
}


.hero h1{
font-family:"Cormorant Garamond",serif;
font-size:5rem;
line-height:.9;
max-width:700px;
}


.hero-ornament{
display:flex;
align-items:center;
gap:22px;
max-width:560px;
margin:2.2rem 0 2rem;
}

.hero-ornament span{
flex:1;
height:1px;
background:linear-gradient(to right,transparent,#c9a56a,transparent);
}

.hero-ornament .diamond{
color:#c9a56a;
font-size:18px;
line-height:1;
}

.hero p{
margin-top:0;
max-width:650px;
font-family:"Cormorant Garamond",serif;
font-size:2rem;
line-height:1.45;
font-weight:400;
color:rgba(239,231,216,.92);
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:220px;
margin-top:30px;
padding:1.15rem 2rem;
background:var(--red);
color:#fff;
text-decoration:none;
border-radius:6px;
font-family:"Cormorant Garamond",serif;
font-size:1rem;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
transition:
transform .3s ease,
background .3s ease,
border .3s ease;
}

.btn:hover{
transform:translateY(-2px);
}

.features{
max-width:1200px;
margin:-80px auto 80px;
display:grid;
grid-template-columns:repeat(4,1fr);
background:rgba(10,10,10,.9);
border:1px solid rgba(201,165,106,.3);
}

.feature{
padding:48px 36px;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
min-height:320px;
}

.section-title{
font-family:"Cormorant Garamond",serif;
font-size:4rem;
text-align:center;
color:var(--gold);
margin:100px 0 50px;
}

.section-title::before{
content:"";
display:block;
width:260px;
height:1px;
margin:0 auto 28px;
background:linear-gradient(
to right,
transparent,
rgba(201,165,106,.6) 20%,
rgba(201,165,106,.95) 50%,
rgba(201,165,106,.6) 80%,
transparent
);
position:relative;
}



.cards{
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
padding:0 30px 30px;
}

.card{
background:#0b0b0b;
border:1px solid rgba(201,165,106,.35);
overflow:hidden;
border-radius:14px;
}

.card.featured{
transform:translateY(-8px);
border:1px solid rgba(201,165,106,.85);
box-shadow:
0 0 0 1px rgba(201,165,106,.18),
0 0 25px rgba(201,165,106,.08);
}

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

.card-content{
padding:35px;
text-align:center;
}

.card h3{
font-family:"Cormorant Garamond",serif;
font-size:2.2rem;
margin-bottom:15px;
color:#c9a56a;
}

.price{
font-family:"Cormorant Garamond",serif;
font-size:3rem;
color:var(--gold);
margin:20px 0;
}


.card-content p{
font-family:"Cormorant Garamond",serif;
font-size:1.15rem;
line-height:1.6;
font-weight:500;
color:rgba(239,231,216,.88);
max-width:280px;
margin:0 auto;
}


.footer-cta{
background:
linear-gradient(to right,rgba(0,0,0,.55),rgba(0,0,0,.55)),
url('../assets/img/MENU ESPECIAL/mesa-romantica-fortaleza-medieval-noche.webp') center/cover;
padding:120px 40px;
text-align:center;
}

.footer-cta h2{
font-family:"Cormorant Garamond",serif;
font-size:4rem;
max-width:900px;
margin:auto;
}



/* ICONOS PREMIUM ESTILO LUCIDE */

.feature svg,
.feature-icon{
width:72px;
height:72px;
display:block;
margin:0 auto 22px;

stroke:#c9a56a;
stroke-width:1.6;
fill:none;

opacity:.95;

filter:
drop-shadow(0 0 2px rgba(201,165,106,.15))
drop-shadow(0 0 8px rgba(201,165,106,.08));
}

.feature h3{
font-family:"Cormorant Garamond",serif;
font-size:2.1rem;
font-weight:600;
letter-spacing:.03em;
color:#d7b27a;
margin-bottom:18px;
}

.feature p{
font-family:"Cormorant Garamond",serif;
font-size:1.05rem;
line-height:1.7;
max-width:260px;
margin:0 auto;
color:rgba(239,231,216,.88);
}

.features{
position:relative;
border-radius:28px;
overflow:hidden;
background:
linear-gradient(rgba(8,6,4,.92),rgba(8,6,4,.92)),
url('../assets/img/fondo-pergamino-medieval-premium.webp');
background-size:cover;
box-shadow:
0 0 0 1px rgba(201,165,106,.18),
0 0 40px rgba(0,0,0,.35);
}

.feature:not(:last-child){
border-right:1px solid rgba(201,165,106,.12);
}

@media(max-width:900px){

.hero{
min-height:72vh;
padding:55px 30px 25px;
background-position:70% center;
align-items:flex-start;
}

.back-link{
padding:7px 12px;
font-size:.72rem;
letter-spacing:.10em;
margin-bottom:12px;
}

.hero > div{
max-width:290px;
padding-left:10px;
}

.hero h1{
font-size:3.55rem;
line-height:.88;
}

.hero-ornament{
max-width:240px;
margin:1rem 0 .8rem;
}

.hero p{
margin-top:1.2rem;
max-width:260px;
font-family:"Cormorant Garamond",serif;
font-size:1.15rem;
line-height:1.35;
font-weight:500;
letter-spacing:0;
color:rgba(239,231,216,.98);
text-shadow:
0 2px 8px rgba(0,0,0,.85),
0 0 18px rgba(0,0,0,.65);
}

.features{
grid-template-columns:repeat(2,1fr);
margin:-40px 20px 60px;
border-radius:20px;
overflow:hidden;
}

.feature{
min-height:110px;
padding:10px 8px;
gap:8px;
}

.feature svg,
.feature-icon{
width:48px;
height:48px;
margin:0;
}

.feature h3{
font-size:1.4rem;
margin:0;
line-height:1.1;
}


.feature p{
display:none;
}


.feature p{
font-size:.82rem;
line-height:1.4;
max-width:180px;
}

.feature{
border-right:1px solid rgba(201,165,106,.12);
border-bottom:1px solid rgba(201,165,106,.12);
}

.feature:nth-child(2n){
border-right:none;
}

.feature:nth-last-child(-n+2){
border-bottom:none;
}

.cards{
grid-template-columns:1fr;
}

.card img{
height:180px;
}

.card-content{
padding:24px;
}

.card h3{
font-size:1.9rem;
}

.price{
font-size:2.5rem;
margin:16px 0;
}

.section-title{
font-size:2.2rem;
margin:60px 0 25px;
}

.footer-cta h2{
font-size:2.8rem;
}
}


.card{
position:relative;
}

.card-badge{
position:absolute;
left:50%;
top:280px;
transform:translate(-50%,-50%);
width:110px;
height:110px;
border-radius:50%;
border:2px solid rgba(201,165,106,.6);
background:#090909;
display:flex;
align-items:center;
justify-content:center;
font-size:3rem;
color:#c9a56a;
z-index:5;
box-shadow:0 0 0 6px rgba(5,5,5,.9);
}

.card-content{
padding-top:72px;
}

@media(max-width:900px){

.card-badge{
top:180px;
width:84px;
height:84px;
font-size:2.3rem;
}

.card-content{
padding-top:56px;
}

}


.featured-label{
position:absolute;
top:16px;
left:50%;
transform:translateX(-50%);
padding:8px 20px;
background:linear-gradient(180deg,#8a1717,#6c0f0f);
color:#efe7d8;
font-family:"Cormorant Garamond",serif;
font-size:.82rem;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
border-radius:8px;
z-index:20;
box-shadow:0 8px 18px rgba(0,0,0,.35);
}

.featured-label::before{
content:"❖";
position:absolute;
top:-18px;
left:50%;
transform:translateX(-50%);
color:#c9a56a;
font-size:14px;
}


@media(max-width:900px){

.card.featured{
transform:translateY(-4px);
}

.featured-label{
top:12px;
padding:6px 16px;
font-size:.72rem;
letter-spacing:.08em;
border-radius:6px;
}

.featured-label::before{
top:-14px;
font-size:11px;
}

}


@media(max-width:900px){
.card-content p{
font-size:1rem;
line-height:1.45;
}
}


.menus-note{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:30px auto 55px;
font-family:"Cormorant Garamond",serif;
font-size:1.25rem;
font-weight:600;
color:rgba(201,165,106,.85);
}

.menus-note-icon{
font-size:.9rem;
color:#c9a56a;
}

@media(max-width:900px){

.menus-note{
font-size:.95rem;
margin:-15px auto 30px;
padding:0 20px;
text-align:center;
}

}


.card .btn{
background:transparent;
border:1px solid rgba(201,165,106,.45);
color:#efe7d8;
}

.card.featured .btn{
background:var(--red);
border:none;
color:#fff;
}

@media(max-width:900px){

.card-content p{
min-height:auto;
}

}


.card h3{
color:#c9a56a;
}

.card-content p{
min-height:72px;
}

.card .btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:220px;
min-height:58px;
margin-top:24px;
background:transparent;
border:1px solid rgba(201,165,106,.45);
color:#efe7d8;
text-decoration:none;
border-radius:6px;
font-family:"Cormorant Garamond",serif;
font-size:1rem;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
}

.card.featured .btn{
background:var(--red);
border:none;
color:#fff;
}

@media(max-width:900px){

.card-content p{
min-height:auto;
}

.card .btn{
width:100%;
max-width:260px;
height:54px;
}

}



.menu-detail{
display:none;
max-width:760px;
margin:10px auto 30px;
padding:0 20px;
}

.menu-detail.active{
display:block;
}

.menu-detail-inner{
border:1px solid rgba(201,165,106,.25);
padding:32px;
background:#0b0b0b;
text-align:center;
}

.menu-detail h2,
.menu-price{
color:#c9a56a;
font-family:"Cormorant Garamond",serif;
}

.menu-detail h2{
font-size:2.4rem;
line-height:1;
margin-bottom:8px;
}

.menu-subtitle{
max-width:520px;
margin:0 auto 32px;
font-size:1rem;
line-height:1.5;
}

.menu-block{
margin:14px 0;
}

.menu-block h4{
color:#c9a56a;
font-size:1rem;
margin-bottom:4px;
}

.menu-block p{
font-size:1rem;
line-height:1.45;
}

.menu-price{
font-size:2.5rem;
margin-top:18px;
}

@media(max-width:900px){

.menu-detail{
max-width:100%;
padding:0 14px;
}

.menu-detail-inner{
padding:24px 18px;
}

.menu-detail h2{
font-size:2rem;
}

.menu-subtitle{
font-size:.95rem;
margin-bottom:16px;
}

.menu-block{
margin:10px 0;
}

.menu-block h4{
font-size:.95rem;
}

.menu-block p{
font-size:.95rem;
line-height:1.35;
}

.menu-price{
font-size:2.2rem;
margin-top:14px;
}

}


.menu-detail-inner{
max-width:640px;
margin:auto;
}

.menu-block{
margin:10px 0;
}

.menu-block h4{
font-size:1rem;
font-weight:600;
letter-spacing:.02em;
margin-bottom:8px;
text-transform:none;
}

.menu-block p{
font-size:.95rem;
line-height:1.55;
}

.menu-detail-btn{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:20px;
padding:14px 28px;
background:var(--red);
color:#fff;
text-decoration:none;
border-radius:6px;
}

@media(max-width:900px){

.menu-detail-inner{
padding:20px 16px;
}

.menu-block{
margin:8px 0;
}

.menu-block p{
font-size:.9rem;
line-height:1.25;
}

.menu-detail-btn{
width:100%;
max-width:260px;
}

}


.footer-cta{
position:relative;
overflow:hidden;

background:
linear-gradient(
to bottom,
rgba(0,0,0,.20),
rgba(0,0,0,.45)
),
url('../assets/img/MENU ESPECIAL/mesa-romantica-fortaleza-medieval-noche.webp') center/cover;

padding:120px 40px;
text-align:center;
}

.footer-cta::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:180px;
pointer-events:none;

background:linear-gradient(
to bottom,
#050505 0%,
rgba(5,5,5,.85) 20%,
rgba(5,5,5,.35) 55%,
transparent 100%
);
}

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

.footer-cta h2{
font-family:"Cormorant Garamond",serif;
font-size:3.4rem;
max-width:800px;
margin:0 auto 20px;
}

.footer-cta p{
font-family:"Cormorant Garamond",serif;
font-size:1.5rem;
color:rgba(239,231,216,.9);
}

.menu-detail-btn{display:none;}



.footer-divider{
display:flex;
align-items:center;
gap:18px;
max-width:420px;
margin:0 auto 60px;
}

.footer-divider span{
flex:1;
height:1px;
background:linear-gradient(to right,transparent,rgba(201,165,106,.65),transparent);
}

.footer-divider-icon{
color:#c9a56a;
font-size:18px;
line-height:1;
opacity:.95;
}

.footer-link{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:32px;
padding:14px 28px;
border:1px solid rgba(201,165,106,.45);
border-radius:6px;
text-decoration:none;
color:#efe7d8;
background:rgba(0,0,0,.25);
transition:all .25s ease;
}

.footer-link:hover{
border-color:rgba(201,165,106,.8);
background:rgba(201,165,106,.08);
}

@media(max-width:900px){

.menus-note{
margin:20px auto 35px;
}

.footer-divider{
max-width:280px;
margin:0 auto 40px;
}

.footer-link{
width:100%;
max-width:260px;
}

}


@media(max-width:900px){

.footer-cta{
padding:55px 24px 60px;
}

.footer-cta::before{
height:90px;
}

.footer-cta h2{
font-size:2.3rem;
line-height:1.05;
max-width:320px;
margin:0 auto 14px;
}

.footer-cta p{
font-size:1.15rem;
line-height:1.35;
max-width:280px;
margin:0 auto;
}

.footer-link{
margin-top:20px;
}

}


/* MENÚ EXCLUSIVO */

.exclusive-stars{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin:14px 0 8px;
color:#c9a56a;
opacity:.95;
}

.exclusive-stars svg{
width:14px;
height:14px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}

@media(max-width:900px){

.exclusive-stars{
gap:10px;
margin:12px 0 6px;
}

.exclusive-stars svg{
width:13px;
height:13px;
}

}


/* COMPARACIÓN DE MENÚS DESKTOP Y MOBILE */
.menu-detail-instance{
display:block !important;
grid-column:span 1;
margin:0 0 20px;
}

.menu-detail-instance .menu-detail-inner{
max-width:none;
}

@media (max-width:900px){
.menu-detail-instance{
grid-column:1/-1;
}
}


/* AJUSTE EXCLUSIVO VS EXPERIENCIA */

@media (min-width:901px){

.card-exclusivo .card-content p{
    min-height:72px;
}

.card-exclusivo .exclusive-stars{
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:8px 0 4px;
}

.card-exclusivo .price{
    margin:16px 0;
}

}


/* CORRECCIÓN FINAL: IGUALAR VISUALMENTE 72€ Y 36€ */
@media (min-width:901px){

.card-exclusivo .exclusive-stars{
    position:relative;
    top:-10px;
    margin:0 0 -10px 0;
}

.card-exclusivo .price{
    margin-top:0;
}

}


/* ORDEN DESKTOP FINAL: 72 -> 52 -> 36 */
@media (min-width:901px){

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.card-exclusivo{
    order:1;
}

.card-celebracion{
    order:2;
}

.card-experiencia{
    order:3;
}

}


/* DESPLEGABLES INDEPENDIENTES */
.detail-host{
    display:block;
}

.detail-host .menu-detail-instance{
    margin-top:0;
}





/* ORDEN DESKTOP REAL 72 -> 52 -> 36 */
@media (min-width:901px){

.card-slot:has(.card-exclusivo){
    order:1;
}

.card-slot:has(.card-celebracion){
    order:2;
}

.card-slot:has(.card-experiencia){
    order:3;
}

}


.price-note{

display:block;

margin-top:-6px;

font-family:"Cormorant Garamond",serif;

font-size:1.25rem;

font-weight:600;

color:rgba(201,165,106,.85);

text-align:center;
}

@media(max-width:900px){

.price-note{

font-size:.95rem;

margin-top:-4px;
}

}