/* MexTravelWorld · diseño del sitio (copia de herramientas/sitio-mcmail/sitio.css; la escribe piel.py) */
/* =====================================================================
   MexTravelWorld · sitio público · rediseño «McMail» (versión oficial)
   Base: propuesta A «McMail fiel» + injertos de las propuestas B y C.
   Misma familia visual que el webmail McMail y el panel de staff:
   letra Plus Jakarta Sans (Manrope solo en ruso: html.py la descarga
   únicamente cuando la página está en ruso), azul #2563eb,
   escala slate, barra blanca pegajosa, tarjetas blancas con borde fino
   sobre fondo slate-50 y modo oscuro con :root[data-theme="dark"].
   Reemplaza por completo los 3 <style> originales del index
   (va después de vuelos.css; también re-pinta el buscador en oscuro).
   ===================================================================== */

/* ---------- tokens · modo claro (los mismos de McMail / panel) ---------- */
:root{
  /* Manrope NO va en la pila general: si estuviera, el navegador también bajaría su parte latina en ES/EN */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:#f8fafc; --panel:#ffffff; --panel-2:#f8fafc; --panel-3:#f1f5f9;
  --border:#e2e8f0; --border-2:#cbd5e1;
  --text:#0f172a; --text-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --primary:#2563eb; --primary-h:#1d4ed8; --primary-50:#eff6ff; --primary-100:#dbeafe; --primary-200:#bfdbfe;
  --link:#2563eb; /* azul para textos, etiquetas y enlaces */
  --btn:var(--primary); --btn-h:var(--primary-h); /* fondo de los botones azules con texto blanco */
  --input-bg:#ffffff; --input-border:#e2e8f0;
  --logo:linear-gradient(135deg,#2563eb,#60a5fa);
  --mark:linear-gradient(120deg,#2563eb 10%,#60a5fa 95%);
  --ok:#059669; --ok-bg:#ecfdf5; --warn:#d97706; --warn-bg:#fffbeb; --violet:#7c3aed; --violet-bg:#f5f3ff;
  --wa:#1fae54; --wa-h:#189848; --wa-bg:rgba(31,174,84,.12);
  --radius:12px; --radius-lg:16px; --radius-xl:20px;
  --shadow:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 1px 2px rgba(15,23,42,.05),0 12px 32px -18px rgba(15,23,42,.28);
  --shadow-lg:0 20px 45px -15px rgba(15,23,42,.25);
  --head-bg:rgba(255,255,255,.86);
  --dots:rgba(15,23,42,.08);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --head-h:64px; --maxw:1240px; --gut:24px;
  color-scheme:light;
}
/* ---------- tokens · modo oscuro (idénticos a app.css de McMail) ---------- */
:root[data-theme="dark"]{
  --bg:#020617; --panel:#0f172a; --panel-2:#0b1222; --panel-3:#1e293b;
  --border:#1e293b; --border-2:#334155;
  --text:#e2e8f0; --text-2:#cbd5e1; --muted:#94a3b8; --faint:#64748b;
  --primary:#3b82f6; --primary-h:#60a5fa; --primary-50:rgba(59,130,246,.12); --primary-100:rgba(59,130,246,.2); --primary-200:rgba(59,130,246,.35);
  --link:#60a5fa;
  /* botones con texto blanco: #3b82f6 da 3.68:1 y #60a5fa 2.54:1; #2563eb / #1d4ed8 dan 5.17:1 / 6.70:1 */
  --btn:#2563eb; --btn-h:#1d4ed8;
  --input-bg:#0b1222; --input-border:#334155;
  --mark:linear-gradient(120deg,#60a5fa 10%,#93c5fd 95%);
  --ok:#34d399; --ok-bg:rgba(16,185,129,.12); --warn:#fbbf24; --warn-bg:rgba(245,158,11,.12); --violet:#a78bfa; --violet-bg:rgba(139,92,246,.14);
  --wa-bg:rgba(31,174,84,.16);
  --shadow:none; --shadow-md:none; --shadow-lg:0 20px 45px -15px rgba(0,0,0,.6);
  --head-bg:rgba(15,23,42,.86);
  --dots:rgba(148,163,184,.10);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:dark;
  scrollbar-color:#334155 #020617;
}
/* ruso: Plus Jakarta Sans no trae cirílico; Manrope (que html.py carga solo en ruso) pone esas letras */
:root:lang(ru){--font:'Plus Jakarta Sans','Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px);-webkit-text-size-adjust:100%;background:var(--bg)}
body{font-family:var(--font);font-size:16px;color:var(--text-2);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{color:var(--text);font-weight:800;line-height:1.18;letter-spacing:-.02em}
/* ruso: los títulos usan Manrope (respaldo cirílico); en 700 se ven de la misma familia, no «negrísimos» */
:lang(ru) h1,:lang(ru) h2,:lang(ru) h3{font-weight:700;letter-spacing:-.015em}
/* Plus Jakarta Sans deja mucho aire ANTES de la coma y el punto («viaje ,»): un script de html.py los envuelve en .pt
   en los títulos grandes y aquí se les quita ese aire */
.pt{margin-left:-.05em}
::selection{background:var(--primary-200)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* el buscador usa la misma pila de letras (incluye el respaldo cirílico) */
.fx{--fx-font:var(--font)}

/* etiqueta pequeña en mayúsculas (pill suave) */
.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;
  background:var(--primary-50);border:1px solid var(--primary-100);color:var(--link);
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1.25}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- barra superior (blanca, pegajosa, borde fino, alineada al contenido) ---------- */
.topbar{display:none}
header{position:sticky;top:0;z-index:60;background:var(--panel);background:var(--head-bg);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--border)}
.nav{position:relative;display:flex;align-items:center;gap:10px;height:var(--head-h)}
.brand{flex:none;display:flex;align-items:center;gap:10px;margin-right:auto;font-weight:800;font-size:1.06rem;
  letter-spacing:-.01em;color:var(--text);white-space:nowrap}
.brand b{color:var(--link);font-weight:800}
.brand .dot{width:36px;height:36px;border-radius:10px;background:var(--logo);color:#fff;display:grid;place-items:center;
  flex:none;box-shadow:0 6px 14px -6px rgba(37,99,235,.6)}
.brand .dot svg{width:19px;height:19px}
.nav-links{flex:none;display:flex;align-items:center;gap:2px}
.nav-links a{white-space:nowrap;font-weight:600;font-size:.88rem;color:var(--text-2);padding:8px 10px;border-radius:10px;
  transition:background .15s,color .15s}
.nav-links a:hover{background:var(--panel-3);color:var(--text)}
/* enlace de la página actual (p. ej. «Mi reserva» en su página; el index no marca ninguno): como .nav-item.on del panel */
.nav-links a.on,.nav-links a.on:hover{background:var(--primary-50);color:var(--link)}
.nav-links a.btn{margin-left:8px;height:40px;padding:0 16px;color:#fff;font-weight:700;font-size:.88rem}
.nav-links a.btn:hover{color:#fff;background:var(--btn-h)}
.nav-tools{flex:none;display:flex;align-items:center;gap:8px;padding-left:12px;margin-left:2px;border-left:1px solid var(--border)}

/* selector de idioma = control segmentado como el del buscador */
.lang-switch{flex:none;display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:11px;background:var(--panel-3)}
.lang-switch button{flex:none;background:transparent;border:0;border-radius:8px;padding:6px 7px;cursor:pointer;line-height:0;opacity:.55;
  transition:opacity .15s,background .15s,box-shadow .15s}
.lang-switch button:hover{opacity:1}
.lang-switch button.active{opacity:1;background:var(--panel);box-shadow:0 1px 3px rgba(15,23,42,.14)}
:root[data-theme="dark"] .lang-switch button.active{background:#334155;box-shadow:none}
.lang-switch .flag{width:22px;height:15px;display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(15,23,42,.1)}

/* botones de ícono (tema / menú) como los .icon-btn del panel */
.theme-toggle,.menu-toggle{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--panel);color:var(--text-2);cursor:pointer;transition:background .15s,color .15s}
.theme-toggle:hover,.menu-toggle:hover{background:var(--panel-2);color:var(--text)}
.theme-toggle svg{width:18px;height:18px}
.menu-toggle svg{width:20px;height:20px}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
.menu-toggle{display:none}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--radius);
  border:1px solid transparent;font-weight:700;font-size:.93rem;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-grad,.btn-white{background:var(--btn);color:#fff;box-shadow:0 10px 20px -12px var(--primary)}
.btn-grad:hover,.btn-white:hover{background:var(--btn-h)}
.btn-ghost{background:var(--panel);color:var(--text-2);border-color:var(--border)}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--border-2);color:var(--text)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 20px -12px var(--wa)}
.btn-wa:hover{background:var(--wa-h)}
.btn-sm{height:40px;padding:0 14px;font-size:.86rem;flex:1 1 0;min-width:max-content}

/* ---------- portada ---------- */
.hero{position:relative;padding:64px 0 76px;overflow:hidden;border-bottom:1px solid var(--border)}
.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%)}
.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%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(2.2rem,4.3vw,3.5rem);line-height:1.08;letter-spacing:-.028em;margin:18px 0;text-wrap:balance}
.hero h1 .mark{background:var(--mark);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.hero p.lead{font-size:1.1rem;color:var(--muted);max-width:42ch;margin-bottom:28px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-cta .btn{height:50px;padding:0 22px;font-size:.98rem;border-radius:13px}
.hero-cta .btn-grad::after{content:"";width:17px;height:17px;flex:none;background:currentColor;transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-cta .btn-grad:hover::after{transform:translateX(3px)}

/* cifras = tarjetitas KPI del panel: ícono de 30 px (radio 9) y el NÚMERO primero, la etiqueta debajo */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:36px;max-width:600px}
.trust > div{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico val" "ico lbl";align-items:center;
  column-gap:11px;row-gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.trust .t-ico{grid-area:ico;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--primary-50);color:var(--link)}
.trust .t-ico svg{width:16px;height:16px}
.trust > div:nth-child(2) .t-ico{background:var(--ok-bg);color:var(--ok)}
.trust > div:nth-child(3) .t-ico{background:var(--violet-bg);color:var(--violet)}
.trust b{grid-area:val;align-self:end;font-size:1.4rem;font-weight:800;color:var(--text);line-height:1;letter-spacing:-.03em}
.trust span{grid-area:lbl;align-self:start;font-size:.74rem;font-weight:700;color:var(--muted);line-height:1.25;
  overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto} /* «организовано» no cabe en ruso a 320 px */

/* postal ilustrada */
.hero-art{position:relative;padding-left:22px}
.postcard{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:10px;box-shadow:var(--shadow-lg)}
.postcard .scene{height:340px;border-radius:15px;overflow:hidden;background:var(--panel-3)}
.postcard .scene svg{width:100%;height:100%}
:root[data-theme="dark"] .postcard .scene{filter:brightness(.9) saturate(1.05)}
.postcard .cap{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;padding:13px 8px 5px}
.postcard .cap .stamp{font-weight:800;color:var(--text);font-size:.98rem;letter-spacing:-.01em}
.postcard .cap .place{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--primary-50);
  color:var(--link);font-weight:700;font-size:.76rem;white-space:nowrap}
.postcard .cap .place::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* etiqueta de ruta tipo pase de abordar (usa los tokens: se re-pinta en oscuro) */
.pc-route{position:absolute;top:22px;left:22px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:var(--panel);border:1px solid var(--border);color:var(--text);font-weight:800;font-size:.76rem;letter-spacing:.08em;
  box-shadow:0 6px 16px -8px rgba(15,23,42,.4)}
.pc-route svg{width:15px;height:15px;color:var(--link)}
.badge-float{position:absolute;left:0;bottom:78px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 40px);
  padding:8px 16px 8px 8px;border-radius:14px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  color:var(--text);font-weight:700;font-size:.86rem;line-height:1.25}
.badge-float svg{width:34px;height:34px;padding:8px;flex:none;border-radius:10px;background:var(--primary-50);color:var(--link)}

/* ---------- secciones (títulos a la izquierda, como .view-head del panel) ---------- */
section{position:relative;padding:84px 0}
#promociones,#porque,#proceso,#faq,#contacto{border-top:1px solid var(--border)}
.sec-head{max-width:700px;margin-bottom:34px}
.sec-head h2{font-size:clamp(1.75rem,3.1vw,2.35rem);margin:14px 0 10px;letter-spacing:-.03em;text-wrap:balance}
.sec-head p{color:var(--muted);font-size:1.02rem;max-width:62ch}

/* buscador: título a la izquierda y tarjeta a todo el ancho */
#vuelos .sec-head{margin-inline:0;text-align:left}
#vuelos .fx{max-width:none}

/* aparición al hacer scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- promociones ---------- */
.promo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.promo-card{position:relative;container-type:inline-size;display:flex;flex-direction:column;min-width:0;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);
  transition:box-shadow .2s,border-color .2s,transform .2s}
