/* ==========================================================
   AMEJIAM | Entrevista inicial tipo chat
   Maqueta HTML + CSS sin comportamiento JS
   ========================================================== */

:root{
  --prussian:#0B1C2C;
  --atlantic:#123652;
  --deep-ink:#102032;
  --platinum:#E5E7EA;
  --silver:#C9CFD6;
  --teal:teal;
  --teal-lake:#2C9CA6;
  --gold:#D5A94F;
  --paper:#FFFFFF;
  --mist:#F5F7FA;
  --soft-blue:#EAF3F6;
  --shadow:0 12px 34px rgba(16,32,50,.12);
  --shadow-soft:0 10px 26px rgba(16,32,50,.08);
  --radius:16px;
  --radius-lg:24px;
}

*{
  box-sizing:border-box;
  scroll-behavior:smooth;
}

html,
body{
  min-height:100%;
}

body{
  margin:0;
  font-family:"Century Gothic","Quicksand","Avant Garde",Arial,sans-serif;
  color:var(--deep-ink);
  background:var(--mist);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font-family:inherit;
}

button{
  cursor:pointer;
}

.ei-bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(44,156,166,.18), transparent 32%),
    radial-gradient(circle at 78% 20%, rgba(213,169,79,.18), transparent 30%),
    radial-gradient(circle at 50% 82%, rgba(18,54,82,.10), transparent 44%),
    var(--mist);
}

.ei-bg::before,
.ei-bg::after{
  content:"";
  position:absolute;
  inset:-20%;
  filter:blur(120px);
  opacity:.42;
  animation:eiAurora 24s ease-in-out infinite alternate;
}

.ei-bg::before{
  background:
    radial-gradient(circle at 20% 30%, rgba(44,156,166,.42), transparent 24%),
    radial-gradient(circle at 70% 65%, rgba(11,28,44,.24), transparent 28%);
}

.ei-bg::after{
  background:
    radial-gradient(circle at 85% 18%, rgba(213,169,79,.34), transparent 26%),
    radial-gradient(circle at 28% 78%, rgba(0,128,128,.20), transparent 32%);
  animation-duration:30s;
  animation-direction:alternate-reverse;
}

@keyframes eiAurora{
  from{transform:scale(1) translate(0,0);}
  to{transform:scale(1.12) translate(3%,-2%);}
}

.ei-page{
  position:relative;
  z-index:1;
  min-height:100vh;
}

.ei-container{
  width:min(1160px,92vw);
  margin:0 auto;
}

/* Topbar */

.ei-topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(229,231,234,.92);
}

.ei-nav{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.ei-brand{
  display:flex;
  align-items:center;
}

.ei-brand img{
  height:30px;
  width:auto;
  display:block;
}

.ei-navActions{
  display:flex;
  align-items:center;
  gap:16px;
}

.ei-link{
  font-weight:700;
  color:#2b3342;
}

.ei-link:hover{
  color:var(--teal-lake);
}

/* Buttons */

.ei-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid transparent;
  border-radius:999px;
  padding:.9rem 1.18rem;
  min-height:44px;
  font-weight:800;
  line-height:1;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.ei-btn:hover{
  transform:translateY(-1px);
}

.ei-btnPrimary{
  color:#fff;
  background:linear-gradient(90deg,var(--atlantic),var(--teal-lake));
  box-shadow:0 10px 24px rgba(18,54,82,.18);
}

.ei-btnGhost{
  color:var(--deep-ink);
  background:rgba(255,255,255,.78);
  border-color:rgba(229,231,234,.98);
  box-shadow:var(--shadow-soft);
}

/* Main */

.ei-main{
  overflow:hidden;
}

.ei-hero{
  padding:64px 0 42px;
}

.ei-heroGrid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,.92fr);
  gap:34px;
  align-items:center;
}

.ei-heroCopy h1{
  margin:.7rem 0 .8rem;
  max-width:740px;
  color:var(--atlantic);
  font-size:clamp(2.2rem,4.4vw,4.25rem);
  line-height:.98;
  letter-spacing:-.055em;
}

.ei-sub{
  max-width:650px;
  margin:0 0 1.15rem;
  color:#5a6573;
  font-size:clamp(1rem,1.55vw,1.18rem);
  line-height:1.65;
}

.ei-eyebrow,
.ei-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  width:max-content;
  max-width:100%;
  padding:.42rem .78rem;
  border:1px solid rgba(229,231,234,.96);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#2c3442;
  font-size:.88rem;
  font-weight:800;
  box-shadow:0 8px 22px rgba(16,32,50,.05);
}

