/* ================================
   Brand Theme — MetaMedic Travel
   Paleta + Montserrat
   ================================ */

/* --------- Variables --------- */
:root {
  /* Primarios */
  --brand-primary-1: rgb(4, 82, 117);    /* azul profundo */
  --brand-primary-2: rgb(0, 113, 137);   /* teal azulado */
  --brand-primary-3: rgb(10, 142, 151);  /* teal */

  /* “Negro 40%” para texto secundario / bordes sutiles */
  --brand-black-40: rgba(0, 0, 0, 0.4);

  /* Secundarios (gradientes / acentos) */
  --brand-sec-1: rgb(70, 172, 158);
  --brand-sec-2: rgb(124, 201, 160);
  --brand-sec-3: rgb(181, 228, 163);
  --brand-sec-4: rgb(245, 251, 172);

  /* Alias para usar coherentemente */
  --primary-color: var(--brand-primary-1);
  --primary-color-2: var(--brand-primary-2);
  --primary-color-3: var(--brand-primary-3);

  --accent-color: var(--brand-sec-1);
  --accent-color-2: var(--brand-sec-2);
  --accent-color-3: var(--brand-sec-3);
  --accent-color-4: var(--brand-sec-4);

  --bg-section: linear-gradient(155deg, rgba(4,82,117,.06) 0%, rgba(10,142,151,.08) 100%);
  --bg-card: #ffffff;

  --text-color: #172024;
  --text-muted: var(--brand-black-40);

  --radius-lg: 20px;
  --radius-sm: 10px;

  --focus-ring: 0 0 0 0.2rem rgba(0,113,137,.25); /* primary-2 */
}

/* --------- Tipografía global --------- */
html, body {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-color);
  background: #fff;
}

h1, h2, h3, h4, h5 {
  font-weight: 700; /* bold */
  color: var(--primary-color);
  letter-spacing: .2px;
}
h6 { color: var(--primary-color-2); font-weight: 600; }

h8 {
  font-size: var(--h2-font-size);
  color: #218A7E;
  font-weight: var(--font-weight-bold);
  text-align: center; /* Centra el texto horizontalmente */
  display: block; /* Asegura que el elemento ocupe todo el ancho disponible */
  width: 100%; /* Ocupa el 100% del ancho del contenedor */
}

p, .lead { color: var(--text-color); }



