/**
 * Estilos del demo Iris Planifica.
 * Reusa tokens de tokens.css. Los estilos del card-scene/flip viven en
 * card-scene.js (shadow DOM); acá van solo los contenidos de cada pantalla
 * y la chrome de la página.
 */

/* ---------- Page chrome ---------- */
body.planifica-page {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(89,189,185,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 100%, rgba(232,161,116,0.10) 0%, transparent 55%),
    var(--tripsy-bg);
  min-height: 100vh;
}

.planifica-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.planifica-intro {
  text-align: center;
  margin: 8px auto 24px;
  max-width: 640px;
}
.planifica-intro .eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tripsy-teal-deep);
  margin-bottom: 8px;
}
.planifica-intro h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  margin: 4px 0 12px;
}
.planifica-intro h1 em {
  font-style: italic;
  background-image: linear-gradient(transparent 70%, rgba(89,189,185,0.35) 70%);
}
.planifica-intro p {
  font-size: 15px;
  color: var(--tripsy-gray-500);
  line-height: 1.55;
}

/* ---------- Strip de artefactos ---------- */
/* Aparece entre el header del builder y el card-scene cuando el visitante
   ya tiene un plan generado. Da visibilidad rápida a lo que hay (vuelo,
   alojamiento, experiencias, mapas) y permite jumpear al card sin pasar
   por todo el flow. Hidden cuando no hay artefactos. */
.builder-artifacts {
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 0 16px;
}
.builder-artifacts[hidden] { display: none; }
.builder-artifacts-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tripsy-teal-deep);
  margin-bottom: 8px;
  text-align: center;
}
.builder-artifacts-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.builder-artifacts-list::-webkit-scrollbar { display: none; }
.builder-artifact {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--dur-base, 200ms) var(--ease-out, ease);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-family: 'Montserrat', sans-serif;
  color: var(--tripsy-ink);
  min-width: 0;
}
.builder-artifact:hover {
  border-color: var(--tripsy-teal);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(89, 189, 185, 0.14);
}
.builder-artifact:active { transform: scale(0.98); }
.builder-artifact-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.builder-artifact-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
}
.builder-artifact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tripsy-ink);
  line-height: 1.2;
}
.builder-artifact-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--tripsy-gray-500);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* ---------- Card content shared ---------- */
/* Crítico: el slot wrapper (light DOM child de <card-screen>) tiene que
   ocupar 100% de la card para que .screen-pad y .s1-hero puedan estirarse.
   Sin esto, los hijos con flex: 1 colapsan y la card se ve vacía/blanca. */
card-screen > [slot] {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
}

.screen-pad {
  padding: 24px 22px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
}

/* Card 2 (Personaliza): el form tiene más contenido que la altura visible
   de la card. Hacemos el contenedor scrollable verticalmente. Reducimos el
   gap y bajamos el padding superior para ganar espacio. El bloque del
   botón "Generar mi plan" queda al final del scroll — el visitante lo
   alcanza haciendo flick hacia arriba dentro de la card. */
.screen-pad[data-card2-form] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding-top: 18px;
  padding-bottom: 28px;
}
/* Card 7 (Final): el resumen del plan suele exceder la altura de la card
   (vuelo + 3 hoteles + recorrido + maps + tip + CTAs). Scroll vertical
   con el mismo patrón que Card 2. */
.screen-pad[data-card7-summary] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 18px;
  padding-bottom: 28px;
}
/* City Planner back (experiencias) — mismo scroll que Card 7 porque la
   lista puede crecer (hasta 8 experiencias del LLM). */
.screen-pad[data-cityplanner-back] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 18px;
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cityplanner-exp-empty {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-style: italic;
  color: var(--tripsy-gray-500);
  text-align: center;
  padding: 24px 12px;
}
.cityplanner-exp-empty[hidden] { display: none; }
.screen-pad[data-card2-form] .chip-label {
  margin-bottom: 4px;
}
.screen-pad[data-card2-form] .chip-group {
  gap: 6px;
}
.screen-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tripsy-teal-deep);
}
.screen-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.screen-title .accent {
  font-style: italic;
  color: var(--tripsy-teal-deep);
}
.screen-sub {
  font-size: 13px;
  color: var(--tripsy-gray-500);
  line-height: 1.5;
}
.flex-spacer { flex: 1 1 auto; }

/* ---------- Pantalla 1 — Inspiración ---------- */
.s1-hero {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border-radius: 24px 24px 0 0; /* la card tiene 24px, mantenemos top */
  overflow: hidden;
  background-color: #1a1a1a; /* fallback mientras carga la foto */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.78) 100%),
    url('../destinations/japan-kyoto.jpeg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 22px 22px;
}
.s1-hero::before {
  /* Brillo sutil teal en la esquina superior izquierda */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(89,189,185,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(232,161,116,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.s1-hero > * { position: relative; z-index: 1; }
.s1-hero .kanji {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: 'Playfair Display', serif;
  font-size: 88px;
  color: #fff;
  opacity: 0.92;
  text-shadow: 0 4px 24px rgba(0,0,0,0.45);
  line-height: 1;
  z-index: 1;
}
.s1-hero .eyebrow-on-photo {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 6px;
}
.s1-hero .archetype {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  width: fit-content;
  margin-bottom: 14px;
}
.s1-hero .archetype .star {
  color: var(--tripsy-yellow, #FADF7B);
  font-size: 12px;
}
.s1-hero h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 8vw, 44px);
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.s1-hero h2 em {
  font-style: italic;
  font-weight: 500;
}
.s1-hero .meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  opacity: 0.92;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.s1-hero .meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}

/* ---------- Pantalla 2 — Personaliza ---------- */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--tripsy-teal-soft);
  color: var(--tripsy-teal-deep);
  border: 1px solid transparent;
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
  box-shadow: 0 1px 2px rgba(89,189,185,0.10);
}
.chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(89,189,185,0.20);
}
.chip.--inactive {
  background: transparent;
  color: var(--tripsy-gray-500);
  border-color: var(--tripsy-gray-200);
  box-shadow: none;
}
.chip.--inactive:hover {
  border-color: var(--tripsy-gray-300);
  background: var(--tripsy-gray-100);
  box-shadow: none;
}
.chip-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tripsy-gray-500);
  margin-bottom: 6px;
}
.iris-pill {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--tripsy-teal-soft);
  border-left: 3px solid var(--tripsy-teal);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.iris-pill img {
  width: 24px; height: 24px; border-radius: 999px;
  flex-shrink: 0;
}
.iris-pill p {
  font-size: 12px;
  color: var(--tripsy-ink);
  line-height: 1.45;
  margin: 0;
}

/* ---------- Pantalla 3 — Vuelos ---------- */
.flight-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
}
.flight-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.flight-card:hover {
  border-color: rgba(89,189,185,0.35);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.flight-card.--selected {
  border-color: var(--tripsy-teal);
  background: linear-gradient(180deg, #fff 0%, var(--tripsy-teal-soft) 100%);
  box-shadow: 0 4px 14px rgba(89,189,185,0.18);
}
.flight-card.--selected::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  background: var(--tripsy-teal);
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.flight-tag {
  position: absolute;
  top: -8px;
  left: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
}
.flight-tag.teal   { background: var(--tripsy-teal); }
.flight-tag.coral  { background: var(--tripsy-coral); }
.flight-tag.purple { background: var(--tripsy-purple); }
.flight-airline {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.flight-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.flight-meta .sep {
  width: 2px; height: 2px;
  border-radius: 999px;
  background: var(--tripsy-gray-400);
}
.flight-route {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tripsy-gray-500);
  text-transform: uppercase;
  margin-top: 2px;
}
.flight-price {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  text-align: right;
  color: var(--tripsy-teal-deep);
  align-self: center;
  line-height: 1;
}
.flight-price small {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--tripsy-gray-400);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* PLAN-051 · Estado degradado: backend devolvió meta.degraded=true (todos los
   providers fallaron o devolvieron 0 offers). En vez de mentir con el demo,
   pintamos un solo card sobrio con CTA a Google Flights. */
.flight-card--degraded {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 16px;
  border-style: dashed;
  border-color: rgba(0,0,0,0.18);
  background: var(--tripsy-gray-50, #fafafa);
}
.flight-card--degraded:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.flight-fallback-cta {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--tripsy-teal-deep);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.flight-fallback-cta:hover { text-decoration: underline; }

/* PLAN-W021 · Pantalla 3 Vuelos del builder. Form de búsqueda con
   inputs IATA + fechas + botón. Las cards de vuelo reusan .flight-card
   y los .flight-tag.{teal,coral,purple} ya definidos arriba. */
/* Vuelos Card 3 — el slot front reusa data-builder-prefs-form (grid 2-col
   + scroll + paddings). Los .vuelos-field.--half ocupan 1 col cada uno;
   button y empty-state son hijos directos del slot (full por default). */

.vuelos-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.vuelos-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tripsy-gray-500);
}
.vuelos-input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--tripsy-ink);
  transition: border-color var(--dur-base, 240ms) var(--ease-out, ease);
}
.vuelos-input:focus {
  outline: none;
  border-color: var(--tripsy-teal);
}

/* Estilo custom para <select> — quita la flecha nativa del OS y pone una
   chevron SVG teal alineada a la paleta. Mantiene el resto del look
   consistente con los inputs de texto (mismo padding, border, font). */
select.vuelos-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  /* Espacio extra a la derecha para que el chevron no se superponga
     al texto del option seleccionado. */
  padding-right: 36px;
  /* Chevron SVG inline en el color teal-deep. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2014%208'%20fill%3D'none'%20stroke%3D'%232F8C88'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1%201l6%206%206-6'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  /* Hover/focus mantienen el tinte teal. */
  transition: border-color 0.18s var(--ease-out, ease),
              box-shadow 0.18s var(--ease-out, ease);
}
select.vuelos-input:hover { border-color: var(--tripsy-teal); }
select.vuelos-input:focus {
  outline: none;
  border-color: var(--tripsy-teal);
  box-shadow: 0 0 0 3px rgba(89, 189, 185, 0.18);
}
/* Disabled / placeholder state cuando value="" */
select.vuelos-input:invalid,
select.vuelos-input option[value=""] {
  color: var(--tripsy-gray-400);
}

.vuelos-search-btn {
  margin-top: 22px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--tripsy-teal);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(89, 189, 185, 0.28);
  transition: background 0.18s var(--ease-out, ease),
              box-shadow 0.18s var(--ease-out, ease),
              transform 0.12s var(--ease-out, ease),
              opacity 0.18s var(--ease-out, ease);
}
.vuelos-search-btn:hover:not(:disabled) {
  background: var(--tripsy-teal-deep);
  box-shadow: 0 10px 24px rgba(47, 140, 136, 0.32);
}
.vuelos-search-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.vuelos-search-btn:disabled {
  background: var(--tripsy-gray-200);
  color: var(--tripsy-gray-500);
  cursor: not-allowed;
  box-shadow: none;
}
.vuelos-search-btn.--loading {
  background: var(--tripsy-teal-deep);
  pointer-events: none;
}
.vuelos-search-btn.--loading .vuelos-search-icon {
  animation: builder-generate-spin 1.1s linear infinite;
}
.vuelos-search-icon {
  display: inline-flex;
  font-size: 16px;
  line-height: 1;
}

/* Sugerencias de Iris — chips clickables debajo del form, hidratadas
   con destinos del LLM (flight_recommendation + recommendations). El
   visitante puede tipear libremente o hacer click para autocompletar. */
