/* ======================================================
   JULIA ES LA MEJOR — FINAL
   Typography: Cormorant Garamond + Inter
====================================================== */

/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#090909;
    color:#f5f5f5;
    font-family:"Inter",sans-serif;
    overflow-x:hidden;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}

img{
    display:block;
    width:100%;
    user-select:none;
    -webkit-user-drag:none;
}

/* ==========================
   VARIABLES
========================== */

:root{
    --gold:#D4AF37;
    --gold-soft:#E7C766;
    --white:#FAFAFA;
    --gray:#BDBDBD;
    --dark:#090909;
    --card:#141414;
    --radius:28px;
    --shadow:0 24px 60px rgba(0,0,0,.45);
}

/* ==========================
   BACKGROUND
========================== */

.background-glow{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
}

.background-glow::before{
    content:"";
    position:absolute;
    width:760px;
    height:760px;
    border-radius:50%;
    left:-260px;
    top:-180px;
    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.10),
            transparent 70%
        );
}

.background-glow::after{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    right:-200px;
    bottom:-220px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.04),
            transparent 70%
        );
}

/* ==========================
   CONTAINER
========================== */

.container{
    width:min(1450px,92vw);
    margin:auto;
    padding:72px 0 90px;
}

/* ==========================
   HEADER
========================== */

.hero-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-bottom:84px;
}

.header-symbol{
    color:var(--gold);
    font-size:1.2rem;
    margin-bottom:30px;
    animation:fadeUp .8s ease forwards;
}

/* Julia eres lo mejor — Cormorant */

.hero-header h1{
    font-family:"Inter",sans-serif;
    font-size:clamp(4.9rem,8vw,7.6rem);
    line-height:.92;
    letter-spacing:0.01em;
    font-weight:600;
    animation:fadeUp .9s ease .15s forwards;
}

.hero-header h1 span{
    display:block;
    margin-top:18px;
    color:var(--gold);
    font-size:clamp(2.2rem,3.6vw,3.7rem);
    font-weight:500;
}

/* Un espacio dedicado solo a Julia — Inter */

.hero-header p{
    margin-top:36px;
    max-width:640px;
    color:var(--gray);
    font-family:"Inter",sans-serif;
    font-size:1rem;
    line-height:1.8;
    letter-spacing:.03em;
    font-weight:400;
    animation:fadeUp .9s ease .4s forwards;
}

/* ==========================
   DIVIDER
========================== */

.section-divider{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:54px;
    animation:fadeUp 1s ease .7s forwards;
}

.section-divider span{
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:20px;
}

.section-divider span::before,
.section-divider span::after{
    content:"";
    width:120px;
    height:1px;
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(212,175,55,.45)
        );
}

.section-divider span::after{
    background:
        linear-gradient(
            to left,
            transparent,
            rgba(212,175,55,.45)
        );
}

/* ==========================
   GRID
========================== */

.grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

/* ==========================
   TILE BASE
========================== */

.tile{
    aspect-ratio:1;
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    opacity:0;
    transform:translateY(38px);
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease,
        opacity .6s ease;
}

.tile.show{
    opacity:1;
    transform:translateY(0);
}

/* ==========================
   PHOTO TILE
========================== */

.photo{
    background:#000;
    cursor:pointer;

    border:1px solid transparent;

    box-shadow:var(--shadow);

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

.photo:hover{
    transform:translateY(-6px) scale(1.01);

    border-color:rgba(212,175,55,.35);

    box-shadow:
        0 28px 70px rgba(0,0,0,.5),
        0 0 36px rgba(212,175,55,.10);
}

.photo img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:
        transform .8s ease,
        filter .5s ease;
}

.photo:hover img{
    transform:scale(1.05);

    filter:
        saturate(1.05)
        contrast(1.03);
}

.photo:last-child:hover{
    transform:translateY(-8px) scale(1.02);

    border-color:rgba(212,175,55,.55);

    box-shadow:
        0 34px 90px rgba(0,0,0,.6),
        0 0 54px rgba(212,175,55,.20);
}

.photo:last-child:hover img{
    transform:scale(1.08);

    filter:
        saturate(1.10)
        contrast(1.05);
}

.photo::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.78),
            rgba(0,0,0,.22) 42%,
            transparent 72%
        );

    opacity:.9;

    transition:opacity .35s ease;
}

/* Tu sonrisa, Tan elegante... — Cormorant */

