/* Abi Vamos — detalles que Tailwind CDN no resuelve cómodamente */

:root {
  --ring: #10b981;
}

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* ---------- Navegación ---------- */
.nav-link {
  border-radius: 9999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.9);
  transition: background-color .2s, color .2s;
}
.nav-link:hover { background: rgb(255 255 255 / 0.15); }
.mobile-link {
  border-bottom: 1px solid #dff5ea;
  padding: 0.85rem 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Header tras hacer scroll (clase puesta desde app.js) */
#site-header.is-scrolled {
  background: rgb(253 251 246 / 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgb(16 49 42 / 0.06);
}
#site-header.is-scrolled [data-header-text] { color: #10312a; }
#site-header.is-scrolled [data-header-sub] { color: rgb(16 49 42 / 0.6); }
#site-header.is-scrolled .nav-link { color: #10312a; }
#site-header.is-scrolled .nav-link:hover { background: #dff5ea; }
#site-header.is-scrolled [data-header-cta] { border-color: #047857; color: #047857; }
#site-header.is-scrolled [data-header-cta]:hover { background: #047857; color: #fff; }

/* ---------- Campos del buscador ---------- */
.field { display: block; }
.field-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #047857;
}
.field-input {
  width: 100%;
  height: 52px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #bfe9d6;
  border-radius: 1rem;
  background-color: #f1faf6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23047857' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.1rem;
  padding: 0 2.5rem 0 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #10312a;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field-input:hover { background-color: #e9f7f0; }
.field-input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 4px rgb(16 185 129 / 0.18); }

/* ---------- Botones ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: #047857;
  padding: 0.8rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgb(4 120 87 / 0.6);
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.btn-primary:hover { background: #065f46; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 3px solid rgb(16 185 129 / 0.45); outline-offset: 2px; }
.btn-primary:disabled { opacity: .7; cursor: not-allowed; transform: none; }

/* ---------- Tarjetas de viaje ---------- */
.trip-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #efe6d3;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 49 42 / 0.05);
  transition: transform .3s ease, box-shadow .3s ease;
  animation: card-in .5s ease both;
}
.trip-card:hover { transform: translateY(-4px); box-shadow: 0 20px 35px -18px rgb(6 78 59 / 0.35); }
.trip-card .trip-img { transition: transform .7s ease; }
.trip-card:hover .trip-img { transform: scale(1.05); }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.img-fallback { background: linear-gradient(135deg, #bfe9d6, #5fc09b); }

/* ---------- Skeletons ---------- */
.skeleton {
  background: linear-gradient(90deg, #efe6d3 25%, #f8f3e8 37%, #efe6d3 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Modal ---------- */
.modal-panel { animation: panel-in .28s cubic-bezier(.2,.8,.2,1) both; max-height: 100dvh; overflow-y: auto; }
@keyframes panel-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-panel:focus { outline: none; }
body.modal-open { overflow: hidden; }

.form-label { display: block; margin-bottom: 0.3rem; font-size: 0.8rem; font-weight: 600; }
.form-input {
  width: 100%;
  border: 1px solid #bfe9d6;
  border-radius: 0.9rem;
  background: #fff;
  padding: 0.7rem 0.9rem;
  font-size: 1rem; /* 16px: evita el zoom automático en iOS */
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 4px rgb(16 185 129 / 0.18); }
.form-input[aria-invalid="true"] { border-color: #ef4444; box-shadow: 0 0 0 4px rgb(239 68 68 / 0.12); }
.form-error { min-height: 0; margin-top: 0.25rem; font-size: 0.75rem; color: #dc2626; }
.form-error:empty { display: none; }

/* ---------- Accesibilidad ---------- */
:focus-visible { outline: 3px solid rgb(16 185 129 / 0.5); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}