.vuelos-suggestions {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(89, 189, 185, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(89, 189, 185, 0.18);
}
.vuelos-suggestions[hidden] { display: none; }
.vuelos-suggestions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.vuelos-suggestions-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tripsy-teal-deep);
}
.vuelos-suggestions-regen {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--tripsy-coral-dark, #C4794D);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background var(--dur-base, 200ms) var(--ease-out, ease);
}
.vuelos-suggestions-regen:hover {
  background: rgba(232, 161, 116, 0.12);
}
.vuelos-suggestions-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--tripsy-gray-500);
  margin: 8px 0 0;
  line-height: 1.4;
}
.vuelos-suggestions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vuelos-suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--tripsy-ink);
  background: #fff;
  border: 1px solid rgba(89, 189, 185, 0.30);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--dur-base, 200ms) var(--ease-out, ease);
}
.vuelos-suggestion-chip:hover {
  background: var(--tripsy-teal-deep);
  border-color: var(--tripsy-teal-deep);
  color: #fff;
}
.vuelos-suggestion-iata {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tripsy-gray-500);
}
.vuelos-suggestion-chip:hover .vuelos-suggestion-iata {
  color: rgba(255, 255, 255, 0.85);
}

/* Empty state — placeholder amable cuando aún no hay search. Se
   esconde automáticamente cuando vuelos.js renderea cards (CSS sibling
   selector no llega; vuelos.js setea hidden o display:none). */
.vuelos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px;
  margin-top: 6px;
  text-align: center;
}
.vuelos-empty[hidden] { display: none; }
.vuelos-empty-icon {
  width: 64px; height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 50%;
  background: rgba(89, 189, 185, 0.14);
  color: var(--tripsy-teal-deep);
}
.vuelos-empty-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tripsy-gray-500);
  max-width: 280px;
  margin: 0;
}
[data-vuelos-list] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

/* PLAN-W024 · Pantalla 6 City Planner. Pills para cambiar de día +
   lista numerada de paradas + tip de Iris. */

/* Form de generación cityPlanner: ciudad + plantype + duration + pace +
   botón. Una columna; los chip-groups van full width. */
.cityplanner-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 18px;
}
.cityplanner-form[hidden] { display: none; }

/* PLAN-W024 (fix P1) · Banner inline de error de generación. Reemplaza al
   alert() del catch — más visible, accionable (botón retry), y permanece
   en pantalla hasta que el visitante reintenta o cierra la card. */
.cityplanner-error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(232,161,116,0.10);
  border: 1px solid rgba(232,161,116,0.35);
  color: var(--tripsy-coral-dark, #C4794D);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
.cityplanner-error[hidden] { display: none; }
.cityplanner-error-icon { font-size: 16px; flex: 0 0 auto; }
.cityplanner-error-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cityplanner-error-text { margin: 0; }
.cityplanner-error-retry {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--tripsy-coral-dark, #C4794D);
  background: #fff;
  color: var(--tripsy-coral-dark, #C4794D);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cityplanner-error-retry:hover {
  background: var(--tripsy-coral-dark, #C4794D);
  color: #fff;
}
.cityplanner-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cityplanner-block .chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cityplanner-pills {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 12px;
  overflow-x: auto;
}

/* Mapa embebido — altura suficiente para ver markers + polyline pero sin
   ocupar toda la card (la lista de paradas debe seguir siendo scrolleable
   abajo). En mobile más bajo para dejar aire al stops list. */
.cityplanner-map-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 14px;
}
.cityplanner-map-wrap[hidden] { display: none; }
.cityplanner-map {
  display: block;
  width: 100%;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
}
.cityplanner-map[hidden] { display: none; }
@media (max-width: 600px) {
  .cityplanner-map { height: 200px; }
}

/* Place card flotante — aparece cuando se toca un marker. Posicionada
   en la parte inferior del mapa, con sombra y animación de entrada. */
.cityplanner-place-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: cityplanner-pc-in 0.22s var(--ease-out, ease);
  z-index: 5;
}
.cityplanner-place-card[hidden] { display: none; }
@keyframes cityplanner-pc-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cityplanner-place-card-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--tripsy-teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cityplanner-place-card-info {
  flex: 1;
  min-width: 0;
}
.cityplanner-place-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tripsy-ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cityplanner-place-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cityplanner-place-card-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--tripsy-gray-200);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tripsy-gray-500);
  transition: background 0.18s var(--ease-out, ease),
              border-color 0.18s var(--ease-out, ease),
              color 0.18s var(--ease-out, ease);
  padding: 0;
}
.cityplanner-place-card-btn:hover {
  background: rgba(89, 189, 185, 0.14);
  border-color: var(--tripsy-teal);
  color: var(--tripsy-teal-deep);
}
.cityplanner-place-card-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cityplanner-place-card-btn--danger:hover {
  background: rgba(192, 57, 43, 0.10);
  border-color: var(--tripsy-danger, #c0392b);
  color: var(--tripsy-danger, #c0392b);
}
.cityplanner-place-card-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--tripsy-gray-400);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}
.cityplanner-place-card-close:hover {
  background: var(--tripsy-gray-100);
  color: var(--tripsy-ink);
}

/* Botón "+ Agregar parada" — outline sutil debajo del mapa. Hidden
   hasta que haya mapId persistido (cityplanner.js maneja el toggle). */
.cityplanner-add-stop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-bottom: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tripsy-teal-deep);
  background: transparent;
  border: 1.5px dashed var(--tripsy-teal);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s var(--ease-out, ease),
              border-color 0.18s var(--ease-out, ease);
}
.cityplanner-add-stop-btn:hover {
  background: rgba(89, 189, 185, 0.10);
  border-color: var(--tripsy-teal-deep);
}
.cityplanner-add-stop-btn:active { transform: scale(0.97); }
.cityplanner-add-stop-btn[hidden] { display: none; }
.cityplanner-add-stop-btn span:first-child {
  font-size: 16px;
  line-height: 1;
}

/* Modal de "Agregar parada" — overlay full-screen + card centrada con
   input + Google Places autocomplete sugerencias. */
.cityplanner-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(29, 29, 31, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 16px;
  animation: cityplanner-modal-in 0.18s ease;
}
@keyframes cityplanner-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cityplanner-modal {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cityplanner-modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--tripsy-ink);
  margin: 0;
}
.cityplanner-modal-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--tripsy-gray-500);
  margin: 0;
}
.cityplanner-modal input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--tripsy-ink);
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 10px;
  background: #fff;
}
.cityplanner-modal input:focus {
  outline: none;
  border-color: var(--tripsy-teal);
  box-shadow: 0 0 0 3px rgba(89, 189, 185, 0.18);
}
.cityplanner-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.cityplanner-modal-actions button {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s var(--ease-out, ease);
}
.cityplanner-modal-cancel {
  background: transparent;
  color: var(--tripsy-gray-500);
  border: 1px solid var(--tripsy-gray-200);
}
.cityplanner-modal-cancel:hover { background: var(--tripsy-gray-100); }
.cityplanner-modal-confirm {
  background: var(--tripsy-teal);
  color: #fff;
  border: none;
}
.cityplanner-modal-confirm:hover:not(:disabled) {
  background: var(--tripsy-teal-deep);
}
.cityplanner-modal-confirm:disabled {
  background: var(--tripsy-gray-200);
  color: var(--tripsy-gray-400);
  cursor: not-allowed;
}
.cityplanner-modal-error {
  font-size: 12px;
  color: var(--tripsy-danger, #c0392b);
  margin: 0;
}
/* Google Places Autocomplete pac-container override para que se vea
   coherente con el modal de Tripsy. */
.pac-container {
  border-radius: 12px;
  border: 1px solid var(--tripsy-gray-200);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  font-family: 'Montserrat', sans-serif;
  z-index: 1100;
}
.pac-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--tripsy-ink);
}
.pac-item:hover, .pac-item-selected {
  background: rgba(89, 189, 185, 0.10);
}

/* PLAN-W024 · Bottom sheet "Buscar cerca" — overlay full-screen con
   panel deslizando desde abajo en mobile, modal centrado en desktop. */
.cityplanner-nearby-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cityplanner-nearby-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 31, 0.45);
  animation: cityplanner-nearby-fade 0.18s ease;
}
.cityplanner-nearby-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 78vh;
  background: #fff;
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  animation: cityplanner-nearby-slide 0.22s var(--ease-out, ease);
}
@media (min-width: 760px) {
  .cityplanner-nearby-sheet { align-items: center; }
  .cityplanner-nearby-panel {
    border-radius: 18px;
    max-height: 70vh;
  }
}
@keyframes cityplanner-nearby-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cityplanner-nearby-slide {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cityplanner-nearby-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 10px;
  border-bottom: 1px solid var(--tripsy-gray-100, #f1f3f4);
}
.cityplanner-nearby-headtext {
  min-width: 0;
}
.cityplanner-nearby-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tripsy-gray-500);
}
.cityplanner-nearby-title {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--tripsy-ink);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cityplanner-nearby-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--tripsy-gray-100, #f1f3f4);
  color: var(--tripsy-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.cityplanner-nearby-close:hover {
  background: var(--tripsy-gray-200);
}
.cityplanner-nearby-cats {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cityplanner-nearby-cats::-webkit-scrollbar { display: none; }
.cityplanner-nearby-cat {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--tripsy-gray-500);
  border: 1px solid var(--tripsy-gray-200);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s var(--ease-out, ease);
}
.cityplanner-nearby-cat:hover {
  border-color: var(--tripsy-teal);
  color: var(--tripsy-teal-deep);
}
.cityplanner-nearby-cat.--active {
  background: var(--tripsy-teal);
  color: #fff;
  border-color: var(--tripsy-teal);
}
.cityplanner-nearby-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px 20px;
}
.cityplanner-nearby-loading,
.cityplanner-nearby-empty,
.cityplanner-nearby-error {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--tripsy-gray-500);
  text-align: center;
  padding: 32px 12px;
}
.cityplanner-nearby-error { color: var(--tripsy-danger, #c0392b); }
.cityplanner-nearby-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cityplanner-nearby-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--tripsy-gray-100, #f1f3f4);
}
.cityplanner-nearby-item:last-child { border-bottom: none; }
.cityplanner-nearby-itemBody {
  flex: 1;
  min-width: 0;
}
.cityplanner-nearby-itemName {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--tripsy-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cityplanner-nearby-itemMeta {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--tripsy-gray-500);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cityplanner-nearby-rating {
  color: var(--tripsy-teal-deep);
  font-weight: 600;
}
.cityplanner-nearby-ratingCount {
  color: var(--tripsy-gray-500);
  font-weight: 400;
}
.cityplanner-nearby-add {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--tripsy-teal);
  background: transparent;
  color: var(--tripsy-teal-deep);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: all 0.18s var(--ease-out, ease);
}
.cityplanner-nearby-add:hover:not(:disabled):not(.--added) {
  background: var(--tripsy-teal);
  color: #fff;
}
.cityplanner-nearby-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cityplanner-nearby-add.--added {
  background: var(--tripsy-teal);
  color: #fff;
  border-color: var(--tripsy-teal);
  cursor: default;
}
.cityplanner-nearby-attr {
  display: none;
}

.cityplanner-pills[hidden] { display: none; }
.cityplanner-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--tripsy-gray-500);
  border: 1px solid var(--tripsy-gray-200);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
}
.cityplanner-pill:hover {
  border-color: var(--tripsy-teal);
  color: var(--tripsy-teal-deep);
}
.cityplanner-pill.--active {
  background: var(--tripsy-teal);
  color: #fff;
  border-color: var(--tripsy-teal);
}
.cityplanner-order {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.cityplanner-stop {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.cityplanner-stop-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--tripsy-teal);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.cityplanner-stop-name {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.cityplanner-stop-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
  margin-top: 2px;
}
.cityplanner-tip {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--tripsy-teal-soft);
  border-left: 3px solid var(--tripsy-teal);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--tripsy-ink);
  line-height: 1.45;
  font-style: italic;
}
.cityplanner-tip:empty { display: none; }