.promo-card:hover{border-color:var(--primary-200);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
/* el fondo es el FLYER (mucho texto): 3:2 anclado arriba = casi todos los flyers se ven completos */
.promo-img{position:relative;aspect-ratio:3/2;background-color:var(--panel-3);background-size:cover;background-position:center top;
  background-repeat:no-repeat;cursor:pointer;border-bottom:1px solid var(--border)}
.promo-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,23,42,0) 55%,rgba(15,23,42,.32));opacity:0;transition:opacity .2s}
.promo-card:hover .promo-img::after{opacity:1}
/* flyers verticales o cuadrados (los marca un script): se ven COMPLETOS sobre el mismo flyer difuminado */
.promo-img.is-tall::before{content:"";position:absolute;inset:-40px;z-index:0;pointer-events:none;
  background-image:inherit;background-size:cover;background-position:center;
  filter:blur(18px) saturate(1.1) brightness(.85);-webkit-clip-path:inset(40px);clip-path:inset(40px)}
.promo-img.is-tall::after,.promo-card:hover .promo-img.is-tall::after{background:none;background-image:inherit;background-size:contain;
  background-position:center;background-repeat:no-repeat;opacity:1}
/* categoría y lugar: DEBAJO de la imagen (no tapan el título del flyer); categoría como .tag.blue del panel */
.promo-tag,.promo-loc{position:absolute;z-index:2;top:calc(100% + 15px);max-width:calc(56% - 26px);overflow:hidden}
.promo-tag{left:18px;height:22px;padding:0 9px;border-radius:7px;background:var(--primary-50);border:1px solid var(--primary-200);
  color:var(--link);font-weight:700;font-size:.72rem;line-height:22px;white-space:nowrap;text-overflow:ellipsis}