.ei-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--teal-lake);
  box-shadow:0 0 0 5px rgba(44,156,166,.12);
}

.ei-proofRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:1.2rem 0;
}

.ei-proofRow span{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.62rem .82rem;
  border:1px solid rgba(229,231,234,.96);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#2b3342;
  font-weight:800;
  box-shadow:0 8px 20px rgba(16,32,50,.05);
}

.ei-heroActions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  align-items:center;
  margin:1.2rem 0 .8rem;
}

.ei-note{
  display:block;
  color:#6a7382;
  line-height:1.55;
}

/* Chat mock */

.ei-chatShell{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(229,231,234,.96);
  border-radius:28px;
  box-shadow:0 24px 70px rgba(16,32,50,.16);
}

.ei-chatShell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 88% 6%, rgba(213,169,79,.18), transparent 24%),
    radial-gradient(circle at 12% 18%, rgba(44,156,166,.12), transparent 24%);
}

.ei-chatShell > *{
  position:relative;
  z-index:1;
}

.ei-chatTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid rgba(229,231,234,.96);
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(8px);
}

.ei-agent{
  display:flex;
  align-items:center;
  gap:10px;
}

.ei-avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--prussian);
  box-shadow:0 8px 18px rgba(16,32,50,.16);
}

.ei-avatar img{
  width:25px;
  height:25px;
  border-radius:8px;
  display:block;
}

.ei-agent strong,
.ei-agent span{
  display:block;
}

.ei-agent strong{
  color:var(--prussian);
  font-size:.98rem;
}

.ei-agent span{
  margin-top:2px;
  color:#6a7382;
  font-size:.82rem;
  font-weight:700;
}

.ei-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#47626a;
  background:rgba(44,156,166,.10);
  border:1px solid rgba(44,156,166,.16);
  border-radius:999px;
  padding:.38rem .62rem;
  font-size:.78rem;
  font-weight:800;
}

.ei-status span{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#18b66b;
  box-shadow:0 0 0 5px rgba(24,182,107,.11);
}

.ei-progressWrap{
  padding:14px 18px 10px;
}

.ei-progressText{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  color:#657181;
  font-size:.8rem;
  font-weight:800;
}

.ei-progressText strong{
  color:var(--atlantic);
}

.ei-progressBar{
  overflow:hidden;
  height:9px;
  border-radius:999px;
  background:#e9edf4;
}

.ei-progressBar span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--teal),var(--teal-lake));
}

.ei-chatBody{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px 18px 18px;
  min-height:520px;
  max-height:620px;
  overflow:auto;
}

.ei-msg{
  max-width:88%;
  border-radius:20px;
  padding:12px 14px;
  line-height:1.48;
  box-shadow:0 8px 20px rgba(16,32,50,.06);
}

.ei-msg p{
  margin:0;
}

.ei-msgBot{
  align-self:flex-start;
  color:#2d3746;
  background:#fff;
  border:1px solid rgba(229,231,234,.96);
  border-bottom-left-radius:8px;
}

.ei-msgUser{
  align-self:flex-end;
  color:#fff;
  background:linear-gradient(135deg,var(--atlantic),var(--teal-lake));
  border-bottom-right-radius:8px;
}

.ei-softMsg{
  background:rgba(234,243,246,.82);
  border-color:rgba(44,156,166,.18);
}

.ei-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-self:flex-start;
}

.ei-options button{
  border:1px solid rgba(229,231,234,.96);
  border-radius:999px;
  padding:.72rem .9rem;
  background:rgba(255,255,255,.88);
  color:var(--atlantic);
  font-weight:800;
  box-shadow:0 6px 18px rgba(16,32,50,.05);
  transition:transform .12s ease, border-color .2s ease, background .2s ease;
}

.ei-options button:hover{
  transform:translateY(-1px);
  border-color:rgba(44,156,166,.42);
  background:rgba(44,156,166,.08);
}

.ei-questionCard{
  margin-top:4px;
  padding:16px;
  border:1px solid rgba(44,156,166,.22);
  border-radius:22px;
  background:
    radial-gradient(circle at 92% 12%, rgba(44,156,166,.12), transparent 28%),
    rgba(255,255,255,.92);
  box-shadow:var(--shadow-soft);
}

