/* ═══════════════════════════════════════════════════════════════════════════
   Chat con agenda — Nexa Leads
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --brand:      #B4643C;
  --brand-soft: #F6E9E1;
  --ink:        #2A1D16;

  --bg:      #0B0C0E;
  --bg-2:    #14161A;
  --line:    rgba(255,255,255,.09);
  --text:    #ECE9E4;
  --muted:   #9A9691;

  --chat-bg:   #EDE7DF;
  --bubble:    #FFFFFF;
  --bubble-ink:#111418;
  --grey:      #6E7379;

  --r: 20px;
  --ease: cubic-bezier(.22,.75,.25,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:
    radial-gradient(1100px 700px at 12% -10%, #1B1E24 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #16181D 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}

/* ── Escenario ─────────────────────────────────────────────────────────── */
.stage{
  display:grid;
  grid-template-columns: minmax(420px, 1fr) auto;
  gap:clamp(32px, 6vw, 96px);
  align-items:center;
  max-width:1340px;
  margin:0 auto;
  padding:clamp(32px, 5vh, 72px) clamp(24px, 4vw, 64px);
  min-height:100dvh;
}

/* ── Panel de presentación ─────────────────────────────────────────────── */
.pitch-in{ max-width:560px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
  padding:7px 14px 7px 11px;
  border:1px solid var(--line); border-radius:99px;
  background:rgba(255,255,255,.03);
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:#4ADE80;
  box-shadow:0 0 0 3px rgba(74,222,128,.16);
}

.pitch h1{
  font-family:'Instrument Serif', Georgia, serif;
  font-weight:400;
  font-size:clamp(38px, 4.4vw, 60px);
  line-height:1.04;
  letter-spacing:-.015em;
  margin:24px 0 0;
  color:#fff;
}
.pitch h1 em{ font-style:italic; color:var(--brand); transition:color .4s var(--ease); }

.lede{
  font-size:16.5px; line-height:1.62; color:#B9B5AF;
  margin:20px 0 0; max-width:47ch;
}

