/* ============================================================
   styles.css · Itinerario Confirmado · Galicia & Portugal

   Hoja de estilos extraída de index.html. Las variables de
   diseño están todas en :root (paleta + tokens de los
   mini-componentes .day-row y .guia-card). Para añadir
   un nuevo tipo de fila en el timeline o una nueva
   categoría en la Guía útil, sigue la receta de 3 pasos
   documentada dentro del propio archivo bajo los
   comentarios de esos componentes.
============================================================ */
:root {
  --sand: #f5e6d3; --sand-light: #faf5ed; --sand-dark: #d4b896;
  --ocean: #1a3a4a; --ocean-light: #2d5f7a; --ocean-deep: #0f2430;
  --coral: #e07a5f; --coral-light: #f2a089;
  --seafoam: #81b29a; --seafoam-light: #a8d5ba;
  --gold: #c9a84c; --gold-light: #e4c76b;
  --text: #2c2c2c; --text-light: #5c5c5c; --text-lighter: #888;
  --white: #fffdf9; --card-bg: #ffffff;
  --shadow-sm: 0 2px 12px rgba(15,36,48,0.06);
  --shadow-md: 0 8px 32px rgba(15,36,48,0.10);
  --shadow-lg: 0 16px 48px rgba(15,36,48,0.14);
  --radius: 20px; --radius-sm: 12px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --color-razo: #2d5f7a; --color-viana: #e07a5f; --color-travel: #c9a84c;
  --color-porcia: #81b29a;

  /* ── Timeline row component (mini-componente reutilizable) ──
     Modificadores por tipo de día: travel-day · razo-day · viana-day ·
     porcia-day · plan-day. Para añadir un nuevo tipo: definir
     --tl-color-NUEVO en este bloque y crear .day-row.NUEVO-day { ... }.
     Sub-elementos: .day-date · .day-icon · .day-text · .day-note · .day-text-meta. */
  --tl-color-travel: rgba(201,168,76,0.08);
  --tl-color-razo:   rgba(45,95,122,0.06);
  --tl-color-viana:  rgba(224,122,95,0.06);
  --tl-color-porcia: rgba(129,178,154,0.08);
  --tl-color-plan:   rgba(201,168,76,0.04);
  --tl-plan-border:  1px dashed rgba(201,168,76,0.45);
  --tl-plan-note-bg: rgba(201,168,76,0.18);
  --tl-plan-note-fg: #6b5012;
  --tl-list-gap:          8px;
  --tl-date-min-width:    80px;
  --tl-icon-min-width:    28px;
  --tl-row-gap:           12px;
  --tl-row-pad-y:         10px;
  --tl-row-pad-x:         16px;
  --tl-row-font-size:     0.85rem;
  --tl-plan-indent:         32px;
  --tl-plan-indent-mobile:  12px;

  /* ── Guía útil card component (mini-componente reutilizable) ──
     Modificadores por categoría (deben coincidir con `categoriasValidas`
     en el JS): gastronomia · cultura · naturaleza · playa · mirador ·
     mercado · loza · default. Para añadir una nueva categoría:
     1) Definir 3 variables de color en este bloque:
          --gc-color-NUEVA-bar · --gc-color-NUEVA-pill-bg · --gc-color-NUEVA-pill-fg
     2) Crear las reglas modificadoras en el bloque .guia-card
     3) Añadir 'nueva' al array categoriasValidas en el JS */
  --gc-color-gastronomia-bar:     var(--coral);
  --gc-color-gastronomia-pill-bg: rgba(224,122,95,0.18);
  --gc-color-gastronomia-pill-fg: #8b2818;
  --gc-color-cultura-bar:         var(--seafoam);
  --gc-color-cultura-pill-bg:     rgba(129,178,154,0.18);
  --gc-color-cultura-pill-fg:     #3a6b50;
  --gc-color-naturaleza-bar:      var(--gold);
  --gc-color-naturaleza-pill-bg:  rgba(201,168,76,0.18);
  --gc-color-naturaleza-pill-fg:  #6b5012;
  --gc-color-playa-bar:           var(--ocean-light);
  --gc-color-playa-pill-bg:       rgba(45,95,122,0.18);
  --gc-color-playa-pill-fg:       #1a3a4a;
  --gc-color-mirador-bar:         var(--ocean-deep);
  --gc-color-mirador-pill-bg:     rgba(15,36,48,0.18);
  --gc-color-mirador-pill-fg:     var(--ocean-deep);
  --gc-color-mercado-bar:         #4a7a5c;
  --gc-color-mercado-pill-bg:     rgba(74,122,92,0.18);
  --gc-color-mercado-pill-fg:     #3a5a48;
  --gc-color-loza-bar:            #a04040;
  --gc-color-loza-pill-bg:        rgba(160,64,64,0.18);
  --gc-color-loza-pill-fg:        #8a2a2a;
  --gc-color-default-bar:         var(--text-lighter);
  --gc-padding:          22px 22px 22px 26px;
  --gc-padding-mobile:   18px 18px 18px 22px;
  --gc-radius:           var(--radius-sm);
  --gc-border:           1px solid rgba(212,184,150,0.25);
  --gc-bar-width:        4px;
  --gc-bar-width-hover:  6px;
  --gc-bar-top:          10px;
  --gc-bar-bottom:       10px;
  --gc-bar-radius:       0 4px 4px 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--sand-light);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── Hero ──────────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--ocean-deep) 0%, var(--ocean) 40%, var(--ocean-light) 100%);
  padding: 80px 20px 100px;
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 0;
  height: 120px; background: var(--sand-light);
  clip-path: ellipse(75% 100% at 50% 100%); z-index: 1;
}
.hero::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(224,122,95,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(129,178,154,0.12) 0%, transparent 50%);
}
.hero-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.hero-badge {
  display: inline-block;
  background: rgba(129,178,154,0.25);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(129,178,154,0.35);
  border-radius: 50px;
  padding: 8px 24px;
  color: var(--seafoam-light);
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 28px;
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--white); font-weight: 700;
  line-height: 1.15; margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.hero h1 span { color: var(--gold-light); font-style: italic; }
