/**
 * responsive-fixes.css — Amazon Wildlife Perú
 * ─────────────────────────────────────────────────────────────────────────
 * Correcciones responsive priorizadas según informe de análisis.
 * Añadir este archivo DESPUÉS de todos los demás CSS.
 *
 * Import en cada HTML:
 *   <link rel="stylesheet" href="responsive-fixes.css"/>
 *
 * O en tour-page.css / tokens.css al final:
 *   @import url('responsive-fixes.css');
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════
   P1 — SIDEBAR FIJO (tour-page + departures-page)
   340px fijo aplasta el contenido principal en tablet 900–1200px
═══════════════════════════════════════════════════════════════════ */

/* Tour page */
@media (min-width: 961px) and (max-width: 1140px) {
  .tour-body {
    grid-template-columns: 1fr 280px;
    gap: 32px;
  }
}
@media (min-width: 961px) and (max-width: 1024px) {
  .tour-body {
    grid-template-columns: 1fr 260px;
    gap: 24px;
    padding-left: 28px;
    padding-right: 28px;
  }
  .sidebar-card__body { padding: 16px; }
  .price-block__amount { font-size: 30px; }
}

/* Departures page sidebar */
@media (min-width: 961px) and (max-width: 1140px) {
  .dep-body {
    grid-template-columns: 1fr 260px;
    gap: 32px;
  }
}
@media (min-width: 961px) and (max-width: 1024px) {
  .dep-body {
    grid-template-columns: 1fr 240px;
    gap: 24px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   P1 — TABLA DEPARTURES HOME
   Scroll y layout: departures.js (.aw-deps__table-wrapper)
═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   P1 — HERO HOME recorta contenido en pantallas bajas
   Cambiar de height fijo a min-height + auto
═══════════════════════════════════════════════════════════════════ */

.aw-hero-section {
  --hero-h: clamp(440px, 80svh, 840px);
  height: var(--hero-h);
  max-height: var(--hero-h);
}
.aw-hero {
  height: auto;
  min-height: var(--hero-h);
  max-height: none;
}

@media (max-height: 700px) {
  .aw-hero-section {
    --hero-h: clamp(400px, 74svh, 620px);
  }
  .aw-hero {
    min-height: var(--hero-h);
    padding-bottom: 16px;
  }
  .aw-hero__title { font-size: clamp(36px, 6vw, 56px); }
}

@media (max-height: 600px) and (orientation: landscape) {
  .aw-hero-section {
    --hero-h: clamp(360px, 66svh, 520px);
  }
  .aw-hero {
    min-height: var(--hero-h);
  }
  .aw-hero__title { font-size: 36px; }
  .aw-hero__body  { font-size: 13px; }
}


/* ═══════════════════════════════════════════════════════════════════
   P2 — TOURS BENTO: filas altas en móvil → scroll excesivo
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Override the fixed clamp row heights */
  .aw-tours__bento {
    grid-template-rows: auto !important;
    grid-template-columns: 1fr 1fr;
  }
  .aw-tours__bento > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 320px;
    max-height: none;
  }
}