.ei-questionTag{
  display:inline-flex;
  width:max-content;
  padding:.32rem .6rem;
  border-radius:999px;
  color:#47626a;
  background:rgba(44,156,166,.10);
  font-size:.78rem;
  font-weight:900;
}

.ei-questionCard h2{
  margin:.65rem 0 .85rem;
  color:var(--prussian);
  font-size:1.22rem;
  line-height:1.18;
}

.ei-optionsStack{
  display:grid;
  grid-template-columns:1fr;
  align-self:stretch;
}

.ei-optionsStack button{
  text-align:left;
  border-radius:14px;
}

.ei-chatComposer{
  display:flex;
  gap:10px;
  padding:14px 18px 18px;
  border-top:1px solid rgba(229,231,234,.92);
  background:rgba(255,255,255,.62);
}

.ei-chatComposer input{
  flex:1;
  min-width:0;
  border:1px solid rgba(229,231,234,.98);
  border-radius:999px;
  padding:.85rem 1rem;
  color:#87909b;
  background:#fff;
}

.ei-chatComposer button{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--atlantic),var(--teal-lake));
  font-weight:900;
  box-shadow:0 8px 20px rgba(18,54,82,.20);
}

/* Content sections */

.ei-section{
  padding:52px 0;
}

.ei-sectionHead{
  max-width:820px;
  margin-bottom:22px;
}

.ei-sectionHead h2,
.ei-contactGrid h2,
.ei-darkCard h2{
  margin:.75rem 0 .65rem;
  color:var(--atlantic);
  font-size:clamp(1.8rem,3.1vw,3rem);
  line-height:1.04;
  letter-spacing:-.04em;
}

.ei-sectionHead p,
.ei-contactGrid p,
.ei-darkCard p{
  margin:0;
  color:#5a6573;
  line-height:1.65;
}

.ei-stepGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.ei-card{
  border:1px solid rgba(229,231,234,.96);
  border-radius:var(--radius-lg);
  padding:18px;
  background:rgba(255,255,255,.80);
  box-shadow:var(--shadow-soft);
}

.ei-card h3{
  margin:.8rem 0 .4rem;
  color:var(--prussian);
  font-size:1.08rem;
}

.ei-card p{
  margin:0;
  color:#5a6573;
  line-height:1.55;
}

.ei-step{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--atlantic),var(--teal-lake));
  font-weight:900;
}

/* Diagnosis result */

.ei-diagnosisGrid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:18px;
  align-items:stretch;
}

.ei-darkCard{
  position:relative;
  overflow:hidden;
  color:#fff;
  border:0;
  background:
    radial-gradient(circle at 88% 8%, rgba(213,169,79,.22), transparent 28%),
    radial-gradient(circle at 10% 86%, rgba(44,156,166,.28), transparent 34%),
    linear-gradient(135deg,var(--prussian),var(--atlantic));
}

.ei-darkCard h2,
.ei-darkCard p{
  color:#fff;
}

.ei-darkCard p{
  color:rgba(255,255,255,.76);
}

.ei-chipLight{
  color:#fff;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
}

.ei-signalList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}

.ei-signalList div{
  padding:14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.08);
}

.ei-signalList strong,
.ei-signalList span{
  display:block;
}

.ei-signalList strong{
  color:#fff;
  margin-bottom:5px;
}

.ei-signalList span{
  color:rgba(255,255,255,.68);
  font-size:.9rem;
  line-height:1.45;
}

.ei-resultMock{
  padding:20px;
  border:1px solid rgba(229,231,234,.96);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow);
}

.ei-resultTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.ei-resultTop span{
  color:#6a7382;
  font-weight:800;
}

.ei-resultTop strong{
  color:#6a4a05;
  background:#fff5df;
  border:1px solid rgba(213,169,79,.28);
  border-radius:999px;
  padding:.36rem .62rem;
  font-size:.84rem;
}

.ei-meter{
  overflow:hidden;
  height:12px;
  margin-bottom:16px;
  border-radius:999px;
  background:#e9edf4;
}

.ei-meter span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--teal-lake),var(--gold));
}

.ei-resultItem{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(229,231,234,.96);
}

.ei-resultItem span{
  color:#6a7382;
  font-weight:800;
}

.ei-resultItem strong{
  color:var(--prussian);
  text-align:right;
}

.ei-resultMock p{
  margin:18px 0 0;
  color:#5a6573;
  line-height:1.6;
}

/* Contact gate */

.ei-contactSection{
  padding-bottom:72px;
}