/* PLAN-W023 · Hotel cards en Card 4 back. MVP affiliate — clicks abren
   Booking.com en pestaña nueva con search params pre-cargados. */
.lodging-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.lodging-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
}
.lodging-card:hover {
  border-color: rgba(89,189,185,0.30);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.lodging-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lodging-name {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.lodging-city {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
}
.lodging-price {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--tripsy-teal-deep);
  text-align: right;
  line-height: 1;
  white-space: nowrap;
}
.lodging-price small {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: var(--tripsy-gray-400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 3px;
}
.lodging-cta {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tripsy-teal-deep);
  text-decoration: none;
  text-align: right;
}
.lodging-cta:hover { text-decoration: underline; }

/* Backup hotels (2da opción del par primary+backup que emite el LLM).
   Mismo layout que primary pero con borde más sutil y un chip "alternativa"
   inline al lado del nombre. */
.lodging-card--backup {
  background: var(--tripsy-gray-50, #fafafa);
  border-color: rgba(0,0,0,0.06);
}
.lodging-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}
.lodging-tag--backup {
  background: rgba(89,189,185,0.10);
  color: var(--tripsy-teal-deep);
}

/* PLAN-W001 · Esqueleto del builder. Cada pantalla muestra un placeholder
   sobrio mientras los tickets W008..W027 hidratan el contenido real. */
.builder-placeholder {
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 14px;
  background: var(--tripsy-gray-50, #fafafa);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--tripsy-gray-500);
  letter-spacing: 0.02em;
  text-align: center;
}

/* PLAN-W008 · Pantalla 2 Personaliza — bloques de chips (party / interests
   / pace). Reusa los estilos de .chip y .chip-group ya definidos arriba. */

/* Card 2 del builder tiene mucho contenido (13 campos del prompt LLM).
   Hacemos el slot front scrollable internamente — sin esto, el contenido
   excede el aspect-ratio fijo del card-scene y se corta. Selector estable
   `[data-builder-prefs-form]` (i18n-independent — el `label=` del
   card-screen cambia con el idioma, no podemos usarlo como ancla). */
/* Slot front scrollable — aplicado a todas las cards del builder vía
   `[data-builder-card-front]`. Resuelve dos problemas:
   1. El eyebrow "Paso N de 6" se clipeaba arriba en cards con mucho
      contenido (mobile especialmente). Con scroll interno todo entra.
   2. Inputs con width:100% antes empujaban el slot más allá del card
      width. Con max-width + min-width:0 + box-sizing se constraina. */
[slot="front"][data-builder-card-front],
[slot="back"][data-builder-card-front] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* padding-top:30px evita que el primer texto (eyebrow) caiga en la
     zona del border-radius:24px de la card y se vea cortado.
     padding-bottom:36px deja aire para el flip-hint absoluto del
     card-screen sin tapar el último elemento. */
  padding: 30px 22px 36px;
}
/* Custom scrollbar suave (igual que el form de Card 2). */
[slot="front"][data-builder-card-front]::-webkit-scrollbar,
[slot="back"][data-builder-card-front]::-webkit-scrollbar { width: 6px; }
[slot="front"][data-builder-card-front]::-webkit-scrollbar-thumb,
[slot="back"][data-builder-card-front]::-webkit-scrollbar-thumb {
  background: rgba(89,189,185,0.30);
  border-radius: 999px;
}
[slot="front"][data-builder-card-front]::-webkit-scrollbar-track,
[slot="back"][data-builder-card-front]::-webkit-scrollbar-track { background: transparent; }

/* Grid 2-col extra: solo cards que lo necesitan (forms con campos
   pareados — Personaliza y Vuelos). El selector requiere AMBOS atributos
   para que el grid no se aplique a cards con layouts custom (Recorrido,
   City Planner, Final). */
[slot="front"][data-builder-prefs-form] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 0;
  align-content: start;
}
[slot="front"][data-builder-prefs-form] > * {
  grid-column: 1 / -1;
  min-width: 0;
}
[slot="front"][data-builder-prefs-form] > .--half {
  grid-column: span 1;
}

/* Mobile: vuelve a 1-col. La card en mobile es ~330px y 2-col deja
   inputs muy estrechos (~150px). */
@media (max-width: 600px) {
  [slot="front"][data-builder-prefs-form] {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  [slot="front"][data-builder-prefs-form] > .--half {
    grid-column: 1 / -1;
  }

  /* En mobile la card crece con su contenido — el scroll lo maneja la
     página (ver card-scene.js media query mobile). Sacamos overflow-y
     y heights fijos para que iOS Safari no se trabe con el scroll
     interno adentro de un context preserve-3d. */
  card-screen > [slot] {
    height: auto;
    min-height: 0;
  }
  [slot="front"][data-builder-card-front],
  [slot="back"][data-builder-card-front] {
    height: auto;
    min-height: 0;
    overflow-y: visible;
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
  }
  .screen-pad[data-card2-form],
  .screen-pad[data-card7-summary],
  .screen-pad[data-card7-detail],
  .screen-pad[data-cityplanner-back] {
    overflow-y: visible;
    max-height: none;
    -webkit-overflow-scrolling: auto;
  }
}
[slot="front"][data-builder-prefs-form]::-webkit-scrollbar {
  width: 6px;
}
[slot="front"][data-builder-prefs-form]::-webkit-scrollbar-thumb {
  background: rgba(89,189,185,0.30);
  border-radius: 999px;
}
[slot="front"][data-builder-prefs-form]::-webkit-scrollbar-track {
  background: transparent;
}
/* Padding-bottom extra para que el último campo no quede pegado al borde
   inferior — visualmente sugiere "hay más" cuando hay scroll. */
[slot="front"][data-builder-prefs-form] .builder-prefs-hint {
  padding-bottom: 16px;
}

.builder-prefs-block {
  margin-top: 14px;
}
.builder-prefs-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tripsy-gray-500);
  margin-bottom: 8px;
}
.builder-prefs-hint {
  margin-top: 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-400);
  text-align: center;
  font-style: italic;
}

/* Form fields del builder Card 2 (destination/depCity/depDate/budget/
   otherInterests). Campos free-text + number + date que el prompt LLM
   irisFast necesita además de los chips. */
.builder-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--tripsy-ink);
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 10px;
  background: #fff;
  transition: border-color var(--dur-base, 240ms) var(--ease-out, ease);
}
.builder-input:focus {
  outline: none;
  border-color: var(--tripsy-teal);
}
.builder-budget-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.builder-budget-row .builder-input { flex: 1 1 auto; }

/* Detalles condicionales del grupo: aparecen cuando el visitante elige
   "amigos" (→ count) o "familia" (→ adultos + niños). Animación suave
   de entrada para que se sienta como reveal, no como flash. */
.builder-prefs-detail {
  margin-top: 12px;
  animation: builder-prefs-detail-in 0.24s var(--ease-out, ease);
}
.builder-prefs-detail[hidden] { display: none; }
.builder-prefs-detail-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tripsy-gray-500);
  margin-bottom: 6px;
}
.builder-prefs-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@keyframes builder-prefs-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Summary (back face de Card 2 Personaliza) — resumen del trip
   con las selecciones actuales del visitante. Se popula desde
   personaliza.js → renderSummary() después de cada persist().
   ============================================================ */
[slot="back"][data-builder-summary] {
  font-family: 'Montserrat', sans-serif;
  /* Hereda padding/scroll de [data-builder-card-front]. Sin grid 2-col. */
}
.summary-kind {
  margin-top: 6px;
  margin-bottom: 14px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--tripsy-teal-deep);
}
.summary-kind-empty {
  font-style: italic;
  color: var(--tripsy-gray-400);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
}
.summary-hero {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--tripsy-ink);
}
.summary-hero[hidden] { display: none; }
.summary-hero .summary-hero-meta {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--tripsy-gray-500);
  margin-top: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.summary-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.summary-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(89, 189, 185, 0.08);
  border-radius: 12px;
  animation: summary-row-in 0.22s var(--ease-out, ease);
}
@keyframes summary-row-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.summary-row-icon {
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
}
.summary-row-content { flex: 1; min-width: 0; }
.summary-row-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tripsy-gray-500);
  display: block;
  margin-bottom: 2px;
}
.summary-row-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--tripsy-ink);
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.summary-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--tripsy-gray-400);
  text-align: center;
  font-style: italic;
}

/* CTA principal — "Generar mi plan con Iris". Pill teal con sparkle.
   Disabled hasta que se completen destination/party/days (mínimos del
   prompt). Loading state cambia label + spinner inline. */
.builder-generate-btn {
  margin-top: 22px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: none;
  background: var(--tripsy-teal);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(89, 189, 185, 0.30);
  transition: background 0.18s var(--ease-out, ease),
              box-shadow 0.18s var(--ease-out, ease),
              transform 0.12s var(--ease-out, ease),
              opacity 0.18s var(--ease-out, ease);
}
.builder-generate-btn:hover:not(:disabled) {
  background: var(--tripsy-teal-deep);
  box-shadow: 0 10px 24px rgba(47, 140, 136, 0.32);
}
.builder-generate-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.builder-generate-btn:disabled {
  background: var(--tripsy-gray-200);
  color: var(--tripsy-gray-500);
  cursor: not-allowed;
  box-shadow: none;
}
.builder-generate-btn.--loading {
  background: var(--tripsy-teal-deep);
  pointer-events: none;
}
.builder-generate-btn.--loading .builder-generate-icon {
  animation: builder-generate-spin 1.1s linear infinite;
}
.builder-generate-icon {
  display: inline-flex;
  font-size: 16px;
  line-height: 1;
  color: #fff;
}
@keyframes builder-generate-spin {
  to { transform: rotate(360deg); }
}
/* Barra FIJA "Generar mi plan" al pie del viewport — siempre visible en el
   Paso 1 sin scrollear el form. Vive fuera del card-scene (sin transform) para
   poder ser position:fixed. builder.js togglea [hidden] + la clase del body
   según la card activa. */
.builder-fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid rgba(29, 29, 31, 0.08);
  box-shadow: 0 -6px 20px rgba(29, 29, 31, 0.06);
}
.builder-fixed-cta[hidden] { display: none; }
.builder-fixed-cta__inner { max-width: 720px; margin: 0 auto; }
.builder-fixed-cta .builder-generate-btn { margin-top: 0; }
.builder-fixed-cta .builder-generate-hint { margin: 8px 0 0; text-align: center; font-size: 12px; }
/* CTA "Crear mi propio viaje" de la barra fija en modo preview (es un <a>, no
   un <button>) — sin subrayado y con la flecha alineada al label. */
.builder-fixed-cta__create { text-decoration: none; }
/* Aire al pie para que la barra fija no tape el último contenido (scroll de la
   página + scroll interno del form de la Card 2). */
body.builder-has-fixed-cta .planifica-shell { padding-bottom: 96px; }
body.builder-has-fixed-cta [slot="front"][data-builder-prefs-form] { padding-bottom: 96px; }
/* CTA "Generar mi plan" al TOPE del form (además de la barra fija) — visible
   apenas se abre la card. Reusa .builder-generate-btn; solo ajusta spacing. */
