/* MexTravelWorld · páginas de viajes y directorio de destinos.
   Lo escribe herramientas/generate.js (no editar aquí: edita VIAJE_CSS en generate.js y regenera).
   Va después de /css/mtw.css y usa sus tokens (modo claro/oscuro automático). Prefijo propio: «tp-». */

/* ---------- portada del viaje (mismo fondo de puntitos y brillo que la portada del index) ---------- */
.tp-hero{position:relative;padding:26px 0 60px;overflow:hidden;border-bottom:1px solid var(--border)}
.tp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--dots) 1.1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 75% at 78% 38%,#000 15%,transparent 72%);
  mask-image:radial-gradient(ellipse 60% 75% at 78% 38%,#000 15%,transparent 72%)}
.tp-hero::after{content:"";position:absolute;width:640px;height:640px;right:-160px;top:-260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--primary-100),transparent 66%)}
/* escritorio: textos a la izquierda y flyer a la derecha (el orden del HTML no cambia: migas, etiquetas, título, flyer, intro) */
.tp-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  grid-template-rows:auto auto auto auto auto 1fr;grid-template-areas:"crumbs crumbs" "tags flyer" "title flyer" "sub flyer" "intro flyer" ". flyer";
  column-gap:56px;align-items:start}
.tp-hero-in.is-square{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}
.tp-hero-in.is-tall{grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}
.tp-crumbs{grid-area:crumbs;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:26px;font-size:.84rem;font-weight:600;color:var(--muted);line-height:1.4}
.tp-crumbs a{color:var(--text-2);transition:color .15s}
.tp-crumbs a:hover{color:var(--link)}
.tp-crumbs [aria-current]{color:var(--muted);overflow-wrap:anywhere}
.tp-sep{color:var(--faint)}
.tp-tags{grid-area:tags;display:flex;flex-wrap:wrap;gap:8px}
.tp-tag{display:inline-flex;align-items:center;max-width:100%;min-height:28px;padding:4px 11px;border-radius:999px;background:var(--primary-50);
  border:1px solid var(--primary-200);color:var(--link);font-weight:700;font-size:.78rem;line-height:1.3}
.tp-tag-loc{background:var(--panel);border-color:var(--border);color:var(--text-2)}
.tp-hero h1{grid-area:title;font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.028em;margin:16px 0 10px;
  text-wrap:balance;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.tp-hero h1.tp-largo{font-size:clamp(1.5rem,3vw,2.5rem)}
.tp-sub{grid-area:sub;color:var(--text-2);font-weight:600;font-size:1.06rem;line-height:1.5}
.tp-intro{grid-area:intro;margin-top:20px;color:var(--text-2);font-size:1.02rem;line-height:1.75;max-width:68ch}
/* flyer = la postal del index: marco blanco, sombra grande; si no es 3:2 se ve completo sobre su versión difuminada */
.tp-flyer{grid-area:flyer;position:relative;margin:0;padding:10px;background:var(--panel);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg)}
.tp-flyer a{position:relative;display:block;aspect-ratio:var(--ar,1.5);border-radius:15px;overflow:hidden;background:var(--panel-3);isolation:isolate}
.tp-flyer a::before{content:"";position:absolute;inset:-40px;z-index:-1;background:var(--flyer) center/cover no-repeat;filter:blur(18px) saturate(1.1) brightness(.85)}
.tp-flyer img{width:100%;height:100%;object-fit:contain}
:root[data-theme="dark"] .tp-flyer img{filter:brightness(.94)}

