/* Plan: una sola columna que alterna bandas crema y navy, como el brochure;
   cada beneficio lleva su propio dibujo (chat, canales, calendario, botón) y el video abre la página. */
:root{
  --navy:#12263A; --navy-2:#1C3550; --navy-3:#0B1826;
  --orange:#E8873A; --orange-ink:#8A4410; --orange-soft:#FFE4C7;
  --cream:#F6F1E7; --paper:#FFFDF8; --sand:#EFE9DC; --line:#DDD3BF;
  --teal:#2E8B8B; --teal-ink:#1D6464; --teal-soft:#DCEDE9;
  --ink:#12263A; --ink-2:#3A4A58; --on-navy:#F6F1E7; --on-navy-2:#C9D3DC;
  --display:'Oswald','Arial Narrow',Impact,sans-serif;
  --body:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

/* Contenedor con canaleta lateral fija */
.wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}
.band{padding-block:64px}
.band.navy{background:var(--navy);color:var(--on-navy)}
.band.paper{background:var(--paper)}
.stack{display:flex;flex-direction:column;gap:20px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.split > *{min-width:0}
.split.wide-right{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}

/* Tipografía */
.eyebrow{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink)}
.navy .eyebrow{color:var(--orange)}
h1{font-family:var(--display);font-weight:600;font-size:clamp(44px,7vw,84px);line-height:1.04;text-wrap:balance}
h2{font-family:var(--display);font-weight:600;font-size:clamp(32px,4.4vw,48px);line-height:1.1;text-wrap:balance}
h3{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.15}
.hl{color:var(--orange)}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.5;max-width:34em}
.navy .lede,.navy .muted{color:var(--on-navy-2)}
.muted{color:var(--ink-2)}
.small{font-size:14.5px}