.hero-subtitle {
  color: rgba(255,255,255,0.7); font-size: 1.1rem; font-weight: 300;
  max-width: 650px; margin: 0 auto 32px;
}
.hero-dates { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-date-chip {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50px;
  padding: 10px 22px;
  color: var(--white); font-size: 0.9rem; font-weight: 500;
  transition: var(--transition);
}
.hero-date-chip strong { color: var(--gold-light); }

/* ── Wrapper ───────────────────────────────────────── */
.wrapper { max-width: 1200px; margin: -50px auto 0; padding: 0 20px 48px; position: relative; z-index: 3; }

/* ── Summary stats ──────────────────────────────── */
.summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--card-bg); border-radius: var(--radius-sm); padding: 18px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid rgba(212,184,150,0.15); }
.stat-value { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--ocean); line-height: 1.1; }
.stat-label { font-size: 0.72rem; color: var(--text-lighter); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }

/* ── Budget bar ──────────────────────────────────── */
.budget-bar {
  display: flex; gap: 10px; align-items: center;
  margin: 0 0 24px; padding: 10px 18px;
  background: rgba(129,178,154,0.06); border-radius: var(--radius-sm);
  border: 1px dashed rgba(129,178,154,0.25);
  font-size: 0.82rem; color: var(--text-light);
}

/* ── Reserved cards grid ─────────────────────────── */
.reserved-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }

/* ── Section divider ─────────────────────────────── */
.section-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 32px 0 24px;
}
.section-divider::before, .section-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(212,184,150,0.4), transparent);
}
.section-divider span {
  font-family: 'Playfair Display', serif; font-size: 1.2rem;
  color: var(--ocean); font-weight: 600; white-space: nowrap;
}

/* ── Timeline section (always visible) ────────────── */
.timeline-section {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: 1px solid rgba(212,184,150,0.2);
  margin-bottom: 24px; padding: 24px;
}
.timeline-section h2 {
  font-family: 'Inter', sans-serif; font-size: 1.1rem; color: var(--ocean-deep);
  font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
}

/* ── Timeline ────────────────────────────────────── */
.timeline-legend { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; font-size: 0.72rem; }
.timeline-legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend-dot.viana-dot { background: var(--color-viana); }
.legend-dot.razo-dot { background: var(--color-razo); }
.legend-dot.travel-dot { background: var(--color-travel); }
.legend-dot.porcia-dot { background: var(--color-porcia); }

