:root {
  --blanco: #FFFFFF;
  --azul: #023661;
  --medio: #7FA6D1;
  --hielo: #EAF2FA;
  --tinta: #0A0C12;
  --senal: #DB5227;
  --texto: #1A1F2B;
  --suave: #5E6878;
  --linea: #DDE6F0;
  --verde: #1E7B53;
  --verde-claro: #E3F3EA;
  --ambar: #A86A00;
  --ambar-claro: #FBEFD8;
  --rojo: #B3362B;
  --rojo-claro: #F9E1DE;
  /* Marca de la automotora de ejemplo */
  --auto-osc: #15191F;
  --auto-acento: #0F6B5C;
  --auto-claro: #E5F1EE;
  --wa: #075E54;
  --wa-fondo: #EFE7DE;
  --wa-mio: #D9FDD3;
  --radio: 16px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Outfit', system-ui, -apple-system, sans-serif; color: var(--texto); background: var(--blanco); -webkit-font-smoothing: antialiased; line-height: 1.4; min-height: 100vh; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select { font: inherit; }
h1, h2, h3, p { margin: 0; }

/* ---------- Barra de Impulsa ---------- */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 14px clamp(16px, 3vw, 40px); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.logo img { height: 26px; display: block; }
.pasos { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.pasos::-webkit-scrollbar { display: none; }
.pasos a { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--suave); text-decoration: none; white-space: nowrap; }
.pasos a span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hielo); color: var(--azul); font-size: 12px; font-weight: 700; }
.pasos a:hover { color: var(--azul); }
.pasos a.activo { background: var(--azul); color: #fff; }
.pasos a.activo span { background: rgba(255,255,255,.18); color: #fff; }
.flechas { display: flex; gap: 6px; }
.flechas button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); font-size: 18px; color: var(--azul); }
.flechas button:hover { background: var(--hielo); }