.ei-contactGrid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(330px,1.05fr);
  gap:20px;
  align-items:center;
}

.ei-contactMock{
  padding:22px;
  border:1px solid rgba(229,231,234,.96);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 90% 10%, rgba(44,156,166,.10), transparent 30%),
    rgba(255,255,255,.90);
  box-shadow:var(--shadow);
}

.ei-contactMock h3{
  margin:0 0 8px;
  color:var(--prussian);
  font-size:1.4rem;
}

.ei-contactMock p{
  margin:0 0 16px;
  color:#5a6573;
  line-height:1.55;
}

.ei-formGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}

.ei-formGrid input{
  width:100%;
  border:1px solid rgba(229,231,234,.98);
  border-radius:14px;
  padding:.88rem .95rem;
  color:var(--deep-ink);
  background:#fff;
  font-size:.95rem;
}

.ei-formGrid input:focus{
  outline:none;
  border-color:var(--teal-lake);
  box-shadow:0 0 0 3px rgba(44,156,166,.14);
}

.ei-contactMock .ei-btn{
  width:100%;
}

.ei-contactMock small{
  display:block;
  margin-top:12px;
  color:#7a8491;
  line-height:1.5;
}

/* Bottom */

.ei-bottom{
  padding:22px 0;
  color:#5e6575;
  background:rgba(255,255,255,.82);
  border-top:1px solid rgba(229,231,234,.96);
}

.ei-bottom .ei-container{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-size:.9rem;
}

/* Responsive */

@media(max-width:980px){
  .ei-heroGrid,
  .ei-diagnosisGrid,
  .ei-contactGrid{
    grid-template-columns:1fr;
  }

  .ei-chatShell{
    max-width:720px;
    margin:0 auto;
  }

  .ei-stepGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .ei-nav{
    height:auto;
    min-height:70px;
    padding:14px 0;
    align-items:flex-start;
  }

  .ei-navActions{
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
  }

  .ei-link{
    display:none;
  }

  .ei-hero{
    padding:38px 0 28px;
  }

  .ei-heroGrid{
    gap:24px;
  }

  .ei-heroCopy h1{
    letter-spacing:-.04em;
  }

  .ei-chatTop,
  .ei-progressWrap,
  .ei-chatBody,
  .ei-chatComposer{
    padding-left:14px;
    padding-right:14px;
  }

  .ei-chatBody{
    min-height:480px;
  }

  .ei-msg{
    max-width:94%;
  }

  .ei-stepGrid,
  .ei-signalList,
  .ei-formGrid{
    grid-template-columns:1fr;
  }

  .ei-section{
    padding:38px 0;
  }
}

@media(max-width:480px){
  .ei-brand img{
    height:26px;
  }

  .ei-btn{
    width:100%;
  }

  .ei-nav{
    display:grid;
    grid-template-columns:1fr;
  }

  .ei-navActions{
    justify-content:stretch;
  }

  .ei-navActions .ei-btn{
    width:100%;
  }

  .ei-heroActions{
    display:grid;
  }

  .ei-chatShell{
    border-radius:22px;
  }

  .ei-options{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .ei-options button{
    text-align:left;
  }
}

/* ===== Diagnóstico inicial | Hero -> Chat mínimo ===== */

.di-main{
  min-height: calc(100vh - 74px);
  position: relative;
  overflow: hidden;
  padding-top: 74px;
}

.di-wrap,
.di-chatWrap{
  width: min(860px, 92vw);
  margin: 0 auto;
}

.di-hero{
  min-height: calc(100vh - 74px);
  display: grid;
  place-items: center;
  padding: 42px 0;
  transition:
    opacity .42s ease,
    transform .52s cubic-bezier(.2,.8,.2,1),
    visibility .42s ease;
}

.di-heroCard{
  text-align: center;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(229,231,234,.92);
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(16,32,50,.12);
  padding: clamp(28px, 5vw, 54px);
  backdrop-filter: blur(10px);
}

.di-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .78rem;
  border-radius: 999px;
  border: 1px solid rgba(229,231,234,.95);
  background: #fff;
  color: var(--atlantic, #123652);
  font-weight: 800;
  font-size: .88rem;
}

.di-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal, teal);
}

