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

/* VARIABLES */
:root{
  --color-bg:#111;
  --color-text:#fff;
  --color-muted:#c7c7c7;
  --color-card:#f6f6f6;
  --color-accent:#c9a26d;
}

/* BODY */
body{
  font-family:'Inter',sans-serif;
  background:#fff;
  color:#111;
  overflow-x:hidden;
}

/* PORTADA */
.portada{
  height:70vh;
  min-height:450px;

  background-size:cover;
  background-position:center;

  position:relative;

  display:flex;
  justify-content:center;
  align-items:center;
}

.portada::before{
  content:"";
  position:absolute;
  inset:0;

  background:rgba(0,0,0,0.55);
}

/* MENU */
.menu{
  position:absolute;
  top:0;
  left:0;

  width:100%;

  padding:2rem 6%;

  display:flex;
  justify-content:space-between;
  align-items:center;

  z-index:2;
}

.logo{
  font-family:'Playfair Display',serif;
  font-size:1.7rem;
  color:white;
  font-weight:600;
}

.menu ul{
  list-style:none;
  display:flex;
  gap:2rem;
}

.menu a{
  color:white;
  text-decoration:none;
  letter-spacing:1px;
  transition:0.3s ease;
}

.menu a:hover{
  opacity:0.7;
}

/* CONTENIDO PORTADA */
.portada-contenido{
  position:relative;
  z-index:2;

  text-align:center;
  color:white;
}

.portada-contenido h1{
  font-family:'Playfair Display',serif;
  font-size:4rem;
  font-weight:600;

  letter-spacing:2px;
}

.portada-contenido p{
  margin-top:1rem;

  font-size:0.9rem;

  letter-spacing:3px;

  color:var(--color-muted);
}

/* TITULO */
.Titulo{
  padding:5rem 6%;
}

.Titulo h2{
  text-align:center;

  margin-bottom:4rem;

  font-family:'Playfair Display',serif;
  font-size:2.7rem;
  font-weight:600;
}

/* GRID */
.grid{
  display:grid;

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

  gap:2rem;

  align-items:stretch;
}

/* CARD */
.card{
  background:var(--color-card);

  border-radius:16px;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  transition:
  transform 0.3s ease,
  box-shadow 0.3s ease;

  box-shadow:
  0 5px 18px rgba(0,0,0,0.08);
}

.card:hover{
  transform:translateY(-8px);

  box-shadow:
  0 14px 30px rgba(0,0,0,0.14);
}

.card a{
  text-decoration:none;
  color:#111;
  text-align:center;
}

/* IMAGEN */
.card img{
  width:100%;
  height:260px;

  object-fit:cover;

  transition:transform 0.45s ease;
}

.card:hover img{
  transform:scale(1.08);
}

/* CONTENIDO */
.card-body{
  padding:1.5rem;

  display:flex;
  flex-direction:column;

  flex:1;
}

/* TITULO CARD */
.card-body h3{
  font-family:'Playfair Display',serif;

  font-size:1.4rem;

  margin-bottom:1rem;

  color:#111;
}

/* TEXTO */
.card-body p{
  font-size:0.95rem;
  color:#555;
  line-height:1.6;
  margin-bottom:1rem;
}

/* BOTON */
.btn-precio{
  width:100%;

  background:#111;
  color:white;

  border:none;
  border-radius:10px;

  padding:0.85rem 1rem;

  font-size:0.95rem;
  font-weight:500;

  cursor:pointer;

  margin-top:auto;

  transition:
  background 0.3s ease,
  transform 0.2s ease;
}

.btn-precio:hover{
  background: #e4e3e3;
  color:#6d945d;

  transform:translateY(-2px);
}

/* PRECIOS */
.precios-detalle{
  margin-top:1rem;

  background:white;

  border-radius:12px;

  padding:1rem;

  border:1px solid #e5e5e5;

  animation:fadeIn 0.25s ease;
}

.precios-detalle p{
  margin:0.5rem 0;

  font-size:0.92rem;

  color:#333;
}

/* PRECIO SIMPLE */
.precio{
  color:green;
  margin-top:auto;
  text-align:right;
}

/* LINKS */
.card-links{
  display:flex;
  flex-direction:column;

  gap:0.9rem;
}

.card-links a{
  text-decoration:none;

  color:#444;

  font-size:0.95rem;

  transition:0.25s ease;
}

.card-links a:hover{
  color:var(--color-accent);

  transform:translateX(4px);
}

/* FOOTER */
footer{
  padding:2rem;

  text-align:center;

  color:#777;

  font-size:0.85rem;
}

/* ANIMACION */
@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(-5px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* RESPONSIVE */
@media(max-width:768px){

  .portada-contenido h1{
    font-size:2.8rem;
  }

  .Titulo h2{
    font-size:2rem;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .menu{
    padding:1.5rem 5%;
  }

  .menu ul{
    gap:1rem;
  }
}