.demo-app {
  --bg: #070b13;
  --panel: #111827;
  --panel-2: #0c1320;
  --card: #151e2d;
  --text: #f8fafc;
  --muted: #9fb0c7;
  --border: #29364a;
  --accent: #1f8fff;
  --accent-2: #45c7ff;
  --success: #22c55e;
  --danger: #ef4444;
  --gold: #d4a72c;
  --shadow: 0 20px 60px rgba(0,0,0,.28);
}

.demo-app * { box-sizing: border-box; }
.demo-app html { scroll-behavior: smooth; }
.demo-app {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(31,143,255,.16), transparent 28rem),
    radial-gradient(circle at 90% 10%, rgba(14,165,233,.11), transparent 30rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.demo-app button, .demo-app input, .demo-app textarea, .demo-app select { font: inherit; }
.demo-app button { cursor: pointer; }
.demo-app img { max-width: 100%; display: block; }

.demo-app .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  background: rgba(7,11,19,.84);
}
.demo-app .header-inner, .demo-app .page-shell, .demo-app .site-footer {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
}
.demo-app .header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.demo-app .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.demo-app .brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.demo-app .brand strong, .demo-app .brand small { display: block; }
.demo-app .brand small { color: var(--muted); margin-top: 2px; }
.demo-app .tech-badge, .demo-app .status-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(255,255,255,.035);
  color: #d9e5f5;
}

.demo-app .page-shell { padding: 52px 0 80px; }
.demo-app .hero {
  max-width: 920px;
  margin-bottom: 34px;
}
.demo-app .eyebrow, .demo-app .section-kicker {
  color: #45c7ff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .14em;
}
.demo-app .hero h1 {
  margin: 12px 0;
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -.045em;
}
.demo-app .hero p, .demo-app .section-heading p {
  color: var(--muted);
  line-height: 1.6;
  max-width: 800px;
}

.demo-app .stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(17,24,39,.76);
  overflow: hidden;
  margin-bottom: 28px;
}
.demo-app .step {
  border: 0;
  border-right: 1px solid var(--border);
  padding: 17px 12px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}