.timeline-combo { border: 1px solid rgba(212,184,150,0.2); border-radius: var(--radius-sm); overflow: hidden; }
.timeline-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; font-size: 0.85rem; font-weight: 600;
}
.timeline-bar { display: flex; align-items: stretch; height: 52px; border-radius: 0; overflow: hidden; }
.tl-stay {
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0 8px; line-height: 1.2;
  flex-direction: column; min-width: 0; transition: filter 0.2s;
}
.tl-stay:hover { filter: brightness(1.15); }
.tl-stay .tl-name { font-size: 0.72rem; opacity: 0.9; }
.tl-stay .tl-info { font-size: 0.62rem; opacity: 0.75; margin-top: 1px; }
.tl-stay.razo { background: var(--color-razo); }
.tl-stay.viana { background: var(--color-viana); }
.tl-stay.porcia { background: var(--color-porcia); }
.tl-travel {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--sand); color: var(--text-lighter); font-size: 0.6rem; font-weight: 600;
  padding: 0 8px; white-space: nowrap; min-width: 60px; letter-spacing: -0.02em;
}
.timeline-dates { display: flex; padding: 4px 0 0; }
.tl-date {
  text-align: center; font-size: 0.62rem; font-weight: 500; color: var(--text-lighter);
  padding: 0 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-date-spacer { flex: 0 0 auto; min-width: 60px; }

/* ── Day by day (mini-componente: timeline row) ───────
   Contenedor:
     .day-list { display:flex; flex-direction:column; gap:var(--tl-list-gap); }
   Bloque (fila):
     .day-row + .day-row.<modifier>   (modifier: travel-day | razo-day |
                                       viana-day | porcia-day | plan-day)
   Sub-elementos (siempre dentro de un .day-row):
     .day-date        columna fecha (80px)
     .day-icon        columna icono (28px)
     .day-text        columna texto principal (flex:1, opcional .day-text-meta)
     .day-note        columna nota lateral
   Variables del componente en :root bajo el prefijo --tl-*.

   ── Cómo añadir un nuevo tipo de fila (receta de 3 pasos) ──
   1) Define la variable de color en :root, p. ej.:
        --tl-color-cultura: rgba(...);   /* nombre a tu elección */
   2) Crea la regla modificadora en este bloque, p. ej.:
        .day-row.cultura-day { background: var(--tl-color-cultura); }
   3) Úsala en HTML dentro de .day-list, p. ej.:
        <div class="day-row cultura-day">
          <span class="day-date">…</span>
          <span class="day-icon">…</span>
          <span class="day-text">…</span>
          <span class="day-note">…</span>
        </div>
*/
.day-list { display: flex; flex-direction: column; gap: var(--tl-list-gap); }
.day-row {
  display: flex; align-items: center; gap: var(--tl-row-gap);
  padding: var(--tl-row-pad-y) var(--tl-row-pad-x);
  border-radius: var(--radius-sm); font-size: var(--tl-row-font-size);
}
.day-row.travel-day  { background: var(--tl-color-travel); }
.day-row.razo-day    { background: var(--tl-color-razo); }
.day-row.viana-day   { background: var(--tl-color-viana); }
.day-row.porcia-day  { background: var(--tl-color-porcia); }
/* Modifier "plan": entrada planificada (no confirmada) anidada bajo un día.
   El margin-top:0 respeta el gap:8px del .day-list padre; la anidación
   visual se logra con el cambio de borde (sólido → dashed) y color (azul → dorado). */