/* --------- Navbar --------- */
.navbar {
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.navbar .container {
  justify-content: center; /* centro total del brand */
}

.navbar-brand {
  margin: 0 !important;
  padding: 8px 0;
}

.navbar .navbar-toggler {
  border: 0;
}
.navbar .navbar-toggler-icon {
  background-image: none !important;
  width: 28px; height: 2px; background: var(--primary-color);
  position: relative;
}
.navbar .navbar-toggler-icon::before,
.navbar .navbar-toggler-icon::after {
  content:'';
  position:absolute;
  left:0; right:0; height:2px; background: var(--primary-color);
}
.navbar .navbar-toggler-icon::before { top:-8px; }
.navbar .navbar-toggler-icon::after  { top: 8px; }

/* --------- Secciones --------- */
.section-contact.section-padding {
  background: var(--bg-section);
  padding-top: 120px;
  padding-bottom: 100px;
}

/* Caja central del formulario */
.custom-form.contact-form {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 10px 30px rgba(4,82,117,.08);
  border: 1px solid rgba(0,0,0,.04);
}

/* Fieldsets y legends */
.custom-form fieldset {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  padding: 18px 18px 6px;
  background: #fff;
  margin-bottom: 22px;
}
.custom-form legend {
  font-weight: 700;
  color: var(--primary-color);
  padding: 0 8px;
}

/* --------- Controles de formulario --------- */
.custom-form .form-control,
.custom-form .form-select {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.15);
  padding: 12px 16px;
  color: var(--text-color);
}
.custom-form .form-control:focus,
.custom-form .form-select:focus {
  border-color: var(--primary-color-2);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* form-floating labels en color de marca */
.form-floating > label {
  color: var(--primary-color-2);
  font-weight: 500;
}

/* Select con caret personalizado (opcional) */
.form-floating select.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23007189' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

/* Placeholder de opción vacía */
.form-floating select.form-select option[value=""] { color: #8d8d8d; }

/* --------- Botones --------- */
.btn-primary,
.custom-form button[type="submit"] {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 999px;
  font-weight: 700;
  padding: 12px 20px;
}
.btn-primary:hover,
.custom-form button[type="submit"]:hover {
  background: var(--primary-color-2);
  border-color: var(--primary-color-2);
}
.btn:disabled,
button[disabled] {
  opacity: .65;
}

.btn-white {
  background: #fff;
  color: #fff; /* texto siempre blanco */
  border: 2px solid var(--primary-color);
  border-radius: 999px;
  font-weight: 700;
  padding: 12px 20px;
  transition: all .2s ease-in-out;
  text-shadow: 0 0 2px var(--primary-color); /* truco: da contraste sobre fondo blanco */
}

.btn-white:hover {
  background: var(--primary-color-2);
  color: #fff; /* sigue blanco */
  border-color: var(--primary-color-2);
  text-shadow: none; /* opcional: que desaparezca al hover */
}

/* --------- Alertas (para el price-summary) --------- */
.alert-info {
  color: #0b3a46;
  background: linear-gradient(0deg, rgba(124,201,160,.15), rgba(124,201,160,.15)), #fff; /* sec-2 suave */
  border-color: rgba(0,113,137,.25);
  border-radius: var(--radius-sm);
}
.alert-warning {
  background: linear-gradient(0deg, rgba(245,251,172,.35), rgba(245,251,172,.35)), #fff; /* sec-4 */
  border-color: rgba(181,228,163,.45);
  color: #4a4a00;
}

/* --------- Resumen de precio (si lo ponés a la derecha) --------- */
@media (min-width: 992px) {
  .price-summary-side .alert {
    margin: 0;
  }
}

/* --------- Spinner overlay --------- */
#spinner-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(255,255,255,.92);
  z-index: 9999;
  align-items: center; justify-content: center;
  text-align: center;
  backdrop-filter: blur(1px);
}
#spinner-overlay .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary-color-2);
  display: inline-block; margin: 0 3px;
  animation: bounce 1s infinite ease-in-out;
}
#spinner-overlay .dot:nth-child(2) { animation-delay: .15s; }
#spinner-overlay .dot:nth-child(3) { animation-delay: .3s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: .5; }
  40%           { transform: scale(1.1); opacity: 1; }
}

/* --------- Títulos / cabeceras --------- */
.section-title,
h2.mb-5 {
  color: var(--primary-color);
  font-weight: 700;
}

/* --------- Helpers --------- */
.text-muted-brand { color: var(--text-muted); }
.border-soft { border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius-sm); }
.bg-soft { background: rgba(0,113,137,.06); } /* primary-2 muy suave */

/* --------- Responsive --------- */
@media (max-width: 991px) {
  .section-contact.section-padding { padding-top: 100px; }
  .custom-form.contact-form { padding: 18px; }
}

.form-error {
  min-height: 1.25rem;   /* reserva altura aunque no haya error */
  font-weight: 600;
}

/* Altura estimada del navbar fijo (ajustá si tu barra es más alta/baja) */
.has-fixed-nav {
  /* deja espacio arriba para que el contenido no quede tapado */
  padding-top: 90px; /* probar 80–100px según el viewport */
}

/* Tarjeta de éxito */
.success-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(4,82,117,.08);
}

/* Ícono de éxito con colores de marca */
.success-icon svg circle {
  fill: var(--accent-color-3);           /* verde suave de la paleta */
  stroke: var(--accent-color-3);
}
.success-icon svg path {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Espaciados de sección (usado arriba y en el footer existente) */
.section-padding {
  padding-top: 40px;
  padding-bottom: 40px;
}

.lead { font-weight: 500; }