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

        VARIABLES

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

:root{

--primary:#ff4d88;
--secondary:#ff9ec5;
--paper:#fffdf7;
--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,#fff6fb,#ffe7ef,#fff2f8);

background-size:400% 400%;

animation:bgMove 15s infinite;

overflow-x:hidden;

}

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

            HERO

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

.hero{

height:45vh;

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

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.overlay{

position:absolute;

inset:0;

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

}

.hero-content{

position:relative;

z-index:5;

text-align:center;

color:white;

padding:20px;

}

.hero-content h1{

font-size:60px;

margin-bottom:20px;

}

.hero-content p{

font-size:22px;

max-width:700px;

line-height:1.7;

}

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

        TOOLBAR

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

.toolbar{

width:90%;

max-width:1400px;

margin:60px auto;

display:flex;

justify-content:space-between;

gap:25px;

flex-wrap:wrap;

}

.search{

flex:1;

}

.search input{

width:100%;

padding:18px;

border:none;

border-radius:50px;

font-size:17px;

outline:none;

box-shadow:var(--shadow);

}

.filters{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.filter{

padding:14px 22px;

border:none;

border-radius:30px;

cursor:pointer;

background:white;

font-weight:bold;

transition:.3s;

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

}

.filter:hover{

background:var(--primary);

color:white;

}

.filter.active{

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

color:white;

}

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

        GRID

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

.letters{

width:90%;

max-width:1400px;

margin:auto;

display:grid;

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

gap:45px;

margin-bottom:80px;

}

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

        SOBRE

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

.envelope{

cursor:pointer;

text-align:center;

transition:.4s;

opacity:0;

transform:translateY(60px);

}

.envelope.show{

opacity:1;

transform:translateY(0);

}

.envelope:hover{

transform:translateY(-12px);

}

.envelope-front{

position:relative;

height:180px;

background:linear-gradient(145deg,#ff7aa8,#ff4d88);

border-radius:10px;

overflow:hidden;

box-shadow:var(--shadow);

}

.envelope-front::before{

content:"";

position:absolute;

left:0;

right:0;

margin:auto;

top:0;

width:0;
height:0;

border-left:140px solid transparent;
border-right:140px solid transparent;
border-top:90px solid rgba(255,255,255,.25);

}

.envelope-front::after{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

margin:auto;

width:0;
height:0;

border-left:140px solid transparent;
border-right:140px solid transparent;
border-bottom:90px solid rgba(255,255,255,.15);

}

.heart{

position:absolute;

left:50%;
top:50%;

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

font-size:45px;

animation:heartbeat 1.4s infinite;

}

.favorite .envelope-front{

border:4px solid gold;

}

.shadow{

width:80%;

height:18px;

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

margin:15px auto;

filter:blur(8px);

border-radius:50%;

}

.info h2{

color:var(--primary);

margin-bottom:10px;

}

.info p{

color:#777;

}

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

        MODAL

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

.modal{

position:fixed;

inset:0;

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

display:none;

justify-content:center;

align-items:center;

padding:20px;

z-index:9999;

}

.paper{

background:var(--paper);

width:90%;

max-width:850px;

max-height:90vh;

overflow:auto;

padding:50px;

border-radius:20px;

box-shadow:0 30px 60px rgba(0,0,0,.4);

position:relative;

animation:openPaper .4s;

}

.paper h1{

font-family:"Dancing Script",cursive;

font-size:48px;

color:var(--primary);

margin-bottom:15px;

text-align:center;

}

.paper span{

display:block;

text-align:center;

margin-bottom:40px;

color:#777;

}

#contenidoCarta{

font-size:20px;

line-height:2;

white-space:pre-line;

}

.close{

position:absolute;

top:20px;

right:25px;

font-size:35px;

cursor:pointer;

transition:.3s;

}

.close:hover{

transform:rotate(180deg);

color:var(--primary);

}

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

        BOTON SUBIR

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

.topBtn{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

font-size:22px;

display:none;

cursor:pointer;

box-shadow:var(--shadow);

}

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

        ANIMACIONES

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

@keyframes heartbeat{

0%,100%{

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

}

50%{

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

}

}

@keyframes openPaper{

from{

opacity:0;

transform:scale(.7);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes bgMove{

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

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

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

}

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

        RESPONSIVE

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

@media(max-width:768px){

.hero-content h1{

font-size:40px;

}

.hero-content p{

font-size:18px;

}

.paper{

padding:30px;

}

.paper h1{

font-size:38px;

}

#contenidoCarta{

font-size:18px;

}

}