/* ---------- cuerpo: tarjetas a la izquierda, precio pegajoso a la derecha ---------- */
.tp-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;padding-top:40px}
.tp-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.tp-side{position:sticky;top:calc(var(--head-h) + 20px);min-width:0}
.tp-after{display:flex;flex-direction:column;gap:20px;padding-top:20px;padding-bottom:76px}
.tp-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:24px 26px 26px;min-width:0}
.tp-card-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.tp-card h2{font-size:1.28rem;letter-spacing:-.02em;overflow-wrap:break-word;min-width:0}
.tp-ico{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--primary-50);color:var(--link)}
.tp-ico svg{width:20px;height:20px}
.tp-ico.ok{background:var(--ok-bg);color:var(--ok)}
.tp-ico.violet{background:var(--violet-bg);color:var(--violet)}
.tp-ico.warn{background:var(--warn-bg);color:var(--warn)}
.tp-text{color:var(--text-2);font-size:.97rem;line-height:1.75}
.tp-lead{color:var(--text-2);font-size:.97rem;line-height:1.6;margin-bottom:16px}

/* itinerario = línea de tiempo (pastilla azul por día, como los pasos numerados del index) */
.tp-itin{list-style:none;display:flex;flex-direction:column}
.tp-itin li{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:16px;padding-bottom:22px}
.tp-itin li:last-child{padding-bottom:0}
.tp-itin li::before{content:"";position:absolute;left:37px;top:34px;bottom:4px;width:2px;border-radius:2px;background:var(--border)}
.tp-itin li:last-child::before{display:none}
.tp-day{justify-self:center;align-self:start;display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:28px;padding:0 10px;
  border-radius:999px;background:var(--btn);color:#fff;font-weight:800;font-size:.76rem;white-space:nowrap;box-shadow:0 8px 16px -10px var(--primary)}
.tp-itin strong{display:block;padding-top:3px;color:var(--text);font-size:1rem;font-weight:700;line-height:1.35}
.tp-itin p{margin-top:4px;color:var(--muted);font-size:.93rem;line-height:1.65}
.tp-nota{display:flex;align-items:flex-start;gap:9px;margin-top:20px;padding:10px 12px;border-radius:11px;background:var(--panel-2);border:1px solid var(--border);
  color:var(--muted);font-size:.83rem;font-style:italic;line-height:1.45}
.tp-nota svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--faint)}

/* qué incluye: palomitas verdes (dibujadas con CSS) */
.tp-inc{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tp-inc li{position:relative;display:flex;align-items:center;min-height:46px;padding:10px 14px 10px 46px;border:1px solid var(--border);border-radius:12px;
  background:var(--panel-2);color:var(--text);font-weight:600;font-size:.92rem;line-height:1.35;overflow-wrap:anywhere}
.tp-inc li::before{content:"";position:absolute;left:13px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--ok-bg)}
.tp-inc li::after{content:"";position:absolute;left:21px;top:50%;width:6px;height:10px;margin-top:-7px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.tp-fact{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;background:var(--primary-50);border:1px solid var(--primary-100);
  color:var(--text-2);font-size:.9rem;line-height:1.35}
.tp-fact strong{color:var(--text)}
.tp-fact-ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--panel);color:var(--link)}
.tp-fact-ico svg{width:17px;height:17px}

/* hospedaje y experiencias: tarjetitas como las de «Por qué nosotros» */
.tp-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tp-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tp-mini{min-width:0;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.tp-mini:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md)}
.tp-mini > img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--border);background:var(--panel-3)}
.tp-mini-ico{width:40px;height:40px;margin:16px 16px 0;border-radius:12px;display:grid;place-items:center;background:var(--violet-bg);color:var(--violet)}
.tp-mini-ico svg{width:20px;height:20px}
.tp-mini-b{padding:14px 16px 16px}
.tp-mini h3{font-size:1rem;letter-spacing:-.01em;margin-bottom:4px;line-height:1.3}
.tp-mini p{color:var(--muted);font-size:.89rem;line-height:1.55}
.tp-hotels{list-style:none;display:flex;flex-direction:column;gap:10px}
.tp-hotels li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;
  background:var(--panel-2);color:var(--muted);font-size:.93rem;line-height:1.4}