.day-row.plan-day {
  margin-top: 0;
  margin-left: var(--tl-plan-indent);
  background: var(--tl-color-plan);
  border: var(--tl-plan-border);
  font-style: italic;
}
/* Sub-elementos base (scoped al bloque) */
.day-row .day-date { font-weight: 600; color: var(--ocean-deep); min-width: var(--tl-date-min-width); font-size: 0.78rem; }
.day-row .day-icon { font-size: 1.1rem; min-width: var(--tl-icon-min-width); text-align: center; }
.day-row .day-text { flex: 1; }
.day-row .day-note { font-size: 0.72rem; color: var(--text-lighter); }
/* Overrides del modifier "plan" sobre los sub-elementos */
.day-row.plan-day .day-date { color: var(--gold); font-weight: 500; font-size: 0.72rem; }
.day-row.plan-day .day-text { color: var(--text-light); font-size: 0.82rem; }
.day-row.plan-day .day-text-meta {
  display: block; font-size: 0.72rem; color: var(--text-lighter);
  font-style: normal; margin-top: 2px;
}
.day-row.plan-day .day-note {
  background: var(--tl-plan-note-bg); color: var(--tl-plan-note-fg);
  padding: 2px 8px; border-radius: 8px;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 0.62rem;
}

.porcia-note {
  margin-top: 20px; padding: 14px 18px;
  background: rgba(129,178,154,0.06); border-radius: var(--radius-sm);
  border: 1px solid rgba(129,178,154,0.2);
  font-size: 0.8rem; color: var(--text-light); line-height: 1.6;
}
.porcia-note strong { color: var(--ocean-deep); }

/* ── Map ─────────────────────────────────────────── */
.map-section {
  margin-bottom: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(212,184,150,0.25);
}
.map-header {
  background: var(--card-bg);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(212,184,150,0.2);
}
.map-header h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--ocean-deep);
  font-weight: 600;
}
.map-header .map-legend {
  display: flex; gap: 16px; margin-left: auto;
  font-size: 0.75rem; color: var(--text-light);
}
.map-legend span { display: flex; align-items: center; gap: 4px; }
.map-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.map-legend-dot.aviles { background: #e07a5f; border: 2px solid #c0604a; }
.map-legend-dot.prop { background: #1a3a4a; border: 2px solid #0f2430; }
.map-legend-dot.porcia { background: #81b29a; border: 2px solid #5a8a70; }
#map { height: 420px; width: 100%; z-index: 1; }
.maplibregl-popup-content {
  font-family: 'Inter', sans-serif;
  font-size: 13px; line-height: 1.5;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}
.maplibregl-popup-content strong { color: var(--ocean); font-weight: 600; }
.maplibregl-popup-close-button { font-size: 18px; padding: 4px 8px; color: var(--text-light); }

/* ── Control buttons (reusados por la sección Guía útil) ─ */
.control-btn {
  padding: 10px 20px; border-radius: 50px;
  border: 1.5px solid var(--sand-dark);
  background: var(--card-bg); color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.control-btn:hover { border-color: var(--ocean-light); color: var(--ocean); }
.control-btn.active {
  background: var(--ocean); color: var(--white); border-color: var(--ocean);
}
/* ── Property Card ───────────────────────────────── */
.card {
  background: var(--card-bg); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(212,184,150,0.2);
  transition: var(--transition); position: relative;
  display: flex; flex-direction: column;
}
.card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-3px);
}

.card-image-wrapper { position: relative; height: 260px; overflow: hidden; flex-shrink: 0; }
.card-images { display: flex; height: 100%; transition: transform 0.5s ease; }
.card-images img { min-width: 100%; height: 100%; object-fit: cover; }
.card-image-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9); border: none; cursor: pointer;
  font-size: 1rem; color: var(--ocean);
  display: flex; align-items: center; justify-content: center;
  z-index: 2; transition: var(--transition); opacity: 0;
}
.card:hover .card-image-nav { opacity: 1; }
.card-image-nav.prev { left: 12px; }
.card-image-nav.next { right: 12px; }
.card-image-nav:hover { background: #fff; transform: translateY(-50%) scale(1.1); }

.card-image-dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.card-image-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.5); cursor: pointer; transition: var(--transition);
}
.card-image-dot.active { background: #fff; transform: scale(1.3); }

.card-rating {
  position: absolute; top: 16px; right: 16px;
  background: var(--ocean); color: #fff;
  padding: 6px 12px; border-radius: 20px;
  font-size: 0.8rem; font-weight: 600; z-index: 2;
  display: flex; align-items: center; gap: 4px;
}

.card-region {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,0.9);
  padding: 5px 12px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; z-index: 2;
  color: var(--ocean);
}