.gains{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.gains li{
  background:rgba(255,255,255,.022);
  padding:14px 18px;
  font-size:14.5px; line-height:1.5; color:#A8A49F;
}
.gains li b{ color:#F0EDE9; font-weight:600; }

/* Selector de marca */
.switcher{ margin-top:32px; }
.switcher-label{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6E6A66;
}
.brands{ display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.brand-btn{
  display:flex; align-items:center; gap:9px;
  padding:9px 15px 9px 10px;
  border-radius:11px; cursor:pointer;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:#B9B5AF; font:inherit; font-size:13.5px; font-weight:500;
  transition:.22s var(--ease);
}
.brand-btn:hover{ background:rgba(255,255,255,.07); color:#fff; }
.brand-btn .swatch{ width:16px; height:16px; border-radius:5px; flex:none; }
.brand-btn[aria-pressed="true"]{
  background:#fff; color:#14161A; border-color:#fff; font-weight:600;
}
.switcher-note{ font-size:12.5px; color:#6E6A66; margin:11px 0 0; line-height:1.5; max-width:44ch; }

.pitch-actions{ display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; }
.btn-ghost{
  padding:11px 17px; border-radius:10px; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:#C9C5C0;
  font:inherit; font-size:13.5px; font-weight:500; transition:.2s var(--ease);
}
.btn-ghost:hover{ border-color:rgba(255,255,255,.3); color:#fff; background:rgba(255,255,255,.04); }

.disclaimer{ font-size:11.5px; color:#5A5651; margin:26px 0 0; line-height:1.6; max-width:46ch; }

/* ── El móvil ──────────────────────────────────────────────────────────── */
.phone-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; }

.phone{
  width:clamp(390px, 30vw, 440px); height:min(880px, calc(100dvh - 68px));
  min-height:560px;
  background:#08090B;
  border-radius:52px;
  padding:11px;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.11),
    0 2px 3px rgba(255,255,255,.12) inset,
    0 50px 90px -30px rgba(0,0,0,.9),
    0 22px 44px -22px rgba(0,0,0,.7);
  flex:none;
}
.phone-screen{
  position:relative;
  width:100%; height:100%;
  border-radius:42px;
  overflow:hidden;
  background:var(--chat-bg);
  display:flex; flex-direction:column;
  isolation:isolate;
}
.phone-note{ font-size:12.5px; color:#5A5651; margin:0; }

/* ── Cabecera del chat ─────────────────────────────────────────────────── */
.chat-head{
  position:relative; z-index:3; flex:none;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.07);
  padding-top:env(safe-area-inset-top);
}
.progress{ height:2.5px; background:rgba(0,0,0,.06); }
.progress i{
  display:block; height:100%; width:0;
  background:var(--brand);
  border-radius:0 3px 3px 0;
  transition:width .55s var(--ease), background .4s var(--ease);
}
.head-row{ display:flex; align-items:center; gap:11px; padding:11px 15px 11px 8px; }

.head-back{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  background:none; border:0; padding:0; cursor:pointer;
  color:#8A8F95; border-radius:50%;
  opacity:0; pointer-events:none; transition:.2s var(--ease);
}
.head-back svg{ width:19px; height:19px; }
.head-back.on{ opacity:1; pointer-events:auto; }
.head-back:hover{ background:rgba(0,0,0,.05); color:#111; }

.head-avatar{
  width:41px; height:41px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand);
  color:#fff; font-size:14px; font-weight:700; letter-spacing:.03em;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:background .4s var(--ease);
}
.head-id{ min-width:0; flex:1; }
.head-id strong{ display:block; font-size:15.5px; font-weight:600; color:#0E1114; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.head-sub{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:#7C8288; margin-top:1px; }
.head-sub .live{ width:6px; height:6px; border-radius:50%; background:#2ECC71; flex:none;
  box-shadow:0 0 0 2.5px rgba(46,204,113,.18); }
.head-call{ color:#9AA0A6; flex:none; }
.head-call svg{ width:21px; height:21px; display:block; }

/* ── Cuerpo del chat ───────────────────────────────────────────────────── */
.chat-body{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:14px 13px 8px;
  display:flex; flex-direction:column; gap:3px;
  scroll-behavior:smooth;
  /* La conversación se pega a la zona de respuestas: con pocos mensajes el
     hueco queda ARRIBA y no entre la pregunta y los botones, que era lo que
     obligaba a bajar la vista para contestar. El margen automático del
     pseudo-elemento hace de empujador sin romper el scroll cuando el hilo
     crece (justify-content:flex-end sí lo rompería). */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.5) 0%, transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.chat-body::before{ content:''; margin-top:auto; }
.chat-body::-webkit-scrollbar{ width:0; }

.daysep{ display:flex; justify-content:center; margin:2px 0 10px; }
.daysep span{
  font-size:10.5px; font-weight:600; letter-spacing:.08em; color:#7B8085;
  background:rgba(255,255,255,.75); padding:4px 11px; border-radius:8px;
  box-shadow:0 1px 1px rgba(0,0,0,.05);
}

/* Burbujas */
.row{ display:flex; align-items:flex-end; gap:7px; margin-top:3px;
  animation:pop .3s var(--ease) both; }
.row.me{ justify-content:flex-end; }
.row.tight{ margin-top:1px; }
@keyframes pop{ from{ opacity:0; transform:translateY(9px) scale(.985); } }

.bub{
  max-width:82%;
  background:var(--bubble);
  color:var(--bubble-ink);
  padding:8px 11px 7px;
  border-radius:16px 16px 16px 5px;
  font-size:15.6px; line-height:1.5; letter-spacing:-.005em;
  box-shadow:0 1px 1.5px rgba(0,0,0,.09);
  position:relative;
  word-wrap:break-word;
}
.bub b{ font-weight:650; }
.row.me .bub{
  background:var(--brand-soft);
  border-radius:16px 16px 5px 16px;
  transition:background .4s var(--ease);
}

.meta{ display:block; text-align:right; font-size:10.5px; color:#8C9197; margin-top:2px;
  line-height:1; user-select:none; }
.meta .tick{ display:inline-block; margin-left:3px; color:#4FADE0; font-size:11px; vertical-align:-.5px; }

/* Escribiendo… */
.typing{ display:inline-flex; gap:4px; align-items:center; padding:3px 2px; }
.typing i{ width:6.5px; height:6.5px; border-radius:50%; background:#B4B9BE; animation:bl 1.25s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes bl{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* ── Tarjetas dentro del chat ──────────────────────────────────────────── */
.card{
  max-width:88%;
  background:var(--bubble);
  border-radius:16px 16px 16px 5px;
  box-shadow:0 1px 1.5px rgba(0,0,0,.09);
  overflow:hidden;
}

/* Testimonio con foto antes / después */
.tst-imgs{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#fff; position:relative; }
.tst-imgs figure{ margin:0; position:relative; aspect-ratio:1; overflow:hidden; background:#E9E5E0; }
.tst-imgs img{ width:100%; height:100%; object-fit:cover; display:block; }
.tst-imgs figcaption{
  position:absolute; left:7px; bottom:7px;
  font-size:9.5px; font-weight:700; letter-spacing:.09em; color:#fff;
  background:rgba(17,20,24,.62); backdrop-filter:blur(6px);
  padding:3.5px 8px; border-radius:6px;
}
.tst-imgs figure.after figcaption{ background:var(--brand); }
.tst-body{ padding:11px 12px 10px; }
.tst-top{ display:flex; align-items:center; gap:7px; }
.tst-name{ font-size:13.5px; font-weight:650; color:#111418; }
.tst-age{ font-size:12px; color:#8C9197; }
.tst-meta{
  margin-left:auto; font-size:10px; font-weight:650; letter-spacing:.02em;
  color:var(--brand); background:var(--brand-soft);
  padding:3.5px 8px; border-radius:6px; white-space:nowrap;
  transition:.4s var(--ease);
}
.tst-text{ font-size:13.6px; line-height:1.48; color:#3D4349; margin:7px 0 0; font-style:italic; }
.tst-foot{ display:flex; align-items:center; gap:6px; margin-top:9px; flex-wrap:wrap; }
.stars{ color:#F0A431; font-size:11.5px; letter-spacing:1px; }
.tst-tag{ font-size:9.5px; color:#A4A9AE; margin-left:auto; line-height:1.3; white-space:nowrap; }

/* Testimonio en formato reseña, con el dato grande */
.res{ display:flex; gap:12px; padding:13px 13px 12px; align-items:center; }
.res-num{ flex:none; text-align:center; padding-right:12px; border-right:1px solid rgba(0,0,0,.08); }
.res-num b{ display:block; font-family:'Instrument Serif', Georgia, serif; font-size:29px;
  line-height:1; color:var(--brand); font-weight:400; transition:.4s var(--ease); }
.res-num span{ display:block; font-size:9.5px; color:#8C9197; margin-top:5px; max-width:66px; line-height:1.3; }

/* Plan orientativo */
.plan{ padding:13px 14px 12px; }
.plan h4{ margin:0 0 9px; font-size:12.5px; font-weight:650; color:#111418;
  display:flex; align-items:center; gap:7px; }
.plan h4 .ic{ width:17px; height:17px; border-radius:5px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-size:10px; flex:none; transition:.4s var(--ease); }
.plan ul{ margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.plan li{ font-size:13.4px; line-height:1.42; color:#3D4349; padding-left:19px; position:relative; }
.plan li::before{
  content:''; position:absolute; left:0; top:6px;
  width:9px; height:5px; border-left:1.8px solid var(--brand); border-bottom:1.8px solid var(--brand);
  transform:rotate(-45deg); transition:.4s var(--ease);
}

/* Cita confirmada */
.cita{ }
.cita-top{
  background:var(--brand); color:#fff; padding:12px 14px;
  display:flex; align-items:center; gap:9px; transition:background .4s var(--ease);
}
.cita-top .chk{ width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.22);
  display:grid; place-items:center; font-size:12px; flex:none; }
.cita-top b{ font-size:13.5px; font-weight:650; letter-spacing:-.01em; }
.cita-top span{ display:block; font-size:11px; opacity:.85; font-weight:400; margin-top:1px; }

.cita-when{ display:flex; align-items:center; gap:13px; padding:14px; }
.cita-cal{
  width:52px; flex:none; border:1px solid rgba(0,0,0,.1); border-radius:10px; overflow:hidden; text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.cita-cal .m{ background:var(--brand); color:#fff; font-size:9px; font-weight:700; letter-spacing:.1em; padding:3px 0;
  transition:background .4s var(--ease); }
.cita-cal .d{ font-size:22px; font-weight:650; color:#111418; padding:5px 0 6px; line-height:1; }
.cita-info b{ display:block; font-size:14.5px; color:#111418; font-weight:650; letter-spacing:-.01em; }
.cita-info span{ display:block; font-size:12.6px; color:#6E7379; margin-top:3px; line-height:1.45; }

.cita-map{ position:relative; height:108px; border-top:1px solid rgba(0,0,0,.07); }
.cita-map svg{ width:100%; height:100%; display:block; }
.cita-pin{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-100%);
  width:26px; height:26px; border-radius:50% 50% 50% 0; rotate:-45deg;
  background:var(--brand); box-shadow:0 3px 8px rgba(0,0,0,.28);
  transition:background .4s var(--ease);
}
.cita-pin::after{ content:''; position:absolute; inset:8px; background:#fff; border-radius:50%; }
.cita-addr{
  position:absolute; left:10px; right:10px; bottom:9px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-radius:9px; padding:7px 10px;
  font-size:11.8px; color:#3D4349; font-weight:500;
  box-shadow:0 2px 8px rgba(0,0,0,.13);
}
.cita-acts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(0,0,0,.08);
  border-top:1px solid rgba(0,0,0,.08); }
.cita-acts button{
  background:#fff; border:0; padding:11px 6px; cursor:pointer;
  font:inherit; font-size:12.6px; font-weight:600; color:var(--brand);
  transition:.15s var(--ease);
}
.cita-acts button:hover{ background:var(--brand-soft); }

/* Cierre */
.cierre{ padding:13px 14px; text-align:center; }
.cierre p{ margin:0 0 10px; font-size:12.8px; color:#6E7379; line-height:1.5; }
.cierre .again{
  border:1px solid rgba(0,0,0,.14); background:#fff; color:#3D4349;
  border-radius:9px; padding:9px 15px; font:inherit; font-size:12.8px; font-weight:600; cursor:pointer;
  transition:.18s var(--ease); margin:0 3px;
}
.cierre .again[data-a="ver"]{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.cierre .again:hover{ border-color:var(--brand); color:var(--brand); }

/* ── Pie: botones de respuesta / teclado ───────────────────────────────── */
.chat-foot{
  flex:none; position:relative; z-index:2;
  padding:9px 12px calc(11px + env(safe-area-inset-bottom));
  background:#FFFFFF;
  border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 -8px 24px rgba(0,0,0,.07);
  min-height:56px;
  display:flex; align-items:center;
}
.chat-foot:empty{ display:none; }

.q{ width:100%; }
.q-hint{
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand); margin:0 0 7px; padding:0 3px;
  animation:chipin .3s var(--ease) both;
}
.q-hint::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--brand);
  animation:late 1.6s ease-in-out infinite;
}
@keyframes late{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 16px;
  background:var(--brand-soft);
  border:1.6px solid color-mix(in srgb, var(--brand) 38%, transparent);
  border-radius:13px;
  font:inherit; font-size:15px; font-weight:600; color:#1B1F24; cursor:pointer;
  transition:.16s var(--ease);
  animation:chipin .34s var(--ease) both;
  text-align:center; line-height:1.3;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  -webkit-tap-highlight-color:transparent;
}
.chip:hover{ background:var(--brand); border-color:var(--brand); color:#fff;
  transform:translateY(-1px); box-shadow:0 4px 12px -4px var(--brand); }
.chip:active{ transform:translateY(0) scale(.98); }
.chip:focus-visible{ outline:3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset:2px; }
.chip .em{ font-size:17px; }
.chip.wide{ flex:1 1 100%; justify-content:flex-start; text-align:left; }
.chip.wide .badge{ margin-left:auto; }
.chip .badge{
  font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--brand-soft); color:var(--brand); padding:2.5px 6px; border-radius:5px;
}
@keyframes chipin{ from{ opacity:0; transform:translateY(10px) scale(.96); } }

/* Carrusel de días */
.days{ display:flex; gap:7px; overflow-x:auto; padding:1px 2px 3px; scrollbar-width:none; }
.days::-webkit-scrollbar{ display:none; }
.day{
  flex:none; width:68px; padding:11px 4px 10px;
  background:var(--brand-soft);
  border:1.6px solid color-mix(in srgb, var(--brand) 38%, transparent);
  border-radius:13px;
  cursor:pointer; font:inherit; text-align:center;
  transition:.16s var(--ease); animation:chipin .34s var(--ease) both;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  -webkit-tap-highlight-color:transparent;
}
.day:hover:not(:disabled){ background:var(--brand); border-color:var(--brand);
  transform:translateY(-1px); box-shadow:0 4px 12px -4px var(--brand); }
.day:hover:not(:disabled) .dw,
.day:hover:not(:disabled) .dn,
.day:hover:not(:disabled) .df{ color:#fff; }
.day:active:not(:disabled){ transform:translateY(0) scale(.97); }
.day .dw{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#7A8086; transition:color .16s; }
.day .dn{ font-size:21px; font-weight:700; color:#1B1F24; line-height:1.1; margin:3px 0 3px; transition:color .16s; }
.day .df{ font-size:9.5px; font-weight:650; color:#2E9E68; transition:color .16s; }
.day:disabled{ opacity:.4; cursor:not-allowed; background:#F4F4F5; border-color:rgba(0,0,0,.09); }
.day:disabled .df{ color:#B0453B; }

/* Teclado */
.kb{ display:flex; gap:8px; width:100%; align-items:center; }
.kb input{
  flex:1; min-width:0;
  padding:14px 16px; border-radius:24px;
  border:1.6px solid color-mix(in srgb, var(--brand) 38%, transparent);
  background:var(--brand-soft);
  font:inherit; font-size:15.5px; color:#1B1F24;
  transition:.16s var(--ease);
}
.kb input::placeholder{ color:#A9AEB3; }
.kb input:focus{ outline:none; background:#fff; border-color:var(--brand);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--brand) 20%, transparent); }
.kb input.bad{ border-color:#D0554A; box-shadow:0 0 0 3px rgba(208,85,74,.12); }
.kb .send{
  width:46px; height:46px; flex:none; border-radius:50%; border:0; cursor:pointer;
  background:var(--brand); color:#fff; display:grid; place-items:center;
  transition:.18s var(--ease);
}
.kb .send svg{ width:19px; height:19px; }
.kb .send:hover{ filter:brightness(1.08); }
.kb .send:disabled{ opacity:.4; cursor:not-allowed; }
.kb-hint{ font-size:11px; color:#8C9197; padding:0 4px 7px; display:flex; align-items:center; gap:5px; }

/* ── Panel de datos capturados ─────────────────────────────────────────── */
.sheet[hidden]{ display:none; }
.sheet{
  position:fixed; inset:0; z-index:50;
  background:rgba(6,7,9,.7); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:24px;
  animation:pop .22s var(--ease) both;
}
.sheet-card{
  width:min(520px, 100%); max-height:80vh; overflow:auto;
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:22px 24px 24px;
}
.sheet-head{ display:flex; align-items:center; gap:12px; }
.sheet-head h2{ margin:0; font-size:17px; font-weight:600; color:#fff; letter-spacing:-.01em; }
.sheet-head button{ margin-left:auto; background:none; border:0; color:var(--muted);
  font-size:17px; cursor:pointer; padding:4px 8px; border-radius:7px; }
.sheet-head button:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sheet-sub{ font-size:13.5px; color:#8E8A85; line-height:1.55; margin:9px 0 16px; }
.sheet pre{
  margin:0; padding:16px; border-radius:11px;
  background:#0A0B0D; border:1px solid var(--line);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.4px; line-height:1.65; color:#9FE8C4;
  white-space:pre-wrap; word-break:break-word;
}

/* ── Móvil: el chat, y nada más ────────────────────────────────────────── */
@media (max-width: 1080px){
  .stage{ display:block; padding:0; max-width:none; }
  .pitch{ display:none; }
  .phone-wrap{ gap:0; }
  .phone{
    width:100%; height:100dvh; border-radius:0; padding:0; box-shadow:none;
    background:var(--chat-bg);
  }
  .phone-screen{ border-radius:0; }
  .phone-note{ display:none; }
  .bub{ font-size:15.2px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .chat-body{ scroll-behavior:auto; }
}

/* ── El WhatsApp que recibe la clínica ─────────────────────────────────── */
.wa{
  border:1px solid var(--line); border-radius:13px; overflow:hidden;
  background:#EDE7DF;
}
.wa-head{
  display:flex; align-items:center; gap:10px;
  padding:10px 13px; background:#F7F5F1; border-bottom:1px solid rgba(0,0,0,.08);
}
.wa-av{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:#0099FF; color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em;
}
.wa-head strong{ display:block; font-size:13.5px; font-weight:650; color:#111418; letter-spacing:-.01em; }
.wa-head span span{ font-weight:650; }
.wa-head > div > span{ display:block; font-size:11.5px; color:#7C8288; margin-top:1px; }

.wa-body{
  padding:14px 13px 16px;
  background-image:
    radial-gradient(circle at 25% 12%, rgba(255,255,255,.5) 0%, transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.wa-bub{
  background:#DCF8C6;
  border-radius:14px 5px 14px 14px;
  padding:10px 12px 8px;
  margin-left:auto; max-width:96%;
  box-shadow:0 1px 1.5px rgba(0,0,0,.1);
  font-size:13.6px; line-height:1.52; color:#111418;
  white-space:pre-wrap; word-break:break-word;
}
.wa-bub b{ font-weight:650; }
.wa-bub .wa-meta{
  display:block; text-align:right; font-size:10.5px; color:#7A8B72; margin-top:4px; line-height:1;
}
.wa-bub .wa-meta .tick{ color:#4FADE0; margin-left:3px; font-size:11px; }

.sheet-acts{ display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; }
.btn-copy{
  padding:10px 16px; border-radius:10px; cursor:pointer; border:0;
  background:#fff; color:#14161A; font:inherit; font-size:13.5px; font-weight:600;
  transition:.18s var(--ease);
}
.btn-copy:hover{ filter:brightness(.93); }
.btn-ghost.sm{ padding:10px 16px; font-size:13.5px; }
.sheet pre[hidden]{ display:none; }
.sheet pre{ margin-top:14px; }

/* ── Tarjeta de oferta ─────────────────────────────────────────────────── */
.promo{ padding:13px 14px 12px; }
.promo-top{ display:flex; align-items:center; gap:10px; }
.promo-tag{
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft);
  padding:4px 8px; border-radius:6px; line-height:1.25; max-width:120px;
}
.promo-precios{ margin-left:auto; display:flex; align-items:baseline; gap:8px; }
.promo-precios s{ font-size:13px; color:#A4A9AE; }
.promo-precios b{
  font-family:'Instrument Serif', Georgia, serif; font-weight:400;
  font-size:28px; line-height:1; color:var(--brand);
}
.promo-que{ margin:10px 0 0; font-size:13.6px; line-height:1.45; color:#3D4349; }
.promo-gar{
  margin:9px 0 0; padding-top:9px; border-top:1px solid rgba(0,0,0,.08);
  font-size:12.6px; line-height:1.45; color:#2E7D52; font-weight:550;
}

/* ── Vista del lead: solo el chat ──────────────────────────────────────── */
body.solo-chat{
  background:
    radial-gradient(900px 600px at 50% -10%, #1E2126 0%, transparent 60%),
    #0E1013;
}
.solo-chat .stage{ grid-template-columns:1fr; justify-items:center; }
.solo-chat .phone-wrap{ gap:0; }

.badge-real{
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:#4ADE80; color:#0B2E19; padding:2.5px 6px; border-radius:5px; margin-left:2px;
}
.brand-btn[aria-pressed="true"] .badge-real{ background:#16A34A; color:#fff; }
.real-note{
  margin:26px 0 0; padding:14px 16px;
  border:1px solid rgba(74,222,128,.25); border-radius:12px;
  background:rgba(74,222,128,.05);
  font-size:13.5px; line-height:1.55; color:#A8B8AC;
}
.real-note b{ color:#D9F5E1; font-weight:600; }
.real-note[hidden]{ display:none; }
a.btn-ghost{ text-decoration:none; display:inline-block; }
#leadLink[hidden]{ display:none; }

/* Avatar con la foto real de la clínica */
.head-avatar.con-foto{ background:#fff; overflow:hidden; padding:0; }
.head-avatar.con-foto img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Foto real del tratamiento dentro del chat */
.trat{ margin:0; }
.trat img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#E9E5E0; }
.trat figcaption{ padding:11px 13px 12px; }
.trat figcaption b{
  display:block; font-size:14.2px; font-weight:700; color:#111418;
  letter-spacing:-.005em;
}
.trat figcaption span{ display:block; font-size:13.2px; line-height:1.45; color:#4A5057; margin-top:5px; }

/* ── Botones en rejilla ──────────────────────────────────────────────────
   Los chips normales se reparten con flex y acaban con anchos distintos en
   la misma fila. Las clínicas que piden `botones: 'bloque'` los pintan en
   una rejilla de columnas iguales: todos del mismo tamaño y alineados.
   Se elige la rejilla por la longitud de la etiqueta más larga. */
.chips.rejilla{ display:grid; gap:8px; }
.chips.rejilla .chip{ flex:none; width:100%; padding:12px 12px; font-size:15px; min-height:48px;
  border-width:1.8px; border-color:color-mix(in srgb, var(--brand) 55%, transparent); }
.chips.rejilla.g1{ grid-template-columns:1fr; }
.chips.rejilla.g2{ grid-template-columns:1fr 1fr; }
.chips.rejilla.g5{ grid-template-columns:repeat(5, 1fr); }
.chips.rejilla.g5 .chip{ padding:12px 4px; font-size:16px; font-weight:700; }
/* En pares, un último impar ocupa la fila entera en vez de dejar hueco */
.chips.rejilla.g2 .chip:last-child:nth-child(odd){ grid-column:1 / -1; }