/* el lugar puede pasar a una 2.ª línea (no se corta a media palabra); con 1 línea queda centrado con la categoría.
   Si aun así no cabe, termina en «…» y un script de html.py le pone title con el texto completo */
.promo-loc{right:18px;max-width:calc(44% - 26px);color:var(--muted);font-weight:600;font-size:.78rem;text-align:right;
  padding-top:3px;line-height:16px;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  width:max-content} /* ancho = su texto, hasta max-width (en la tarjeta en espejo el «right» grande dejaba 17 px) */
/* «ver flyer»: siempre visible (así se sabe que el flyer se puede ampliar) */
.promo-zoom{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(15,23,42,.72);color:#fff;font-weight:700;font-size:.76rem;
  cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s}
.promo-zoom:hover,.promo-card:hover .promo-zoom{background:#0f172a}
/* cuerpo tipo «resultado de vuelo»: título a la izquierda, precio a la derecha */
.promo-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto 1fr;
  grid-template-areas:"t p" "t u" "s s" "b b" "a a";column-gap:16px;row-gap:2px;padding:50px 18px 18px}
.promo-body h3{grid-area:t;font-size:1.1rem;line-height:1.25;letter-spacing:-.015em;align-self:start;padding-top:2px}
.promo-body h3 a:hover{color:var(--link)!important}
.promo-sub{grid-area:s;color:var(--muted);font-size:.85rem;line-height:1.45;margin-top:6px}
.promo-price{grid-area:p;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right}
.promo-price .antes{color:var(--faint);text-decoration:line-through;font-size:.78rem;font-weight:600;white-space:nowrap}
.promo-price .ahora{color:var(--link);font-weight:800;font-size:1.32rem;line-height:1.05;letter-spacing:-.02em;white-space:nowrap}
.promo-unit{grid-area:u;color:var(--muted);font-size:.74rem;font-weight:600;text-align:right;max-width:21ch;line-height:1.3}
.promo-badges{grid-area:b;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.promo-badges span{padding:4px 9px;border-radius:999px;background:var(--panel-3);color:var(--text-2);font-size:.72rem;font-weight:600;line-height:1.3}
.promo-actions{grid-area:a;align-self:end;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
/* tarjeta angosta (celular o tableta a 2 columnas): todo en una sola columna;
   el lugar va en su propia fila, debajo de la categoría, para que ninguno de los dos se corte */
@container (max-width:400px){
  .promo-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto 1fr;
    grid-template-areas:"t" "s" "p" "u" "b" "a";padding:78px 16px 16px}
  .promo-tag{left:16px;max-width:calc(100% - 32px)}
  .promo-loc{left:16px;right:auto;top:calc(100% + 43px);max-width:calc(100% - 32px);text-align:left}
  .promo-sub{margin-top:2px}
  .promo-price{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;margin-top:8px}
  .promo-unit{text-align:left;max-width:none}
}
/* escritorio: la primera promoción va DESTACADA a lo ancho (flyer grande + datos a la derecha)
   y la última también va a lo ancho, en espejo, para que no quede una tarjeta sola al final */
@media (min-width:1001px){
  .promo-card:first-child,.promo-card:last-child:nth-child(even){grid-column:1 / -1;display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch}
  .promo-card:first-child .promo-img,.promo-card:last-child:nth-child(even) .promo-img{aspect-ratio:auto;min-height:36.4cqw;
    border-bottom:0;border-right:1px solid var(--border)}
  /* si los datos (p. ej. en ruso) hacen la tarjeta más alta que el 3:2, el flyer NO se recorta: se ve completo
     sobre su versión difuminada, igual que los flyers verticales */
  .promo-card:first-child .promo-img::before,.promo-card:last-child:nth-child(even) .promo-img::before{content:"";position:absolute;
    inset:-40px;z-index:0;pointer-events:none;background-image:inherit;background-size:cover;background-position:center;
    filter:blur(18px) saturate(1.1) brightness(.85);-webkit-clip-path:inset(40px);clip-path:inset(40px)}
  .promo-card:first-child .promo-img::after,.promo-card:last-child:nth-child(even) .promo-img::after{background:none;
    background-image:inherit;background-size:contain;background-position:center;background-repeat:no-repeat;opacity:1}
  .promo-card:first-child .promo-body,.promo-card:last-child:nth-child(even) .promo-body{display:flex;flex-direction:column;align-items:flex-start;
    gap:0;padding:74px 34px 30px}
  .promo-card:first-child .promo-body h3,.promo-card:last-child:nth-child(even) .promo-body h3{font-size:1.6rem;letter-spacing:-.025em;padding:0}
  .promo-card:first-child .promo-sub,.promo-card:last-child:nth-child(even) .promo-sub{font-size:.95rem;margin-top:8px}
  .promo-card:first-child .promo-price,.promo-card:last-child:nth-child(even) .promo-price{flex-direction:row;align-items:baseline;gap:10px;margin-top:18px}
  .promo-card:first-child .promo-price .ahora,.promo-card:last-child:nth-child(even) .promo-price .ahora{font-size:2rem}
  .promo-card:first-child .promo-unit,.promo-card:last-child:nth-child(even) .promo-unit{text-align:left;max-width:none;font-size:.8rem;margin-top:2px}
  .promo-card:first-child .promo-badges,.promo-card:last-child:nth-child(even) .promo-badges{margin-top:16px}
  .promo-card:first-child .promo-actions,.promo-card:last-child:nth-child(even) .promo-actions{width:100%;margin-top:auto;padding-top:22px}
  .promo-card:first-child .btn-sm,.promo-card:last-child:nth-child(even) .btn-sm{height:46px;font-size:.92rem}
  /* categoría y lugar arriba de los datos (a la derecha del flyer); cqw = ancho de la tarjeta */
  .promo-card:first-child .promo-tag,.promo-card:last-child:nth-child(even) .promo-tag{top:32px;left:calc(100% + 34px);
    max-width:calc((100cqw - 100%) * .6 - 40px)}
  .promo-card:first-child .promo-loc{top:32px;right:calc(100% - 100cqw + 34px);max-width:calc((100cqw - 100%) * .4 - 34px)}
  /* la última, en espejo: flyer a la derecha */
  .promo-card:last-child:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .promo-card:last-child:nth-child(even) .promo-img{grid-column:2;grid-row:1;border-right:0;border-left:1px solid var(--border)}
  .promo-card:last-child:nth-child(even) .promo-body{grid-column:1;grid-row:1}
  .promo-card:last-child:nth-child(even) .promo-tag{left:calc(100% - 100cqw + 34px)}
  .promo-card:last-child:nth-child(even) .promo-loc{top:32px;right:calc(100% + 34px);max-width:calc((100cqw - 100%) * .4 - 34px)}
}

/* «Todos nuestros destinos»: panel con cabecera tipo .pane-head, buscador tipo .app-search y lista con scroll */
.all-destinos{margin-top:36px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow);overflow:hidden}
.dest-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:14px 16px 14px 18px;
  border-bottom:1px solid var(--border)}
