/* MAGNUS TRAVEL COLOMBIA | Asistente premium */
:root {
  color-scheme: dark;
  --mt-bg: #031326;
  --mt-panel: #041a30;
  --mt-card: #061d35;
  --mt-text: #f7fbff;
  --mt-muted: #b9cde3;
  --mt-cyan: #12d9ed;
  --mt-gold: #ffc21e;
  --mt-line: rgba(86,159,211,.42);
  box-sizing: border-box;
}
*,*::before,*::after { box-sizing: inherit; }
html,body {
  width:100%; max-width:100vw; height:100%; min-height:0; margin:0; padding:0;
  overflow:hidden; overflow-x:clip; background:transparent;
}
html,body,.wrap,.chat {
  box-sizing:border-box; min-width:0; max-width:100%;
}
.wrap { overflow-x:clip; }
body {
  color:var(--mt-text);
  font:14px/1.45 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input { font:inherit; }
.wrap { display:flex; width:100%; height:100%; min-height:0; margin:0; padding:0; }
.chat {
  max-width:100%; overflow-x:clip;
  position:relative; display:flex; flex:1 1 auto; flex-direction:column;
  width:100%; height:100%; min-width:0; min-height:0; overflow:hidden;
  color:var(--mt-text);
  background:linear-gradient(145deg,#03172d 0%,#041a31 54%,#021326 100%);
  border:0; border-radius:0; box-shadow:none;
}

/* Cabecera panorámica integrada: no crea una franja separada. */
.head {
  position:relative; z-index:2; flex:0 0 auto; min-height:174px;
  padding:24px 34px 18px; overflow:hidden;
  background:
    linear-gradient(90deg,rgba(2,19,39,.99) 0%,rgba(3,24,46,.96) 34%,rgba(3,25,47,.30) 72%,rgba(3,19,37,.68) 100%),
    linear-gradient(0deg,rgba(3,19,38,.74),transparent 58%),
    url("../images/asistente/magnus-banner-playa-avion.jpg") center 48%/cover no-repeat;
}
.head::after {
  content:""; position:absolute; right:0; bottom:0; left:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(53,161,215,.48),transparent);
}
.head h1 {
  position:relative; z-index:1; display:flex; align-items:center; gap:18px;
  margin:0; color:#fff; font:900 clamp(1.55rem,3vw,2.45rem)/1.1 Nunito,sans-serif;
  letter-spacing:-.035em;
}
.head h1 img {
  display:block; width:74px; height:74px; flex:0 0 74px; object-fit:contain;
  border-radius:50%; filter:drop-shadow(0 3px 12px rgba(0,0,0,.42));
}
.head p {
  position:relative; z-index:1; max-width:590px;
  margin:7px 0 12px 92px; color:#d4e4f5;
  font-size:clamp(.86rem,1.35vw,1.08rem); line-height:1.35;
}
.bar {
  position:relative; z-index:1; width:min(42%,510px); height:9px;
  margin-left:92px; overflow:hidden; background:rgba(180,212,239,.2); border-radius:99px;
}
.bar i {
  display:block; width:0; height:100%;
  background:linear-gradient(90deg,#0877e8 0%,#12d9ed 34%,#b5ed75 62%,#ffdc32 82%,#ff9c19 100%);
  border-radius:inherit; transition:width .35s ease;
}
.head-slogan {
  position:absolute; z-index:1; top:38px; right:36px; display:flex; flex-direction:column;
  align-items:center; gap:3px; color:#fff; text-shadow:0 2px 12px #001; pointer-events:none;
}
.head-slogan span { font:italic 400 clamp(2.1rem,4vw,3.8rem)/.95 "Brush Script MT","Segoe Script",cursive; }
.head-slogan small { font-size:.72rem; font-weight:900; letter-spacing:.38em; }

/* Conversación: una única superficie continua con la cabecera. */
.msgs {
  display:flex; flex:1 1 0; flex-direction:column; gap:13px;
  min-width:0; min-height:0; padding:15px 28px 8px;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(80,145,190,.48) transparent;
  background:transparent;
}
.msgs::-webkit-scrollbar { width:5px; }
.msgs::-webkit-scrollbar-track { background:transparent; }
.msgs::-webkit-scrollbar-thumb { background:rgba(80,145,190,.48); border-radius:99px; }
.m {
  max-width:min(94%,900px); padding:12px 19px; overflow-wrap:anywhere;
  color:#f4f8ff; font-size:clamp(.9rem,1.3vw,1.12rem); line-height:1.45; white-space:pre-wrap;
  background:linear-gradient(110deg,rgba(8,43,76,.94),rgba(7,34,62,.92));
  border:1px solid rgba(78,153,207,.34); border-radius:22px;
}
.m.bot { align-self:flex-start; border-bottom-left-radius:7px; }
.m.me {
  align-self:flex-end; color:#eaffff; background:rgba(5,76,91,.85);
  border-color:rgba(18,217,237,.42); border-bottom-right-radius:7px;
}
.dots span {
  display:inline-block; width:7px; height:7px; margin-right:4px;
  background:var(--mt-cyan); border-radius:50%; animation:mt-bounce 1s infinite;
}
.dots span:nth-child(2) { animation-delay:.15s; }
.dots span:nth-child(3) { animation-delay:.3s; }
@keyframes mt-bounce {
  0%,60%,100% { opacity:.3; transform:translateY(0); }
  30% { opacity:1; transform:translateY(-3px); }
}

/* Tres tarjetas en escritorio. En móvil se convierten en carrusel táctil. */
.cards {
  display:flex; flex:0 0 auto; flex-flow:row nowrap; align-items:stretch; align-self:stretch;
  gap:18px; width:100%; max-width:100%; padding:2px 1px 9px;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  scrollbar-color:rgba(77,143,190,.48) transparent;
}
.cards::-webkit-scrollbar { height:5px; }
.cards::-webkit-scrollbar-thumb { background:rgba(77,143,190,.48); border-radius:99px; }
.cards .card {
  display:flex; flex:0 0 calc((100% - 36px)/3); flex-direction:column;
  min-width:0; max-width:calc((100% - 36px)/3); align-self:stretch; overflow:hidden;
  color:var(--mt-text); background:linear-gradient(160deg,#061d35,#03172c 80%);
  border:1px solid rgba(72,150,204,.55); border-radius:21px;
  box-shadow:0 12px 30px rgba(0,0,0,.2); scroll-snap-align:start;
  transition:border-color .2s ease,transform .2s ease;
}
.cards .card:hover { border-color:rgba(18,217,237,.8); transform:translateY(-2px); }
.card-hero {
  position:relative; height:clamp(145px,20vh,190px); min-height:135px;
  overflow:hidden; isolation:isolate; background:linear-gradient(135deg,#17415a,#172a48 60%,#80602b);
}
.card-image {
  position:absolute; z-index:-2; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; object-position:center; transition:transform .45s ease;
}
.card:hover .card-image { transform:scale(1.04); }
.card-hero.no-image { background:linear-gradient(135deg,#102b43,#18213c 55%,#5e4926); }
.photo-shade {
  position:absolute; z-index:-1; inset:0;
  background:linear-gradient(180deg,rgba(2,13,25,.04) 0%,rgba(2,13,25,.08) 40%,rgba(2,13,25,.91) 100%);
}
.duration-badge {
  position:absolute; top:13px; left:13px; display:inline-flex; align-items:center;
  max-width:calc(100% - 26px); padding:7px 12px; color:#fff; font-size:.78rem;
  font-weight:900; line-height:1.15; background:rgba(3,24,46,.94);
  border:1px solid rgba(124,239,255,.3); border-radius:99px;
}
.hero-title {
  position:absolute; right:15px; bottom:41px; left:15px; margin:0; color:#fff;
  font:900 clamp(1.2rem,1.8vw,1.65rem)/1.1 Nunito,sans-serif; overflow-wrap:anywhere;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.hero-subtitle {
  position:absolute; right:15px; bottom:13px; left:15px; margin:0; overflow:hidden;
  color:#e5effb; font-size:.86rem; line-height:1.25; text-overflow:ellipsis;
  white-space:nowrap; text-shadow:0 1px 8px #000;
}
.card-body { display:flex; flex:1 0 auto; flex-direction:column; gap:8px; padding:13px 14px 14px; }
.offer-tag {
  display:inline-flex; align-self:flex-start; max-width:100%; padding:6px 10px;
  color:#182033; font-size:.76rem; font-weight:900; line-height:1.25;
  background:linear-gradient(100deg,#ffda69,var(--mt-gold)); border-radius:8px;
}
.includes-label { margin:1px 0 0; color:#b5cee8; font-size:.73rem; font-weight:900; letter-spacing:.06em; }
.feature-list { display:flex; flex-wrap:wrap; gap:6px; }
.feature-chip {
  display:inline-flex; align-items:center; max-width:100%; padding:6px 8px; overflow-wrap:anywhere;
  color:#edf6ff; font-size:.71rem; line-height:1.2; background:rgba(8,39,69,.9);
  border:1px solid rgba(102,164,208,.38); border-radius:11px;
}
.card-price-row { margin-top:auto; padding-top:9px; border-top:1px solid rgba(111,160,198,.35); }
.price-block { display:flex; flex-direction:column; gap:2px; }
.price-caption { color:#b8cde3; font-size:.78rem; font-weight:900; letter-spacing:.06em; }
.price-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.price-value {
  color:var(--mt-cyan); font-size:clamp(1.45rem,2vw,1.95rem);
  font-weight:1000; line-height:1.1; letter-spacing:-.045em;
}
.price-currency { color:#e4edf8; font-size:.78rem; font-weight:900; }
.price-note { margin-top:2px; color:#c1d1e3; font-size:.75rem; line-height:1.25; }
.cards .card .pick {
  display:block; flex:0 0 auto; width:100%; min-height:48px; margin-top:7px; padding:10px;
  color:#111c2e; font-size:.88rem; font-weight:1000; text-align:center; cursor:pointer;
  background:linear-gradient(105deg,#ffd02e,#ffb91c); border:0; border-radius:13px;
  box-shadow:0 7px 18px rgba(255,195,41,.16); transition:filter .18s ease,transform .18s ease;
}
.cards .card .pick:hover { filter:brightness(1.07); transform:translateY(-1px); }
.cards .card .pick:active { transform:translateY(0); }

/* Acciones del flujo: siempre debajo de la conversación y encima del compositor. */
.ctl {
  display:flex; flex:0 0 auto; flex-wrap:wrap; align-content:center; align-items:center;
  gap:9px; min-height:0; max-height:112px; padding:5px 28px 10px;
  overflow-x:hidden; overflow-y:auto; background:transparent; border:0; box-shadow:none;
}
.ctl button,.ctl a {
  padding:9px 16px; color:#16e3f2; font-size:.86rem; font-weight:900; text-align:center;
  text-decoration:none; cursor:pointer; background:rgba(3,26,48,.72);
  border:1.5px solid rgba(18,216,237,.9); border-radius:999px;
  transition:background .18s ease,color .18s ease;
}
.ctl button:hover { color:#fff; background:rgba(18,65,87,.95); }
.ctl .cta {
  display:inline-flex; flex:1 1 100%; align-items:center; justify-content:center; min-height:46px;
  padding:10px 16px; color:#172033; font-weight:900;
  background:linear-gradient(100deg,#ffd34e,#ffb91e); border-color:var(--mt-gold);
}
.ctl form {
  display:flex; flex:1 1 100%; flex-direction:row; flex-wrap:nowrap;
  align-items:stretch; gap:9px; width:100%; min-width:0; margin:0;
}
.ctl input {
  display:block; flex:1 1 0; width:0; min-width:0; padding:11px 14px; color:var(--mt-text);
  background:rgba(7,31,55,.96); border:1px solid rgba(104,163,208,.5);
  border-radius:12px; outline:none;
}
.ctl input::placeholder { color:#9bb2cc; }
.ctl input:focus { border-color:var(--mt-cyan); box-shadow:0 0 0 3px rgba(32,216,244,.1); }
.ctl form button { flex:0 0 auto; min-width:88px; white-space:nowrap; }
.ctl .err { width:100%; margin:0; color:#ffaaaa; font-size:.82rem; }

/* Compositor permanente: integrado al mismo fondo, sin banda independiente. */
.composer {
  display:flex; flex:0 0 auto; align-items:center; gap:12px;
  padding:8px 28px max(17px,env(safe-area-inset-bottom)); background:transparent;
}
.composer-field {
  display:flex; flex:1 1 auto; align-items:center; min-width:0; min-height:58px;
  padding:0 21px; background:rgba(7,32,58,.9);
  border:1px solid rgba(83,150,203,.48); border-radius:999px;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.13);
}
.composer-field input {
  width:100%; min-width:0; padding:11px 0; color:#fff;
  background:transparent; border:0; outline:0; font-size:.98rem;
}
.composer-field input::placeholder { color:#9fb2c9; }
.composer-send {
  display:inline-flex; flex:0 0 58px; align-items:center; justify-content:center;
  width:58px; height:58px; padding:0; color:#03213a; background:#12d9ed;
  border:0; border-radius:50%; cursor:pointer;
  box-shadow:0 6px 20px rgba(18,217,237,.18); transition:transform .18s,filter .18s;
}
.composer-send:hover { transform:translateY(-2px); filter:brightness(1.08); }
.composer-send svg { width:25px; height:25px; }
.ctl button:focus-visible,.ctl a:focus-visible,.cards .card .pick:focus-visible,
.composer-send:focus-visible,.composer-field input:focus-visible {
  outline:2px solid var(--mt-cyan); outline-offset:3px;
}

/* Tabletas: conservamos tres columnas mientras el espacio lo permita. */
@media (max-width:900px) {
  .head { min-height:150px; padding:19px 22px 15px; }
  .head h1 img { width:60px; height:60px; flex-basis:60px; }
  .head p,.bar { margin-left:78px; }
  .cards { gap:12px; }
  .cards .card { flex-basis:calc((100% - 24px)/3); max-width:calc((100% - 24px)/3); }
  .msgs { padding-right:18px; padding-left:18px; }
  .ctl,.composer { padding-right:18px; padding-left:18px; }
}
@media (max-width:650px) {
  .head { min-height:125px; padding:14px 14px 12px; }
  .head h1 { gap:10px; font-size:1.2rem; }
  .head h1 img { width:43px; height:43px; flex-basis:43px; }
  .head p { margin:5px 0 8px 53px; max-width:78%; font-size:.73rem; }
  .bar { width:54%; height:5px; margin-left:53px; }
  .head-slogan { top:23px; right:12px; }
  .head-slogan span { font-size:1.65rem; }
  .head-slogan small { font-size:.44rem; letter-spacing:.22em; }
  .msgs { gap:9px; padding:10px 11px 6px; }
  .m { max-width:97%; padding:9px 12px; font-size:.84rem; }
  .cards { gap:11px; padding-bottom:7px; }
  .cards .card { flex-basis:88%; min-width:88%; max-width:88%; border-radius:17px; }
  .card-hero { height:155px; min-height:155px; }
  .hero-title { font-size:1.35rem; }
  .card-body { gap:6px; padding:11px; }
  .feature-chip { padding:5px 7px; font-size:.68rem; }
  .price-value { font-size:1.55rem; }
  .cards .card .pick { min-height:44px; font-size:.82rem; }
  .ctl { gap:6px; max-height:100px; padding:4px 11px 7px; }
  .ctl button,.ctl a { padding:8px 10px; font-size:.73rem; }
  .ctl form { gap:7px; }
  .ctl form button { min-width:72px; }
  .composer { gap:8px; padding:6px 11px max(10px,env(safe-area-inset-bottom)); }
  .composer-field { min-height:48px; padding:0 15px; }
  .composer-field input { font-size:.85rem; }
  .composer-send { flex-basis:48px; width:48px; height:48px; }
}
@media (max-height:720px) and (min-width:651px) {
  .head { min-height:137px; padding-top:14px; padding-bottom:11px; }
  .head h1 img { width:56px; height:56px; flex-basis:56px; }
  .head p { margin-top:4px; margin-bottom:8px; }
  .card-hero { height:135px; min-height:135px; }
  .card-body { gap:5px; padding:9px 11px; }
  .feature-chip { padding:5px 6px; font-size:.66rem; }
  .cards .card .pick { min-height:41px; }
  .composer-field,.composer-send { min-height:48px; height:48px; }
  .composer-send { flex-basis:48px; width:48px; }
}
@media (max-height:600px) {
  .head { min-height:105px; padding-top:8px; padding-bottom:7px; }
  .head h1 img { width:40px; height:40px; flex-basis:40px; }
  .head p { margin-top:2px; margin-bottom:5px; }
  .bar { height:5px; }
  .card-hero { height:105px; min-height:105px; }
  .composer { padding-top:4px; padding-bottom:7px; }
  .composer-field,.composer-send { min-height:42px; height:42px; }
  .composer-send { flex-basis:42px; width:42px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}


/* Ajuste puntual: el campo dinámico de nombre/WhatsApp conserva espacio útil. */
.ctl form { flex-wrap:nowrap; align-items:center; }
.ctl form input { flex:1 1 0%; width:auto; min-width:0; }
.ctl form button.cta { flex:0 0 auto; min-width:104px; min-height:44px; white-space:nowrap; }
@media (max-width:650px) {
  .ctl form button.cta { min-width:82px; min-height:40px; padding:8px 10px; }
}