.builder-prefs-generate.--top { margin: 4px 0 20px; }
.builder-prefs-generate.--top .builder-generate-btn { margin-top: 0; }
.builder-prefs-generate.--top .builder-generate-hint { margin: 8px 0 0; text-align: center; font-size: 12px; }
.builder-generate-hint {
  margin-top: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-400);
  text-align: center;
  font-style: italic;
}
.builder-generate-hint[hidden] { display: none; }
.builder-budget-flex {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* PLAN-W009 · Pantalla 4 Checklist del builder. Reusa .progress-track +
   .progress-fill ya definidos en el demo (pantalla 4 de planifica.html).
   Acá agregamos el wrapper, percent label, lista de items, badges. */
.checklist-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 12px;
}
.checklist-progress .progress-track { flex: 1 1 auto; }
.checklist-progress-pct {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--tripsy-teal-deep);
  min-width: 36px;
  text-align: right;
}
.checklist-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checklist-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.checklist-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-color: rgba(89,189,185,0.30);
}
.checklist-item:focus-visible {
  outline: 2px solid var(--tripsy-teal);
  outline-offset: 2px;
}
.checklist-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--tripsy-gray-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  flex-shrink: 0;
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
}
.checklist-item--done {
  background: linear-gradient(180deg, #fff 0%, var(--tripsy-teal-soft) 100%);
  border-color: var(--tripsy-teal);
}
.checklist-item--done .checklist-check {
  background: var(--tripsy-teal);
  border-color: var(--tripsy-teal);
}
.checklist-item--done .checklist-check::after {
  content: '✓';
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.checklist-item--done .checklist-label {
  color: var(--tripsy-gray-500);
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,0.25);
  text-decoration-thickness: 1px;
}
.checklist-item--next {
  border-color: var(--tripsy-coral, #E8A174);
  background: rgba(232,161,116,0.04);
}
.checklist-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.checklist-label {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.checklist-detail {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
  line-height: 1.4;
}
.checklist-next-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--tripsy-coral, #E8A174);
  color: #fff;
}

/* ---------- Pantalla 4 — Checklist ---------- */
.progress-wrap { display: flex; align-items: center; gap: 10px; }
.progress-track {
  flex: 1 1 auto;
  height: 6px;
  background: var(--tripsy-gray-200);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tripsy-teal) 0%, var(--tripsy-teal-dark) 100%);
  border-radius: 999px;
  transition: width 0.6s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%);
  animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.progress-pct {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--tripsy-teal-deep);
  min-width: 38px;
  text-align: right;
}

.check-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.check-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 12px;
}
.check-row.--next {
  background: var(--tripsy-teal-soft);
}
.check-mark {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.check-mark.--done    { background: var(--tripsy-teal); color: #fff; }
.check-mark.--next {
  background: #fff;
  color: var(--tripsy-teal);
  border: 2px solid var(--tripsy-teal);
  animation: pulse-next 2.2s ease-in-out infinite;
}
@keyframes pulse-next {
  0%, 100% { box-shadow: 0 0 0 0 rgba(89,189,185,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(89,189,185,0); }
}
.check-mark.--pending { background: var(--tripsy-gray-100); color: var(--tripsy-gray-400); border: 1px solid var(--tripsy-gray-200); }
.check-label { font-size: 13px; font-weight: 500; }
.check-label.--pending { color: var(--tripsy-gray-400); }
.next-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tripsy-teal);
  color: #fff;
  padding: 3px 7px;
  border-radius: 999px;
}

/* Back face: detalle del siguiente paso */
.detail-card {
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: baseline;
}
.detail-card .name { font-weight: 600; font-size: 13px; }
.detail-card .city { font-size: 11px; color: var(--tripsy-gray-500); }
.detail-card .price {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--tripsy-teal-deep);
}
.detail-card .rating { font-size: 11px; color: var(--tripsy-coral-dark); }

/* ---------- Card 3 — Panorama (fusión ruta + hoteles + experiencias) ----------
   El scroll + padding del front lo da [data-builder-card-front]. Acá solo
   separamos las 3 secciones (ruta / hoteles / experiencias) con un divisor
   suave y un título por sección. */
.panorama-front {
  gap: 0;
}
.panorama-section + .panorama-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.panorama-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.panorama-section-title .accent {
  font-style: italic;
  color: var(--tripsy-teal-deep);
}
.panorama-lodging .screen-sub,
.panorama-experiences .screen-sub {
  margin-bottom: 10px;
}

/* PLAN-W014 · Pantalla 5 Recorrido (builder). Input area de ciudades +
   resultado con orden numerado + tramos. El mapa real (W015/W016) reusa
   .route-map del demo más abajo. */
.recorrido-input-area {
  margin-top: 14px;
  margin-bottom: 12px;
}
.recorrido-input-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
/* PLAN-W014 (fix P2) · Header de columnas sobre la lista de inputs.
   Misma grilla que `.recorrido-row` (1fr 70px 32px) para alinear los
   labels con las celdas reales. El usuario antes no sabía qué medía el
   número de la 2da columna — pensaba "tiempo entre tramos" (la métrica
   del output) cuando en realidad es noches en esa ciudad. */
.recorrido-input-header {
  display: grid;
  grid-template-columns: 1fr 70px 32px;
  gap: 8px;
  margin-bottom: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tripsy-gray-500);
}
.recorrido-input-header-nights { text-align: center; }
.recorrido-row {
  display: grid;
  grid-template-columns: 1fr 70px 32px;
  gap: 8px;
  align-items: center;
}
.recorrido-city,
.recorrido-nights {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 10px;
  background: #fff;
  transition: border-color var(--dur-base, 240ms) var(--ease-out, ease);
}
.recorrido-city:focus,
.recorrido-nights:focus {
  outline: none;
  border-color: var(--tripsy-teal);
}
.recorrido-nights { text-align: center; }
.recorrido-row-remove {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--tripsy-gray-200);
  background: transparent;
  color: var(--tripsy-gray-500);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recorrido-row-remove:hover:not(:disabled) {
  background: var(--tripsy-gray-100);
  color: var(--tripsy-ink);
}
.recorrido-row-remove:disabled { opacity: 0.3; cursor: not-allowed; }
.recorrido-add-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tripsy-teal-deep);
  background: transparent;
  border: 1px dashed rgba(89,189,185,0.4);
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
}
.recorrido-add-btn:hover {
  background: var(--tripsy-teal-soft);
  border-style: solid;
}
.recorrido-optimize-btn {
  width: 100%;
  margin-top: 6px;
  padding: 10px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--tripsy-teal);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
}
.recorrido-optimize-btn:hover:not(:disabled) {
  background: var(--tripsy-teal-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(89,189,185,0.25);
}
.recorrido-optimize-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.recorrido-result {
  margin-top: 16px;
}
.recorrido-result:empty { display: none; }
.recorrido-result-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tripsy-gray-500);
  margin-bottom: 8px;
}
.recorrido-order {
  list-style: none;
  margin: 0;
  padding: 0;
}
.recorrido-stop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff 0%, var(--tripsy-teal-soft) 100%);
  border: 1px solid var(--tripsy-teal);
  border-radius: 12px;
}
.recorrido-stop-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--tripsy-teal);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.recorrido-stop-name {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
}
.recorrido-leg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 38px;
  margin: 2px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
}
.recorrido-leg-mode {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tripsy-teal-deep);
}
.recorrido-leg-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.recorrido-leg-meta .sep {
  width: 2px; height: 2px;
  border-radius: 999px;
  background: var(--tripsy-gray-400);
}
/* PLAN-W019 · Badge interactivo. Render como <button> con tooltip nativo
   (title attr) para accesibilidad. cursor:help para indicar que es
   informativo, no acción. Reset del button styling default + hover suave. */
.recorrido-degraded-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(232,161,116,0.15);
  color: var(--tripsy-coral-dark, #C4794D);
  border: 1px solid var(--tripsy-coral, #E8A174);
  cursor: help;
  transition: background var(--dur-base, 240ms) var(--ease-out, ease);
}
.recorrido-degraded-badge::before {
  content: 'ⓘ';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
.recorrido-degraded-badge:hover {
  background: rgba(232,161,116,0.25);
}
.recorrido-degraded-badge:focus-visible {
  outline: 2px solid var(--tripsy-coral, #E8A174);
  outline-offset: 2px;
}
.recorrido-error {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(232,161,116,0.08);
  border: 1px dashed var(--tripsy-coral, #E8A174);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--tripsy-coral-dark, #C4794D);
}

/* PLAN-W015 · Wrapper del <route-map> en Card 5. El componente
   internamente fija aspect-ratio con su SVG; el wrapper solo le da
   margin-top y border-radius del contenedor. `hidden` (el atributo
   HTML) lo deja oculto hasta que recorrido.js lo hidrata. */
.recorrido-map-wrap {
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(89,189,185,0.25);
  background: var(--tripsy-teal-soft);
  position: relative;
}
.recorrido-map-wrap[hidden] { display: none; }
.recorrido-map-wrap route-map,
.recorrido-map-wrap route-map-gmaps {
  display: block;
  width: 100%;
}

/* PLAN-W016 (fix P1) · Map height escala con el número de ciudades. El
   componente declara `:host { max-height: 320px }` que es cómodo con 2
   ciudades vecinas pero comprime el mapa al punto de quedar inutilizable
   con 3+ ciudades (ej. Buenos Aires → Mendoza → Bariloche cruza varios
   grados de latitud). Estas reglas externas pisan el :host del shadow
   DOM (specificity de selector externo > :host). recorrido.js setea
   data-city-count antes de mostrar el wrap. */
.recorrido-map-wrap[data-city-count="3"] route-map,
.recorrido-map-wrap[data-city-count="3"] route-map-gmaps {
  max-height: 420px;
}
.recorrido-map-wrap[data-city-count="4"] route-map,
.recorrido-map-wrap[data-city-count="4"] route-map-gmaps {
  max-height: 480px;
}
.recorrido-map-wrap[data-city-count="5"] route-map,
.recorrido-map-wrap[data-city-count="5"] route-map-gmaps,
.recorrido-map-wrap[data-city-count="6"] route-map,
.recorrido-map-wrap[data-city-count="6"] route-map-gmaps,
.recorrido-map-wrap[data-city-count="7"] route-map,
.recorrido-map-wrap[data-city-count="7"] route-map-gmaps,
.recorrido-map-wrap[data-city-count="8"] route-map,
.recorrido-map-wrap[data-city-count="8"] route-map-gmaps {
  max-height: 560px;
}

/* PLAN-W016 (fix P1) · Toggle expand → overlay modal. Cuando el visitante
   hace click en `[data-recorrido-map-expand]`, recorrido.js agrega
   `--expanded` al wrap. El wrap pasa a `position:fixed` sobre toda la
   viewport — sale del clipping del card-scene (overflow:hidden) y le da
   al mapa el ancho completo (no el del card mobile que limitaba la
   altura efectiva incluso con aspect-ratio cuadrado). Re-click colapsa. */
.recorrido-map-wrap.--expanded {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  border-radius: 0;
  border: none;
  background: #fff;
  overflow: hidden;
}
.recorrido-map-wrap.--expanded route-map,
.recorrido-map-wrap.--expanded route-map-gmaps {
  max-height: none;
  aspect-ratio: auto;
  height: 100%;
}
/* En expanded el wrap toma todo el viewport — los pills overlay ya están
   posicionados absolute en top/left, los movemos al safe-area si hace falta. */
.recorrido-map-wrap.--expanded .recorrido-pills {
  top: env(safe-area-inset-top, 0px);
}
.recorrido-map-wrap.--expanded .recorrido-map-expand-btn {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
}

/* PLAN-W016 (fix P1) · Botón flotante para expandir/colapsar el mapa.
   Top-right, sobre el mapa pero debajo del overlay de pills (z-index 2). */
.recorrido-map-expand-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(89,189,185,0.25);
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  color: var(--tripsy-teal-deep);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: background 0.15s ease, transform 0.15s ease;
}
.recorrido-map-expand-btn:hover { background: rgba(255,255,255,1); }
.recorrido-map-expand-btn:active { transform: scale(0.96); }
.recorrido-map-expand-btn[hidden] { display: none; }

/* PLAN-W017 · Pills summary sobre el mapa. Overlay flotante con 3
   métricas: modo dominante / total noches / total km. Fondo semi-
   translúcido con blur para no pelear visualmente con el mapa. */
.recorrido-pills {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.recorrido-pills[hidden] { display: none; }
.recorrido-pill {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(89,189,185,0.20);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  pointer-events: auto;
}
.recorrido-pill-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tripsy-gray-500);
  line-height: 1;
}
.recorrido-pill-value {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tripsy-teal-deep);
  line-height: 1.1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PLAN-W018 · Back face de Card 5: lista de top-2 alternatives + CTA. */
.recorrido-alts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.recorrido-alt {
  padding: 12px 14px;
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recorrido-alt-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.recorrido-alt-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(232,161,116,0.18);
  color: var(--tripsy-coral-dark, #C4794D);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.recorrido-alt-rationale {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--tripsy-ink);
  line-height: 1.45;
}
.recorrido-alt-order {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tripsy-teal-deep);
  letter-spacing: -0.005em;
}
.recorrido-alt-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
}
.recorrido-alt-meta .sep {
  width: 2px; height: 2px;
  border-radius: 999px;
  background: var(--tripsy-gray-400);
}
.recorrido-go-day-btn {
  margin-top: 14px;
  width: 100%;
  padding: 10px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--tripsy-coral, #E8A174);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
}
.recorrido-go-day-btn:hover {
  background: var(--tripsy-coral-dark, #C4794D);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232,161,116,0.30);
}
.recorrido-go-day-btn[hidden] { display: none; }

/* ---------- Pantalla 5 — Recorrido ---------- */
.route-map {
  position: relative;
  flex: 1 1 auto;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(89,189,185,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(232,161,116,0.08) 0%, transparent 55%),
    var(--tripsy-cream);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.04);
}
.route-map svg { width: 100%; height: 100%; display: block; }
.route-pills {
  position: absolute;
  top: 14px; left: 14px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.route-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  color: var(--tripsy-ink);
}
.route-pill .dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--tripsy-teal);
  margin-right: 6px;
  vertical-align: middle;
}