.dest-title{display:flex;align-items:center;gap:12px;min-width:0}
.dest-ico{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--primary-50);color:var(--link)}
.dest-ico svg{width:18px;height:18px}
.all-destinos h3{font-size:1.05rem;letter-spacing:-.01em}
.dest-search-wrap{position:relative;flex:0 1 360px;min-width:0}
.dest-search-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--faint);pointer-events:none}
.dest-search{width:100%;height:42px;padding:0 14px 0 40px;border:1px solid var(--input-border);border-radius:var(--radius);background:var(--panel-2);
  color:var(--text);font-size:.92rem;font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.dest-search::placeholder{color:var(--muted)} /* --faint daba 2.45:1; es la única indicación del campo */
.dest-search:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-100);background:var(--panel)}
.dest-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:8px;padding:16px 18px 30px;max-height:400px;overflow:auto;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-2) transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent)}
.dchip{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:48px;padding:7px 12px;border:1px solid var(--border);border-radius:11px;
  background:var(--panel-2);color:var(--text);font-weight:700;font-size:.84rem;line-height:1.22;transition:background .15s,border-color .15s,color .15s;
  overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto} /* p. ej. «Центральноафриканская» no cabe en una columna */
.dchip span{margin-top:2px;font-size:.72rem;font-weight:600;color:var(--muted)}
.dchip:hover{background:var(--primary-50);border-color:var(--primary-200);color:var(--link)}
.dchip:hover span{color:var(--link)}
.dchip:focus-visible{outline-offset:-2px}
/* ruso: «Центральноафриканская» mide ~170 px en negritas y la columna deja 150 px de texto: se partía a media palabra
   (medido de 370 a 1400 px, en el index y en /ru/tury/). Aquí ninguna palabra se parte (solo después de un guion,
   como «Нью-Йорк»): en escritorio las columnas dejan al menos 178 px de texto; en celular, ver «max-width:680px». */