.card-body { padding: 24px; }
.card-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.3rem; font-weight: 600;
  color: var(--ocean-deep); line-height: 1.2; margin-bottom: 6px;
}
.card-location {
  font-size: 0.82rem; color: var(--text-light);
  display: flex; align-items: center; gap: 5px; margin-bottom: 14px;
}

.price-display {
  background: linear-gradient(135deg, rgba(26,58,74,0.04), rgba(45,95,122,0.02));
  border: 1.5px solid rgba(26,58,74,0.1);
  border-radius: var(--radius-sm);
  padding: 18px 20px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: var(--transition);
}
.price-display:hover {
  border-color: rgba(26,58,74,0.2);
  background: linear-gradient(135deg, rgba(26,58,74,0.06), rgba(45,95,122,0.03));
}
.price-display-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.price-display-dates { font-size: 0.82rem; color: var(--text); font-weight: 600; }
.price-display-sub { font-size: 0.72rem; color: var(--text-lighter); }
.price-display-amount { text-align: right; flex-shrink: 0; }
.price-display-total {
  font-family: 'Playfair Display', serif; font-size: 1.6rem;
  font-weight: 700; color: var(--ocean); line-height: 1.1;
}
.price-display-pernight { font-size: 0.72rem; color: var(--text-lighter); }
.price-display-total .estimado {
  font-size: 0.65rem; color: #999; font-weight: 400; font-family: 'Inter', sans-serif;
}
.price-loading {
  color: var(--text-lighter); font-size: 0.8rem; font-style: italic;
  text-align: center; padding: 16px;
}

.card-amenities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.amenity-tag {
  font-size: 0.72rem; padding: 4px 10px; border-radius: 20px;
  background: var(--sand-light); color: var(--text-light); font-weight: 500;
}
.amenity-tag.highlight { background: var(--seafoam-light); color: #3a6b50; }

.card-info-row { display: flex; gap: 10px; margin-bottom: 14px; }
.beach-info {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(26,58,74,0.04), rgba(45,95,122,0.04));
  border-radius: var(--radius-sm); font-size: 0.83rem; font-weight: 500; min-width: 0;
}
.beach-icon { font-size: 1.3rem; flex-shrink: 0; }
.beach-distance { color: var(--ocean); font-weight: 600; }
.aviles-info {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(224,122,95,0.06), rgba(224,122,95,0.02));
  border-radius: var(--radius-sm); font-size: 0.83rem; font-weight: 500; min-width: 0;
}
.aviles-icon { font-size: 1.1rem; flex-shrink: 0; }
.aviles-distance { color: var(--coral); font-weight: 600; }

.card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; border-top: 1px solid rgba(212,184,150,0.2);
}
.card-link {
  color: var(--coral); text-decoration: none;
  font-size: 0.82rem; font-weight: 600; transition: var(--transition);
  display: flex; align-items: center; gap: 4px;
}
.card-link:hover { color: var(--coral-light); }
.card-specs { font-size: 0.75rem; color: var(--text-lighter); }

.no-photo {
  background: linear-gradient(135deg, var(--sand) 0%, var(--sand-dark) 100%);
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text-lighter); font-size: 0.9rem;
}

.footer {
  text-align: center; padding: 40px 20px;
  color: var(--text-lighter); font-size: 0.8rem;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 920px) {
  .summary-row { grid-template-columns: 1fr 1fr; }
  .reserved-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .hero { padding: 50px 16px 80px; }
}
@media (max-width: 500px) {
  .summary-row { grid-template-columns: 1fr; }
  .reserved-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .price-display { flex-direction: column; text-align: center; }
  .price-display-amount { text-align: center; }
  .card-info-row { flex-direction: column; }
  .day-row.plan-day { margin-left: var(--tl-plan-indent-mobile); }
}