.tp-hotels strong{color:var(--text)}
.tp-hotel-ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--violet-bg);font-size:1rem}
.tp-hotel-txt{flex:1 1 220px;min-width:0}
.tp-stars{color:#f59e0b;letter-spacing:1px;white-space:nowrap}

/* preguntas frecuentes: la misma lista del index (.faq-item) dentro de la tarjeta, de orilla a orilla */
.tp-faq-card{overflow:hidden;padding-bottom:0}
.tp-faq-card .faq-list{margin:0 -26px;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;background:transparent}
.tp-faq-card .faq-item summary{padding:16px 26px}
.tp-faq-card .faq-item .faq-a{padding:0 26px 18px}

/* tarjeta de precio (pegajosa en escritorio) */
.tp-price-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:22px}
.tp-price-lbl{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tp-price{margin-top:6px;color:var(--link);font-weight:800;font-size:2.3rem;line-height:1.05;letter-spacing:-.03em;overflow-wrap:anywhere}
.tp-price small{display:block;margin-top:7px;color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:0;line-height:1.4}
.tp-ctas{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.tp-cta{width:100%;height:auto;min-height:50px;padding:12px 16px;border-radius:13px;font-size:.95rem;line-height:1.25;white-space:normal;text-align:center}
.tp-side-inc{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
  color:var(--text-2);font-size:.88rem;font-weight:600;line-height:1.4}
.tp-ok{color:var(--ok);font-weight:800}

/* galería: mosaico (la primera foto grande) */
.tp-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:150px;gap:10px}
.tp-gal a{position:relative;display:block;min-width:0;border-radius:12px;overflow:hidden;background:var(--panel-3)}
.tp-gal img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.tp-gal a:hover img{transform:scale(1.04)}
.tp-gal.n5 a:first-child,.tp-gal.n7 a:first-child,.tp-gal.n8 a:first-child{grid-column:span 2;grid-row:span 2}
.tp-gal.n8 a:last-child,.tp-gal.n7 a:nth-last-child(-n+2){grid-column:span 2}
.tp-gal.n3,.tp-gal.n6{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:190px}
.tp-gal.n2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:240px}
.tp-gal.n1{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
.tp-gal.n1 img{height:auto;max-height:560px;object-fit:contain}

/* otros destinos */
.tp-rel-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.tp-rel-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:52px;padding:10px 14px;border:1px solid var(--border);
  border-radius:12px;background:var(--panel-2);color:var(--text);font-weight:700;font-size:.92rem;line-height:1.3;overflow-wrap:anywhere;
  -webkit-hyphens:auto;hyphens:auto;transition:background .15s,border-color .15s,color .15s}
.tp-rel-chip svg{width:16px;height:16px;flex:none;color:var(--faint);transition:transform .15s,color .15s}
.tp-rel-chip:hover{background:var(--primary-50);border-color:var(--primary-200);color:var(--link)}
.tp-rel-chip:hover svg{color:var(--link);transform:translateX(2px)}
.tp-back{margin-top:18px}

/* ---------- directorio de destinos (viajes/, en/trips/, ru/tury/ y promociones.html) ---------- */
.tp-hero-sm{padding:44px 0 40px}
.tp-list-head{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:18px 32px;flex-wrap:wrap}
.tp-list-head h1{font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.028em}
.tp-list-head h1 small{display:inline-block;vertical-align:middle;margin-left:4px;padding:4px 12px;border-radius:999px;background:var(--primary-50);
  border:1px solid var(--primary-100);color:var(--link);font-size:.36em;font-weight:800;letter-spacing:0;line-height:1.4}
.tp-list-search{flex:0 1 440px}
.tp-list-search .dest-search{height:48px;background:var(--panel);font-size:.95rem}
.tp-all{margin:32px 0 76px}
.tp-all .dest-chips{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none;padding:18px}
#nores{display:none;padding:0 18px 22px;color:var(--muted);font-weight:600}