:root:lang(ru) .dest-chips{grid-template-columns:repeat(auto-fill,minmax(204px,1fr))}
:root:lang(ru) .dchip{overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}

/* ---------- por qué nosotros (tarjetas blancas sobre slate-50, íconos de colores como el panel) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 20px;box-shadow:var(--shadow);
  transition:border-color .2s,box-shadow .2s}
.feat:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md)}
.feat .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:var(--primary-50);color:var(--link)}
.feat:nth-child(2) .ico{background:var(--ok-bg);color:var(--ok)}
.feat:nth-child(3) .ico{background:var(--violet-bg);color:var(--violet)}
.feat:nth-child(4) .ico{background:var(--warn-bg);color:var(--warn)}
.feat .ico svg{width:22px;height:22px}
.feat h3{font-size:1.02rem;margin-bottom:6px;letter-spacing:-.01em}
.feat p{font-size:.9rem;color:var(--muted);line-height:1.55}

/* ---------- cómo funciona: UNA tarjeta dividida en 3 pasos con flechitas (como una tabla del panel) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow)}
.step{position:relative;padding:28px 28px 30px}
.step + .step{border-left:1px solid var(--border)}
.step .num{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;background:var(--btn);color:#fff;
  font-weight:800;font-size:1rem;box-shadow:0 8px 16px -8px var(--primary)}
.step h3{font-size:1.1rem;margin-bottom:6px;letter-spacing:-.01em}
.step p{color:var(--muted);font-size:.93rem}
/* flechita en el divisor entre pasos */
.step + .step::before{content:"";position:absolute;z-index:2;top:34px;left:-15px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--border);background:var(--panel) var(--chev) center/14px no-repeat;transform:rotate(-90deg)}

/* franja de acción al final de «cómo funciona» (estilo aviso del panel) */
.cta-band{margin-top:20px;display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;padding:18px 20px;border-radius:var(--radius-xl);
  background:var(--primary-50);border:1px solid var(--primary-200)}
.cta-ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--logo);color:#fff;
  box-shadow:0 6px 14px -6px rgba(37,99,235,.6)}
.cta-ico svg{width:21px;height:21px}
.cta-txt{flex:1 1 300px;min-width:0}
.cta-txt h3{font-size:1.08rem;letter-spacing:-.015em}
.cta-txt p{color:var(--text-2);font-size:.9rem;margin-top:2px} /* --muted sobre azul suave daba 4.37:1 */
.cta-acts{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- preguntas frecuentes (título a la izquierda, lista en UNA tarjeta con separadores) ---------- */
#faq .wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr);gap:48px;align-items:start}
#faq .sec-head{position:sticky;top:calc(var(--head-h) + 28px);margin-bottom:0}
.faq-wa{margin-top:22px}
.faq-list{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow);overflow:hidden}
.faq-item{position:relative;transition:background .15s}
.faq-item + .faq-item{border-top:1px solid var(--border)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;
  font-weight:700;font-size:.97rem;line-height:1.4;color:var(--text);transition:background .15s,color .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--panel-2)}
.faq-item summary:focus-visible{outline-offset:-3px;border-radius:var(--radius)}
/* botón +/− en cuadrito */
.faq-item summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--panel-3);color:var(--muted);font-size:1.15rem;font-weight:600;line-height:1;transition:background .15s,color .15s}
/* pregunta abierta = estado .nav-item.on del panel: fondo azul suave, borde primario a la izquierda y título azul */
.faq-item[open]{background:var(--primary-50)}
.faq-item[open]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
.faq-item[open] summary{color:var(--link)}
.faq-item[open] summary:hover{background:transparent}
.faq-item[open] summary::after{content:"\2212";background:var(--btn);color:#fff}
.faq-item .faq-a{padding:0 20px 18px;color:var(--text-2);font-size:.93rem;line-height:1.65}
.faq-item .faq-a a{color:var(--link);font-weight:700}

/* ---------- contacto ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:start}
.contact-info h2{font-size:clamp(1.75rem,3.1vw,2.35rem);margin:14px 0 10px;letter-spacing:-.03em;text-wrap:balance}
.contact-info p.lead{color:var(--muted);font-size:1.02rem;margin-bottom:24px}
/* datos de contacto como lista agrupada (estilo ajustes de McMail) */
.info-line{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--panel);border:1px solid var(--border);
  color:var(--text);font-weight:700;font-size:.94rem;line-height:1.3}
.info-line + .info-line{border-top:0}
.contact-info .lead + .info-line{border-radius:16px 16px 0 0}
.contact-info .info-line:last-child{border-radius:0 0 16px 16px}
a.info-line{transition:background .15s}
a.info-line:hover{background:var(--panel-2)}
.info-line .ico{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--primary-50);color:var(--link)}
.contact-info .lead + .info-line .ico{background:var(--wa-bg);color:var(--wa)}
.info-line .ico svg{width:19px;height:19px}
.info-line span{display:block;min-width:0}
.info-line small{display:block;margin-top:2px;color:var(--muted);font-weight:500;font-size:.82rem;overflow-wrap:anywhere}

