/* === Variables === */
:root {
  --color-principal: #a94c6f;
  --color-secundario: #d6336c;
  --color-fondo: #fff5f9;
  --color-texto: #4a2f2f;
  --color-header: #e6b8c9;
  --color-footer: #f5dce4;
  --borde-rosado: #d4af7f;
  --sombra: rgba(0, 0, 0, 0.1);
}

/* === BASE === */
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
  background: #fffafa;
  color: var(--color-texto);
  animation: fadeIn 1s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === HEADER === */
header {
  background-color: var(--color-header);
  color: var(--color-texto);
  padding: 2rem 1rem;
  text-align: center;
  border-bottom: 2px solid var(--borde-rosado);
  box-shadow: 0 4px 6px var(--sombra);
}

h1 {
  font-family: 'Great Vibes', cursive;
  margin-bottom: 0.3rem;
  font-size: 1.8rem;
  color: var(--color-secundario);
}

/* === TÍTULOS === */
h2, .ficha-form h3 {
  font-family: 'Playfair Display', serif;
  color: var(--color-principal);
}

h2 {
  border-bottom: 2px solid var(--color-principal);
  padding-bottom: 0.3rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* === SECCIONES === */
section {
  max-width: 700px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* === GALERÍA === */
.imagenes {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.imagenes img {
  width: 180px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(164, 56, 120, 0.2);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.imagenes img:hover {
  transform: scale(1.05);
}

/* === BOTONES === */
.btn,
.ficha-form button {
  background-color: var(--color-principal);
  color: white;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  margin-top: 0.5rem;
}

.btn:hover,
.ficha-form button:hover {
  background-color: #833953;
}

/* === FOOTER === */
footer {
  text-align: center;
  padding: 1rem;
  background: var(--color-footer);
  color: var(--color-texto);
  margin-top: 3rem;
}

/* === FICHA CLIENTE === */
#ficha-cliente {
  background: var(--color-fondo);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.ficha-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ficha-section {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ficha-form input[type="text"],
.ficha-form input[type="datetime-local"],
.ficha-form textarea,
#reseñaForm input[type="text"],
#reseñaForm select,
#reseñaForm textarea,
#reseñaForm input[type="file"] {
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

.ficha-form textarea {
  resize: vertical;
}

.ficha-form label,
#reseñaForm label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: var(--color-principal);
}

.ficha-form input:focus,
.ficha-form textarea:focus,
#reseñaForm input:focus,
#reseñaForm textarea:focus {
  border-color: #a4396a;
  box-shadow: 0 0 5px var(--color-secundario);
}

/* === TOTAL === */
#total-estimado {
  background-color: #fbe9f4;
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

#total-estimado h3 {
  margin-bottom: 0.5rem;
  color: #a4396a;
}

#precio-total {
  font-size: 1.5rem;
  color: var(--color-secundario);
}

/* === RESEÑAS === */
#reseñas,
#listaReseñas {
  max-width: 700px;
  margin: 3rem auto;
  background: var(--color-fondo);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

#mediaEstrellas {
  text-align: center;
  font-size: 1.3rem;
  color: var(--color-secundario);
  margin-top: 2rem;
}

.reseña {
  margin-bottom: 1.5rem;
  animation: fadeIn 0.5s ease;
}

.reseña h4 {
  margin: 0 0 0.2rem;
  color: var(--color-principal);
}

.reseña p {
  margin: 0.2rem 0;
}

.reseña img {
  margin-top: 0.5rem;
  border-radius: 10px;
  max-width: 150px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* === BOTÓN FLOTANTE === */
.boton-reservar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--color-principal);
  color: white;
  padding: 0.9rem 1.5rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 999;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.boton-reservar:hover {
  background-color: #833953;
  transform: scale(1.05);
}

/* === RESPONSIVE === */
@media screen and (max-width: 600px) {
  #ficha-cliente {
    padding: 1.5rem 1rem;
  }

  .ficha-form label {
    font-size: 1rem;
    line-height: 1.4;
  }

  .ficha-form input,
  .ficha-form textarea,
  .ficha-form button {
    font-size: 1rem;
  }

  .boton-reservar {
    padding: 0.8rem 1.2rem;
    font-size: 0.95rem;
    bottom: 15px;
    right: 15px;
  }
}