/* Encabezado */
.top{background:var(--cream);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.top img{display:block;width:164px;height:48px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:12px;border:0;background:var(--orange);color:var(--navy);font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.02em;text-decoration:none;cursor:pointer}
.btn:hover{background:#F09A52}
.btn.ghost{background:transparent;color:inherit;border:2px solid currentColor}
.btn.ghost:hover{background:rgba(246,241,231,.1)}
.btn.sm{min-height:44px;padding:8px 18px;font-size:17px}

/* Portada */
.hero{padding-block:56px 64px}
.hero .split{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.phone{justify-self:center;width:min(100%,330px);background:var(--navy-3);border-radius:38px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.phone video{display:block;width:100%;aspect-ratio:9/16;border-radius:30px;background:var(--navy)}
figcaption{margin-top:12px;text-align:center}

/* Tres problemas */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.three > li{border-top:3px solid var(--navy);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.navy .three > li{border-color:var(--orange)}

/* Lista con palomita */
.checks{display:flex;flex-direction:column;gap:12px}
.checks li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start}
.checks svg{width:26px;height:26px;margin-top:1px}

/* Conversación de ejemplo */
.chat{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;color:var(--ink);box-shadow:0 14px 36px rgba(18,38,58,.12)}
.chat header{background:var(--teal-ink);color:var(--cream);padding:14px 20px;display:flex;justify-content:space-between;font-weight:700}
.chat header span{font-weight:400}
.chat .msgs{padding:18px 16px 20px;display:flex;flex-direction:column;gap:12px}
.b{max-width:86%;padding:11px 15px;border-radius:16px;line-height:1.4}
.b.g{align-self:flex-start;background:#fff;border:1px solid var(--line)}
.b.h{align-self:flex-end;background:var(--teal-soft)}
.quote{margin-top:8px;background:#fff;border-radius:10px;padding:8px 12px;display:flex;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums}
.aviso{background:var(--orange-soft);border:2px solid var(--orange);border-radius:14px;padding:12px 15px;line-height:1.4}
.aviso strong{display:block;font-family:var(--display);font-weight:600;letter-spacing:.14em;font-size:14px;color:var(--orange-ink)}
.caption{text-align:center;margin-top:10px}

/* Canales: hotel, channel manager y mercados */
.flow{display:grid;grid-template-columns:auto auto auto auto minmax(0,1fr);gap:18px;align-items:center}
.node{background:var(--cream);color:var(--navy);border-radius:14px;padding:18px 24px;font-family:var(--display);font-weight:600;font-size:24px;text-align:center}
.hub{width:176px;height:176px;border-radius:50%;background:var(--orange);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.05}
.hub span{font-family:var(--body);font-weight:700;font-size:13.5px;margin-top:6px}
.arrow{width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:20px solid var(--teal)}
.markets{display:flex;flex-direction:column;gap:14px;min-width:0}
.panel{border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.panel.old{background:var(--cream);color:var(--navy)}
.panel.new{background:var(--navy-2);border:1px solid rgba(246,241,231,.18)}
.tag{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.panel.old .tag{color:var(--teal-ink)}
.panel.new .tag{color:var(--orange)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border-radius:999px;padding:8px 16px;font-weight:700;white-space:nowrap}
.panel.old .chip{background:var(--sand)}
.panel.new .chip{background:var(--orange);color:var(--navy)}
.panel.new .chip.more{background:transparent;color:var(--on-navy);border:1.5px dashed rgba(246,241,231,.5)}

/* Calendario */
.scroll{overflow-x:auto}
table.cal{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;font-variant-numeric:tabular-nums}
.cal th,.cal td{padding:12px 10px;border-top:1px solid #E8E1D2;border-left:1px solid #E8E1D2;text-align:center;white-space:nowrap}
.cal thead th{border-top:0}
.cal th:first-child{border-left:0;text-align:left;padding-left:16px}
.cal thead th{font-weight:700;color:var(--ink-2);font-size:13.5px;line-height:1.2}
.cal thead th b{display:block;font-size:17px;color:var(--ink)}
.cal .free{color:#6B7885;font-size:14.5px}
.pill{display:inline-flex;align-items:center;gap:6px;background:#E3EFEC;border-radius:999px;padding:3px 10px 3px 3px;font-weight:600;font-size:14.5px}
.pill.d{background:var(--orange-soft)}
.dot{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex:none}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-weight:600;font-size:14.5px}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* Motor de reservas */
.book{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:6px;box-shadow:0 14px 36px rgba(18,38,58,.1)}
.book .row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid #E8E1D2;font-size:18px;font-variant-numeric:tabular-nums}
.book .fake{margin-top:8px;border-radius:12px;background:var(--orange);color:var(--navy);text-align:center;padding:14px;font-family:var(--display);font-weight:600;font-size:24px}
.direct{margin-top:14px;background:var(--navy);color:var(--on-navy);border-radius:16px;padding:16px 20px;display:flex;align-items:center;gap:14px}
.direct svg{width:40px;height:40px;flex:none}
.direct b{display:block;font-family:var(--display);font-weight:600;font-size:24px;color:var(--orange);line-height:1.1}

/* Módulos */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.mod{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px}
.mod.alt{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.mod ul{display:flex;flex-direction:column;gap:8px}
.mod li{padding-left:18px;position:relative}
.mod li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.mod.alt li::before{background:var(--orange)}

/* Arranque: cinco hitos */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.steps li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.steps li.on{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.steps .day{font-weight:700;color:var(--teal-ink)}
.steps li.on .day{color:var(--orange)}
.steps li.on .muted{color:var(--on-navy-2)}

/* Preguntas */
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 20px}
summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-family:var(--display);font-size:24px;line-height:1;color:var(--teal-ink)}
details[open] summary::after{content:'−'}
details p{padding:0 0 18px;max-width:62ch;color:var(--ink-2)}

/* Contacto */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}
.card{background:var(--cream);color:var(--navy);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:10px}
.card .name{font-family:var(--display);font-weight:600;font-size:34px;line-height:1.1}
.card .num{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;user-select:all}
.card .cta-row{margin-top:8px}
.card .btn.ghost{border-color:var(--navy)}
.card .btn.ghost:hover{background:rgba(18,38,58,.06)}
.foot{border-top:1px solid rgba(246,241,231,.2);margin-top:48px;padding-top:24px;display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:flex-end}
.plate{background:var(--cream);border-radius:12px;padding:10px 16px;display:inline-block;align-self:flex-start}
.plate img{display:block;width:164px;height:48px}

/* Pantallas angostas: todo a una columna */
@media (max-width:860px){
  .band{padding-block:48px}
  .split,.hero .split,.split.wide-right,.contact{grid-template-columns:minmax(0,1fr);gap:32px}
  .three,.two{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:minmax(0,1fr);justify-items:center}
  .flow .arrow{transform:rotate(90deg)}
  .markets{width:100%}
  .top .btn{display:none}
}
@media (max-width:460px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .cta-row .btn{width:100%}
}

/* Navegación del encabezado */
.nav{display:flex;align-items:center;gap:18px}
.navlink{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.02em;text-decoration:none;color:var(--teal-ink);padding:8px 4px;border-bottom:2px solid transparent}
.navlink:hover{border-bottom-color:var(--teal-ink)}
@media (max-width:860px){.top .nav .btn{display:none}}

/* ---------- Demo en vivo ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.demo-intro{padding-block:40px}
.h1-demo{font-size:clamp(36px,5.4vw,60px)}
.demo-band{padding-block:36px 56px}
.demo-grid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:28px;align-items:start}
.pane-wide{grid-column:1 / -1}
.pane{min-width:0}
.pane-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.step{flex:none;width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--cream);font-family:var(--display);font-weight:600;font-size:20px;display:flex;align-items:center;justify-content:center}
.h-pane{font-size:26px}

/* Conversación tipo WhatsApp */
.wa{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 14px 36px rgba(18,38,58,.12);display:flex;flex-direction:column}
.wa-top{background:var(--teal-ink);color:var(--cream);padding:12px 16px;display:flex;align-items:center;gap:12px}
.wa-top b{display:block;font-size:17px;line-height:1.2}
.wa-top span{font-size:13.5px;opacity:.85}
.wa-av{width:40px;height:40px;border-radius:50%;background:var(--cream);color:var(--teal-ink);font-family:var(--display);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;opacity:1}
.wa-msgs{height:440px;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--sand)}
.m{overflow-wrap:anywhere;max-width:86%;padding:9px 13px 6px;border-radius:14px;line-height:1.4;font-size:16px;display:flex;flex-direction:column;gap:2px}
.m .hr{align-self:flex-end;font-size:11.5px;color:#55616C;font-variant-numeric:tabular-nums}
.m.asst{align-self:flex-start;background:#fff;border:1px solid var(--line)}
.m.me{align-self:flex-end;background:var(--teal-soft)}
.m.per{align-self:flex-start;background:var(--orange-soft);border:1.5px solid var(--orange)}
.m .who{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-ink)}
.m.sys{align-self:center;max-width:94%;background:#E4DCCB;color:var(--ink-2);font-size:13.5px;text-align:center;border-radius:10px;padding:7px 12px;display:block}
.m.typing{color:#55616C;font-style:italic}
.m.card{width:86%;gap:6px}
.qrow{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums;font-size:15px}
.qrow.total{border-top:1px solid var(--line);padding-top:6px;font-size:16px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--teal-ink);text-decoration:underline;cursor:pointer}
.wa-chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px 0;background:var(--paper);min-height:10px}
.qchip{border:1.5px solid var(--teal);background:#fff;color:var(--teal-ink);border-radius:999px;padding:7px 14px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.qchip:hover{background:var(--teal-soft)}
.wa-form{display:flex;gap:10px;padding:12px;background:var(--paper)}
.wa-form input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:999px;padding:11px 16px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.wa-send{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--teal-ink);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wa-send svg{width:22px;height:22px}

/* Avisos al equipo */
.empty{background:var(--paper);border:1.5px dashed var(--line);border-radius:14px;padding:16px 18px;color:var(--ink-2);font-size:15.5px}
.avisos{display:flex;flex-direction:column;gap:12px}
.av{background:var(--orange-soft);border:2px solid var(--orange);border-radius:14px;padding:14px 16px 10px;display:flex;flex-direction:column;gap:6px}
.av strong{font-family:var(--display);font-weight:600;letter-spacing:.14em;font-size:14px;color:var(--orange-ink)}
.av p{line-height:1.4}
.av-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.av .btn.ghost{border-color:var(--navy);color:var(--navy)}
.av .btn.ghost:hover{background:rgba(18,38,58,.06)}
.av-done{font-weight:700;color:var(--teal-ink)}
.av .hr{align-self:flex-end;font-size:11.5px;color:#55616C}

/* Calendario de la demo */
.cal-demo{min-width:640px}
.cal-demo th,.cal-demo td{padding:9px 6px}
.cal-demo .pill{font-size:13.5px;padding:2px 8px 2px 2px}
.cal-demo .dot{width:22px;height:22px;font-size:12px}
.pill.nueva{outline:3px solid var(--orange);outline-offset:1px}
.toast{margin-top:12px;background:var(--navy);color:var(--on-navy);border-left:6px solid var(--orange);border-radius:10px;padding:10px 14px;font-size:15px}
.pane .btn.ghost{border-color:var(--navy);color:var(--navy)}
.pane .btn.ghost:hover{background:rgba(18,38,58,.06)}
.demo-foot{margin-top:28px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.demo-foot p{flex:1;min-width:260px;max-width:70ch}
.demo-foot .btn.ghost{border-color:var(--navy);color:var(--navy)}

/* Pestañas: solo en pantallas angostas */
.tabs{display:none}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--orange);color:var(--navy);font-size:12.5px;font-weight:700;margin-left:4px}
@media (max-width:980px){
  .demo-grid{grid-template-columns:minmax(0,1fr)}
  .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--sand);border-radius:14px;padding:5px;margin-bottom:18px;position:sticky;top:6px;z-index:5}
  .tabs button{border:0;background:transparent;border-radius:10px;padding:10px 4px;font:inherit;font-weight:700;font-size:15px;color:var(--ink-2);cursor:pointer}
  .tabs button[aria-selected="true"]{background:var(--navy);color:var(--cream)}
  .pane{display:none}
  .pane.is-active{display:block}
  .wa-msgs{height:min(52vh,430px)}
  .demo-intro{padding-block:26px}
  .demo-intro .lede{font-size:16.5px}
  .demo-band{padding-block:22px 44px}
}