/* ── Animations ──────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeInUp 0.5s ease backwards; }
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.2s; }
.card:nth-child(5) { animation-delay: 0.25s; }
.card:nth-child(6) { animation-delay: 0.3s; }

/* ── Guía útil card component (mini-componente reutilizable) ───
   Contenedor:
     .guia-util + .guia-util-filtros + .guia-util-grid
   Bloque (card):
     .guia-card + .guia-card.<modifier>  (modifier: gastronomia | cultura |
                                          naturaleza | playa | mirador |
                                          mercado | loza | default)
   Sub-elementos (dentro de un .guia-card):
     .guia-card-header          fila superior (icono + pill)
     .guia-card-icono           icono de categoría
     .guia-card-categoria-pill  pill de categoría
     .guia-card-titulo          título del item
     .guia-card-zona            zona geográfica
     .guia-card-resumen         resumen
     .guia-card-establecimientos  bloque de establecimientos
     .guia-card-producto        bloque "producto recomendado"
     .guia-card-logistica       bloque "logística"
     .guia-card-tips            bloque "tips"
   Variables del componente en :root bajo el prefijo --gc-*.

   ── Cómo añadir una nueva categoría (receta de 3 pasos) ──
   1) Define las 3 variables de color en :root (sustituye NUEVA-cat por
      el nombre de tu categoría, p. ej. `alojamiento`):
        --gc-color-NUEVA-cat-bar:     <color>;
        --gc-color-NUEVA-cat-pill-bg: <fondo pill>;
        --gc-color-NUEVA-cat-pill-fg: <texto pill>;
   2) Crea las reglas modificadoras en este bloque:
        .guia-card.NUEVA-cat::before { background: var(--gc-color-NUEVA-cat-bar); }
        .guia-card.NUEVA-cat .guia-card-categoria-pill {
          background: var(--gc-color-NUEVA-cat-pill-bg);
          color:      var(--gc-color-NUEVA-cat-pill-fg);
        }
   3) Añade 'nueva-cat' al array `categoriasValidas` en el JS
      (y opcionalmente a la lista de botones de filtro en .guia-util-filtros).
      Nota: la categoría `default` (sin bar extra) sólo necesita la variable
      `--gc-color-default-bar` y no personaliza pill.
*/
.guia-util {
  background: var(--sand-light);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(212,184,150,0.25);
  margin-bottom: 24px;
  position: relative;
}
.guia-util-subtitulo {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 18px;
  font-style: italic;
}
.guia-util-filtros {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.guia-util-filtros .control-btn { font-size: 0.78rem; padding: 6px 14px; }
/* Masonry via CSS columns: each card stays its natural height, columns auto-pack to fill the row. */
.guia-util-grid {
  column-count: 3;
  column-gap: 18px;
}
.guia-util-grid .guia-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 18px;
  display: inline-block; /* required for Chromium column packing */
  width: 100%;
}
.guia-card {
  background: var(--card-bg);
  border-radius: var(--gc-radius);
  border: var(--gc-border);
  padding: var(--gc-padding);
  position: relative;
  transition: var(--transition);
}
.guia-card::before {
  content: "";
  position: absolute;
  left: 0; top: var(--gc-bar-top); bottom: var(--gc-bar-bottom);
  width: var(--gc-bar-width);
  border-radius: var(--gc-bar-radius);
  background: var(--gc-color-default-bar);
  transition: var(--transition);
}
.guia-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(212,184,150,0.45);
}
.guia-card:hover::before { width: var(--gc-bar-width-hover); }
/* Modificadores por categoría (barra lateral) */
.guia-card.gastronomia::before  { background: var(--gc-color-gastronomia-bar); }
.guia-card.cultura::before     { background: var(--gc-color-cultura-bar); }
.guia-card.naturaleza::before  { background: var(--gc-color-naturaleza-bar); }
.guia-card.playa::before       { background: var(--gc-color-playa-bar); }
.guia-card.mirador::before     { background: var(--gc-color-mirador-bar); }
.guia-card.mercado::before      { background: var(--gc-color-mercado-bar); }
.guia-card.loza::before         { background: var(--gc-color-loza-bar); }
.guia-card.default::before     { background: var(--gc-color-default-bar); }

