:root{

--color-principal:#7b2d36;
--color-secundario:#f8efe8;
--color-texto:#443c38;
--color-detalle:#d7b487;

}

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

html{
scroll-behavior:smooth;
}

body{

background-image:url("../Imagenes/fondo.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

font-family:"Libre Baskerville",serif;

line-height:1.8;

color:var(--color-texto);

}

nav{

position:sticky;
top:0;

background:var(--color-principal);

padding:18px;

text-align:center;

border-bottom:3px solid var(--color-detalle);

backdrop-filter:blur(4px);

z-index:1000;

}

nav a{

color:white;

text-decoration:none;

margin:0 15px;

font-size:14px;

letter-spacing:1px;

transition:.3s;

}

nav a:hover{

color:var(--color-detalle);

}

header{

padding:70px 30px 40px;

text-align:center;

min-height:auto;

display:block;

}

header h1{

font-family:"Cormorant Garamond",serif;

font-size:70px;

font-weight:600;

color:var(--color-principal);

margin-bottom:8px;

}

header h2{

font-size:18px;

letter-spacing:3px;

margin-bottom:20px;

opacity:.8;

}

header p{

max-width:600px;

margin:auto;

font-size:16px;

}

.boton{

display:inline-block;

margin-top:35px;

padding:12px 28px;

background:var(--color-principal);

color:white;

text-decoration:none;

border-radius:5px;

transition:.3s;

}

.boton:hover{

background:var(--color-detalle);

color:#222;

}

section{

max-width:950px;

margin:auto;

padding:45px 25px;

}

h3{

font-family:"Cormorant Garamond",serif;

font-size:48px;

color:var(--color-principal);

margin-bottom:20px;

}

.tarjeta{

display:flex;

gap:30px;

align-items:flex-start;

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

padding:25px;

border-left:8px solid var(--color-principal);

border-radius:10px;

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

margin-bottom:35px;

}

.poster{

width:170px;

border-radius:6px;

box-shadow:0 8px 18px rgba(0,0,0,.2);

flex-shrink:0;

}

.info{

flex:1;

}

.info h4{

font-family:"Cormorant Garamond",serif;

font-size:38px;

color:var(--color-principal);

margin-bottom:10px;

}

.estrellas{

color:var(--color-detalle);

font-size:19px;

margin-bottom:15px;

}

.info p{

margin-bottom:15px;

color:var(--color-texto);

}

.info a{

color:var(--color-principal);

font-weight:bold;

text-decoration:none;

}

.info a:hover{

color:var(--color-detalle);

}

.polaroid{

background:white;

padding:12px;

width:350px;

margin:45px auto;

box-shadow:0 10px 20px rgba(0,0,0,.15);

transform:rotate(-2deg);

}

.polaroid img{

width:100%;

display:block;

}

.polaroid p{

text-align:center;

margin-top:10px;

font-style:italic;

}

.favoritas{

display:flex;

flex-wrap:wrap;

gap:25px;

margin-top:30px;

}

.mini{

width:180px;

}

.mini img{

width:100%;

border:8px solid white;

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

transition:.3s;

}

.mini img:hover{

transform:rotate(-2deg) scale(1.05);

}

.mini p{

text-align:center;

margin-top:10px;

}

footer{

text-align:center;

padding:50px;

color:white;

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

}

.galeria{

display:grid;

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

gap:30px;

margin:25px 0 60px;

}
}