/* ==========================================================
   VITIS LUMEN
   style.css
========================================================== */


:root{

--background:#efe5d3;
--paper:#f8f1e3;
--card:#d6c0a7;
--gold:#b68d40;
--gold-light:#d6b56b;
--wine:#5c1f2f;
--wine-dark:#40131f;
--text:#2f2924;
--border:#6b5a45;
--shadow:0 20px 45px rgba(0,0,0,.18);

--radius:18px;

}

/* RESET */

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

html{
scroll-behavior:smooth;
}

body{

background:
linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),
url("../img/pergamino.jpg");

background-size:cover;
background-attachment:fixed;

font-family:"Montserrat",sans-serif;
color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

.hero h1{

    font-family:"Forum", "Cinzel", serif;

    font-size:6rem;
    letter-spacing:10px;

    text-transform:uppercase;

    color:#f5e7c6;

    /* Efecto piedra / inscripción romana */
    text-shadow:
        0 1px 0 #3a2a1a,
        0 2px 0 #2a1d12,
        0 3px 0 #1c120b,
        0 10px 25px rgba(0,0,0,.6);

    position:relative;

}

/* efecto mármol / grabado */
.hero h1::after{

    content:"VITIS LUMEN";

    position:absolute;
    left:0;
    top:0;

    width:100%;

    color:transparent;

    -webkit-text-stroke:1px rgba(255,255,255,.15);

    opacity:.4;

    transform:translateY(2px);

    pointer-events:none;

}


/* textura */

.texture{

position:fixed;
inset:0;

background-image:
radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);

background-size:6px 6px;

opacity:.4;

pointer-events:none;

z-index:-1;

}

/* columnas */

.column{

position:fixed;

top:0;

width:120px;

height:100vh;

opacity:.08;

background-repeat:no-repeat;

background-position:center;

background-size:contain;

pointer-events:none;

}

.left{

left:0;

background-image:url("../img/columna-izq.svg");

}

.right{

right:0;

background-image:url("../img/columna-der.svg");

}

/* HERO */

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:60px 30px;

text-align:center;

overflow:hidden;

}

.overlay{

position:absolute;

inset:0;

background:
linear-gradient(rgba(20,10,5,.45),
rgba(20,10,5,.55));

backdrop-filter:blur(1px);

}

.hero-content{

position:relative;

max-width:900px;

z-index:2;

}

.hero h2{

font-family:"Forum", "Cinzel", serif;

font-size:2.4rem;

color:#f7e8c3;

margin-top:15px;

letter-spacing:4px;

}

.separator{

width:220px;

height:2px;

margin:25px auto;

background:linear-gradient(
to right,
transparent,
var(--gold),
transparent
);

}

.subtitle{

margin:35px auto;

font-size:1.2rem;

max-width:720px;

color:#f5f5f5;

}

/* CONTADOR */

#countdown{

display:flex;

justify-content:center;

gap:25px;

margin-top:50px;

margin-bottom:50px;

flex-wrap:wrap;

}

#countdown div{

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

border:1px solid rgba(255,255,255,.2);

padding:22px;

min-width:110px;

border-radius:16px;

backdrop-filter:blur(8px);

}

#countdown span{

display:block;

font-size:2.6rem;

font-weight:700;

color:white;

}

#countdown small{

color:#f5f5f5;

letter-spacing:1px;

}

/* BOTONES */

.hero-buttons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.btn{

display:inline-block;

padding:15px 34px;

border-radius:40px;

font-weight:700;

text-decoration:none;

transition:.35s;

position:relative;

overflow:hidden;

}

.btn::after{

    content:"";

    position:absolute;

    left:var(--x);
    top:var(--y);

    width:0;
    height:0;

    transform:translate(-50%,-50%);

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

    border-radius:50%;

    transition:width .45s,height .45s;

}

.btn:hover::after{

    width:300px;
    height:300px;

}

.gold{

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

color:white;

box-shadow:0 12px 30px rgba(0,0,0,.25);

}

.gold:hover{

transform:translateY(-4px);

box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.outline{

border:2px solid white;

color:white;

}

.outline:hover{

background:white;

color:var(--wine);

}

.small{

margin-top:18px;

padding:12px 22px;

background:var(--wine);

color:white;

}

.small:hover{

background:var(--wine-dark);

}

/* MAIN */

main{

max-width:1280px;

margin:auto;

padding:80px 25px;

}

/* TARJETAS */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

gap:35px;

margin-bottom:70px;

}

.info-card{

position:relative;

background:rgba(248,241,227,.92);

padding:40px;

border-radius:var(--radius);

border:2px solid rgba(182,141,64,.4);

box-shadow:var(--shadow);

transition:.4s;

overflow:hidden;

}

.info-card::before{

content:"";

position:absolute;

top:14px;

left:14px;

right:14px;

bottom:14px;

border:1px solid rgba(182,141,64,.35);

pointer-events:none;

}

.info-card:hover{

transform:translateY(-8px);

}

.info-card h3{

font-family:"Cinzel",serif;

font-size:1.8rem;

margin-bottom:22px;

color:var(--wine);

}

.info-card p{

font-size:1.05rem;

margin-bottom:10px;

}

/* GALERÍA */

.gallery{

margin-top:100px;

text-align:center;

}

.gallery h2{

font-family:"Cinzel",serif;

font-size:3rem;

margin-bottom:45px;

color:var(--wine);

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:18px;

}

.gallery-grid img{

width:100%;

height:260px;

object-fit:cover;

border-radius:16px;

cursor:pointer;

transition:.4s;

box-shadow:var(--shadow);

}

.gallery-grid img:hover{

transform:scale(1.04);

}

/* MAPA */

.location{

margin-top:110px;

text-align:center;

}

.location h2{

font-family:"Cinzel",serif;

font-size:3rem;

margin-bottom:35px;

color:var(--wine);

}

.location iframe{

width:100%;

height:500px;

border:none;

border-radius:20px;

box-shadow:var(--shadow);

}

/* FOOTER */

footer{

margin-top:120px;

padding:60px 20px;

background:#2b1d1d;

text-align:center;

color:#e9e1d4;

}

footer h3{

font-family:"Cinzel",serif;

font-size:2rem;

margin-bottom:20px;

color:#f6dca4;

}

footer p{

margin:8px 0;

}

/* SCROLLBAR */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#d8ccb8;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#8d6d2f;

}

/* ==========================================================
   LIGHTBOX
========================================================== */

#lightbox{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

#lightbox.active{
    display:flex;
}

.lightbox-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.85);
    backdrop-filter:blur(6px);
}

.lightbox-content{
    position:relative;
    z-index:2;
    max-width:90%;
    max-height:90%;
}

.lightbox-content img{
    width:100%;
    height:auto;
    max-height:80vh;
    border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

/* botones */

.lightbox-content button{
    position:absolute;
    border:none;
    cursor:pointer;
    background:rgba(255,255,255,.15);
    color:white;
    font-size:2rem;
    width:50px;
    height:50px;
    border-radius:50%;
    transition:.3s;
}

.lightbox-content button:hover{
    background:rgba(255,255,255,.3);
}

.close{
    top:-20px;
    right:-20px;
}

.prev{
    left:-70px;
    top:50%;
    transform:translateY(-50%);
}

.next{
    right:-70px;
    top:50%;
    transform:translateY(-50%);
}