/*============================

        VARIABLES

=============================*/

:root{

    --primary:#ff4d88;
    --secondary:#ff7eb3;
    --background:#fff5fa;
    --glass:rgba(255,255,255,.22);
    --white:#fff;
    --text:#444;
    --shadow:0 15px 35px rgba(0,0,0,.15);

}

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;

}

body{

background:
linear-gradient(135deg,#fff5fa,#ffe4ee,#fff7fb);

background-size:400% 400%;

animation:bg 15s infinite ease;

overflow-x:hidden;

color:var(--text);

}

/*============================

            HERO

=============================*/

.hero{

height:50vh;

background:url("../img/fondos/fotos.jpg") center/cover;

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.hero-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

backdrop-filter:blur(2px);

}

.hero-content{

position:relative;

z-index:2;

text-align:center;

color:white;

padding:20px;

animation:fadeDown 1.2s;

}

.hero-content h1{

font-size:60px;

margin-bottom:20px;

}

.hero-content p{

font-size:22px;

max-width:700px;

line-height:1.8;

}

/*============================

        TOOLBAR

=============================*/

.toolbar{

width:95%;

max-width:1400px;

margin:60px auto;

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

flex-wrap:wrap;

}

.search-box{

flex:1;

min-width:280px;

}

.search-box input{

width:100%;

padding:18px 25px;

border:none;

border-radius:50px;

background:var(--glass);

backdrop-filter:blur(15px);

box-shadow:var(--shadow);

font-size:17px;

outline:none;

transition:.3s;

}

.search-box input:focus{

box-shadow:0 0 20px rgba(255,77,136,.4);

}

.filters{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.filter{

padding:14px 22px;

border:none;

cursor:pointer;

border-radius:40px;

background:white;

font-weight:600;

transition:.35s;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.filter:hover{

transform:translateY(-4px);

background:var(--primary);

color:white;

}

.filter.active{

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:white;

}

/*============================

        TITULOS

=============================*/

.year{

font-size:60px;

font-weight:700;

color:var(--primary);

margin:80px auto 20px;

width:90%;

}

.month{

width:90%;

margin:auto;

font-size:35px;

font-weight:600;

margin-bottom:25px;

color:#777;

}

/*============================

        GRID

=============================*/

.grid{

width:90%;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

gap:35px;

margin-bottom:70px;

}

/*============================

        TARJETAS

=============================*/

.photo-card{

perspective:1200px;

opacity:0;

transform:translateY(60px);

transition:1s;

}

.photo-card.show{

opacity:1;

transform:translateY(0);

}

.photo{

background:white;

padding:18px;

border-radius:25px;

box-shadow:var(--shadow);

position:relative;

transition:.45s;

overflow:hidden;

}

.photo:hover{

transform:

rotateY(8deg)

rotateX(6deg)

translateY(-10px);

}

.photo img{

width:100%;

height:340px;

object-fit:cover;

border-radius:18px;

display:block;

transition:.45s;

}

.photo:hover img{

transform:scale(1.08);

}

.photo::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.8),

transparent

);

}

.photo:hover::before{

animation:shine .9s;

}

/*============================

        FAVORITA

=============================*/

.favorite .photo{

border:4px solid gold;

}

.heart{

position:absolute;

top:18px;

right:18px;

font-size:28px;

background:white;

padding:8px;

border-radius:50%;

box-shadow:0 5px 15px rgba(0,0,0,.2);

animation:heartbeat 1.5s infinite;

}

/*============================

        INFO

=============================*/

.photo-info{

padding:18px 10px 5px;

text-align:center;

}

.photo-info h3{

color:var(--primary);

margin-bottom:10px;

font-size:22px;

}

.photo-info p{

font-size:15px;

color:#666;

}

/*============================

        LIGHTBOX

=============================*/

.lightbox{

position:fixed;

inset:0;

background:rgba(0,0,0,.95);

display:none;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:99999;

padding:30px;

}

.lightbox img{

max-width:90%;

max-height:75vh;

border-radius:20px;

box-shadow:0 20px 50px rgba(0,0,0,.5);

animation:zoom .4s;

}

.caption{

margin-top:30px;

text-align:center;

color:white;

}

.caption h2{

font-size:32px;

margin-bottom:10px;

}

.caption p{

font-size:18px;

}

.close{

position:absolute;

top:30px;

right:40px;

font-size:45px;

color:white;

cursor:pointer;

transition:.3s;

}

.close:hover{

transform:rotate(180deg);

color:var(--primary);

}

.prev,
.next{

position:absolute;

top:50%;

transform:translateY(-50%);

font-size:70px;

color:white;

cursor:pointer;

padding:20px;

transition:.3s;

user-select:none;

}

.prev{

left:30px;

}

.next{

right:30px;

}

.prev:hover,
.next:hover{

color:var(--primary);

}

/*============================

        BOTON SUBIR

=============================*/

.topBtn{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:white;

font-size:24px;

cursor:pointer;

display:none;

box-shadow:var(--shadow);

transition:.35s;

z-index:999;

}

.topBtn:hover{

transform:translateY(-5px);

}

/*============================

        ANIMACIONES

=============================*/

@keyframes shine{

from{

left:-120%;

}

to{

left:140%;

}

}

@keyframes heartbeat{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.25);

}

}

@keyframes zoom{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes bg{

0%{background-position:0% 50%;}

50%{background-position:100% 50%;}

100%{background-position:0% 50%;}

}

/*============================

        RESPONSIVE

=============================*/

@media(max-width:992px){

.hero-content h1{

font-size:45px;

}

.hero-content p{

font-size:18px;

}

.year{

font-size:45px;

}

.month{

font-size:28px;

}

}

@media(max-width:768px){

.toolbar{

flex-direction:column;

}

.filters{

justify-content:center;

}

.grid{

grid-template-columns:1fr;

}

.photo img{

height:280px;

}

.prev,
.next{

font-size:50px;

}

}

@media(max-width:480px){

.hero{

height:40vh;

}

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:16px;

}

.search-box input{

font-size:15px;

padding:15px 20px;

}

.filter{

padding:10px 16px;

font-size:14px;

}

.year{

font-size:35px;

}

.month{

font-size:24px;

}

.photo img{

height:240px;

}

.caption h2{

font-size:24px;

}

.caption p{

font-size:16px;

}

}