.guia-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.guia-card-icono { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.guia-card-categoria-pill {
  font-size: 0.62rem;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  background: var(--sand);
  color: var(--text-light);
  white-space: nowrap;
}
.guia-card.gastronomia .guia-card-categoria-pill { background: var(--gc-color-gastronomia-pill-bg); color: var(--gc-color-gastronomia-pill-fg); }
.guia-card.cultura .guia-card-categoria-pill     { background: var(--gc-color-cultura-pill-bg);     color: var(--gc-color-cultura-pill-fg); }
.guia-card.naturaleza .guia-card-categoria-pill  { background: var(--gc-color-naturaleza-pill-bg);  color: var(--gc-color-naturaleza-pill-fg); }
.guia-card.playa .guia-card-categoria-pill       { background: var(--gc-color-playa-pill-bg);       color: var(--gc-color-playa-pill-fg); }
.guia-card.mirador .guia-card-categoria-pill     { background: var(--gc-color-mirador-pill-bg);     color: var(--gc-color-mirador-pill-fg); }
.guia-card.mercado .guia-card-categoria-pill     { background: var(--gc-color-mercado-pill-bg);     color: var(--gc-color-mercado-pill-fg); }
.guia-card.loza .guia-card-categoria-pill        { background: var(--gc-color-loza-pill-bg);        color: var(--gc-color-loza-pill-fg); }

.guia-card-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ocean-deep);
  line-height: 1.3;
  margin-bottom: 4px;
}
.guia-card-zona {
  font-size: 0.7rem;
  color: var(--text-lighter);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  font-weight: 500;
}
.guia-card-resumen {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 4px;
}

.guia-card-establecimientos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(212,184,150,0.4);
}
.guia-card-establecimiento {
  background: rgba(245,230,211,0.5);
  border-radius: 8px;
  padding: 10px 12px;
  position: relative;
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.guia-card-establecimiento-nombre {
  font-weight: 700;
  color: var(--ocean);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  margin-bottom: 2px;
}
.guia-card-establecimiento-meta {
  font-size: 0.7rem;
  color: var(--text-lighter);
  letter-spacing: 0.02em;
}
.guia-card-establecimiento-nota {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.45;
  margin-top: 2px;
}
.guia-card-establecimiento-prioridad {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 0.58rem;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--seafoam-light);
  color: #3a6b50;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.guia-card-establecimiento-prioridad.media { background: var(--sand); color: var(--text-light); }
.guia-card-establecimiento-prioridad.baja  { background: rgba(0,0,0,0.06); color: var(--text-lighter); }

.guia-card-establecimiento-maps {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: #1a73e8;
  text-decoration: none;
  padding: 6px 12px 6px 10px;
  background: rgba(26,115,232,0.08);
  border: 1px solid rgba(26,115,232,0.22);
  border-radius: 999px;
  transition: var(--transition);
  letter-spacing: 0.01em;
}
.guia-card-establecimiento-maps .guia-card-establecimiento-maps-glyph {
  width: 14px; height: 14px;
  color: #ea4335;
  flex-shrink: 0;
}
.guia-card-establecimiento-maps .guia-card-establecimiento-maps-arrow {
  width: 12px; height: 12px;
  opacity: 0.75;
  transition: transform var(--transition), opacity var(--transition);
  flex-shrink: 0;
}
.guia-card-establecimiento-maps:hover {
  background: rgba(26,115,232,0.14);
  border-color: rgba(26,115,232,0.42);
  color: #1558bf;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26,115,232,0.18);
}
.guia-card-establecimiento-maps:hover .guia-card-establecimiento-maps-arrow {
  transform: translate(1px, -1px);
  opacity: 1;
}
.guia-card-establecimiento-maps:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

.guia-card-producto,
.guia-card-logistica,
.guia-card-tips {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.55;
}
.guia-card-producto {
  background: rgba(201,168,76,0.07);
  border-left: 3px solid var(--gold);
}
.guia-card-producto strong,
.guia-card-logistica strong {
  color: var(--ocean-deep);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 6px;
}
.guia-card-producto .producto-datos {
  font-size: 0.8rem;
  color: var(--text);
}
.guia-card-producto .producto-extra {
  font-size: 0.76rem;
  color: var(--text-light);
  margin-top: 4px;
}
.guia-card-producto .producto-extra em { color: var(--ocean-deep); font-style: normal; font-weight: 600; }

.guia-card-logistica {
  background: rgba(45,95,122,0.06);
}
.guia-card-logistica .log-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  font-size: 0.78rem;
}
.guia-card-logistica .log-label {
  flex: 0 0 80px;
  font-weight: 600;
  color: var(--text-lighter);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  align-self: center;
}
.guia-card-logistica .log-value {
  color: var(--text);
  flex: 1;
}