/* formulario = ventana «redactar» de McMail */
.form-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:22px 24px 24px}
.form-head{display:flex;align-items:center;gap:12px;margin:-22px -24px 20px;padding:16px 24px;border-bottom:1px solid var(--border);
  background:var(--panel-2);border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.form-ico{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--logo);color:#fff;
  box-shadow:0 6px 14px -6px rgba(37,99,235,.6)}
.form-ico svg{width:19px;height:19px}
.form-card h3{font-size:1.1rem;letter-spacing:-.01em}
.form-card .sub{color:var(--muted);font-size:.86rem;line-height:1.4;margin-top:1px}
.field{margin-bottom:14px;min-width:0}
.field label{display:block;margin-bottom:6px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--input-border);border-radius:12px;background-color:var(--input-bg);
  color:var(--text);font-size:.95rem;font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s}
.field textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);font-weight:500}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--border-2)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-100)}
.field select{-webkit-appearance:none;appearance:none;background-image:var(--chev);background-repeat:no-repeat;background-position:right 14px center;
  background-size:15px;padding-right:40px;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-card .btn-wa{width:100%;height:52px;margin-top:4px;border-radius:13px;font-size:1rem}
.form-card .btn-wa svg{width:20px;height:20px}
.form-note{margin-top:12px;font-size:.78rem;color:var(--muted);text-align:center}

/* ---------- pie ---------- */
/* abajo deja lugar para el botón flotante de WhatsApp (si no, en tableta y laptop tapa la última línea) */
footer{background:var(--panel);border-top:1px solid var(--border);color:var(--muted);padding:56px 0 96px;font-size:.9rem}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 64px;margin-bottom:26px}
.foot-brand{max-width:360px}
.foot-brand .brand{display:inline-flex;margin-bottom:14px}
.foot-brand p{color:var(--muted);font-size:.9rem}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(170px,auto));gap:48px}
.foot-col h4{margin-bottom:10px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot-col a{display:block;padding:5px 0;color:var(--text-2);font-weight:600;font-size:.9rem;transition:color .15s}
.foot-col a:hover{color:var(--link)}
/* la caja de datos trae estilos en línea pensados para fondo oscuro: se re-pintan */
.foot-datos{grid-column:1 / -1;margin-top:0!important;padding:14px 18px!important;border:1px solid var(--border)!important;border-radius:14px;
  background:var(--panel-2);color:var(--muted);font-size:.84rem!important;opacity:1!important;overflow-wrap:anywhere}
.foot-datos div{opacity:1!important} /* la línea «Aceptamos Visa…» trae opacity:.85 en línea: bajaba a 3.44:1 */
.foot-datos a{color:var(--text-2);font-weight:600}
.foot-datos a:hover{color:var(--link)}
.foot-bottom{display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--border);
  font-size:.82rem;color:var(--muted)}

/* ---------- botón flotante de WhatsApp ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--wa);box-shadow:0 14px 30px -10px rgba(31,174,84,.8),0 2px 6px rgba(15,23,42,.15);transition:transform .2s}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:29px;height:29px}

/* ---------- visor de flyers ---------- */
/* arriba deja 68 px para que el ✕ (16-60 px) no tape la esquina del flyer; abajo, lugar para el botón de WhatsApp */
.lightbox{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:68px 16px 100px;
  background:rgba(2,6,23,.88);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,960px);max-height:calc(100vh - 184px);border-radius:16px;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.lb-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:1.05rem;line-height:1}
.lb-close:hover{background:rgba(255,255,255,.2)}
.lb-wa{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);height:50px;padding:0 24px}
.lb-wa:active{transform:translateX(-50%) translateY(1px)}

/* ---------- buscador: etiquetas de los filtros (Escalas / Aerolínea / Ordenar, agregadas por html.py) ---------- */
.fx-flt{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.fx-flt select{min-width:0}
.fx-flbl{flex:none;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fx-muted);white-space:nowrap}

/* ---------- buscador de vuelos en modo oscuro (re-pinta sus tokens y sus fondos #fff fijos) ---------- */
/* --fx-primary es el FONDO de los botones con texto blanco (Buscar, Reservar, Listo, filtro activo): #2563eb / #1d4ed8
   dan 5.17:1 / 6.70:1 (con #3b82f6 / #60a5fa eran 3.68:1 / 2.54:1); los textos azules van forzados a #93c5fd más abajo */
