/* XTravel Inicio - estilos complementarios */

/* Evita franjas negras en móvil forzando la altura al viewport visible */
#hero {
  /* fallback razonable para navegadores sin soporte de unidades viewport pequeñas */
  min-height: 100vh;
  /* Evitar el uso de contain: layout, ya que impide el breakout de ancho completo */
  contain: paint;
}
@supports (height: 100svh) {
  #hero { min-height: 100svh; }
}

/* Breakout a ancho completo (full-bleed) incluso dentro de contenedores con max-width */
#hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@supports (width: 100svw) {
  #hero {
    width: 100svw;
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
}
@supports (width: 100dvw) {
  #hero {
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

/* Evitar scroll horizontal indeseado cuando se aplica el breakout */
@supports selector(body:has(#hero)) {
  body:has(#hero) { overflow-x: clip; }
}

/* Utilidad de breakout a ancho completo (full-bleed) reutilizable */
.xtravel-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@supports (width: 100svw) {
  .xtravel-bleed {
    width: 100svw;
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
}
@supports (width: 100dvw) {
  .xtravel-bleed {
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

@supports selector(body:has(.xtravel-bleed)) {
  body:has(.xtravel-bleed) { overflow-x: clip; }
}

/* Asegurar que las imágenes del hero llenen el contenedor */
#hero img { object-fit: cover; width: 100%; height: 100%; display: block; }
#hero { position: relative; }
/* Slides: evitar reflow inicial y cambios bruscos */
#hero .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease; }
/* Mejorar rendimiento ocultando contenido no visible */
#hero .slide:not([data-active]) { content-visibility: auto; contain-intrinsic-size: 1000px 562px; }
#hero .slide[data-active] { opacity: 1; visibility: visible; }
/* Mostrar el primer slide lo antes posible para evitar parpadeo, solo antes de .is-ready */
#hero:not(.is-ready) .slide:first-child { opacity: 1; visibility: visible; }
#hero.is-ready .slide:first-child:not([data-active]) { opacity: 0; visibility: hidden; }

/* Suavizado de texto para reducir banding en gradientes */
#hero .xhero-title, #hero .xhero-cta {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Desactivar gradiente/animación del título hasta que el hero esté listo */
#hero:not(.is-ready) .xhero-title {
  background: none !important;
  -webkit-text-fill-color: currentColor;
  animation: none !important;
}
/* Evitar transiciones innecesarias en CTA antes de estar listo */
#hero:not(.is-ready) .xhero-cta { transition: none; }

/* Ocultar contenido textual hasta que el hero esté listo para evitar "rayas" */
#hero .xhero-content { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
#hero.is-ready .xhero-content { opacity: 1; transform: translateY(0); }
/* Reducir sombras mientras no está listo para minimizar banding visual */
#hero:not(.is-ready) .xhero-title { text-shadow: none !important; }
#hero:not(.is-ready) .hero-chip { opacity: .001; }
/* Botones de navegación hero */
#hero .xtravel-hero-nav {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 9999px;
  color: #fff;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  z-index: 80; /* por encima de slides y overlays */
  pointer-events: auto;
}
#hero .xtravel-hero-nav:hover { background: rgba(0,0,0,0.5); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
#hero .xtravel-hero-nav:active { transform: translateY(0); }
#hero .xtravel-hero-nav:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

/* Ajuste para botones del carrusel en móvil */
@media (max-width: 640px) {
  /* Reducir claramente la altura del hero en móvil (usar height en vez de min-height) */
  #hero { height: 75vh !important; min-height: 0 !important; transition: height .25s ease; }
  @supports (height: 100svh) {
    #hero { height: 75svh !important; }
  }
  @supports (height: 100dvh) {
    #hero { height: 75dvh !important; }
  }
  /* Evitar conflictos con estilos inline (por si el JS dejó residuos) */
  #hero[style] { height: 75vh !important; min-height: 0 !important; }
  @supports (height: 100svh) {
    #hero[style] { height: 75svh !important; }
  }
  @supports (height: 100dvh) {
    #hero[style] { height: 75dvh !important; }
  }
  #hero .prev, #hero .next { top: auto; bottom: 1rem; transform: none; }
  #hero .xtravel-hero-nav { width: 40px; height: 40px; }

  /* Tipografía y CTA más compactas en móvil */
  #hero h1 { font-size: 1.875rem; /* ~text-3xl */ }
  #hero h2 { font-size: 1.5rem;   /* ~text-2xl */ }
  #hero a[data-open-modal="reserva-modal"] { padding: 0.5rem 0.875rem; font-size: 0.9rem; }
}

/* Hero: estilos tipográficos y botones */
#hero .xhero-title {
  color: #fff; /* fallback */
  background: linear-gradient(90deg, #e2e8f0, #ffffff, #bae6fd, #a7f3d0);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  /* activar animación solo cuando está listo e inview para ahorrar CPU */
  animation: none;
}
/* Activar animación de título sólo cuando está listo e inview */
#hero.is-ready.inview .xhero-title { animation: xhero-title-sheen 10s linear infinite; }
/* Antes de estar listo, forzar renderizado simple del título para evitar banding */
#hero:not(.is-ready) .xhero-title { -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: none !important; }
@keyframes xhero-title-sheen { 0%{background-position:0 50%} 100%{background-position:200% 50%} }
@media (prefers-reduced-motion: reduce) { #hero .xhero-title { animation: none; } }

#hero .hero-tag i { font-size: 14px; }
#hero .hero-meta .hero-chip { display:inline-flex; align-items:center; gap:6px; }
#hero .hero-meta .hero-chip i { font-size: 14px; width: 1em; height: 1em; display: inline-block; }

#hero .xhero-cta {
  background: linear-gradient(90deg, #fde047, #fbbf24);
  color: #0f172a; /* slate-900 */
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#hero .xhero-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,0.3); }
#hero .xhero-cta:active { transform: translateY(0); }
#hero .xhero-cta i { font-size: 16px; }

/* Acentos por slide (título y CTA) */
.hero-acc--indigo .xhero-title { background-image: linear-gradient(90deg, #c7d2fe, #e0e7ff, #ffffff); }
.hero-acc--indigo .xhero-cta { background: linear-gradient(90deg, #6366f1, #3b82f6); color: #fff; }

.hero-acc--green .xhero-title { background-image: linear-gradient(90deg, #bbf7d0, #dcfce7, #ffffff); }
.hero-acc--green .xhero-cta { background: linear-gradient(90deg, #16a34a, #22c55e); color: #fff; }

.hero-acc--teal .xhero-title { background-image: linear-gradient(90deg, #99f6e4, #ccfbf1, #ffffff); }
.hero-acc--teal .xhero-cta { background: linear-gradient(90deg, #0d9488, #14b8a6); color: #083344; }

.hero-acc--amber .xhero-title { background-image: linear-gradient(90deg, #fde68a, #fff7ed, #ffffff); }
.hero-acc--amber .xhero-cta { background: linear-gradient(90deg, #f59e0b, #fbbf24); color: #111827; }

.hero-acc--blue .xhero-title { background-image: linear-gradient(90deg, #bfdbfe, #dbeafe, #ffffff); }
.hero-acc--blue .xhero-cta { background: linear-gradient(90deg, #2563eb, #0ea5e9); color: #fff; }

.hero-acc--violet .xhero-title { background-image: linear-gradient(90deg, #ddd6fe, #e9d5ff, #ffffff); }
.hero-acc--violet .xhero-cta { background: linear-gradient(90deg, #7c3aed, #a855f7); color: #fff; }

/* Modal: compactar en móvil */
@media (max-width: 640px) {
  .xtravel-modal-card { padding: 12px !important; border-radius: 12px; }
  .xtravel-modal-card h3 { font-size: 1rem; }
  .xtravel-modal-card p { font-size: .9rem; }
  .xtravel-modal-card .grid { gap: .6rem !important; }
  .xtravel-modal-card form#xtravel-form > * + * { margin-top: .6rem; }
  .xtravel-input { padding: 8px 10px; font-size: .95rem; }
  .xtravel-textarea { min-height: 90px; }
  .xtravel-submit { padding: 8px 12px; font-size: .9rem; }
  .xtravel-label-text { font-size: .9rem; }
  .xtravel-close { width: 30px; height: 30px; }
}

/* Aún más compacto en móvil para el formulario del modal */
@media (max-width: 640px) {
  #reserva-modal .xtravel-modal-card {
    width: calc(100vw - 32px);
    max-width: 460px;
    padding: 10px 10px 12px 10px !important;
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(15,23,42,0.22);
    /* Evitar cortar contenido: permitir scroll interno */
    max-height: 82vh;
    max-height: 82svh;
    overflow: auto; /* cambiado de hidden -> auto */
    position: relative;
  }
  #reserva-modal .xtravel-modal-card h3 { font-size: .95rem; }
  #reserva-modal .xtravel-modal-card p { font-size: .85rem; }
  /* Mantener separación compacta, sin forzar 1 columna globalmente */
  #reserva-modal .xtravel-modal-card .grid {
    gap: .5rem !important;
  }
  /* Forzar 2 columnas también en móvil para los pares del formulario */
  #reserva-modal .xtravel-modal-card .xgrid-pairs {
    grid-template-columns: 1fr 1fr !important;
    column-gap: .5rem !important;
    row-gap: .5rem !important;
  }
  #reserva-modal .xtravel-modal-card form#xtravel-form > * + * { margin-top: .5rem; }
  #reserva-modal .xtravel-label-text { font-size: .85rem; }
  #reserva-modal .xtravel-input { padding: 7px 9px; font-size: .9rem; line-height: 1.3; }
  #reserva-modal .xtravel-textarea { min-height: 80px; }
  #reserva-modal .xtravel-submit { padding: 7px 10px; font-size: .85rem; }
  /* Reposicionar el botón cerrar al lado opuesto (esquina superior izquierda) */
  #reserva-modal .xtravel-close {
    width: 28px; height: 28px;
    position: absolute; top: 8px; left: 8px; right: auto; z-index: 10;
  }
  /* Evitar que el botón solape el título */
  #reserva-modal .xtravel-modal-card .flex > header { padding-left: 28px; }
  /* Compactar bloques de ayuda debajo del formulario */
  #xtravel-form-indicator span, #xtravel-form-response { font-size: .85rem; }
}

/* Modal mejorado */
.xtravel-modal-card {
  border: 1px solid #e2e8f0; /* slate-200 */
  box-shadow: 0 20px 40px rgba(15,23,42,0.25);
}
.xtravel-close {
  border: 1px solid #e2e8f0;
  color: #334155; /* slate-700 */
  background: #fff;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.xtravel-close:hover { background: #f8fafc; /* slate-50 */ }
.xtravel-close:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

/* Inputs mejorados */
.xtravel-label { font-size: 0.9rem; color: #0f172a; }
.xtravel-label-text { display: block; margin-bottom: 6px; font-weight: 600; color: #334155; }
.xtravel-input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1; /* slate-300 */
  padding: 10px 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.xtravel-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.2); outline: none; }
.xtravel-textarea { min-height: 110px; resize: vertical; }

/* Campo con icono embebido */
.xtravel-field { position: relative; }
.xtravel-field .icon {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: #64748b; /* slate-500 */ font-size: 18px;
}
.xtravel-field > .xtravel-input { padding-right: 36px; }

/* Checkbox y enlaces */
.xtravel-checkbox { width: 1rem; height: 1rem; border: 1px solid #cbd5e1; border-radius: 4px; }
.xtravel-link { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.xtravel-link:hover { color: #1d4ed8; }

/* Awesomplete tuning minimal */
.awesomplete > ul { border-radius: 10px; box-shadow: 0 12px 30px rgba(2,6,23,0.18); border: 1px solid #e2e8f0; }
.awesomplete mark { background: #eff6ff; color: #1e3a8a; border-radius: 4px; }

.xtravel-submit {
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #0f172a, #1f2937); /* slate-900 -> gray-800 */
  color: #fff; padding: 10px 16px;
  font-weight: 600; font-size: 0.95rem;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 8px 20px rgba(2,6,23,0.35);
}
.xtravel-submit:hover { transform: translateY(-1px); }
.xtravel-submit:active { transform: translateY(0); }
.xtravel-submit:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

/* Sección "¿Por qué elegir X-Travel Perú?" */
/* Fondo sutil con radiales que no sobreescriben bg-white de Tailwind */
#porque-xtravel {
  position: relative;
  background-image:
    radial-gradient(1200px 600px at 0% 0%, rgba(14,165,233,0.06), transparent 70%),
    radial-gradient(900px 500px at 100% 10%, rgba(16,185,129,0.06), transparent 65%);
  background-repeat: no-repeat;
}

/* Título con degradado (con fallback de color) */
#porque-xtravel #porque-heading {
  color: #0ea5e9; /* fallback */
  background: linear-gradient(90deg, #0ea5e9, #22c55e, #f59e0b, #ef4444);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  animation: xtravel-heading-sheen 8s linear infinite;
}

@keyframes xtravel-heading-sheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  #porque-xtravel #porque-heading { animation: none; }
}

/* Datos referenciales (stats) */
#porque-xtravel .why-stats { align-items: center; }
#porque-xtravel .why-stat {
  display: flex; align-items: center; gap: 8px;
  background: #ffffff; border: 1px solid #e5e7eb; border-radius: 9999px;
  padding: 8px 10px;
  box-shadow: 0 6px 16px rgba(2,6,23,0.06);
}
#porque-xtravel .why-stat i { font-size: 18px; color: #0ea5e9; }
#porque-xtravel .why-stat strong { display:block; line-height:1; font-size: 13px; color:#0f172a; }
#porque-xtravel .why-stat span { display:block; line-height:1; font-size: 11px; color:#64748b; }
@media (max-width:640px){
  #porque-xtravel .why-stat { padding: 7px 9px; gap: 6px; }
  /* Forzar icono más pequeño en móvil, sobre utilidades Tailwind */
  #porque-xtravel .why-stat i { font-size: 12px !important; line-height: 1; }
  #porque-xtravel .why-stat strong { font-size: 11px; }
  #porque-xtravel .why-stat span { font-size: 9.5px; }
}

/* Tarjeta base */
#porque-xtravel .why-card {
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb; /* slate-200 */
  border-radius: 14px;
  padding: 18px 16px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
  position: relative;
  overflow: hidden;
}
#porque-xtravel .why-card:hover {
  border-color: #cbd5e1; /* slate-300 */
  box-shadow: 0 10px 24px rgba(15,23,42,0.08); /* sutil */
  transform: translateY(-2px);
}
/* Línea superior con degradado según el acento */
#porque-xtravel .why-card::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent, #2563eb) 70%, #ffffff),
    color-mix(in oklab, var(--accent, #2563eb) 35%, #ffffff),
    color-mix(in oklab, var(--accent, #2563eb) 70%, #ffffff)
  );
  opacity: .85; pointer-events: none;
}
/* Icono principal reducido y consistente */
#porque-xtravel .why-icon {
  margin: 0 auto 8px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #f1f5f9; /* slate-100 */
  color: #2563eb; /* blue-600 */
  position: relative;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent, #2563eb) 25%, #e2e8f0), 0 6px 14px rgba(2,6,23,0.06);
}
#porque-xtravel .why-icon i {
  font-size: 20px; line-height: 1;
  width: 1em; height: 1em; display: inline-block; text-align: center;
}
#porque-xtravel .why-card:hover .why-icon { transform: translateY(-1px); }
#porque-xtravel .why-card:hover .why-icon { transform: translateY(-1px); }
#porque-xtravel .why-icon::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.65), transparent 60%);
  opacity: 0; transition: opacity .25s ease;
}
#porque-xtravel .why-card:hover .why-icon::after { opacity: .6; }
#porque-xtravel .why-title {
  font-weight: 700; color: #0f172a; font-size: 0.98rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  line-height: 1.25; min-height: calc(1em * 1.25 * 2); /* altura fija 2 líneas */
}
#porque-xtravel .why-text {
  margin-top: 6px; color: #475569; font-size: .88rem; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  min-height: calc(1em * 1.55 * 3);
}
#porque-xtravel .why-chips {
  margin-top: 8px; display: flex; flex-wrap: nowrap; gap: 6px; justify-content: center;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; white-space: nowrap;
}
#porque-xtravel .why-chips::-webkit-scrollbar { display: none; }
#porque-xtravel .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 9999px;
  background: #f8fafc; /* slate-50 */
  color: #334155; font-size: 11px; font-weight: 600;
  border: 1px solid #e2e8f0;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
#porque-xtravel .chip {
  max-width: 160px; /* evitar chips demasiado anchos */
}
#porque-xtravel .chip i { font-size: 14px; width: 1em; height: 1em; display: inline-block; }
#porque-xtravel .chip { overflow: hidden; text-overflow: ellipsis; }
#porque-xtravel .chip > i + * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#porque-xtravel .why-card:hover .chip {
  background: color-mix(in oklab, var(--chip-bg, #f8fafc) 75%, #ffffff);
  border-color: color-mix(in oklab, var(--accent, #2563eb) 25%, #e2e8f0);
}

/* Badge superior minimalista */
#porque-xtravel .why-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
  padding: 4px 10px; border-radius: 9999px;
  background: #f8fafc; color: #0f172a; font-weight: 700; font-size: 11px;
  border: 1px solid #e2e8f0;
}

/* Variantes de color (accent) usando variables CSS por tarjeta) */
#porque-xtravel .why-card { --accent-bg: #f1f5f9; --accent: #2563eb; --chip-bg: #f8fafc; --chip-text: #334155; }
#porque-xtravel .why-card .why-icon { background: var(--accent-bg); color: var(--accent); }
#porque-xtravel .why-card .why-title { color: #0f172a; }
#porque-xtravel .why-card .chip { background: var(--chip-bg); color: var(--chip-text); }
#porque-xtravel .why-card.why--indigo { --accent: #4f46e5; --accent-bg: #eef2ff; --chip-bg: #eef2ff; --chip-text: #3730a3; }
#porque-xtravel .why-card.why--green { --accent: #16a34a; --accent-bg: #ecfdf5; --chip-bg: #ecfdf5; --chip-text: #166534; }
#porque-xtravel .why-card.why--amber { --accent: #d97706; --accent-bg: #fffbeb; --chip-bg: #fffbeb; --chip-text: #92400e; }
#porque-xtravel .why-card.why--teal { --accent: #0d9488; --accent-bg: #f0fdfa; --chip-bg: #f0fdfa; --chip-text: #115e59; }
#porque-xtravel .why-card.why--blue { --accent: #2563eb; --accent-bg: #eff6ff; --chip-bg: #eff6ff; --chip-text: #1e3a8a; }
#porque-xtravel .why-card.why--emerald { --accent: #10b981; --accent-bg: #ecfdf5; --chip-bg: #ecfdf5; --chip-text: #065f46; }
/* Variantes extra para más color */
#porque-xtravel .why-card.why--rose { --accent: #e11d48; --accent-bg: #fff1f2; --chip-bg: #fff1f2; --chip-text: #9f1239; }
#porque-xtravel .why-card.why--orange { --accent: #ea580c; --accent-bg: #fff7ed; --chip-bg: #fff7ed; --chip-text: #9a3412; }
#porque-xtravel .why-card.why--cyan { --accent: #06b6d4; --accent-bg: #ecfeff; --chip-bg: #ecfeff; --chip-text: #155e75; }
#porque-xtravel .why-card.why--violet { --accent: #7c3aed; --accent-bg: #f5f3ff; --chip-bg: #f5f3ff; --chip-text: #4c1d95; }
#porque-xtravel .why-card.why--slate { --accent: #334155; --accent-bg: #f1f5f9; --chip-bg: #f8fafc; --chip-text: #334155; }
#porque-xtravel .why-card.why--sky { --accent: #0ea5e9; --accent-bg: #e0f2fe; --chip-bg: #e0f2fe; --chip-text: #075985; }
#porque-xtravel .why-card.why--lime { --accent: #65a30d; --accent-bg: #f7fee7; --chip-bg: #f7fee7; --chip-text: #3f6212; }
#porque-xtravel .why-card.why--red { --accent: #ef4444; --accent-bg: #fee2e2; --chip-bg: #fee2e2; --chip-text: #991b1b; }

/* Acabados de color en título y badge */
#porque-xtravel .why-card .why-badge { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, #e2e8f0); background: color-mix(in oklab, var(--accent) 6%, #ffffff); }
#porque-xtravel .why-card .why-title { color: color-mix(in oklab, var(--accent) 22%, #0f172a); }
/* Hover y focus visibles en badge */
#porque-xtravel .why-card .why-badge {
  box-shadow: 0 2px 8px rgba(2,6,23,0.05);
  text-transform: none;
}
#porque-xtravel .why-card .why-badge { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#porque-xtravel .why-card:hover .why-badge { border-color: color-mix(in oklab, var(--accent) 50%, #e2e8f0); }
#porque-xtravel .why-card .why-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Colorear títulos por ítem (gradiente con fallback de color) */
#porque-xtravel .why-card .why-title {
  position: relative;
  display: inline-block;
  color: var(--accent, #0f172a); /* fallback */
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent, #0f172a) 95%, #ffffff),
    color-mix(in oklab, var(--accent, #0f172a) 65%, #000000)
  );
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position .6s ease;
}
#porque-xtravel .why-card:hover .why-title { background-position: 100% 50%; }

/* Cabecera horizontal (icono + badge) */
#porque-xtravel .why-head {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  #porque-xtravel .why-card { padding: 12px 10px; }
  #porque-xtravel .why-icon { width: 32px; height: 32px; }
  #porque-xtravel .why-icon i { font-size: 16px; }
  #porque-xtravel .why-title { font-size: .9rem; -webkit-line-clamp: 2; line-clamp: 2; min-height: calc(1em * 1.25 * 2); }
  #porque-xtravel .why-text { font-size: .82rem; -webkit-line-clamp: 3; line-clamp: 3; min-height: calc(1em * 1.55 * 3); }
  #porque-xtravel .why-chips { gap: 4px; }
  #porque-xtravel .chip { padding: 3px 6px; font-size: 10.5px; max-width: 140px; }
  #porque-xtravel .chip i { font-size: 12px; }
}

/* Tablet: tamaño intermedio (md: 641px–1023px) */
@media (min-width: 641px) and (max-width: 1023px) {
  /* Stats compactas en tablet */
  #porque-xtravel .why-stat { padding: 7px 10px; gap: 8px; }
  #porque-xtravel .why-stat i { font-size: 15px !important; line-height: 1; }
  #porque-xtravel .why-stat strong { font-size: 12px; }
  #porque-xtravel .why-stat span { font-size: 10.5px; }

  /* Tarjeta: icono principal un poco reducido */
  #porque-xtravel .why-icon { width: 36px; height: 36px; }
  #porque-xtravel .why-icon i { font-size: 18px; }

  /* Chips ligeramente más compactos */
  #porque-xtravel .chip { padding: 4px 8px; font-size: 10.5px; }
  #porque-xtravel .chip i { font-size: 13px; }
}

/* Respetar usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  #porque-xtravel .why-card, #porque-xtravel .xtravel-hero-nav, #porque-xtravel .chip, #porque-xtravel .why-icon { transition: none !important; }
  #porque-xtravel .why-card:hover { transform: none !important; }
}

/* ==============================
   Tours más vendidos (grid/cards)
   Coincide con el HTML entregado por la API (xtravel-grid / xtravel-card)
   ============================== */
/* Contenedor de grilla */
.xtravel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; /* 20px */
}
@media (min-width: 640px) { /* sm */
  .xtravel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { /* lg */
  .xtravel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Tarjeta */
.xtravel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb; /* slate-200 */
  border-radius: 12px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
}
.xtravel-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15,23,42,0.10);
  border-color: #d1d5db; /* slate-300 */
}

/* Imagen de portada con relación de aspecto estable */
.xtravel-card .thumb {
  position: relative;
  background: #f1f5f9; /* slate-100 */
  aspect-ratio: 4 / 3; /* asegura altura estable; amplio soporte actual */
}
.xtravel-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cuerpo */
.xtravel-card .body { padding: 10px 12px 12px; }
.xtravel-card .title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 1rem;
  color: #0f172a; /* slate-900 */
}
.xtravel-card .desc {
  margin: 0 0 10px;
  color: #475569; /* slate-600 */
  font-size: .92rem;
  line-height: 1.5;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xtravel-card .btn {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  padding: 7px 11px;
  border-radius: 9px;
  background: #111827; /* gray-900 */
  color: #fff;
  font-weight: 600;
  font-size: .88rem;
  box-shadow: 0 6px 16px rgba(2,6,23,0.22);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.xtravel-card .btn:hover { transform: translateY(-1px); background: #0b1220; }
.xtravel-card .btn:active { transform: translateY(0); }
.xtravel-card .btn:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

/* Meta: estrellas e iconos */
.xtravel-card .xtravel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 8px 0 10px;
}
.xtravel-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent, #475569); /* usa el acento del bloque; fallback slate */
}
.xtravel-stars i { font-size: 16px; line-height: 1; }
.xtravel-stars .muted { margin-left: 4px; color: #64748b; font-size: .85rem; font-weight: 600; }
.xtravel-icons { display: inline-flex; align-items: center; gap: 6px; color: #334155; }
.xtravel-icons .ico {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: #f8fafc; border: 1px solid #e2e8f0; color: #0f172a;
}
.xtravel-icons .ico i { font-size: 14px; line-height: 1; }

/* Variantes de color por acento (puede aplicarse en contenedor futuro) */
.xtravel-icons .ico.is-green { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.xtravel-icons .ico.is-amber { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.xtravel-icons .ico.is-indigo { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.xtravel-icons .ico.is-blue { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.xtravel-icons .ico.is-rose { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }

/* Acciones: precio + botón en la misma fila */
.xtravel-card .actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.xtravel-card .price { font-size: .95rem; color: var(--accent, #111827); }
.xtravel-card .price strong { font-weight: 700; }
/* Evitar que el botón se alinee al inicio cuando hay acciones */
.xtravel-card .actions .btn { align-self: auto; }

/* Sistema de acentos por categoría (aplicado a contenedor .xtravel-cat.xaccent-*) */
.xtravel-cat.xaccent-default { --accent:#334155; --accent-bg:#f1f5f9; --accent-border:#cbd5e1; }
.xtravel-cat.xaccent-adventure { --accent:#4f46e5; --accent-bg:#eef2ff; --accent-border:#c7d2fe; } /* indigo */
.xtravel-cat.xaccent-trek { --accent:#e11d48; --accent-bg:#fff1f2; --accent-border:#fecdd3; } /* rose */
.xtravel-cat.xaccent-culture { --accent:#8B5E34; --accent-bg:#F6EFE8; --accent-border:#E3D5CA; } /* café */
.xtravel-cat.xaccent-national { --accent:#2563eb; --accent-bg:#eff6ff; --accent-border:#bfdbfe; }
.xtravel-cat.xaccent-program { --accent:#0d9488; --accent-bg:#f0fdfa; --accent-border:#99f6e4; }
.xtravel-cat.xaccent-luxury { --accent:#c026d3; --accent-bg:#fdf4ff; --accent-border:#f5d0fe; } /* fuchsia */

/* Aplicación de acento a título, botón e iconos */
.xtravel-cat[class*="xaccent-"] .xtravel-cat-title { color: var(--accent, #0f172a); }
.xtravel-cat[class*="xaccent-"] .xtravel-card .btn {
  background: #ffffff;
  color: var(--accent, #111827);
  border: 1px solid var(--accent-border, #e2e8f0);
  box-shadow: 0 6px 16px rgba(2,6,23,0.08);
}
.xtravel-cat[class*="xaccent-"] .xtravel-card .title {
  color: var(--accent, #0f172a);
}
.xtravel-cat[class*="xaccent-"] .xtravel-card .btn:hover {
  background: var(--accent, #111827);
  color: #ffffff;
}
.xtravel-cat[class*="xaccent-"] .xtravel-icons .ico {
  background: var(--accent-bg, #f8fafc);
  border-color: var(--accent-border, #e2e8f0);
  color: var(--accent, #334155);
  border-radius: 9999px;
}

/* Estado vacío */
.xtravel-empty {
  padding: 1rem;
  text-align: center;
  color: #64748b; /* slate-500 */
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

/* Título de bloque entregado por la API */
.xtravel-cat-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
.xtravel-cat-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, #e5e7eb, #f1f5f9);
}

/* ==============================
   HTMX: Indicador de envío
   - Oculto por defecto
   - Visible solo mientras hay una petición en curso
   ============================== */
#xtravel-form-indicator { display: none; }
#xtravel-form-indicator.htmx-request { display: block !important; }
/* Refuerzo: si HTMX aplica la clase al formulario, mostrar al hermano indicador */
#xtravel-form.htmx-request + #xtravel-form-indicator,
#xtravel-form.htmx-request ~ #xtravel-form-indicator { display: block !important; }

/* Fallback de animación para el spinner si Tailwind no está presente */
@keyframes xtravel-spin { to { transform: rotate(360deg); } }
.animate-spin { animation: xtravel-spin 1s linear infinite; }

/* ==============================
   ¿Qué incluyen nuestros tours? (layout responsive)
   - PC/Tablet: una sola fila (scroll horizontal si no entra)
   - Móvil: 5 por fila (grid con wrap) y tamaños reducidos
   ============================== */
.xtravel-perks {
  display: grid;
  grid-auto-flow: column;          /* Una sola fila en desktop */
  grid-auto-columns: minmax(120px, 1fr);
  grid-template-rows: 1fr;
  gap: 10px;
  padding: 6px 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}
.xtravel-perks::-webkit-scrollbar { height: 8px; }
.xtravel-perks::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 9999px; }
.xtravel-perks::-webkit-scrollbar-track { background: transparent; }

.perk {
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid #e5e7eb; /* slate-200 */
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 6px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
}
.perk:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15,23,42,0.10);
  border-color: #d1d5db; /* slate-300 */
}
.perk i {
  font-size: 18px; /* más compacto */
  line-height: 1;
  margin-bottom: 4px;
}
.perk span {
  font-size: 11px;
  font-weight: 600;
  color: #0f172a; /* slate-900 */
}

/* Móvil: 5 por fila y más compacto */
@media (max-width: 640px) {
  .xtravel-perks {
    grid-auto-flow: initial; /* anula fila única */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 8px;
    overflow-x: visible;
  }
  .perk { padding: 6px 4px; border-radius: 8px; }
  .perk i { font-size: 16px; margin-bottom: 2px; }
  .perk span { font-size: 10px; font-weight: 600; }
}

/* PC: todos en una sola fila, sin scroll, aún más compacto */
@media (min-width: 1024px) {
  .xtravel-perks {
    grid-auto-flow: initial;           /* desactivar fila única automática */
    grid-auto-columns: initial;
    grid-template-columns: repeat(14, minmax(0, 1fr)); /* 14 columnas fijas */
    overflow-x: visible;               /* sin scroll */
    gap: 8px;
    padding: 8px 12px;
  }
  .perk { padding: 8px 6px; border-radius: 8px; }
  .perk i { font-size: 16px; }
  .perk span { font-size: 10.5px; }
}

/* Paletas por ítem (sutiles) */
.perk--1 { background: #eef2ff; border-color: #c7d2fe; }
.perk--1 i { color: #4338ca; }

.perk--2 { background: #ecfeff; border-color: #a5f3fc; }
.perk--2 i { color: #0891b2; }

.perk--3 { background: #f0fdf4; border-color: #86efac; }
.perk--3 i { color: #15803d; }

.perk--4 { background: #fff1f2; border-color: #fecdd3; }
.perk--4 i { color: #be123c; }

/* ==============================
   Emojis fullscreen overlay ❤️
   ============================== */
.xtravel-emoji-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; overflow: hidden; }
.xtravel-emoji-overlay .xtravel-emoji {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  animation: xtravel-emoji-pop 1200ms ease-out forwards;
  filter: drop-shadow(0 6px 10px rgba(2,6,23,0.25));
}
@keyframes xtravel-emoji-pop {
  0% { transform: translate(0, 0) scale(0.5) rotate(var(--rot, 0deg)); opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -120px)) scale(var(--scale, 1.2)) rotate(var(--rot, 0deg)); opacity: 0; }
}
@media (max-width: 640px) { /* móvil */
  .xtravel-emoji-overlay .xtravel-emoji { font-size: clamp(28px, 8vw, 64px); }
}
@media (min-width: 641px) { /* desktop */
  .xtravel-emoji-overlay .xtravel-emoji { font-size: clamp(42px, 6vw, 88px); }
}
@media (prefers-reduced-motion: reduce) {
  .xtravel-emoji-overlay .xtravel-emoji { animation-duration: 1ms; }
}

.perk--5 { background: #fffbeb; border-color: #fde68a; }
.perk--5 i { color: #b45309; }

.perk--6 { background: #f5f3ff; border-color: #ddd6fe; }
.perk--6 i { color: #7c3aed; }

.perk--7 { background: #eff6ff; border-color: #bfdbfe; }
.perk--7 i { color: #1d4ed8; }

.perk--8 { background: #ecfdf5; border-color: #a7f3d0; }
.perk--8 i { color: #047857; }

.perk--9 { background: #f0f9ff; border-color: #bae6fd; }
.perk--9 i { color: #0369a1; }

.perk--10 { background: #f1f5f9; border-color: #cbd5e1; }
.perk--10 i { color: #0ea5e9; }

/* Perks extra 11-14 */
.perk--11 { background: #ecfdf5; border-color: #a7f3d0; }
.perk--11 i { color: #047857; }

.perk--12 { background: #fff7ed; border-color: #fed7aa; }
.perk--12 i { color: #c2410c; }

.perk--13 { background: #f0f9ff; border-color: #bae6fd; }
.perk--13 i { color: #0369a1; }

.perk--14 { background: #fdf4ff; border-color: #f5d0fe; }
.perk--14 i { color: #a21caf; }

/* =============================================
   Tarjetas de tours: modo móvil más compacto
   Reduce imagen, títulos, iconos y botones
   ============================================= */
@media (max-width: 640px) {
  /* Grilla con separación más contenida */
  .xtravel-grid { gap: 12px; }

  /* Imagen de portada más baja y panorámica */
  .xtravel-card .thumb { aspect-ratio: 16 / 10; }
  .xtravel-card .body { padding: 8px 10px 10px; }

  /* Tipografías más pequeñas */
  .xtravel-card .title { font-size: .95rem; margin-bottom: 4px; }
  .xtravel-card .desc { font-size: .85rem; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 8px; }

  /* Iconos y estrellas reducidos */
  .xtravel-icons .ico { width: 22px; height: 22px; }
  .xtravel-icons .ico i { font-size: 12px; }
  .xtravel-stars i { font-size: 12px; }
  .xtravel-stars .muted { font-size: .8rem; }

  /* Botones más compactos, incluido el corazón */
  .xtravel-card .btn { padding: 6px 10px; font-size: .85rem; border-radius: 8px; }
  .xtravel-card .actions { gap: 8px; }
  .xtravel-card .btn-like { padding: 6px 10px; font-size: .9rem; }

  /* Efecto de emojis un poco más pequeño en móvil */
  .emoji { font-size: 24px; }
}