@media (max-width: 580px) {
  .aw-tours__bento {
    grid-template-columns: 1fr;
  }
  .aw-tours__bento > * {
    min-height: 300px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   P2 — STAT BARS 5 columnas: tablet 900–1100px muy apretadas
═══════════════════════════════════════════════════════════════════ */

/* About Us stat bar */
@media (max-width: 1100px) and (min-width: 901px) {
  .stat-bar__inner {
    grid-template-columns: repeat(3, 1fr);
  }
  .stat-bar__inner > .stat-item:nth-child(4),
  .stat-bar__inner > .stat-item:nth-child(5) {
    border-top: 1px solid rgba(90,158,95,.1);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   P2 — JAGUARS SEASON BAR: 12 columnas → texto 9px ilegible
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .season-bar {
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
  }
  .month-cell__name { font-size: 8px; letter-spacing: 0; }
}

@media (max-width: 380px) {
  .season-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   P2 — ABOUT US: founder cards foto alta en móvil
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .founder-card__photo { height: 200px; }
  .founder-card__body  { padding: 20px 16px; }
  .founder-card__name  { font-size: 22px; }
}

/* Team grid — breakpoint faltante en 640–1000px */
@media (max-width: 1000px) and (min-width: 641px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .team-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   P3 — TOUR PAGE: padding del itinerario en móvil estrecho
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 580px) {
  .itin-day__body     { padding-left: 16px; padding-right: 16px; }
  .itin-day__num      { width: 48px; height: 48px; }
  .itin-day__num-n    { font-size: 18px; }
  .itin-day__route    { font-size: 13px; }
  .itin-day__arrow    { width: 36px; }
  .itin-highlight__num { font-size: 15px; width: 20px; }
  /* Facts strip — nombres largos */
  .fact-value         { font-size: 13px; }
}


/* ═══════════════════════════════════════════════════════════════════
   P3 — TOUR HERO: domina pantalla en laptop pequeño / landscape
═══════════════════════════════════════════════════════════════════ */

.tour-hero {
  height: auto;
  min-height: 56vh;
  max-height: 680px; /* mantener en desktop */
}

@media (max-width: 960px) {
  .tour-hero { max-height: 520px; min-height: 380px; }
}

@media (max-width: 580px) {
  .tour-hero { max-height: none; min-height: 360px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .tour-hero {
    min-height: 320px;
    max-height: 400px;
  }
  .tour-hero__title  { font-size: 32px; }
  .tour-hero__content { padding-bottom: 28px; }
}


/* ═══════════════════════════════════════════════════════════════════
   P3 — MAPA: unificar altura (380px vs 420px)
═══════════════════════════════════════════════════════════════════ */

.map-wrapper iframe,
.location-map-placeholder {
  height: 400px; /* único valor canónico */
}

@media (max-width: 640px) {
  .map-wrapper iframe,
  .location-map-placeholder { height: 280px; }
}


/* ═══════════════════════════════════════════════════════════════════
   P4 — WHATSAPP FLOTANTE: tapar CTAs + safe area
═══════════════════════════════════════════════════════════════════ */

.wa-float {
  bottom: max(24px, env(safe-area-inset-bottom, 0px) + 16px);
  right: max(24px, env(safe-area-inset-right, 0px) + 16px);
}

/* En pantallas pequeñas ocultar texto, dejar solo icono */
@media (max-width: 400px) {
  .wa-float span { display: none; }
  .wa-float { padding: 12px; border-radius: 50%; }
}

/* Subir si hay booking bar visible (tour y category pages) */
.has-booking-bar .wa-float {
  bottom: max(72px, env(safe-area-inset-bottom, 0px) + 64px);
}


/* ═══════════════════════════════════════════════════════════════════
   P4 — BREAKPOINTS: estandarizar los dispersos (1100, 960, 680...)
   Añadir alias para los más usados como variables utilitarias
   (solo afectan componentes nuevos, no rompe los existentes)
═══════════════════════════════════════════════════════════════════ */

/*
  Breakpoints canónicos que todos los componentes deberían usar:
  --bp-xl:   1200px  (content-max)
  --bp-lg:   1024px  (tablet grande)
  --bp-md:    900px  (tablet — collapse 2 col → 1 col)
  --bp-sm:    640px  (móvil grande)
  --bp-xs:    400px  (móvil pequeño)

  Para Cursor: buscar y reemplazar gradualmente:
    960px  → 1024px o 900px según contexto
    680px  → 640px
    600px  → 640px
    520px  → 400px
    480px  → 400px
    580px  → 640px o 400px
*/


/* ═══════════════════════════════════════════════════════════════════
   UTILITY: tabla con scroll horizontal (clase para añadir en HTML)
═══════════════════════════════════════════════════════════════════ */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Indicador visual de scroll disponible */
  background:
    linear-gradient(to right, white 30%, rgba(255,255,255,0)),
    linear-gradient(to left, white 30%, rgba(255,255,255,0)) right,
    radial-gradient(ellipse at left, rgba(0,0,0,.12), transparent 70%),
    radial-gradient(ellipse at right, rgba(0,0,0,.12), transparent 70%) right;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Dark background version */
.table-scroll--dark {
  background:
    linear-gradient(to right, #08140a 30%, rgba(8,20,10,0)),
    linear-gradient(to left,  #08140a 30%, rgba(8,20,10,0)) right,
    radial-gradient(ellipse at left, rgba(90,158,95,.2), transparent 70%),
    radial-gradient(ellipse at right, rgba(90,158,95,.2), transparent 70%) right;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}