/* ========================================================
   Amour Spa — Plantilla compartida de subpáginas
   (about.html, services.html, contact.html)
   ======================================================== */

/* ---------- Hero de página interna ---------- */
.page-banner {
  padding-top: 140px;
  min-height: 320px;
  display: flex;
  align-items: center;
}

@media (min-width: 992px) {
  .page-banner {
    padding-top: 190px;
    min-height: 380px;
  }
}

.page-banner::after {
  background: linear-gradient(160deg, rgba(42, 15, 22, 0.72), rgba(18, 7, 10, 0.78));
}

.page-banner .banner-content ul,
.page-banner .banner-content ul li {
  color: var(--pp-text-muted, #d3b3ae);
}

.page-banner .banner-content ul li a {
  color: var(--pp-text-muted, #d3b3ae);
}

.page-banner .banner-content ul li a:hover,
.page-banner .banner-content ul li a.active {
  color: var(--pp-accent-gold, #d9a56b);
}

.page-banner .banner-content ul li i {
  color: var(--pp-text-muted, #d3b3ae);
  font-size: 0.85rem;
}

/* ---------- Formulario de contacto: misma tarjeta vino/dorada que "Manos especialistas" ---------- */
.contact-page {
  background-color: transparent;
}

.contact-page .contact-form {
  background: rgba(38, 18, 24, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(217, 165, 107, 0.28);
  border-radius: 24px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
  padding: 32px 20px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 992px) {
  .contact-page .contact-form {
    padding: 56px 64px;
  }
}

/* Línea dorada superior, igual que las tarjetas del equipo */
.contact-page .contact-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, #d9a56b, #f5d39d, #d9a56b);
  border-radius: 20px;
}

.contact-page .contact-form .contact-title h2 {
  color: #f8f4ef;
}

.contact-page .contact-form form {
  border-top-color: rgba(217, 165, 107, 0.2);
}

.contact-page .contact-form form p {
  border-bottom-color: rgba(217, 165, 107, 0.2);
}

.contact-page .contact-form form label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--pp-accent-gold, #d9a56b);
  font-size: 14px;
  font-weight: 500;
}

.contact-page .contact-form .salonix-input {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(217, 165, 107, 0.25);
  border-radius: 10px;
  color: #f5e6e2;
}

.contact-page .contact-form .salonix-input::placeholder {
  color: rgba(245, 230, 226, 0.5);
}

.contact-page .contact-form .salonix-input:focus {
  border-color: #d9a56b;
}

/* Select "Rituel de interés" (plugin nice-select) igual que los demás campos.
   Se incluye "form" en los selectores para igualar la especificidad de style.css */
.contact-page .contact-form form .nice-select {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(217, 165, 107, 0.25) !important;
  border-radius: 10px;
  color: #f5e6e2;
}

.contact-page .contact-form form .nice-select .current {
  color: #f5e6e2 !important;
}

.contact-page .contact-form form .nice-select::after {
  border-color: #d9a56b !important;
}

.contact-page .contact-form form .nice-select.open {
  border-color: #d9a56b !important;
}

.contact-page .contact-form form .nice-select .nice-select-dropdown {
  background-color: #2a0f16 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.contact-page .contact-form form .nice-select .option {
  color: #f5e6e2;
}

.contact-page .contact-form form .nice-select .option:hover,
.contact-page .contact-form form .nice-select .option.focus,
.contact-page .contact-form form .nice-select .option.selected,
.contact-page .contact-form form .nice-select .option.selected.focus {
  background-color: #d9a56b;
  color: #2a0f16;
}

/* ---------- Más ayuda: tarjetas translúcidas del tema oscuro ---------- */
.more-help {
  background-color: transparent;
}

.more-help .help-card {
  background-color: var(--pp-card, rgba(255, 255, 255, 0.035));
  border: 1px solid var(--pp-card-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  transition: border-color 300ms ease, transform 300ms ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.more-help .help-card:hover {
  border-color: var(--pp-accent, #fca9a9);
  transform: translateY(-4px);
}

.more-help .help-card i {
  background-color: rgba(217, 165, 107, 0.14);
  color: var(--pp-accent-gold, #d9a56b);
  border-radius: 50%;
}

.more-help .help-card a,
.more-help .help-card span {
  color: var(--pp-text-muted, #d3b3ae) !important;
}

.more-help .help-card a:hover {
  color: var(--pp-accent-gold, #d9a56b) !important;
}

/* ---------- Mapa ---------- */
.contact-map {
  padding-bottom: 120px;
}

.contact-map__frame {
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 280px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--pp-card-border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 20px 45px rgba(18, 7, 10, 0.35);
  filter: saturate(0.85) brightness(0.92);
}

@media (max-width: 767.98px) {
  .contact-map__frame {
    aspect-ratio: 4 / 5;
    min-height: 320px;
  }
}