.demo-app .step:last-child { border-right: 0; }
.demo-app .step span {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  margin-right: 8px;
  background: #202b3c;
}
.demo-app .step.active { color: white; background: rgba(31,143,255,.12); }
.demo-app .step.active span, .demo-app .step.complete span { background: var(--accent); color: white; }
.demo-app .step.complete { color: #d8e6f8; }

.demo-app .stage { display: none; animation: fade .25s ease; }
.demo-app .stage.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

.demo-app .section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
  margin: 0 0 20px;
}
.demo-app .section-heading h2 { margin: 7px 0 5px; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.demo-app .section-heading p { margin: 0; }
.demo-app .example-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.demo-app .form-card, .demo-app .final-card, .demo-app .confirmation-card, .demo-app .sticky-summary {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(21,30,45,.96), rgba(12,19,32,.96));
  box-shadow: var(--shadow);
}
.demo-app .form-card { padding: 24px; }
.demo-app .form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.demo-app .field { display: grid; gap: 8px; }
.demo-app .field-wide { grid-column: span 2; }
.demo-app .field > span { color: #dbe7f7; font-weight: 750; font-size: .9rem; }
.demo-app input, .demo-app textarea, .demo-app select, .demo-app .native-wrap {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #0b1220;
  color: white;
  outline: none;
}
.demo-app input, .demo-app textarea, .demo-app select { padding: 13px 14px; }
.demo-app .native-wrap { padding: 13px 14px; }
.demo-app .native-wrap input { border: 0; padding: 0; background: transparent; }
.demo-app input:focus, .demo-app textarea:focus, .demo-app select:focus, .demo-app .native-wrap:focus-within { border-color: #45c7ff; box-shadow: 0 0 0 3px rgba(31,143,255,.15); }

.demo-app .form-actions, .demo-app .stage-actions {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.demo-app .privacy-note { color: var(--muted); font-size: .84rem; }
.demo-app .btn {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 850;
  color: white;
  background: #172235;
  transition: .2s ease;
}
.demo-app .btn:hover { transform: translateY(-1px); border-color: #64748b; }
.demo-app .btn.primary { border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.demo-app .btn.ghost { background: transparent; }
.demo-app .btn.wide { width: 100%; }

.demo-app .route-chip, .demo-app .live-total {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: #dce8f7;
  background: rgba(255,255,255,.035);
}
.demo-app .live-total strong { margin-left: 8px; color: #4ade80; }

.demo-app .vehicles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.demo-app .vehicle-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 19px;
  padding: 16px;
  background: linear-gradient(180deg, #151f2f, #0e1625);
  transition: .22s ease;
}
.demo-app .vehicle-card.available:hover { transform: translateY(-3px); border-color: #1f8fff; }
.demo-app .vehicle-card.selected { border-color: var(--success); box-shadow: 0 0 0 2px rgba(34,197,94,.18); }
.demo-app .vehicle-card.unavailable { opacity: .53; }
.demo-app .vehicle-image {
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f7fb;
}
.demo-app .vehicle-image img { width: 100%; height: 100%; object-fit: contain; }
.demo-app .recommended {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--gold);
  color: #101010;
  font-size: .72rem;
  font-weight: 950;
}
.demo-app .vehicle-card h3 { margin: 15px 0 5px; font-size: 1.15rem; }
.demo-app .vehicle-model { color: var(--muted); min-height: 42px; margin: 0; font-size: .9rem; }
.demo-app .vehicle-specs { display: flex; gap: 14px; color: #c8d6e8; margin: 13px 0; font-size: .9rem; }
.demo-app .vehicle-bottom { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.demo-app .vehicle-price { font-size: 1.5rem; font-weight: 950; color: #f4c95d; }
.demo-app .vehicle-price small { display: block; font-size: .72rem; color: var(--muted); font-weight: 600; }
.demo-app .select-vehicle {
  border: 1px solid #475569;
  border-radius: 10px;
  padding: 9px 12px;
  color: white;
  background: #182437;
  font-weight: 800;
}
.demo-app .vehicle-card.selected .select-vehicle { background: var(--success); border-color: var(--success); color: #07130b; }
.demo-app .unavailable-note { margin-top: 12px; color: #fda4af; font-size: .83rem; }

.demo-app .extras-layout, .demo-app .final-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .7fr);
  gap: 22px;
  align-items: start;
}
.demo-app .extras-list { display: grid; gap: 12px; }
.demo-app .extra-card, .demo-app .tolls-card {
  border: 1px solid var(--border);
  border-radius: 17px;
  padding: 16px;
  background: rgba(17,24,39,.86);
}
.demo-app .extra-main { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.demo-app .extra-main h3 { margin: 0 0 4px; font-size: 1rem; }
.demo-app .extra-main p, .demo-app .extra-note { margin: 0; color: var(--muted); font-size: .85rem; }
.demo-app .extra-note { margin-top: 7px; }
.demo-app .counter {
  display: flex;
  align-items: center;
  gap: 12px;
}
.demo-app .counter button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0b1220;
  color: white;
  font-size: 1.15rem;
}
.demo-app .counter strong { min-width: 22px; text-align: center; }

.demo-app .switch { position: relative; display: inline-flex; }
.demo-app .switch input { position: absolute; opacity: 0; }
.demo-app .switch span {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #344155;
  position: relative;
  transition: .2s;
}
.demo-app .switch span::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: white;
  transition: .2s;
}
.demo-app .switch input:checked + span { background: var(--success); }
.demo-app .switch input:checked + span::after { transform: translateX(20px); }

.demo-app .tolls-options {
  display: grid;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}
.demo-app .toll-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  color: #dce7f6;
}
.demo-app .toll-row input { width: 18px; height: 18px; }
.demo-app .toll-row.all-tolls { padding-bottom: 10px; border-bottom: 1px solid var(--border); font-weight: 900; }

.demo-app .sticky-summary { position: sticky; top: 100px; padding: 20px; }
.demo-app .sticky-summary h3 { margin-top: 0; }
.demo-app .summary-line {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: #d5e1f1;
}
.demo-app .summary-line span:first-child { color: var(--muted); }
.demo-app .summary-total { font-size: 1.2rem; font-weight: 950; color: #4ade80; border-bottom: 0; }

.demo-app .final-card, .demo-app .confirmation-card { padding: 24px; }
.demo-app .final-group { padding: 16px 0; border-bottom: 1px solid var(--border); }
.demo-app .final-group:first-child { padding-top: 0; }
.demo-app .final-group h3 { margin: 0 0 10px; }
.demo-app .final-row { display: flex; justify-content: space-between; gap: 20px; margin: 8px 0; color: #d7e3f2; }
.demo-app .final-row span:first-child { color: var(--muted); }
.demo-app .grand-total { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 1.25rem; }
.demo-app .grand-total strong { font-size: 2rem; color: #4ade80; }
.demo-app .confirmation-card { text-align: center; }
.demo-app .confirmation-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(34,197,94,.15);
  color: #4ade80;
  font-size: 2rem;
  font-weight: 900;
}
.demo-app .confirmation-card p { color: var(--muted); line-height: 1.65; }
.demo-app .confirmation-card .btn { margin-top: 10px; }

.demo-app .alert {
  margin-top: 16px;
  border-radius: 13px;
  padding: 13px 15px;
}
.demo-app .alert.error { color: #fecdd3; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); }
.demo-app .alert.success { color: #bbf7d0; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); }
.demo-app .hidden { display: none !important; }

.demo-app .loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4,8,15,.86);
  backdrop-filter: blur(12px);
}
.demo-app .loading-card {
  width: min(460px, 100%);
  text-align: center;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #0f1725;
  box-shadow: var(--shadow);
}
.demo-app .spinner {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 5px solid #263349;
  border-top-color: #1f8fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.demo-app .loading-card p { color: var(--muted); }
.demo-app .loading-progress { height: 9px; overflow: hidden; border-radius: 99px; background: #253247; }
.demo-app .loading-progress span { display: block; height: 100%; width: 10%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .35s ease; }

.demo-app .site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 0 40px;
  color: var(--muted);
  border-top: 1px solid rgba(255,255,255,.07);
}

@media (max-width: 960px) {
  .demo-app .form-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-app .vehicles-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-app .extras-layout, .demo-app .final-layout { grid-template-columns: 1fr; }
  .demo-app .sticky-summary { position: static; }
}
@media (max-width: 640px) {
  .demo-app .header-inner, .demo-app .page-shell, .demo-app .site-footer { width: min(100% - 20px, 1240px); }
  .demo-app .tech-badge { display: none; }
  .demo-app .page-shell { padding-top: 32px; }
  .demo-app .stepper { grid-template-columns: repeat(4, minmax(74px,1fr)); overflow-x: auto; }
  .demo-app .step { font-size: .72rem; padding: 13px 5px; }
  .demo-app .step span { display: block; margin: 0 auto 5px; }
  .demo-app .section-heading, .demo-app .form-actions, .demo-app .stage-actions, .demo-app .site-footer { align-items: stretch; flex-direction: column; }
  .demo-app .form-grid, .demo-app .vehicles-grid { grid-template-columns: 1fr; }
  .demo-app .field-wide { grid-column: span 1; }
  .demo-app .form-card { padding: 16px; }
  .demo-app .vehicle-image { height: 180px; }
}

/* Composición compacta y proporcionada de la página Demo */
.demo-app .page-shell{position:relative;width:min(1120px,calc(100% - 32px));padding:28px 0 58px}
.demo-app .page-shell::after{content:"";position:absolute;z-index:2;top:24px;right:8px;width:112px;aspect-ratio:1;background:url("../img/logo-chatbot.png") center/contain no-repeat;pointer-events:none}
.demo-app .hero{max-width:860px;margin:0 auto 20px;padding:22px 28px;text-align:center;background:linear-gradient(145deg,rgba(12,27,46,.72),rgba(7,17,31,.5));border:1px solid rgba(69,199,255,.15);border-radius:22px}
.demo-app .hero .eyebrow{display:inline-flex;justify-content:center}
.demo-app .hero .eyebrow::before{display:none}
.demo-app .hero h1{max-width:760px;margin:8px auto 9px;font-size:clamp(2rem,3.6vw,3.35rem);line-height:1.04}
.demo-app .hero p{max-width:760px;margin:0 auto;font-size:.98rem;line-height:1.5}
.demo-app .stepper{max-width:920px;margin:0 auto 20px}
.demo-app .step{padding:13px 10px}
.demo-app .step span{width:25px;height:25px}
.demo-app .section-heading{align-items:center;margin-bottom:15px}
.demo-app .section-heading h2{font-size:clamp(1.55rem,2.4vw,2rem)}
.demo-app .form-card{padding:20px}
.demo-app .form-grid{gap:12px 14px}
.demo-app input,.demo-app textarea,.demo-app select{padding:11px 13px}
.demo-app .native-wrap{padding:11px 13px}
.demo-app .form-actions,.demo-app .stage-actions{margin-top:17px}

@media(max-width:720px){
  .demo-app .page-shell{width:min(100% - 20px,1120px);padding:74px 0 42px}
  .demo-app .page-shell::after{top:8px;right:6px;width:62px}
  .demo-app .hero{margin-bottom:13px;padding:16px 15px;border-radius:17px}
  .demo-app .hero h1{margin:6px auto 7px;font-size:clamp(1.72rem,7.7vw,2.35rem);line-height:1.06}
  .demo-app .hero p{font-size:.88rem;line-height:1.42}
  .demo-app .stepper{grid-template-columns:repeat(4,minmax(64px,1fr));margin-bottom:16px;border-radius:14px}
  .demo-app .step{padding:9px 3px;font-size:.68rem}
  .demo-app .step span{width:23px;height:23px;margin:0 auto 3px}
  .demo-app .section-heading{align-items:center;text-align:center;margin-bottom:13px}
  .demo-app .section-heading>div:first-child{width:100%}
  .demo-app .section-heading h2{font-size:1.5rem}
  .demo-app .section-heading p{font-size:.87rem}
  .demo-app .example-buttons{width:100%;justify-content:center}
  .demo-app .example-buttons .btn{flex:1;min-width:88px;padding:9px 8px}
  .demo-app .form-card{padding:14px;border-radius:17px}
  .demo-app .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 9px}
  .demo-app .field-wide{grid-column:span 2}
  .demo-app .field>span{font-size:.78rem}
  .demo-app input,.demo-app textarea,.demo-app select,.demo-app .native-wrap{font-size:16px}
  .demo-app .privacy-note{text-align:center}
  .demo-app .form-actions .btn,.demo-app .stage-actions .btn{width:100%}
  .demo-app .vehicles-grid{grid-template-columns:1fr 1fr;gap:10px}
  .demo-app .vehicle-image{height:120px}
  .demo-app .vehicle-card{padding:11px}
  .demo-app .vehicle-card h3{font-size:.95rem}
  .demo-app .vehicle-specs{flex-direction:column;gap:3px;font-size:.78rem}
  .demo-app .vehicle-bottom{align-items:stretch;flex-direction:column}
}

@media(max-width:390px){
  .demo-app .hero p{display:none}
  .demo-app .form-grid{grid-template-columns:1fr}
  .demo-app .field-wide{grid-column:span 1}
  .demo-app .vehicles-grid{grid-template-columns:1fr}
  .demo-app .vehicle-image{height:155px}
}

/* Cabecera final: pequeña, vertical y centrada */
.demo-app .hero{
  display:block!important;
  min-height:0!important;
  height:auto!important;
  max-width:900px!important;
  margin:0 auto 14px!important;
  padding:14px 22px!important;
  overflow:visible!important;
  text-align:center!important;
}
.demo-app .hero::before,.demo-app .hero::after{display:none!important}
.demo-app .hero h1{
  max-width:820px!important;
  margin:0 auto 5px!important;
  font-size:clamp(1.65rem,2.8vw,2.45rem)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}
.demo-app .hero p{
  max-width:790px!important;
  margin:0 auto!important;
  font-size:.9rem!important;
  line-height:1.42!important;
}
.demo-app .hero .eyebrow{
  display:inline-flex!important;
  margin-top:8px!important;
  padding:5px 10px!important;
  color:#75d5ff!important;
  background:rgba(31,143,255,.09)!important;
  border:1px solid rgba(69,199,255,.18)!important;
  border-radius:999px!important;
  font-size:.66rem!important;
  letter-spacing:.13em!important;
}

/* Vehículos completos y centrados en todas las tarjetas */
.demo-app .vehicle-image{
  height:180px!important;
  padding:8px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#f8fafc,#eef3f8)!important;
}
.demo-app .vehicle-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:scale(1.14)!important;
  transform-origin:center center!important;
}

@media(max-width:720px){
  .demo-app .hero{margin-bottom:10px!important;padding:11px 12px!important}
  .demo-app .hero h1{font-size:clamp(1.42rem,6.3vw,1.9rem)!important}
  .demo-app .hero p{font-size:.79rem!important;line-height:1.35!important}
  .demo-app .hero .eyebrow{margin-top:6px!important;font-size:.58rem!important}
  .demo-app .vehicle-image{height:125px!important;padding:4px!important}
  .demo-app .vehicle-image img{transform:scale(1.12)!important}
}

@media(max-width:390px){
  .demo-app .hero p{display:block!important}
  .demo-app .vehicle-image{height:165px!important}
  .demo-app .vehicle-image img{transform:scale(1.14)!important}
}