:root[data-theme="dark"] .fx{
  --fx-primary:#2563eb; --fx-primary-h:#1d4ed8; --fx-50:rgba(59,130,246,.12); --fx-100:rgba(59,130,246,.22); --fx-200:rgba(59,130,246,.4);
  --fx-text:#e2e8f0; --fx-text-2:#cbd5e1; --fx-muted:#94a3b8; --fx-faint:#64748b;
  --fx-border:#1e293b; --fx-panel:#0f172a; --fx-panel-2:#0b1222;
  --fx-ok:#34d399; --fx-ok-bg:rgba(16,185,129,.12); --fx-warn:#fbbf24; --fx-warn-bg:rgba(245,158,11,.12);
  --fx-danger:#f87171; --fx-danger-bg:rgba(239,68,68,.12);
  --fx-shadow:none; --fx-shadow-lg:0 20px 45px -15px rgba(0,0,0,.65)
}
:root[data-theme="dark"] .fx-search,
:root[data-theme="dark"] .fx-card,
:root[data-theme="dark"] .fx-pop,
:root[data-theme="dark"] .mtw-ac-list,
:root[data-theme="dark"] .mtw-state,
:root[data-theme="dark"] .fx-sk,
:root[data-theme="dark"] .mtw-modal-card{background:var(--fx-panel)}
:root[data-theme="dark"] .fx-chip,
:root[data-theme="dark"] .fx-step button,
:root[data-theme="dark"] .fx-swap,
:root[data-theme="dark"] .fx-del,
:root[data-theme="dark"] .fx-sum button,
:root[data-theme="dark"] .fx-pills button,
:root[data-theme="dark"] .mtw-filters select,
:root[data-theme="dark"] .fx-btn.ghost,
:root[data-theme="dark"] .mtw-modal-close{background:var(--fx-panel);border-color:#334155;color:var(--fx-text-2)}
:root[data-theme="dark"] .fx-swap,:root[data-theme="dark"] .fx-step button{color:#60a5fa}
:root[data-theme="dark"] .fx-in input,
:root[data-theme="dark"] .fx-pop select,
:root[data-theme="dark"] .fx-ages select,
:root[data-theme="dark"] .mtw-modal input,
:root[data-theme="dark"] .mtw-modal select{background:var(--fx-panel-2);border-color:#334155;color:var(--fx-text)}
:root[data-theme="dark"] .fx-in input:focus{border-color:var(--fx-primary)}
/* ventana de reserva: el campo con foco y los campos con error (.bad) se marcan igual que en claro (en este orden: gana el rojo) */
:root[data-theme="dark"] .mtw-modal input:focus,:root[data-theme="dark"] .mtw-modal select:focus{border-color:var(--fx-primary)}
:root[data-theme="dark"] .mtw-modal input.bad{border-color:var(--fx-danger);background:var(--fx-danger-bg)}
:root[data-theme="dark"] .fx-chip:hover,
:root[data-theme="dark"] .fx-sum button:hover,
:root[data-theme="dark"] .mtw-modal-close:hover{background:#1e293b;color:var(--fx-text)}
:root[data-theme="dark"] .fx-sum button:hover{border-color:var(--fx-200)}
:root[data-theme="dark"] .fx-del:hover{color:var(--fx-danger)}
:root[data-theme="dark"] .fx-swap:hover,:root[data-theme="dark"] .fx-step button:hover:not(:disabled){background:var(--fx-50);border-color:var(--fx-primary)}
:root[data-theme="dark"] .fx-sum button.on{border-color:var(--fx-primary)}
:root[data-theme="dark"] .fx-seg{background:#1e293b}
:root[data-theme="dark"] .fx-seg button{color:var(--fx-muted)}
:root[data-theme="dark"] .fx-seg button:hover{color:var(--fx-text)}
:root[data-theme="dark"] .fx-seg button.mtw-active{background:#0f172a;color:#93c5fd;box-shadow:0 1px 3px rgba(0,0,0,.5)}
:root[data-theme="dark"] .fx-cnt + .fx-cnt{border-top-color:#1e293b}
/* filtro activo («Todas») en azul primario, no en gris claro invertido */
:root[data-theme="dark"] .fx-pills button.on{background:var(--fx-primary);border-color:var(--fx-primary);color:#fff}
/* textos azules del buscador: un tono más claro para que se lean sobre fondo oscuro */
:root[data-theme="dark"] .fx-sum button.on small,:root[data-theme="dark"] .fx-hint a,
:root[data-theme="dark"] .fx-det summary,:root[data-theme="dark"] .mtw-ac-code,
:root[data-theme="dark"] .fx-tag,:root[data-theme="dark"] .fx-side .cab,
:root[data-theme="dark"] .mtw-bsummary b,:root[data-theme="dark"] .mtw-ok .mtw-pnr,
:root[data-theme="dark"] .fx-add,:root[data-theme="dark"] .fx-legs .fx-num,
:root[data-theme="dark"] .fx-seg button.mtw-active{color:#93c5fd}
:root[data-theme="dark"] .fx-tag.cheap{color:var(--fx-ok)}
:root[data-theme="dark"] .fx-tag.fast{background:rgba(139,92,246,.15);color:#a78bfa}
/* los logos de aerolínea son imágenes pensadas para fondo claro */
:root[data-theme="dark"] .fx-logo{background:#f8fafc;border-color:#334155}
:root[data-theme="dark"] .fx-bar i,
:root[data-theme="dark"] .fx-bar .ic{background:var(--fx-panel)}
:root[data-theme="dark"] .fx-side{background:#0b1222}
:root[data-theme="dark"] .fx-del:hover{border-color:rgba(248,113,113,.45);background:var(--fx-danger-bg)}
:root[data-theme="dark"] .mtw-state.mtw-error{background:var(--fx-danger-bg);border-color:rgba(248,113,113,.35)}
:root[data-theme="dark"] .fx-sk i{background:linear-gradient(90deg,#1e293b 25%,#334155 37%,#1e293b 63%);background-size:400% 100%}
:root[data-theme="dark"] .fx-go,:root[data-theme="dark"] .fx-btn:not(.ghost){box-shadow:0 14px 26px -16px rgba(59,130,246,.9)}
:root[data-theme="dark"] .mtw-modal{background:rgba(2,6,23,.75)}
:root[data-theme="dark"] .mtw-modal-card{border:1px solid var(--fx-border)}

/* ---------- responsivo ---------- */
/* la barra completa ya no cabe (medido en ES/EN/RU: necesita ~1200 px): menú desplegable tipo .drop-menu
   de McMail (tarjeta alineada a la derecha) */
@media (max-width:1219px){
  .menu-toggle{display:grid}
  .nav-tools{border-left:0;padding-left:0}
  .nav-links{position:absolute;top:calc(100% + 6px);right:var(--gut);z-index:55;width:min(340px,calc(100vw - 2 * var(--gut)));
    flex-direction:column;align-items:stretch;gap:2px;padding:8px;background:var(--panel);border:1px solid var(--border);
    border-radius:16px;box-shadow:var(--shadow-lg);max-height:calc(100vh - var(--head-h) - 24px);overflow:auto;
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
  :root[data-theme="dark"] .nav-links{box-shadow:0 24px 50px -16px rgba(0,0,0,.85)}
  /* al abrir, visible al instante (así el script de html.py puede pasarle el foco al primer enlace); al cerrar se desvanece */
  .nav-links.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s,visibility 0s}
  .nav-links a{padding:11px 12px;font-size:.95rem;border-radius:9px}
  .nav-links a:hover{background:var(--primary-50);color:var(--link)}
  .nav-links a.btn{margin:6px 0 0;height:46px;justify-content:center}
  .nav-links a.btn:hover{background:var(--btn-h);color:#fff}
}
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .hero-art{max-width:520px;width:100%;margin:0 auto;padding-left:0}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid,#faq .wrap{grid-template-columns:1fr;gap:28px}
  #faq .sec-head{position:static}
}
@media (max-width:760px){
  .steps{grid-template-columns:1fr}
  .step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;padding:20px 18px}
  .step + .step{border-left:0;border-top:1px solid var(--border)}
  .step .num{grid-row:span 2;margin-bottom:0}
  .step h3{margin:2px 0 4px}
  .step + .step::before{top:-15px;left:24px;transform:none}
}
@media (max-width:680px){
  :root{--gut:16px}
  section{padding:56px 0}
  .hero{padding:36px 0 52px}
  .hero h1{font-size:clamp(2rem,8.4vw,2.6rem)}
  .hero p.lead{font-size:1.02rem}
  .trust{gap:8px;margin-top:28px}
  .trust > div{grid-template-columns:1fr;grid-template-areas:"ico" "val" "lbl";align-content:start;row-gap:6px;padding:12px}
  .trust .t-ico{margin-bottom:2px}
  .trust b{font-size:1.3rem}
  .postcard .scene{height:250px}
  /* se ancla a la ilustración (arriba) para no tapar el pie de la postal cuando éste ocupa 2 líneas */
  .badge-float{left:-4px;bottom:auto;top:194px;font-size:.8rem}
  .pc-route{top:20px;left:20px}
  .sec-head{margin-bottom:26px}
  .promo-grid{grid-template-columns:1fr;gap:16px}
  /* lista más corta y en 2 columnas desde 320 px; al llegar a su final el gesto sigue moviendo la página (no la atrapa) */
  .dest-chips{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));max-height:min(380px,55vh);overscroll-behavior:auto;padding:14px 14px 28px}
  /* ruso: también 2 por renglón, pero el chip cuya palabra más larga no cabe en media fila pasa a un renglón completo
     (min-width:min-content = su palabra más larga) en vez de partirla */
  :root:lang(ru) .dest-chips{display:flex;flex-wrap:wrap}
  :root:lang(ru) .dchip{flex:1 1 calc(50% - 4px);min-width:min-content;max-width:100%}
  .dest-head{padding:14px}
  .dest-search-wrap{flex:1 1 100%}
  .feat-grid{grid-template-columns:1fr;gap:12px}
  .feat{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:18px}
  .feat .ico{grid-row:span 2;margin-bottom:0}
  .cta-band{padding:16px}
  .cta-txt{flex-basis:200px}
  .cta-acts{width:100%}
  .cta-acts .btn{flex:1 1 auto}
  .faq-item summary{padding:15px 16px;font-size:.94rem}
  .faq-item .faq-a{padding:0 16px 16px}
  .form-card{padding:18px 16px 20px}
  .form-head{margin:-18px -16px 18px;padding:14px 16px}
  .grid2{grid-template-columns:1fr;gap:0}
  .foot-top{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr;gap:24px}
  .foot-col a{padding:6px 0}
  .foot-bottom{flex-direction:column}
  .wa-float{right:16px;bottom:16px}
}
/* celular: botones de la portada apilados y a todo el ancho (fáciles de tocar, el principal arriba) */
@media (max-width:520px){
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
}
@media (max-width:440px){
  /* barra compacta: logo + idiomas + tema + menú caben completos desde 360 px */
  .nav{gap:6px}
  .brand{font-size:.92rem;gap:7px}
  .brand .dot{width:31px;height:31px;border-radius:9px}
  .brand .dot svg{width:17px;height:17px}
  .nav-tools{gap:5px;padding-left:0;margin-left:0;border-left:0}
  .lang-switch{padding:2px;border-radius:10px}
  .lang-switch button{padding:6px 4px}
  .lang-switch .flag{width:18px;height:12px}
  .theme-toggle,.menu-toggle{width:35px;height:35px;border-radius:10px}
  .postcard .cap{flex-wrap:wrap;gap:8px}
  /* fechas del buscador: que quepa «26/10/2026» en pantallas angostas */
  .fx-f.dt .fx-in .ic{left:10px}
  .fx-f.dt .fx-in input{padding-left:32px;padding-right:6px;font-size:13.5px}
  /* texto de ayuda del buscador de destinos: que quepa en EN/RU a 375 y, si no cabe, que termine en «…» */
  .dest-search{font-size:.86rem;text-overflow:ellipsis}
}
/* celulares muy angostos (320-360): solo el logo, para que quepan idioma, tema y menú */
@media (max-width:359px){
  header .brand-txt{display:none}
  /* viaje redondo: salida y regreso uno debajo del otro (a 2 columnas «26/10/2026» no cabe por debajo de ~350 px) */
  .fx-route .fx-dates{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .promo-card,.promo-card:hover,.wa-float:hover{transform:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}