/* Back face: lista de ciudades */
.city-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--tripsy-gray-200);
}
.city-row:last-child { border-bottom: none; }
.city-num {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--tripsy-teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.city-name { font-weight: 600; font-size: 13px; }
.city-blurb { font-size: 11px; color: var(--tripsy-gray-500); line-height: 1.4; }
.city-nights {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--tripsy-teal-deep);
  white-space: nowrap;
}

/* ---------- Pantalla 6 — City Planner ---------- */
.cp-map {
  position: relative;
  flex: 1 1 auto;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(89,189,185,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(126,103,139,0.08) 0%, transparent 55%),
    var(--tripsy-cream);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.04);
}
.cp-map svg { width: 100%; height: 100%; display: block; }
.cp-day-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,0.95);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--tripsy-ink);
  backdrop-filter: blur(6px);
  box-shadow: var(--sh-sm);
}
.cp-tip {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  background: rgba(255,255,255,0.96);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: var(--sh-md);
  border-left: 3px solid var(--tripsy-teal);
}
.cp-tip img { width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0; }
.cp-tip p { font-size: 11px; line-height: 1.4; color: var(--tripsy-gray-700); margin: 0; }

/* Back face: lista de stops */
.stop-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--tripsy-gray-200);
}
.stop-row:last-child { border-bottom: none; }
.stop-time {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--tripsy-teal-deep);
  min-width: 48px;
}
.stop-name { font-size: 12px; font-weight: 600; }
.stop-meta { font-size: 10px; color: var(--tripsy-gray-500); }
.stop-dur {
  font-size: 10px;
  color: var(--tripsy-gray-500);
  background: var(--tripsy-gray-100);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Pantalla 7 — Tu viaje ---------- */
.s7-final {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 12px;
  min-height: 0;
}
/* PLAN-W025 · Hero compacto del Card 7 (orb + título + 3 stats). El
   resumen del plan vive en .s7-summary debajo del hero. */
.s7-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 8px 12px 16px;
}
.s7-hero .orb { width: 92px; height: 92px; font-size: 44px; }
.s7-hero .screen-title { font-size: 22px; margin: 0; }
.s7-hero .s7-stats { gap: 24px; margin-top: 4px; }
.s7-hero .stat-block .num { font-size: 22px; }
.s7-hero .stat-block .lbl { font-size: 9px; }
.orb {
  width: 132px; height: 132px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #FFF6E8 0%, #F5C9A8 60%, #E8A174 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  color: #fff;
  box-shadow: 0 0 40px rgba(232,161,116,0.45), 0 0 80px rgba(232,161,116,0.22);
  position: relative;
  animation: orb-breathe 4s ease-in-out infinite;
}
.orb::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 1px solid rgba(232,161,116,0.35);
  animation: orb-ring 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes orb-breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 40px rgba(232,161,116,0.45), 0 0 80px rgba(232,161,116,0.22); }
  50%      { transform: scale(1.04); box-shadow: 0 0 50px rgba(232,161,116,0.55), 0 0 100px rgba(232,161,116,0.30); }
}
@keyframes orb-ring {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.15; transform: scale(1.12); }
}
.s7-stats {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 4px;
}
.stat-block { text-align: center; }
.stat-block .num {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 28px;
  color: var(--tripsy-ink);
  line-height: 1;
}
.stat-block .lbl {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tripsy-gray-500);
  margin-top: 4px;
}
.s7-message {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--tripsy-gray-700);
  max-width: 280px;
  margin: 16px auto 0;
  text-align: center;
}

/* PLAN-W025 · Resumen del plan (Card 7 front). Cada .s7-section tiene
   header con icono + título y un cuerpo específico (vuelo, hoteles,
   recorrido, mapas, tip). Las secciones se ocultan si su dato source
   está vacío — ver final.js. */
.s7-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 4px 0;
}
.s7-section[hidden] { display: none; }
.s7-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s7-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}
.s7-section-icon { font-size: 14px; line-height: 1; }
.s7-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tripsy-gray-600, #4a5258);
}

/* Vuelo */
.s7-flight-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--tripsy-gray-100, #f1f3f4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.s7-flight-info { min-width: 0; flex: 1; }
.s7-flight-airline {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--tripsy-ink);
}
.s7-flight-route {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--tripsy-gray-500);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.s7-flight-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
  margin-top: 4px;
}
.s7-flight-price {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--tripsy-teal-deep);
  white-space: nowrap;
}

/* Hospedaje */
.s7-lodging-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s7-lodging-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--tripsy-gray-100, #f1f3f4);
}
.s7-lodging-info { min-width: 0; flex: 1; }
.s7-lodging-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tripsy-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s7-lodging-city {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
  margin-top: 2px;
}
.s7-lodging-price {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--tripsy-teal-deep);
  white-space: nowrap;
  text-align: right;
}
.s7-lodging-price small {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: var(--tripsy-gray-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1px;
}
/* Toda la card es deep-link a Booking.com (target=_blank). Sacamos el
   underline default del <a> y heredamos color para que se vea como una
   fila pulsable, no un link. */
.s7-lodging-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
.s7-lodging-link:hover .s7-lodging-name { color: var(--tripsy-teal-deep); }
.s7-lodging-item--backup {
  background: var(--tripsy-gray-50, #fafafa);
  border-color: rgba(0,0,0,0.06);
}

/* Recorrido */
.s7-route-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.s7-route-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  position: relative;
}
.s7-route-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 32px;
  width: 2px;
  height: calc(100% - 18px);
  background: var(--tripsy-teal-soft, rgba(89, 189, 185, 0.25));
}
.s7-route-num {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--tripsy-teal);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.s7-route-body { min-width: 0; flex: 1; }
.s7-route-city {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tripsy-ink);
}
.s7-route-nights {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
  margin-top: 1px;
}

/* Mapas por ciudad */
.s7-maps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s7-maps-item { width: 100%; }
.s7-maps-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--tripsy-gray-100, #f1f3f4);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.18s var(--ease-out, ease);
}
.s7-maps-link:hover {
  border-color: var(--tripsy-teal);
  background: rgba(89, 189, 185, 0.04);
}
.s7-maps-info { min-width: 0; flex: 1; }
.s7-maps-city {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tripsy-ink);
}
.s7-maps-stops {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
  margin-top: 2px;
}
.s7-maps-arrow {
  font-size: 16px;
  color: var(--tripsy-teal);
  flex-shrink: 0;
}

/* Experiencias (tours / actividades / free walks recomendados por el LLM).
   Misma estética compacta que el lodging — toda la fila es link al
   provider (GetYourGuide / Civitatis / Guruwalk). */
.s7-exp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s7-exp-item {
  background: #fff;
  border: 1px solid var(--tripsy-gray-100, #f1f3f4);
  border-radius: 12px;
  overflow: hidden;
}
.s7-exp-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
}
.s7-exp-link:hover .s7-exp-name { color: var(--tripsy-teal-deep); }
.s7-exp-info { min-width: 0; flex: 1; }
.s7-exp-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tripsy-ink);
}
.s7-exp-city {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
  margin-top: 2px;
}
.s7-exp-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-gray-500);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s7-exp-price {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tripsy-teal-deep);
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}
.s7-exp-price small {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: var(--tripsy-gray-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1px;
}
.s7-exp-cta {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tripsy-teal-deep);
  white-space: nowrap;
}

/* Tip de Iris */
.s7-tip-section {
  background: rgba(232, 161, 116, 0.10);
  border-radius: 14px;
  padding: 14px 16px;
  gap: 6px;
}
.s7-tip-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tripsy-coral-dark, #C4794D);
}
.s7-tip-body {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tripsy-gray-700);
  margin: 0;
}

/* CTAs */
.s7-ctas {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.s7-cta {
  flex: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 11px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s var(--ease-out, ease);
  border: 1.5px solid var(--tripsy-teal);
}
.s7-cta--ghost {
  background: transparent;
  color: var(--tripsy-teal-deep);
}
.s7-cta--ghost:hover {
  background: rgba(89, 189, 185, 0.10);
}
.s7-cta--primary {
  background: var(--tripsy-teal);
  color: #fff;
}
.s7-cta--primary:hover {
  background: var(--tripsy-teal-deep);
  border-color: var(--tripsy-teal-deep);
}
.s7-cta:active { transform: scale(0.97); }

.s7-back-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 16px;
  border-left: 3px solid var(--tripsy-coral);
  margin-bottom: 8px;
}
.s7-back-confirm .check-icon {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--tripsy-coral);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.s7-back-confirm p { font-size: 12px; line-height: 1.4; margin: 0; color: var(--tripsy-gray-700); }
/* PLAN-W025 · Back de Card 7 "Llévalo contigo" — vista detallada
   portada desde viajero/iris_itinerary_result_screen.dart. El front es
   el resumen rápido; el back es el plan completo para llevarse. */