.caption{
    position:absolute;
    left:22px;
    right:22px;
    bottom:20px;

    z-index:5;
    pointer-events:none;

    color:#fff;

    font-family:"Inter",sans-serif;
    font-size:1.14rem;
    font-weight:500;
    letter-spacing:0;
    line-height:1.42;

    text-shadow:0 2px 10px rgba(0,0,0,.45);

    opacity:0;

    transform:translateY(16px);

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.photo:hover .caption{
    opacity:1;
    transform:translateY(-2px);
}
/* ==========================
   TEXT TILE
========================== */

.text{
    background:var(--card);
    border:1px solid rgba(255,255,255,.06);

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

    padding:22px;

    box-shadow:var(--shadow);

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

.text:hover{
    transform:translateY(-6px) scale(1.01);

    border-color:rgba(212,175,55,.35);

    box-shadow:
        0 28px 70px rgba(0,0,0,.5),
        0 0 36px rgba(212,175,55,.10);
}

/* MUY — Inter */

.word-small{
    font-family:"Inter",sans-serif;

    color:#cfcfcf;

    font-size:.9rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:12px;

    font-weight:500;
}

/* GUAPA, DIVERTIDA... — Cormorant */

.word{
    font-family:"Cormorant Garamond",serif;

    color:var(--gold);

    font-size:clamp(2.7rem,3.6vw,4.3rem);

    line-height:1;

    letter-spacing:-.01em;

    font-weight:600;
}

.heart{
    margin-top:18px;

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

    font-size:1rem;

    transition:
        transform .35s ease,
        color .35s ease;
}

.text:hover .heart{
    transform:scale(1.18);

    color:#ff4d6d;
}

/* ==========================
   FOOTER
========================== */

.footer{
    margin-top:120px;

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

    gap:14px;

    text-align:center;
}

.footer-line{
    display:flex;
    align-items:center;
    gap:18px;

    color:var(--gold);

    opacity:0;
    transform:scaleX(.5);
}

.footer-line::before,
.footer-line::after{
    content:"";

    width:92px;
    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(212,175,55,.5)
        );
}

.footer-line::after{
    background:
        linear-gradient(
            to left,
            transparent,
            rgba(212,175,55,.5)
        );
}

/* Gracias por llegar... — Cormorant */

.footer-text{
    font-family:"Inter",sans-serif;
    
    font-size:clamp(2.2rem,4vw,3.2rem);

    font-weight:500;

    letter-spacing:-0.04em;

    color:#fff;

    line-height:1.18;

    opacity:0;
    transform:translateY(24px);
}

/* Te quiero, Julia — Inter */

.footer-love{
    font-family:"Love Light",cursive;

    color:#fff;

    letter-spacing:.08em;

    font-size:clamp(3.8rem,3.2vw,4.8rem);
    
    font-weight:400;

    opacity:0;
    transform:translateY(24px);
}

/* Para siempre — Cormorant */

.footer-forever{
    font-family:"Cormorant Garamond",serif;

    color:var(--gold);

    font-size:clamp(2.7rem,3.6vw,4.3rem);

    line-height:1;

    letter-spacing:-.01em;

    font-weight:600;

    opacity:0;
    transform:translateY(24px);
}

/* footer reveal */

.footer.show .footer-line{
    opacity:1;
    transform:scaleX(1);

    transition:1s ease;
}

.footer.show .footer-text{
    opacity:1;
    transform:none;

    transition:
        opacity .8s ease .25s,
        transform .8s ease .25s;
}

.footer.show .footer-love{
    opacity:1;
    transform:none;

    transition:
        opacity .8s ease .5s,
        transform .8s ease .5s;
}

.footer.show .footer-forever{
    opacity:1;
    transform:none;

    transition:
        opacity .8s ease .75s,
        transform .8s ease .75s;
}

/* ==========================
   REVEAL
========================== */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(26px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

/* ==========================
   MOBILE
========================== */

@media (max-width:900px){

    .container{
        width:94vw;
        padding:42px 0 64px;
    }

    .hero-header{
        margin-bottom:54px;
    }

    .hero-header p{
        font-size:.96rem;
    }

    .section-divider{
        margin-bottom:32px;
    }

    .section-divider span::before,
    .section-divider span::after{
        width:62px;
    }

    .grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .tile{
        border-radius:22px;
    }

    .caption{
        left:18px;
        right:18px;
        bottom:18px;

        font-size:1rem;
    }

    .word{
        font-size:2.45rem;
    }

    .footer{
        margin-top:84px;
    }

    .footer-text{
        font-size:1.3rem;
    }

    .footer-forever{
        font-size:1.2rem;
    }

    .footer-love{
    	font-size:2rem;
    }
}

/* ==========================
   SMALL PHONES
========================== */

@media (max-width:480px){

    .hero-header h1{
        font-size:4.2rem;
    }

    .hero-header h1 span{
        font-size:2.05rem;
    }

    .caption{
        font-size:.94rem;
    }

    .word{
        font-size:2.15rem;
    }

    .footer-line::before,
    .footer-line::after{
        width:54px;
    }
}

/* ==========================
   TOUCH DEVICES
========================== */

@media (hover:none){
    
    .photo:hover{
	transform:none;
	border-color:transparent;
	box-shadow:var(--shadow);
    }

    .photo:hover img{
	transform:none;
    }

    .caption{
	opacity:0; 
	transform:translateY(16px);
	pointer-events:none;
    }

    .photo.active .caption{
	opacity:1;
	transform:translateY(-2px);
    }

    .text:hover{
	transform:none;
    }
}