/* ---------- Escena ---------- */
#escena { max-width: 1320px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px) 96px; }
.escena { animation: entra .35s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.titulo { max-width: 860px; margin-bottom: clamp(24px, 3vw, 40px); }
.titulo h1 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; color: var(--azul); margin-bottom: 12px; }
.titulo p { font-size: clamp(17px, 1.5vw, 20px); color: var(--suave); font-weight: 300; line-height: 1.5; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: var(--azul); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.boton:hover { background: #01294b; }
.boton.claro { background: var(--hielo); color: var(--azul); }
::placeholder { color: #A7B0BC; opacity: 1; }

/* ---------- Dibujo de autos ---------- */
.auto-img { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #F7F8FA 0%, #E3E7EC 70%, #D5DAE0 100%); }
.auto-img svg { position: absolute; inset: 8% 6% 6%; width: 88%; height: 86%; }
.auto-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.auto-img.celular { background: linear-gradient(180deg, #B9B4A8 0%, #8F8B80 60%, #6E6B63 100%); }
.auto-img.celular svg { inset: 20% 2% 2% 14%; width: 92%; transform: rotate(-3deg); filter: saturate(.6) brightness(.85); }

/* ---------- 1. Auto publicado ---------- */
.flujo { display: grid; grid-template-columns: .8fr auto 1.4fr; gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.columna h3 { font-size: 15px; font-weight: 600; color: var(--suave); margin-bottom: 12px; }
.telefono { border-radius: 34px; background: var(--tinta); padding: 12px; box-shadow: 0 30px 60px -30px rgba(2,54,97,.45); max-width: 340px; }
.telefono .pantalla { border-radius: 24px; overflow: hidden; background: var(--wa-fondo); min-height: 520px; display: flex; flex-direction: column; }
.wa-cab { background: var(--wa); color: #fff; padding: 14px 16px; display: flex; gap: 10px; align-items: center; }
.wa-cab .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--auto-acento); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.wa-cab b { display: block; font-size: 15px; font-weight: 600; }
.wa-cab small { font-size: 12px; opacity: .8; }
.wa-cuerpo { padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.globo { max-width: 86%; padding: 8px 10px 6px; border-radius: 10px; font-size: 14px; line-height: 1.4; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.08); align-self: flex-start; }
.globo.mio { background: var(--wa-mio); align-self: flex-end; }
.globo time { display: block; text-align: right; font-size: 11px; color: #667; margin-top: 2px; }
.globo .miniaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 4px; }
.globo .miniaturas .auto-img { border-radius: 6px; }
.flecha-grande { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--azul); font-weight: 600; font-size: 14px; text-align: center; padding-top: 80px; }
.flecha-grande svg { width: 56px; height: 20px; }
.ficha-pub { border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; background: #fff; }
.ficha-pub h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.ficha-pub .precio { font-size: 26px; font-weight: 700; color: var(--auto-osc); margin: 4px 0 10px; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 14px; color: var(--suave); margin: 0 0 12px; }
.datos b { color: var(--texto); font-weight: 600; display: block; font-size: 15px; }
.canales { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.canales li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--verde-claro); font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(6px); transition: .35s ease; }
.canales li.listo { opacity: 1; transform: none; }
.canales li i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; font-size: 12px; flex: none; }
.canales li small { margin-left: auto; color: var(--suave); font-weight: 400; }
.qr { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 12px; border: 1px dashed var(--medio); border-radius: 12px; font-size: 14px; color: var(--suave); }
.qr svg { width: 72px; height: 72px; flex: none; }
.qr b { color: var(--texto); display: block; }

/* ---------- 2. Web de la automotora ---------- */
.navegador { border-radius: 14px; border: 1px solid var(--linea); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(10,12,18,.5); }
.navegador .url { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #F3F5F8; border-bottom: 1px solid var(--linea); font-size: 13px; color: var(--suave); }
.navegador .url i { width: 11px; height: 11px; border-radius: 50%; background: #D7DCE3; }
.navegador .url span { margin-left: 10px; background: #fff; padding: 4px 14px; border-radius: 999px; flex: 1; max-width: 420px; }
.web-auto { background: #fff; }
.web-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: var(--auto-osc); color: #fff; }
.web-cab b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.web-cab b em { font-style: normal; color: #7FD3C2; }
.web-cab nav { display: flex; gap: 20px; font-size: 14px; opacity: .85; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 24px; border-bottom: 1px solid var(--linea); align-items: center; }
.filtros select, .filtros input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; font-size: 14px; color: var(--texto); }
.filtros .cuenta { margin-left: auto; font-size: 14px; color: var(--suave); }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; padding: 22px 24px 28px; }
.tarjeta { text-align: left; border: 1px solid var(--linea); border-radius: 14px; padding: 10px; background: #fff; transition: .2s ease; }
.tarjeta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(10,12,18,.5); }
.tarjeta h4 { margin: 10px 4px 2px; font-size: 16px; font-weight: 600; }
.tarjeta p { margin: 0 4px; font-size: 13px; color: var(--suave); }
.tarjeta .precio { margin: 8px 4px 4px; font-size: 18px; font-weight: 700; color: var(--auto-osc); }
.vacio { padding: 40px 24px; color: var(--suave); }
.detalle { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; padding: 24px; }
.detalle .volver { grid-column: 1 / -1; justify-self: start; font-size: 14px; color: var(--auto-acento); font-weight: 600; }
.detalle h2 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.detalle .precio { font-size: 30px; font-weight: 700; margin: 6px 0 16px; color: var(--auto-osc); }
.detalle .notas { font-size: 15px; color: var(--suave); margin: 0 0 18px; line-height: 1.5; }
.wa-boton { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 12px; background: #25D366; color: #06331A; font-weight: 700; }
.miniaturas-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.miniaturas-fila .auto-img { border-radius: 8px; }

/* ---------- 3. Asistente ---------- */
.asistente { display: grid; grid-template-columns: 380px 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.asistente .telefono { max-width: none; }
.asistente .pantalla { min-height: 640px; max-height: 680px; }
.asistente .wa-cuerpo { overflow-y: auto; scroll-behavior: smooth; }
.escribiendo { align-self: flex-start; background: #fff; padding: 10px 14px; border-radius: 10px; display: flex; gap: 4px; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: #9AA; animation: punto 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.globo .video { position: relative; margin-bottom: 4px; }
.globo .video::after { content: '▶'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.globo.entra { animation: entra .25s ease both; }
.wa-hora { align-self: center; font-size: 12px; background: #fff; padding: 4px 10px; border-radius: 8px; color: #556; }
.controles { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.lado h3 { font-size: 15px; font-weight: 600; color: var(--suave); margin: 0 0 10px; }
.resumen { border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; background: #fff; margin-bottom: 22px; }
.resumen.oculto { opacity: .35; }
.resumen header { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; }
.resumen header b { font-size: 18px; font-weight: 600; }
.etiqueta { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--hielo); color: var(--azul); }
.etiqueta.verde { background: var(--verde-claro); color: var(--verde); }
.etiqueta.ambar { background: var(--ambar-claro); color: var(--ambar); }
.etiqueta.rojo { background: var(--rojo-claro); color: var(--rojo); }
.resumen dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; margin: 0; font-size: 15px; }
.resumen dt { color: var(--suave); }
.resumen dd { margin: 0; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--linea); font-size: 14px; background: #fff; }
.chip:hover { border-color: var(--azul); color: var(--azul); }
.reglas { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 14px; color: var(--suave); }
.reglas li::before { content: '—  '; color: var(--medio); }

/* ---------- 4. App de vendedores ---------- */
.alertas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.alerta { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; }
.alerta.rojo { background: var(--rojo-claro); color: var(--rojo); }
.alerta.ambar { background: var(--ambar-claro); color: var(--ambar); }
.alerta.verde { background: var(--verde-claro); color: var(--verde); }
.vendedores { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.vendedores button { padding: 8px 14px; border-radius: 999px; background: var(--hielo); color: var(--azul); font-size: 14px; font-weight: 500; }
.vendedores button.activo { background: var(--azul); color: #fff; }
.tablero-app { display: grid; grid-template-columns: 1fr 290px; gap: 20px; align-items: start; }
.kanban { display: grid; grid-template-columns: repeat(6, minmax(128px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.col { background: #F5F8FB; border-radius: 14px; padding: 10px; min-height: 360px; }
.col h4 { margin: 2px 4px 10px; font-size: 13px; font-weight: 600; color: var(--suave); display: flex; justify-content: space-between; }
.int { width: 100%; text-align: left; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 10px; margin-bottom: 8px; font-size: 13px; }
.int.sel { border-color: var(--azul); box-shadow: 0 0 0 2px rgba(2,54,97,.12); }
.int.atrasado { border-left: 3px solid var(--rojo); }
.int b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.int small { display: block; color: var(--suave); }
.int .prox { margin-top: 6px; font-weight: 500; color: var(--azul); }
.int.atrasado .prox { color: var(--rojo); }
.ficha-int { border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; position: sticky; top: 90px; }
.ficha-int h3 { font-size: 20px; font-weight: 600; }
.ficha-int .sub { color: var(--suave); font-size: 14px; margin: 2px 0 14px; }
.ficha-int dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 14px; margin: 14px 0; }
.ficha-int dt { color: var(--suave); }
.ficha-int dd { margin: 0; font-weight: 500; }
.ficha-int .acciones { display: grid; gap: 8px; margin-top: 14px; }
.ficha-int .acciones button { padding: 10px; border-radius: 10px; background: var(--hielo); color: var(--azul); font-weight: 600; font-size: 14px; }
.ficha-int .acciones button.fuerte { background: var(--azul); color: #fff; }

/* ---------- 5. Captación y post-venta ---------- */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.bloque { border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; }
.bloque h2 { font-size: 22px; font-weight: 600; color: var(--azul); margin-bottom: 4px; }
.bloque > p { color: var(--suave); margin-bottom: 16px; }
.lista-ofrecidos { display: grid; gap: 10px; }
.ofrecido { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px; background: #F5F8FB; border-radius: 12px; font-size: 14px; }
.ofrecido b { font-size: 16px; font-weight: 600; }
.ofrecido small { color: var(--suave); }
.ofrecido .etiqueta { align-self: start; justify-self: end; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--hielo); display: grid; gap: 16px; }
.linea-tiempo li { position: relative; }
.linea-tiempo li::before { content: ''; position: absolute; left: -29px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--medio); border: 2px solid #fff; }
.linea-tiempo li.hecho::before { background: var(--verde); }
.linea-tiempo b { display: block; font-weight: 600; }
.linea-tiempo small { color: var(--suave); font-size: 14px; }
.linea-tiempo em { font-style: normal; font-size: 13px; color: var(--azul); font-weight: 600; }

/* ---------- 6. Panel ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
.kpi { background: var(--hielo); border-radius: 14px; padding: 16px; }
.kpi b { display: block; font-size: 32px; font-weight: 600; color: var(--azul); letter-spacing: -.02em; line-height: 1.1; }
.kpi small { color: var(--suave); font-size: 14px; }
.panel-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--suave); padding: 8px 10px; border-bottom: 1px solid var(--linea); }
td { padding: 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tr.quedando td { background: #FFF8F5; }
.barrita { height: 8px; border-radius: 4px; background: var(--hielo); position: relative; min-width: 120px; }
.barrita i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--medio); }
tr.quedando .barrita i { background: var(--senal); }
.barras { display: grid; gap: 10px; }
.barra-canal { display: grid; grid-template-columns: 160px 1fr 28px; gap: 10px; align-items: center; font-size: 14px; }
.barra-canal .barrita i { background: var(--azul); }
.barra-canal.nocobra .barrita i { background: var(--medio); }
.nota-panel { font-size: 13px; color: var(--suave); margin-top: 12px; line-height: 1.5; }

.que-ve { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }

/* ---------- 8. Propuesta ---------- */
.propuesta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.promesa { background: var(--azul); color: #fff; border-radius: 20px; padding: clamp(24px, 3vw, 36px); }
.promesa h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 14px; }
.promesa p { font-weight: 300; font-size: 17px; line-height: 1.55; opacity: .9; }
.promesa ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; }
.promesa li { padding-left: 26px; position: relative; }
.promesa li::before { content: '✓'; position: absolute; left: 0; color: var(--medio); font-weight: 700; }
.precios { display: grid; gap: 10px; margin-bottom: 18px; }
.precio-fila { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 16px 18px; border: 1px solid var(--linea); border-radius: 14px; }
.precio-fila b { font-size: 17px; font-weight: 600; }
.precio-fila small { display: block; color: var(--suave); font-size: 14px; margin-top: 2px; }
.precio-fila strong { font-size: 22px; font-weight: 700; color: var(--azul); white-space: nowrap; }
.calculo { background: var(--hielo); border-radius: 16px; padding: 20px; }
.calculo h3 { font-size: 18px; font-weight: 600; color: var(--azul); margin-bottom: 12px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.campos label { font-size: 14px; color: var(--suave); display: grid; gap: 6px; }
.campos input { padding: 12px; border-radius: 10px; border: 1px solid var(--linea); font-size: 17px; font-weight: 600; color: var(--texto); background: #fff; width: 100%; }
.modo { display: flex; gap: 6px; margin-bottom: 14px; }
.modo button { flex: 1; padding: 10px; border-radius: 10px; background: #fff; font-weight: 500; font-size: 14px; color: var(--suave); }
.modo button.activo { background: var(--azul); color: #fff; }
.resultado { display: grid; gap: 6px; font-size: 15px; }
.resultado div { display: flex; justify-content: space-between; gap: 10px; }
.resultado .total { border-top: 1px solid rgba(2,54,97,.15); padding-top: 8px; margin-top: 4px; font-weight: 600; }
.resultado .clave { margin-top: 10px; padding: 14px; background: #fff; border-radius: 12px; font-size: 17px; color: var(--azul); display: block; }
.condiciones { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 14px; color: var(--suave); }
.condiciones b { color: var(--texto); font-weight: 600; }

/* ---------- Lo que me contó ---------- */
.conto { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--suave); }
.form label.ancho { grid-column: 1 / -1; }
.form input, .form select, .form textarea { padding: 11px 12px; border-radius: 10px; border: 1px solid var(--linea); font: inherit; font-size: 16px; color: var(--texto); background: #fff; width: 100%; }
.form textarea { min-height: 64px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus, .campos input:focus { outline: 2px solid var(--medio); outline-offset: 1px; border-color: var(--medio); }
.probado { grid-column: 1 / -1; }
.probado h3 { font-size: 15px; font-weight: 600; color: var(--suave); margin-bottom: 8px; }
.fila-probado { display: grid; grid-template-columns: 1fr 1fr 1fr 36px; gap: 8px; margin-bottom: 8px; }
.fila-probado input { padding: 10px; border-radius: 10px; border: 1px solid var(--linea); font-size: 15px; width: 100%; }
.fila-probado button { border-radius: 10px; color: var(--suave); }
.fila-probado button:hover { background: var(--hielo); }
.etiqueta-frase { background: var(--azul); color: #fff; border-radius: 20px; padding: clamp(22px, 3vw, 34px); position: sticky; top: 90px; }
.etiqueta-frase p { font-size: clamp(20px, 2vw, 26px); font-weight: 300; line-height: 1.4; }
.etiqueta-frase p b { font-weight: 600; }
.etiqueta-frase .domingo { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); font-size: 16px; font-weight: 300; }
.etiqueta-frase .acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.etiqueta-frase .acciones button { padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 14px; font-weight: 500; }
.etiqueta-frase .acciones button:hover { background: rgba(255,255,255,.24); }

/* ---------- Un lunes ---------- */
.lunes-grid { display: grid; grid-template-columns: 400px 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.lunes-grid .globo { max-width: 100%; font-size: 14.5px; }
.lunes-grid .globo ul { margin: 6px 0; padding-left: 18px; }
.lunes-grid .globo li { margin: 3px 0; }
.patas { display: grid; gap: 14px; }
.pata { text-align: left; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; padding: 20px; border-radius: 18px; background: var(--hielo); transition: .2s ease; }
.pata:hover { background: #DDEAF7; }
.pata span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--azul); font-size: 22px; font-weight: 700; }
.pata b { display: block; font-size: 20px; font-weight: 600; color: var(--azul); }
.pata small { font-size: 15px; color: var(--suave); }
.metafora { margin-top: 18px; font-size: 17px; font-weight: 300; color: var(--suave); line-height: 1.55; }

/* ---------- Pestañas dentro de un pilar ---------- */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.pestanas button { padding: 10px 16px; border-radius: 999px; background: var(--hielo); color: var(--azul); font-size: 15px; font-weight: 500; }
.pestanas button.activo { background: var(--azul); color: #fff; }
.foto-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.foto-par figure { margin: 0; }
.foto-par figcaption { font-size: 13px; color: var(--suave); margin-top: 6px; }

/* ---------- Propuesta y qué pasa ahora ---------- */
.patas-mini { display: grid; gap: 10px; margin: 22px 0 0; }
.patas-mini div { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.1); }
.patas-mini b { display: block; font-weight: 600; font-size: 17px; }
.patas-mini small { font-size: 14px; opacity: .8; }
.pedido { margin-top: 22px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--linea); display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pedido b { font-size: 18px; color: var(--azul); font-weight: 600; }
.pedido small { display: block; color: var(--suave); font-size: 14px; }
.semanas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.semana { border-radius: 18px; padding: 20px; background: var(--hielo); }
.semana .cuando { font-size: 13px; font-weight: 600; color: var(--azul); }
.semana h3 { font-size: 20px; font-weight: 600; color: var(--azul); margin: 6px 0 8px; }
.semana p { font-size: 15px; color: var(--suave); line-height: 1.5; }
.semana .ve { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(2,54,97,.12); font-size: 14px; color: var(--texto); }
.meta { margin-top: 22px; padding: 22px 24px; border-radius: 18px; background: var(--azul); color: #fff; font-size: clamp(18px, 1.8vw, 22px); font-weight: 300; line-height: 1.5; }
.meta b { font-weight: 600; }
.aviso-copia { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 40; }

/* ---------- Pantallas más chicas ---------- */
@media (max-width: 1100px) {
  .conto, .flujo, .asistente, .tablero-app, .dos, .panel-grid, .lunes-grid, .propuesta, .detalle, .ficha-pub, .foto-par { grid-template-columns: 1fr; }
  .semanas { grid-template-columns: 1fr 1fr; }
  .etiqueta-frase { position: static; }
  .flecha-grande { padding-top: 0; flex-direction: row; }
  .flecha-grande svg { transform: rotate(90deg); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .ficha-int { position: static; }
  .telefono { margin: 0 auto; }
}
@media (max-width: 640px) {
  .barra { flex-wrap: wrap; gap: 10px; }
  .pasos { order: 3; flex-basis: 100%; }
  .canales, .campos, .datos, .form, .semanas { grid-template-columns: 1fr; }
  .fila-probado { grid-template-columns: 1fr 36px; }
  .fila-probado input:not(:first-child) { grid-column: 1; }
  .web-cab nav { display: none; }
  .barra-canal { grid-template-columns: 110px 1fr 24px; }
  .resumen dl { grid-template-columns: 1fr; }
}

/* ---------- Detalles del chat ---------- */
.nota-chat { background: var(--verde-claro); color: var(--verde); font-weight: 600; }
.wa-cuerpo .auto-img { margin-bottom: 4px; }

/* Que ningún bloque empuje el ancho de la página */
body { overflow-x: clip; }
.conto > *, .flujo > *, .asistente > *, .tablero-app > *, .dos > *, .panel-grid > *, .lunes-grid > *, .propuesta > *, .detalle > *, .ficha-pub > *, .foto-par > *, .semanas > * { min-width: 0; }

/* ---------- Anuncios ---------- */
.sub-h { font-size: 15px; font-weight: 600; color: var(--suave); margin-bottom: 12px; }
.anuncios { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(20px, 3vw, 36px); align-items: start; }
.ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ad { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: #fff; font-size: 13px; }
.ad.gana { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(30,123,83,.15); }
.ad-cab { display: flex; gap: 8px; align-items: center; padding: 10px; }
.ad-cab .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--auto-osc); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.ad-cab b { display: block; font-size: 13px; }
.ad-cab small { color: var(--suave); font-size: 11px; }
.ad-foto { position: relative; aspect-ratio: 4 / 5; }
.ad-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-foto.video::after { content: '▶'; position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(10,12,18,.45); color: #fff; display: grid; place-items: center; font-size: 20px; }
.ad-texto { position: absolute; inset: auto 0 0 0; padding: 40px 12px 12px; background: linear-gradient(transparent, rgba(10,12,18,.78)); color: #fff; }
.ad-texto b { display: block; font-size: 17px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.ad-texto span { font-size: 12px; opacity: .9; }
.ad-cta { display: grid; gap: 8px; padding: 10px; border-bottom: 1px solid var(--linea); }
.ad-cta span { color: var(--suave); line-height: 1.35; }
.ad-cta em { font-style: normal; text-align: center; padding: 8px; border-radius: 8px; background: var(--hielo); color: var(--azul); font-weight: 600; }
.ad-res { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px; font-weight: 600; color: var(--texto); }
.ads-lado { display: grid; gap: 14px; }
.google { border: 1px solid var(--linea); border-radius: 14px; padding: 16px; }
.g-barra { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linea); font-size: 14px; color: var(--texto); margin-bottom: 14px; box-shadow: 0 2px 6px rgba(10,12,18,.06); }
.g-res { display: grid; gap: 4px; font-size: 14px; }
.g-res small { color: var(--suave); font-size: 12px; }
.g-res b { color: #1A0DAB; font-weight: 500; font-size: 17px; }
.g-res span { color: var(--suave); line-height: 1.45; }
.campanas { display: grid; gap: 8px; }
.campanas div { padding: 12px 14px; border-radius: 12px; background: var(--hielo); }
.campanas b { display: block; color: var(--azul); font-weight: 600; }
.campanas small { display: block; color: var(--suave); font-size: 13px; }
.campanas em { font-style: normal; font-size: 13px; color: var(--texto); font-weight: 500; }
.ia-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: stretch; }
.ia-grid .semanas { grid-template-columns: repeat(2, 1fr); }
.costo .barras-v { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; height: 170px; margin-top: 8px; }
.barras-v div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; font-size: 12px; }
.barras-v i { width: 100%; border-radius: 8px 8px 0 0; background: var(--medio); }
.barras-v div:last-child i { background: var(--azul); }
.barras-v span { font-weight: 600; color: var(--azul); }
.barras-v small { color: var(--suave); }
.barra-canal span small { display: block; font-size: 12px; color: var(--suave); }
.barra-canal { grid-template-columns: 200px 1fr 28px; }
@media (max-width: 1100px) {
  .anuncios, .ia-grid { grid-template-columns: 1fr; }
  .anuncios > *, .ia-grid > * { min-width: 0; }
}
@media (max-width: 640px) {
  .ads, .ia-grid .semanas { grid-template-columns: 1fr; }
  .barra-canal { grid-template-columns: 120px 1fr 24px; }
}