.screen-pad[data-card7-detail] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}
.s7-back-motivational {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tripsy-gray-700);
  margin: 0 0 4px;
}
.s7-back-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s7-back-section[hidden] { display: none; }
.s7-back-card {
  background: #fff;
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.s7-back-summary-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tripsy-ink);
  line-height: 1.45;
  margin: 0;
}
.s7-back-summary-text[hidden] { display: none; }
.s7-back-detail-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--tripsy-gray-500);
  line-height: 1.45;
  margin: 0;
}
.s7-back-detail-text[hidden] { display: none; }
.s7-back-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s7-back-bullet {
  position: relative;
  padding-left: 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tripsy-gray-700);
}
.s7-back-bullet::before {
  content: '•';
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--tripsy-teal);
  font-weight: 700;
}
.s7-back-bullet--row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-left: 0;
}
.s7-back-bullet--row::before { display: none; }
.s7-back-bullet-label {
  font-weight: 600;
  color: var(--tripsy-ink);
  letter-spacing: 0.02em;
}
.s7-back-bullet-value {
  color: var(--tripsy-gray-700);
  text-align: right;
  flex: 1;
}
.s7-back-outline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s7-back-outline-item {
  background: #fff;
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.s7-back-outline-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.s7-back-outline-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--tripsy-teal);
  padding: 5px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.s7-back-outline-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--tripsy-ink);
  line-height: 1.3;
}
.s7-back-outline-sum-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tripsy-coral-dark, #C4794D);
}
.s7-back-outline-sum {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tripsy-gray-700);
  margin: 0;
}
.s7-back-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s7-back-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(232, 161, 116, 0.10);
  border-radius: 14px;
  padding: 12px 14px;
}
.s7-back-tip-icon { font-size: 14px; line-height: 1.2; flex-shrink: 0; }
.s7-back-tip p {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tripsy-gray-700);
  margin: 0;
  flex: 1;
}
.s7-back-share {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--tripsy-gray-200);
}
.s7-back-share-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tripsy-teal-deep);
  margin-bottom: 10px;
}
.share-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.share-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 14px 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--tripsy-gray-200);
  color: var(--tripsy-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.share-btn:hover {
  border-color: var(--tripsy-teal);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(89,189,185,0.16);
  color: var(--tripsy-teal-deep);
}
.share-btn .ico { font-size: 20px; }

/* PLAN-W025 · Share row del builder Card 7. Reusa .share-row + .share-btn
   del demo planifica + agrega .share-icon (emoji 20px) y .share-label
   (texto Montserrat) para los botones del builder. .share-pending es el
   mensaje "Próximamente" que aparece 1.6s al click — los exports reales
   PDF/ICS/Link dependen de PLAN-W026/W027/W028. */
.share-btn .share-icon { font-size: 20px; line-height: 1; }
/* Variante con logo de marca (WhatsApp): el ícono es un SVG, no un emoji.
   display:flex centra el glyph y mantiene la misma caja de 20px que los emoji. */
.share-btn .share-icon--wa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.share-btn .share-icon--wa svg { display: block; }
.share-btn .share-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.share-pending {
  margin-top: 12px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--tripsy-coral-dark, #C4794D);
  font-style: italic;
  animation: share-pending-pop 200ms var(--ease-out, ease-out);
}
.share-pending[hidden] { display: none; }
@keyframes share-pending-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- CTA principal ---------- */
.planifica-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding: 0 16px;
}
.planifica-cta {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--tripsy-teal);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(89,189,185,0.35);
  transition: all var(--dur-base) var(--ease-out);
  min-height: 48px;
}
.planifica-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(89,189,185,0.45); }

/* ---------- Email modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(29,29,31,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  backdrop-filter: blur(6px);
}
.modal-backdrop.--open { display: flex; }
.modal {
  background: #fff;
  border-radius: 24px;
  padding: 28px 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 56px rgba(0,0,0,0.18);
  text-align: center;
}
.modal h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}
.modal p {
  font-size: 13px;
  color: var(--tripsy-gray-500);
  line-height: 1.5;
  margin-bottom: 16px;
}
.modal input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--tripsy-gray-200);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color var(--dur-base);
}
.modal input:focus { border-color: var(--tripsy-teal); }
.modal .submit {
  width: 100%;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--tripsy-teal);
  color: #fff;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--dur-base);
}
.modal .submit:hover { background: var(--tripsy-teal-dark); }
.modal .submit:disabled { opacity: 0.5; cursor: not-allowed; }
.modal .skip {
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--tripsy-gray-500);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.modal .error {
  color: var(--tripsy-danger);
  font-size: 12px;
  margin-top: 6px;
  min-height: 16px;
}
.modal .success {
  color: var(--tripsy-success);
  font-size: 13px;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 480px) {
  .planifica-shell { padding: 12px 8px 32px; }
  .planifica-intro { margin: 4px auto 16px; padding: 0 8px; }
  .screen-pad { padding: 18px 16px; gap: 10px; }
  .screen-title { font-size: 22px; }
  .s1-hero h2 { font-size: 28px; }
  .orb { width: 110px; height: 110px; font-size: 52px; }
}

/* ============================================================
   Iris Date Picker — popup custom que reemplaza el modal nativo
   del browser para `<input type="date" data-iris-modern-date>`.
   El input nativo queda oculto pero sigue siendo la fuente de
   verdad (.value ISO YYYY-MM-DD) → toda la persistencia existente
   sigue funcionando.
   ============================================================ */
.iris-dp-wrap {
  position: relative;
  width: 100%;
}
.iris-dp-native {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.iris-dp-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--tripsy-ink);
  background: #fff;
  border: 1px solid var(--tripsy-gray-200);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s var(--ease-out, ease),
              box-shadow 0.18s var(--ease-out, ease);
}
.iris-dp-trigger:hover {
  border-color: var(--tripsy-teal);
}
.iris-dp-trigger:focus-visible {
  outline: none;
  border-color: var(--tripsy-teal);
  box-shadow: 0 0 0 3px rgba(89, 189, 185, 0.18);
}
.iris-dp-trigger-placeholder {
  color: var(--tripsy-gray-400);
}
.iris-dp-trigger-value {
  color: var(--tripsy-ink);
  font-weight: 500;
}
.iris-dp-trigger-icon {
  display: inline-flex;
  align-items: center;
  color: var(--tripsy-teal-deep);
  opacity: 0.75;
  flex-shrink: 0;
}
.iris-dp-trigger.--filled .iris-dp-trigger-icon { opacity: 1; }

/* Popup — se posiciona debajo del trigger, sobre todo lo demás. */
.iris-dp-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -4px);
  z-index: 100;
  width: min(320px, calc(100vw - 32px));
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 16px;
  font-family: 'Montserrat', sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--ease-out, ease),
              transform 0.16s var(--ease-out, ease);
}
.iris-dp-popup.--open {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Header: ‹ mes año › */
.iris-dp-header {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.iris-dp-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-transform: capitalize;
  color: var(--tripsy-ink);
  letter-spacing: 0.01em;
}
.iris-dp-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--tripsy-gray-200);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--tripsy-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s var(--ease-out, ease),
              border-color 0.18s var(--ease-out, ease),
              color 0.18s var(--ease-out, ease);
  padding: 0;
}
.iris-dp-nav:hover {
  background: var(--tripsy-teal);
  border-color: var(--tripsy-teal);
  color: #fff;
}

/* Días de la semana (encabezado del grid) */
.iris-dp-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}
.iris-dp-dow > div {
  font-size: 10px;
  font-weight: 600;
  color: var(--tripsy-gray-400);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
}