.guia-card-tips {
  background: rgba(129,178,154,0.10);
  border: 1px solid rgba(129,178,154,0.22);
}
.guia-card-tips-titulo {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #3a6b50;
  margin-bottom: 6px;
}
.guia-card-tips ul { list-style: none; padding: 0; margin: 0; }
.guia-card-tips li {
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.5;
  padding: 3px 0 3px 18px;
  position: relative;
}
.guia-card-tips li::before {
  content: "→";
  position: absolute;
  left: 0; top: 3px;
  color: var(--seafoam);
  font-weight: 700;
}

.guia-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-lighter);
  font-style: italic;
  background: rgba(0,0,0,0.02);
  border: 1px dashed rgba(212,184,150,0.4);
  border-radius: var(--radius-sm);
}

@media (max-width: 1320px) {
  .guia-util-grid { column-count: 2; }
}
@media (max-width: 920px) {
  .guia-util-grid { column-count: 1; }
  .guia-card { padding: var(--gc-padding-mobile); }
}

    /* ════════════════ AGENDA DEL VIAJE ════════════════ */
    .agenda-section { margin: 30px 0; padding: 28px 30px; background: linear-gradient(135deg, rgba(176,138,92,0.04) 0%, rgba(201,168,76,0.08) 100%); border-radius: 18px; border: 2px solid rgba(201,168,76,0.25); }
    .agenda-section h2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.65rem; color: var(--ocean-deep); margin-bottom: 6px; }
    .agenda-section .agenda-subtitulo { color: var(--text-light); font-size: 0.88rem; margin-bottom: 22px; line-height: 1.5; }
    .agenda-section .agenda-vacio { color: var(--text-lighter); font-style: italic; padding: 18px; text-align: center; }
    .agenda-fecha-grupo { margin-top: 22px; }
    .agenda-fecha-grupo:first-child { margin-top: 0; }
    .agenda-fecha-grupo h3 { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.18rem; color: var(--gold); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px dashed rgba(201,168,76,0.3); display: flex; align-items: center; gap: 10px; }
    .agenda-fecha-grupo h3 .agenda-dia-nombre { color: var(--text-light); font-weight: 400; font-size: 0.95rem; font-style: italic; }
    .agenda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
    .agenda-card { background: transparent; border: 1px solid rgba(201,168,76,0.3); border-radius: 14px; padding: 16px 18px; position: relative; transition: transform .15s ease, box-shadow .15s ease; }
    .agenda-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
    .agenda-card .agenda-hora { display: inline-block; background: var(--gold); color: #fff; font-weight: 600; font-size: 0.76rem; padding: 3px 9px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
    .agenda-card .agenda-icono { font-size: 1.6rem; margin-right: 8px; vertical-align: middle; }
    .agenda-card .agenda-titulo { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.05rem; color: var(--ocean-deep); margin-top: 10px; line-height: 1.3; }
    .agenda-card .agenda-zona { color: var(--text-lighter); font-size: 0.78rem; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
    .agenda-card .agenda-resumen { color: var(--text-light); font-size: 0.85rem; margin-top: 10px; line-height: 1.5; }
    .agenda-card .agenda-categoria-pill { display: inline-block; background: rgba(0,0,0,0.05); color: var(--text); font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.4px; margin-left: 6px; }
    .agenda-card .agenda-establecimientos { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,0.1); }
    .agenda-card .agenda-establecimiento-nombre { font-weight: 600; font-size: 0.85rem; color: var(--ocean); }
    .agenda-card .agenda-establecimiento-nota { font-size: 0.78rem; color: var(--text-light); margin-top: 2px; line-height: 1.45; }
    .agenda-card.evento-pasado { opacity: 0.55; }
    .agenda-card.evento-pasado::after { content: '✓ Pasado'; position: absolute; top: 10px; right: 14px; background: rgba(0,0,0,0.06); color: var(--text-lighter); font-size: 0.66rem; padding: 2px 7px; border-radius: 8px; font-weight: 600; }
    .agenda-card.evento-hoy { border-left: 4px solid var(--coral); box-shadow: 0 4px 14px rgba(224,122,95,0.18); }
    .agenda-card.evento-manana { border-left: 4px solid var(--gold); }