.di-hero h1{
  max-width: 760px;
  margin: 18px auto 12px;
  color: var(--atlantic, #123652);
  font-size: clamp(2.05rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.di-hero p{
  max-width: 650px;
  margin: 0 auto;
  color: #5a6573;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.62;
}

.di-proof{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 22px 0;
}

.di-proof span{
  background: #fff;
  border: 1px solid rgba(229,231,234,.95);
  border-radius: 999px;
  padding: .55rem .8rem;
  color: #2b3342;
  font-weight: 800;
  font-size: .92rem;
}

.di-btn{
  border: 0;
  border-radius: 999px;
  padding: .95rem 1.35rem;
  color: #fff;
  background: linear-gradient(90deg, var(--teal, teal), var(--teal-lake, #2C9CA6));
  box-shadow: 0 12px 28px rgba(16,32,50,.16);
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}

.di-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.di-hero small{
  display: block;
  margin-top: 14px;
  color: #6a7382;
}

/* Estado inicial del chat */
.di-chatStage{
  position: absolute;
  inset: 74px 0 0;
  display: grid;
  place-items: center;
  padding: 28px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(34px);
  pointer-events: none;
  transition:
    opacity .45s ease .14s,
    transform .52s cubic-bezier(.2,.8,.2,1) .14s,
    visibility .45s ease .14s;
}

.di-chatWrap{
  max-width: 760px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(229,231,234,.95);
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(16,32,50,.13);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.di-chatTop{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(229,231,234,.95);
  background: rgba(245,247,250,.78);
}

.di-agent{
  display: flex;
  align-items: center;
  gap: 10px;
}

.di-avatar{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(229,231,234,.95);
}

.di-avatar img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.di-agent strong{
  display: block;
  color: var(--prussian, #0B1C2C);
  line-height: 1.15;
}

.di-agent span{
  display: block;
  color: #6a7382;
  font-size: .86rem;
  margin-top: 2px;
}

.di-progress{
  width: 112px;
  height: 8px;
  border-radius: 999px;
  background: rgba(18,54,82,.1);
  overflow: hidden;
}

.di-progress span{
  display: block;
  width: 10%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal, teal), var(--teal-lake, #2C9CA6));
}

.di-chatBody{
  padding: clamp(18px, 4vw, 34px);
}

.di-msg{
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 18px;
  margin-bottom: 16px;
}

.di-msg p{
  margin: 0;
  line-height: 1.5;
}

.di-msgBot{
  background: var(--mist, #F5F7FA);
  border: 1px solid rgba(229,231,234,.95);
  color: #2b3342;
}

.di-question{
  margin-top: 18px;
}

.di-question > span{
  display: inline-flex;
  color: var(--teal-lake, #2C9CA6);
  font-weight: 800;
  font-size: .88rem;
  margin-bottom: 8px;
}

.di-question h2{
  color: var(--atlantic, #123652);
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.08;
  margin: 0 0 18px;
}

.di-options{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.di-options button{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(229,231,234,.95);
  background: #fff;
  color: var(--deep-ink, #102032);
  border-radius: 16px;
  padding: 14px 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.di-options button:hover{
  transform: translateY(-1px);
  border-color: var(--teal-lake, #2C9CA6);
  background: color-mix(in oklab, var(--teal-lake, #2C9CA6), #fff 92%);
}

/* Estado después de empezar */
.di-main.di-started .di-hero{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-46px) scale(.985);
  pointer-events: none;
}

.di-main.di-started .di-chatStage{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Responsive */
@media(max-width: 680px){
  .di-main{
    padding-top: 74px;
    padding-bottom: 40px;
  }

  .di-heroCard{
    border-radius: 24px;
  }

  .di-chatStage{
    align-items: start;
  }

  .di-chatWrap{
    border-radius: 24px;
  }

  .di-chatTop{
    align-items: flex-start;
    flex-direction: column;
  }

  .di-progress{
    width: 100%;
  }

  .di-msg{
    max-width: 100%;
  }

  .di-options{
    grid-template-columns: 1fr;
  }
}

.di-turn{
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.di-msgQuestion{
  max-width: 86%;
  opacity: .92;
}

.di-msgQuestion small{
  display: block;
  color: var(--teal-lake, #2C9CA6);
  font-weight: 800;
  font-size: .78rem;
  margin-bottom: 4px;
}

.di-msgQuestion p{
  margin: 0;
}

.di-msgUser{
  margin-left: auto;
  background: linear-gradient(90deg, var(--teal, teal), var(--teal-lake, #2C9CA6));
  color: #fff;
}

.di-waiting{
  color:#6a7382;
  font-size:.9rem;
  margin: 10px 0 0;
}