/* Grid de días */
.iris-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.iris-dp-cell {
  aspect-ratio: 1 / 1;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--tripsy-ink);
  border-radius: 50%;
  transition: background 0.14s var(--ease-out, ease),
              color 0.14s var(--ease-out, ease);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.iris-dp-cell.--empty {
  cursor: default;
  pointer-events: none;
}
.iris-dp-cell:not(.--empty):not(.--disabled):hover {
  background: rgba(89, 189, 185, 0.18);
}
.iris-dp-cell.--today {
  font-weight: 700;
  color: var(--tripsy-teal-deep);
  position: relative;
}
.iris-dp-cell.--today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--tripsy-coral);
}
.iris-dp-cell.--selected,
.iris-dp-cell.--selected.--today {
  background: var(--tripsy-teal);
  color: #fff;
  font-weight: 600;
}
.iris-dp-cell.--selected.--today::after { background: #fff; }
.iris-dp-cell.--selected:hover { background: var(--tripsy-teal-deep); }
.iris-dp-cell.--disabled {
  color: var(--tripsy-gray-200);
  cursor: not-allowed;
}

/* Mobile — el popup se centra en el viewport para que no se corte. */
@media (max-width: 600px) {
  .iris-dp-popup {
    width: min(300px, calc(100vw - 24px));
    padding: 14px;
  }
  .iris-dp-cell { font-size: 12.5px; }
}

/* ─────────────────────────────────────────────────────────────────
   PLAN-W035 · Panorama general post-Personaliza
   ────────────────────────────────────────────────────────────────
   Vista que aparece después de "Generar mi plan". Layout dos columnas
   (mapa + días) en desktop, stacked en mobile. Tono Tripsy (cream
   surface, teal accents, sombras suaves) — NO Trip.com flat. */

.iris-itinerary {
  margin: 24px auto 32px;
  max-width: 1100px;
  padding: 0 16px;
  font-family: 'Montserrat', sans-serif;
  color: var(--tripsy-text, #2c2c2c);
}
.iris-itinerary[hidden] { display: none; }

.iris-itinerary-header {
  text-align: center;
  margin-bottom: 20px;
}
.iris-itinerary-header .eyebrow {
  color: var(--tripsy-teal-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.iris-itinerary-title {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 600;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.2;
  margin: 6px 0 4px;
}
.iris-itinerary-sub {
  color: var(--tripsy-gray-500, #6c757d);
  font-size: 13px;
  margin: 0;
}
.iris-itinerary-sub[hidden] { display: none; }

/* Grid 55/45 desktop, stacked mobile. Per W035 spec: mapa izquierda
   ancho mayor, días derecha ancho menor. */
.iris-itinerary-body {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 820px) {
  .iris-itinerary-body {
    grid-template-columns: 1fr;
  }
}

.iris-itinerary-map-col,
.iris-itinerary-days-col {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(47, 140, 136, 0.08);
  overflow: hidden;
  min-height: 320px;
  /* PLAN-W033 · Stacking context para los controles custom (.builder-map-ctrl)
     que se posicionan absolute encima del mapa. */
  position: relative;
}
/* Cuando itinerary-map.js inyecta el <route-map-gmaps>, el componente
   trae su propio aspect-ratio y altura — sacamos el min-height + bg del
   placeholder para que no queden bandas vacías abajo del mapa. */
.iris-itinerary-map-col.--has-map {
  min-height: 0;
  background: transparent;
}

/* PLAN-W033 · Controles custom del mapa (Centrar + Layer toggle).
   Stack vertical en esquina inferior izquierda según spec. Estilo
   Tripsy: pill blanco semi-translúcido con icon teal, sombra suave,
   estado --active para "satellite" en el toggle. */
.builder-map-ctrl {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none; /* container no captura — sólo los botones */
}
.builder-map-ctrl-btn {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--tripsy-teal-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(47, 140, 136, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
}
.builder-map-ctrl-btn:hover {
  background: #fff;
  color: var(--tripsy-teal);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 140, 136, 0.25);
}
.builder-map-ctrl-btn:active { transform: translateY(0); }
.builder-map-ctrl-btn.--active {
  background: var(--tripsy-teal);
  color: #fff;
  border-color: var(--tripsy-teal);
}

/* PLAN-W034 · Leyenda de días — pill blanca centrada arriba del mapa,
   chips inline con dot del color del día. Solo aparece en overview con
   2+ días (itinerary-map.js no la inserta si days < 2). Scrolleable
   horizontal si hay muchos días para no romper en mobile. */
.builder-map-legend {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 4px;
  max-width: calc(100% - 24px);
  overflow-x: auto;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(47, 140, 136, 0.15);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  scrollbar-width: none; /* Firefox */
}
.builder-map-legend::-webkit-scrollbar { display: none; }
.builder-map-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--tripsy-ink, #2c2c2c);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
}
.builder-map-legend-chip-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid;
}

/* ─────────────────────────────────────────────────────────────────
   PLAN-W037 · Panel de días del panorama
   ────────────────────────────────────────────────────────────────
   Cards verticales en desktop (col scrollable), carrusel horizontal
   en mobile con scroll-snap. La card activa lleva left-border del
   color del día (vía CSS custom property --day-color seteada por
   itinerary-days.js inline en el style del article). */

.iris-itinerary-days-col.--has-days {
  padding: 14px;
}
.itinerary-day-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.itinerary-day-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 3px solid transparent;
  padding: 12px 14px;
  cursor: pointer;
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
  font-family: 'Montserrat', sans-serif;
}
.itinerary-day-card:hover {
  border-color: rgba(0, 0, 0, 0.1);
  border-left-color: var(--day-color, var(--tripsy-teal));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 140, 136, 0.08);
}
.itinerary-day-card.--active {
  border-left-color: var(--day-color, var(--tripsy-teal));
  border-left-width: 4px;
  box-shadow: 0 4px 14px rgba(47, 140, 136, 0.12);
  background: linear-gradient(to right, rgba(89, 189, 185, 0.05) 0%, #fff 30%);
}
/* Card genérica para los días que el LLM no curó (trips largos donde el
   plan se corta en ~7 días). Fondo discreto + borde punteado para señalar
   que falta contenido y el visitante puede personalizarlo desde el detalle. */
.itinerary-day-card--placeholder {
  background: var(--tripsy-teal-soft, rgba(89, 189, 185, 0.05));
  border-style: dashed;
  border-color: rgba(89, 189, 185, 0.35);
}
.itinerary-day-card--placeholder .itinerary-day-title {
  color: var(--tripsy-gray-700, #495057);
  font-style: italic;
}
.itinerary-day-card--placeholder .itinerary-day-summary {
  color: var(--tripsy-gray-500, #6c757d);
}
.itinerary-day-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.itinerary-day-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--day-color-deep, var(--tripsy-teal-deep));
}
.itinerary-day-num-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--day-color, var(--tripsy-teal));
}
.itinerary-day-city {
  font-size: 14px;
  font-weight: 600;
  color: var(--tripsy-ink, #2c2c2c);
  text-align: right;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itinerary-stop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.itinerary-stop-item {
  font-size: 12.5px;
  color: var(--tripsy-gray-700, #495057);
  padding: 2px 0 2px 14px;
  position: relative;
  line-height: 1.3;
}
.itinerary-stop-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--day-color, var(--tripsy-teal));
  opacity: 0.6;
}
.itinerary-day-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: var(--tripsy-gray-500, #6c757d);
}

/* Toggle "Ver detalles ↓" y panel expandible con los artefactos del día.
   El panel revela: alojamiento (filtrado por city del día), experiencias
   (mismo filter) y un CTA a la City Planner del card-scene. Diseñado para
   no robarle el click al card-select (highlight + map.refitDay). */
.itinerary-day-toggle {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 4px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--day-color-deep, var(--tripsy-teal-deep, #2F8C88));
  cursor: pointer;
  letter-spacing: 0.02em;
}
.itinerary-day-toggle:hover { text-decoration: underline; }
.itinerary-day-toggle-chevron {
  display: inline-block;
  transition: transform var(--dur-base, 240ms) var(--ease-out, ease);
  font-size: 12px;
  line-height: 1;
}
.itinerary-day-toggle[aria-expanded="true"] .itinerary-day-toggle-chevron {
  transform: rotate(-180deg);
}

.itinerary-day-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: dayDetailsSlide 220ms var(--ease-out, ease);
}
.itinerary-day-details[hidden] { display: none; }
@keyframes dayDetailsSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.itinerary-details-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.itinerary-details-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tripsy-ink, #2c2c2c);
}
.itinerary-details-head > span:first-child { font-size: 13px; }
.itinerary-details-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  background: rgba(89, 189, 185, 0.04);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--tripsy-gray-700, #495057);
  line-height: 1.4;
}
.itinerary-details-item-main { min-width: 0; flex: 1; }
.itinerary-details-item-main strong {
  font-weight: 600;
  color: var(--tripsy-ink, #2c2c2c);
}
.itinerary-details-item-meta {
  color: var(--tripsy-gray-500, #6c757d);
  font-size: 11.5px;
}
.itinerary-details-item-price {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  color: var(--tripsy-teal-deep, #2F8C88);
  white-space: nowrap;
}
.itinerary-details-item-alt {
  width: 100%;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--tripsy-gray-500, #6c757d);
}
.itinerary-details-empty {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--tripsy-gray-500, #6c757d);
  padding: 4px 0 2px;
}
.itinerary-details-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tripsy-teal, #59BDB9);
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
  align-self: flex-start;
}
.itinerary-details-map-btn:hover {
  background: var(--tripsy-teal-deep, #2F8C88);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(89, 189, 185, 0.3);
}
.itinerary-details-map-btn:active { transform: scale(0.98); }

/* Cards con title + summary del LLM (irisFast.daily_outline). title es
   la headline del día (ej. "Chegada + pôr do sol no Centro"); summary
   es el párrafo descriptivo. Sin stops list — el LLM no la entrega
   estructurada. */
.itinerary-day-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--tripsy-ink, #2c2c2c);
  margin: 0 0 6px 0;
  line-height: 1.3;
}
.itinerary-day-summary {
  font-size: 12.5px;
  color: var(--tripsy-gray-700, #495057);
  margin: 0;
  line-height: 1.45;
}

/* Mobile: panel debajo del mapa (ya gracias al stacked grid del W035),
   pero carrusel horizontal de cards con scroll-snap entre días, según
   el spec del W037. */
@media (max-width: 820px) {
  .iris-itinerary-days-col {
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .iris-itinerary-days-col::-webkit-scrollbar { display: none; }
  .itinerary-day-card-list {
    flex-direction: row;
    gap: 12px;
  }
  .itinerary-day-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}
.iris-itinerary-days-col {
  padding: 16px;
  max-height: 480px;
  overflow-y: auto;
}

/* Placeholder mientras los slots no estén hidratados (W030/W036/W037).
   Sirve como hint visual durante dev y degrada elegante si la
   hidratación falla. */
.iris-itinerary-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 320px;
  padding: 32px;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--tripsy-gray-500, #6c757d);
  background: var(--tripsy-teal-soft, rgba(89,189,185,0.08));
}

.iris-itinerary-footer {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.iris-itinerary-cta {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--tripsy-teal);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47, 140, 136, 0.25);
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
}
.iris-itinerary-cta:hover {
  background: var(--tripsy-teal-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(47, 140, 136, 0.35);
}
.iris-itinerary-cta:active { transform: translateY(0); }

/* Botón flotante "Volver al panorama" — visible cuando estás en el
   card-scene y ya generaste un plan. Posicionado abajo-derecha para no
   tapar los dots de progreso del card-scene (que viven abajo-izquierda /
   center). z-index: 90 — por encima del card-scene, por debajo del
   language switcher (z-index 100). */
.iris-panorama-back {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 90;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--tripsy-teal-deep);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47, 140, 136, 0.35);
  transition: all var(--dur-base, 240ms) var(--ease-out, ease);
}
.iris-panorama-back:hover {
  background: var(--tripsy-teal);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(47, 140, 136, 0.45);
}
.iris-panorama-back:active { transform: translateY(0); }
.iris-panorama-back[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   PLAN-W026 · PDF export via window.print().
   Estrategia: final.js clona el resumen de Card 7 a `.iris-print-area`
   (off-screen por default). El click "PDF" dispara `window.print()`.
   @media print oculta TODO menos el clone, ajusta colores y page breaks
   para que el PDF se vea limpio. El usuario elige "Guardar como PDF"
   en el diálogo nativo del browser.
   ───────────────────────────────────────────────────────────────────── */

/* Off-screen siempre. Visible solo en @media print (override abajo). */
.iris-print-area {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 760px;
  padding: 32px;
  background: #ffffff;
  color: #1D1D1F;
  font-family: 'Montserrat', system-ui, sans-serif;
}
@media print {
  /* Ocultar TODO. */
  body > * { display: none !important; }

  /* Excepto el print area. */
  body .iris-print-area {
    display: block !important;
    position: static !important;
    left: auto !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Quitar transforms/shadows/backdrop-filters que no tienen sentido en papel. */
  .iris-print-area * {
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Cards limpias con borde simple para que se separen en el papel
     sin depender de sombras. */
  .iris-print-area .s7-hero { background: transparent !important; }
  .iris-print-area .s7-section,
  .iris-print-area .s7-flight-card,
  .iris-print-area .s7-lodging-item,
  .iris-print-area .s7-maps-item,
  .iris-print-area .s7-exp-item,
  .iris-print-area .s7-tip-section,
  .iris-print-area .s7-route-list {
    background: #ffffff !important;
    border: 1px solid rgba(29,29,31,0.08) !important;
    page-break-inside: avoid;
  }

  /* Forzar que los colores de marca (teal/coral) se mantengan en el PDF.
     Chrome/Edge ignoran backgrounds al imprimir por default — esto les
     dice que respeten el color exacto del documento. */
  .iris-print-area, .iris-print-area * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  @page {
    size: A4;
    margin: 16mm 14mm;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   PLAN-W026 (rediseño) · PDF "inspiración" / dossier.
   final.js → buildItineraryPdfDom() arma `.iris-print-area.iris-pdf` con
   portada (foto o gradiente de marca), resumen, presupuesto, día-a-día y
   tips. Hereda la estrategia print de arriba (off-screen + @media print).
   Estilos on-screen abajo (para preview/verificación); refinamientos de
   página en el @media print del final.
   ───────────────────────────────────────────────────────────────────── */
.iris-print-area.iris-pdf { padding: 0; color: #1D1D1F; }

/* Portada */
.iris-pdf .iris-pdf-cover {
  position: relative;
  /* Sin foto: gradiente de marca vibrante (no el casi-negro grad-hero-dark). */
  background: linear-gradient(135deg, #3E8B89 0%, #4AA3A0 48%, #E8A174 100%);
  color: #fff;
  overflow: hidden;
}
.iris-pdf .iris-pdf-cover.--has-photo { background-size: cover; background-position: center; }
/* Overlay suave en el gradiente (solo oscurece abajo para legibilidad de los
   facts); overlay fuerte solo cuando hay foto. */
.iris-pdf .iris-pdf-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.28) 100%);
}
.iris-pdf .iris-pdf-cover.--has-photo::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.04) 42%, rgba(0,0,0,0.74) 100%);
}
.iris-pdf .iris-pdf-cover-inner {
  position: relative; z-index: 1;
  min-height: 420px;
  display: flex; flex-direction: column;
  padding: 32px 36px;
}
.iris-pdf .iris-pdf-cover-top { display: flex; align-items: center; justify-content: space-between; }
.iris-pdf .iris-pdf-cover-headline { margin-top: auto; }
.iris-pdf .iris-pdf-motif { font-family: 'Playfair Display', Georgia, serif; font-size: 44px; color: #fff; opacity: 0.9; }
.iris-pdf .iris-pdf-greeting {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: 20px; color: rgba(255,255,255,0.92); margin-bottom: 4px;
}
.iris-pdf .iris-pdf-title {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
  font-size: 52px; line-height: 1; letter-spacing: -0.02em; color: #fff; margin: 0;
}
.iris-pdf .iris-pdf-phrase {
  margin-top: 14px; font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.9); max-width: 64%;
}
.iris-pdf .iris-pdf-facts { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.iris-pdf .iris-pdf-fact {
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
  border-radius: 12px; padding: 9px 14px;
}
.iris-pdf .iris-pdf-fact .n {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px; font-weight: 600; line-height: 1;
}
.iris-pdf .iris-pdf-fact.--wide .n { font-size: 14px; }
.iris-pdf .iris-pdf-fact .l {
  display: block; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  margin-top: 5px; color: rgba(255,255,255,0.8);
}

/* Cuerpo */
.iris-pdf .iris-pdf-body { padding: 28px 36px 8px; }
.iris-pdf .iris-pdf-foot-brand {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #9a9aa0; margin-bottom: 18px;
}
.iris-pdf .iris-pdf-section { margin-bottom: 26px; }
.iris-pdf .iris-pdf-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #3E8B89;
}
.iris-pdf .iris-pdf-eyebrow.--on-cover {
  display: inline-block; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px; padding: 6px 12px; color: #fff;
}

/* Resumen */
.iris-pdf .iris-pdf-bullets { margin: 12px 0 0; padding: 0; list-style: none; }
.iris-pdf .iris-pdf-bullets li {
  position: relative; padding-left: 18px; margin-bottom: 8px;
  font-size: 13px; line-height: 1.55; color: #3f3f45;
}
.iris-pdf .iris-pdf-bullets li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 999px; background: #59BDB9;
}

/* Presupuesto */
.iris-pdf .iris-pdf-budget-sum { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #3f3f45; }
.iris-pdf .iris-pdf-budget-list { margin: 12px 0 0; padding: 0; list-style: none; }
.iris-pdf .iris-pdf-budget-list li {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.07); font-size: 13px;
}
.iris-pdf .iris-pdf-budget-list li span:first-child { color: #6e6e73; }
.iris-pdf .iris-pdf-budget-list li span:last-child { font-weight: 600; }
.iris-pdf .iris-pdf-budget-notes { margin: 10px 0 0; font-size: 11px; color: #9a9aa0; font-style: italic; }

/* Vuelos / Alojamientos / Experiencias */
.iris-pdf .iris-pdf-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.07);
}
.iris-pdf .iris-pdf-line-main { font-weight: 600; font-size: 14px; }
.iris-pdf .iris-pdf-line-val { font-weight: 600; font-size: 13px; white-space: nowrap; }
.iris-pdf .iris-pdf-muted { margin: 8px 0 0; font-size: 12px; color: #6e6e73; }
.iris-pdf .iris-pdf-note { margin: 6px 0 0; font-size: 12px; color: #4a4a4f; line-height: 1.5; }

.iris-pdf .iris-pdf-stays,
.iris-pdf .iris-pdf-exps { margin: 12px 0 0; padding: 0; list-style: none; }
.iris-pdf .iris-pdf-stay,
.iris-pdf .iris-pdf-exp {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.07); break-inside: avoid; page-break-inside: avoid;
}
.iris-pdf .iris-pdf-item-main { flex: 1 1 auto; min-width: 0; }
.iris-pdf .iris-pdf-thumb {
  flex: 0 0 84px; width: 84px; height: 84px; border-radius: 10px;
  background: #eef1f1 center/cover no-repeat;
}
.iris-pdf a.iris-pdf-stay-name,
.iris-pdf a.iris-pdf-exp-name { color: inherit; text-decoration: none; }
.iris-pdf .iris-pdf-link {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600;
  color: #2C7C79; text-decoration: none;
}
.iris-pdf .iris-pdf-stay:last-child,
.iris-pdf .iris-pdf-exp:last-child { border-bottom: 0; }
.iris-pdf .iris-pdf-stay-city { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #59BDB9; font-weight: 600; }
.iris-pdf .iris-pdf-stay-name { margin-top: 3px; font-size: 14px; font-weight: 600; color: #1D1D1F; }
.iris-pdf .iris-pdf-stay-alt { margin-top: 2px; font-size: 12px; color: #6e6e73; }
.iris-pdf .iris-pdf-exp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.iris-pdf .iris-pdf-exp-name { font-size: 14px; font-weight: 600; color: #1D1D1F; }
.iris-pdf .iris-pdf-exp-city { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #59BDB9; font-weight: 600; }

/* Día a día */
.iris-pdf .iris-pdf-days { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.iris-pdf .iris-pdf-day {
  border: 1px solid rgba(0,0,0,0.10); border-radius: 14px; background: #fff; overflow: hidden;
}
.iris-pdf .iris-pdf-day-main { padding: 14px 16px; }
/* Día con foto (Places): banda de imagen a la izquierda + contenido. */
.iris-pdf .iris-pdf-day.--with-photo { display: grid; grid-template-columns: 104px 1fr; }
.iris-pdf .iris-pdf-day-photo {
  background-size: cover; background-position: center;
  background-color: var(--tripsy-cream, #EEE1D3);
  min-height: 100%;
}
.iris-pdf .iris-pdf-day-head { display: flex; align-items: baseline; gap: 12px; }
.iris-pdf .iris-pdf-day-pill {
  flex: none; background: #EAF7F6; color: #3E8B89; border-radius: 999px;
  padding: 4px 11px; font-size: 11px; font-weight: 700;
}
.iris-pdf .iris-pdf-day-title { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 600; }
.iris-pdf .iris-pdf-day-sum { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: #3f3f45; }

/* Tips */
.iris-pdf .iris-pdf-tips-list { margin: 12px 0 0; padding: 0; list-style: none; }
.iris-pdf .iris-pdf-tips-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.iris-pdf .iris-pdf-tips-list .ic { color: #E8A174; font-size: 14px; line-height: 1.5; flex: none; }
.iris-pdf .iris-pdf-tips-list p { margin: 0; font-size: 13px; line-height: 1.55; color: #3f3f45; }

/* Refinamientos de página al imprimir */
@media print {
  .iris-print-area.iris-pdf { padding: 0 !important; }
  .iris-pdf .iris-pdf-body { padding: 24px 0 0 !important; }
  .iris-pdf .iris-pdf-cover { break-after: page; page-break-after: always; }
  .iris-pdf .iris-pdf-cover-inner { min-height: 235mm; }
  .iris-pdf .iris-pdf-section,
  .iris-pdf .iris-pdf-day { break-inside: avoid; page-break-inside: avoid; }
}

/* ─────────────────────────────────────────────────────────────────────
   Preview Showcase · /builder?preview=1
   Vidriera del entregable: animación de "Iris planificando" arriba, dossier
   real (.iris-pdf) abajo. Montado por preview-showcase.js.
   ───────────────────────────────────────────────────────────────────── */
.pvw-showcase {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 20px 80px;
}

/* ── Animación ── */
.pvw-anim {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 16px 28px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.pvw-anim.--done { opacity: 0.96; }

.pvw-orb {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 40px;
  background: radial-gradient(circle at 32% 28%, #4AA3A0 0%, #3E8B89 55%, #2f6f6d 100%);
  box-shadow: 0 0 0 0 rgba(74,163,160,0.45);
  animation: pvw-orb-pulse 2.2s ease-in-out infinite;
}
.pvw-anim.--done .pvw-orb {
  animation: none;
  box-shadow: 0 14px 40px rgba(62,139,137,0.35);
}
@keyframes pvw-orb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,163,160,0.40); transform: scale(1); }
  60%  { box-shadow: 0 0 0 22px rgba(74,163,160,0); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 rgba(74,163,160,0); transform: scale(1); }
}

.pvw-head {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #1D1D1F;
  margin: 22px 0 4px;
}

.pvw-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
}
.pvw-step {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: #9a9aa0;
  opacity: 0.45;
  transform: translateY(2px);
  transition: opacity 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.pvw-step.--active { opacity: 1; color: #3E8B89; transform: translateY(0); }
.pvw-step.--done { opacity: 1; color: #1D1D1F; }
.pvw-step-ic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: none;
  border: 2px solid rgba(62,139,137,0.3);
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.pvw-step.--active .pvw-step-ic {
  border-color: #3E8B89;
  border-top-color: transparent;
  animation: pvw-spin 0.7s linear infinite;
}
.pvw-step.--done .pvw-step-ic {
  background: #3E8B89;
  border-color: #3E8B89;
  animation: none;
}
.pvw-step.--done .pvw-step-ic::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 4px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes pvw-spin { to { transform: rotate(360deg); } }

.pvw-bar {
  width: 220px;
  max-width: 70%;
  height: 4px;
  border-radius: 999px;
  background: rgba(62,139,137,0.14);
  margin-top: 22px;
  overflow: hidden;
}
.pvw-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3E8B89, #4AA3A0, #E8A174);
  transition: width 0.6s ease;
}

/* ── Reveal: subtítulo + dossier + CTA ── */
.pvw-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pvw-reveal.--in { opacity: 1; transform: translateY(0); }

/* ── Cue "scroll hacia abajo" ── Fixed sobre la barra CTA; aparece tras la
   animación e invita a bajar al dossier. Se desvanece al scrollear. */
.pvw-scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 112px;
  transform: translateX(-50%);
  z-index: 30;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 20px rgba(29, 29, 31, 0.18);
  cursor: pointer;
  color: #3E8B89;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.pvw-scroll-cue.--in { opacity: 1; pointer-events: auto; }
.pvw-scroll-cue.--hidden { opacity: 0; pointer-events: none; }
/* Label solo para lectores de pantalla (el chevron comunica visualmente). */
.pvw-scroll-cue__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pvw-scroll-cue__chevron {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  animation: pvw-cue-bounce 1.6s ease-in-out infinite;
}
.pvw-scroll-cue__chevron::before {
  content: '';
  width: 9px;
  height: 9px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
@keyframes pvw-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .pvw-scroll-cue__chevron { animation: none; }
}

.pvw-ready-sub {
  text-align: center;
  max-width: 540px;
  margin: 6px auto 22px;
  font-size: 15px;
  line-height: 1.55;
  color: #5f5f66;
}

/* ── Dolores → cómo los resolvemos ── */
.pvw-pains {
  list-style: none;
  margin: 0 auto 34px;
  padding: 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pvw-pain {
  background: #fff;
  border: 1px solid rgba(29,29,31,0.07);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(29,29,31,0.05);
}
.pvw-pain-bad,
.pvw-pain-good {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  line-height: 1.45;
}
.pvw-pain-bad {
  font-size: 14px;
  color: #9a9aa0;
}
.pvw-pain-good {
  font-size: 14.5px;
  font-weight: 600;
  color: #1D1D1F;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed rgba(62,139,137,0.28);
}
.pvw-pain-ic {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  margin-top: 1px;
}
.pvw-pain-ic.--bad { background: rgba(29,29,31,0.06); color: #b6b6bb; }
.pvw-pain-ic.--good { background: #3E8B89; color: #fff; }

.pvw-dossier-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3E8B89;
  margin-bottom: 14px;
}

/* Saca el dossier del off-screen del print-area y lo presenta como "papel". */
.pvw-dossier {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(29,29,31,0.16), 0 2px 8px rgba(29,29,31,0.06);
  background: #fff;
}
.pvw-dossier .iris-print-area {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  padding: 0;
  margin: 0;
}

.pvw-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
}
.pvw-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  background: #1D1D1F;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 26px rgba(29,29,31,0.18);
}
.pvw-cta:hover {
  background: #3E8B89;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(62,139,137,0.32);
}
.pvw-cta-arrow { transition: transform 0.2s ease; }
.pvw-cta:hover .pvw-cta-arrow { transform: translateX(4px); }
.pvw-cta-note {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #9a9aa0;
}

@media (max-width: 600px) {
  .pvw-head { font-size: 24px; }
  .pvw-showcase { padding: 4px 14px 64px; }
  .pvw-dossier { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pvw-orb { animation: none; }
  .pvw-step.--active .pvw-step-ic { animation: none; }
  .pvw-reveal { transition: none; }
}