/* ---------- responsivo ---------- */
@media (max-width:1000px){
  .tp-hero-in,.tp-hero-in.is-square,.tp-hero-in.is-tall{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-template-areas:"crumbs" "tags" "title" "sub" "flyer" "intro"}
  .tp-flyer{margin-top:24px;width:100%;max-width:680px}
  .tp-hero-in.is-square .tp-flyer{max-width:520px}
  .tp-hero-in.is-tall .tp-flyer{max-width:440px}
  .tp-body{grid-template-columns:minmax(0,1fr)}
  /* en tableta y celular el precio va justo después de la portada (en el HTML sigue al final, como antes) */
  .tp-side{position:static;order:-1}
  .tp-ctas{flex-direction:row;flex-wrap:wrap}
  .tp-cta{flex:1 1 220px;width:auto}
}
@media (max-width:760px){
  .tp-grid3{grid-template-columns:minmax(0,1fr);gap:10px}
  /* hospedaje en celular: foto chica a la izquierda */
  .tp-grid3 .tp-mini{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:stretch}
  .tp-grid3 .tp-mini > img{height:100%;min-height:104px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--border)}
  .tp-grid3 .tp-mini-ico{margin:14px 0 0 14px}
  .tp-grid3 .tp-mini-b{align-self:center;padding:12px 14px}
}
/* «Otros destinos» en tableta y laptop chica: 2×2 (sin la tarjeta huérfana 3+1 y sin partir «Massachusetts» o
   «Центральноафриканская» a media palabra); en celular, una por renglón (ver abajo) */
@media (max-width:1150px){
  .tp-rel-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .tp-hero{padding:16px 0 40px}
  .tp-crumbs{margin-bottom:18px;font-size:.8rem}
  .tp-hero h1{font-size:clamp(1.9rem,8.4vw,2.5rem);margin:14px 0 8px}
  .tp-hero h1.tp-largo{font-size:clamp(1.3rem,6.2vw,2.2rem)}
  .tp-sub{font-size:1rem}
  .tp-intro{font-size:.98rem;line-height:1.7}
  .tp-flyer{padding:8px;border-radius:18px}
  .tp-flyer a{border-radius:12px}
  .tp-body{padding-top:24px;gap:16px}
  .tp-main,.tp-after{gap:16px}
  .tp-after{padding-top:16px;padding-bottom:56px}
  .tp-card{padding:18px 16px 20px;border-radius:var(--radius-lg)}
  .tp-card-head{gap:11px;margin-bottom:16px}
  .tp-card h2{font-size:1.14rem}
  .tp-ico{width:36px;height:36px;border-radius:10px}
  .tp-ico svg{width:18px;height:18px}
  /* itinerario en celular: la pastilla arriba y el texto a todo el ancho; la línea de tiempo pasa a la orilla izquierda */
  .tp-itin li{display:block;padding:0 0 20px 26px}
  .tp-itin li::before{left:6px;top:22px;bottom:-2px}
  .tp-itin li::after{content:"";position:absolute;left:1px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:3px solid var(--primary)}
  .tp-day{min-width:0;height:26px;padding:0 10px;font-size:.72rem}
  .tp-itin strong{padding-top:8px}
  .tp-itin p{font-size:.9rem}
  .tp-inc,.tp-facts,.tp-grid2{grid-template-columns:minmax(0,1fr)}
  .tp-faq-card{padding-bottom:0}
  .tp-faq-card .faq-list{margin:0 -16px}
  .tp-faq-card .faq-item summary{padding:15px 16px}
  .tp-faq-card .faq-item .faq-a{padding:0 16px 16px}
  .tp-price-card{padding:18px 16px}
  .tp-price{font-size:2.05rem}
  .tp-ctas{flex-direction:column}
  .tp-cta{flex:none;width:100%}
  .tp-gal,.tp-gal.n3,.tp-gal.n6{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:112px;gap:8px}
  .tp-gal.n2{grid-auto-rows:150px}
  .tp-gal.n3 a:last-child{grid-column:span 2}
  .tp-rel-list{grid-template-columns:minmax(0,1fr);gap:8px}
  .tp-back .btn{width:100%}
  .tp-hero-sm{padding:28px 0 26px}
  .tp-list-search{flex:1 1 100%}
  .tp-all{margin:20px 0 56px}
  .tp-all .dest-chips{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .tp-gal a:hover img,.tp-rel-chip:hover svg{transform:none}
}