/* ==========================================================================
   RagTime · home "La central"
   Estética clásica de RagTime (amarillo + tinta) y el relato con el tablero al costado.
   ========================================================================== */

/* fuentes propias: variables, recortadas a latín (ver docs/fuentes.md) */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/bricolage.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/instrument.woff2) format('woff2'); }

:root {
  --amarillo: #FFD84D;
  --amarillo-suave: #FFF1B8;
  --tinta: #1E1E2E;
  --tinta-2: #3A3A4E;
  --tinta-3: #6B6B80;
  --papel: #FFF9EA;
  --blanco: #FFFFFF;
  --rojo: #E5484D;
  --indigo: #5D5FEF;
  --verde: #25D366;
  --verde-oscuro: #128C7E;
  --linea: rgba(30, 30, 46, 0.10);
  --linea-2: rgba(30, 30, 46, 0.18);
  --sombra-lg: 0 24px 48px rgba(30, 30, 46, 0.18);
  --titulos: 'Bricolage Grotesque', 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --texto: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta-2); font-family: var(--texto); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 800; color: var(--tinta); margin: 0; letter-spacing: -0.025em; line-height: 1.04; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- botones ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 2px solid transparent; font-family: var(--titulos); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-tinta { background: var(--tinta); color: #fff; }
.btn-tinta:hover { background: #000; }
.btn-borde { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn-borde:hover { background: rgba(30, 30, 46, .07); }
.btn-lg { padding: 17px 28px; font-size: 18px; }
.btn-sm { padding: 10px 18px; font-size: 15px; }
.btn-bloque { width: 100%; }

/* ---- navegación ---- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--amarillo); border-bottom: 1px solid rgba(30, 30, 46, .08); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titulos); font-weight: 800; font-size: 22px; color: var(--tinta); }
.nav-links { display: flex; gap: 28px; }
.nav-links a { text-decoration: none; font-weight: 600; color: var(--tinta-2); }
.nav-links a:hover { color: var(--tinta); }

.rotulo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titulos); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); margin-bottom: 20px; }
.rotulo-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta); }
.rotulo-rojo { color: var(--rojo); }
.rotulo-rojo .rotulo-punto { background: var(--rojo); animation: titila 1s steps(1) infinite; }
@keyframes titila { 50% { opacity: .2; } }

/* ---- hero ---- */
.hero { background: var(--amarillo); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 48px; align-items: center; padding: 56px var(--gutter) 88px; }
.hero h1 { font-size: clamp(38px, 4.3vw, 60px); max-width: 15ch; }
.hero h1 em { font-style: normal; display: block; color: var(--tinta); opacity: .5; margin-top: 6px; }
.hero .lead { margin: 24px 0 30px; font-size: clamp(18px, 1.5vw, 20px); color: var(--tinta-2); max-width: 46ch; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.enlace-flecha { font-family: var(--titulos); font-weight: 700; font-size: 17px; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hero-frase { margin-top: 22px; font-family: var(--titulos); font-weight: 700; font-size: 17px; color: var(--tinta); }
.credenciales { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.meta-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 8px 14px; line-height: 1; }
.meta-badge-word { font-family: var(--texto); font-weight: 800; font-size: 18px; letter-spacing: -0.03em; color: #0866FF; }
.meta-badge-text { font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); border-left: 1px solid rgba(30, 30, 46, .15); padding-left: 10px; }
.credenciales-canales { display: inline-flex; gap: 7px; }
.credenciales-canales img { width: 30px; height: 30px; }

.hero-demo { position: relative; }
.hero-ragie { position: absolute; left: -92px; bottom: -64px; width: 170px; pointer-events: none; }

/* inbox animado */
.app { background: #fff; border-radius: 18px; box-shadow: var(--sombra-lg); overflow: hidden; font-size: 13px; }
.app-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--linea); background: #FBFBFD; }
.win { width: 10px; height: 10px; border-radius: 50%; }
.win:nth-child(1) { background: #FF6B5B; } .win:nth-child(2) { background: #FFC24A; } .win:nth-child(3) { background: #38D26F; }
.app-title { margin-left: 8px; font-weight: 600; color: var(--tinta-2); }
.app-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #0B6A5F; }
.app-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); animation: titila 1.6s steps(1) infinite; }
.app-body { display: grid; grid-template-columns: 210px 1fr; min-height: 430px; }
.app-list { border-right: 1px solid var(--linea); }
.app-search { margin: 10px; padding: 8px 12px; border-radius: 10px; background: #F3F3F8; color: var(--tinta-3); font-size: 12px; }
.conv { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--linea); }
.conv.is-active { background: #FFF6D1; }
.av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--av, #5D5FEF); color: #fff; font-weight: 700; font-size: 11px; flex: none; }
.conv-main { min-width: 0; display: grid; gap: 2px; }
.conv-main b { font-size: 13px; }
.conv-main small { color: var(--tinta-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; width: fit-content; }
.chan-wa { background: #E3F9EA; color: #0B6B37; }
.chan-ig { background: #FDE6EF; color: #C2185B; }
.chan-fb { background: #E5F1FF; color: #0062BF; }
.chan-tg { background: #E3F3FC; color: #13668F; }
.conv-meta { display: grid; justify-items: end; gap: 6px; font-size: 11px; color: var(--tinta-3); }
.unread { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--verde); color: #fff; font-style: normal; font-weight: 700; font-size: 10.5px; }
.unread:empty { display: none; }
.app-chat { display: flex; flex-direction: column; background: #F7F5F0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--linea); }
.chat-who { display: grid; }
.chat-who small { color: var(--tinta-3); font-size: 11.5px; }
.timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #E3F9EA; color: #0B6B37; }
.msgs { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.msg, .m { max-width: 84%; padding: 9px 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); line-height: 1.4; }
.msg { animation: entra .35s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg.in, .m.in { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.out, .m.out { align-self: flex-end; background: #DCF8C6; border-bottom-right-radius: 4px; }
.msg.bot, .m.bot { align-self: flex-end; background: var(--amarillo-suave); border-bottom-right-radius: 4px; }
.tag { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 3px; }
.tildes { display: block; text-align: right; font-size: 10.5px; color: #9AA0A6; margin-top: 3px; font-style: normal; }
.tildes.azul { color: #34B7F1; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.btns span { background: #fff; border: 1px solid var(--linea-2); padding: 5px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.btns span.elegido { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.msg.doc, .m.doc { display: flex; align-items: center; gap: 10px; }
.pdf { display: inline-grid; place-items: center; width: 34px; height: 40px; border-radius: 6px; background: #C9372C; color: #fff; font-style: normal; font-weight: 800; font-size: 9px; flex: none; }
.doc small { display: block; color: var(--tinta-3); font-size: 11px; }
.msg.sys, .m.sys { align-self: center; background: transparent; box-shadow: none; color: var(--tinta-3); font-size: 11.5px; padding: 2px 8px; }
.msg.typing { display: flex; gap: 4px; padding: 12px 14px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: #B9B9C6; animation: puntos 1.1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes puntos { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
.composer { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-top: 1px solid var(--linea); color: var(--tinta-3); }
.composer-icons { margin-left: auto; display: flex; gap: 10px; }
.ic { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: #E8E8EF; position: relative; }
.ic-mic { background: var(--tinta); }
.ic-mic::after { content: ""; position: absolute; left: 7px; top: 4px; width: 4px; height: 7px; border-radius: 2px; background: #fff; }

/* ---- la historia: relato a la izquierda, tablero fijo a la derecha ---- */
.historia { background: var(--papel); padding: 40px 0 60px; }
.historia-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: start; }
.tablero { position: sticky; top: 96px; padding-bottom: 170px; }
.tablero svg { display: block; width: 100%; height: auto; overflow: visible; }

.bloque { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; padding: 56px 0; }
.bloque .paso { background: transparent; box-shadow: inset 0 0 0 2px var(--tinta); transition: background .3s ease, box-shadow .3s ease; }
.bloque.is-activo .paso { background: var(--amarillo); box-shadow: none; }
.bloque h2 { font-size: clamp(32px, 3.7vw, 48px); max-width: 15ch; margin-bottom: 18px; }
.bloque h3 { font-size: clamp(28px, 3vw, 38px); max-width: 19ch; margin-bottom: 14px; }
.bloque p { max-width: 48ch; }
.remate { margin-top: 18px; font-family: var(--titulos); font-weight: 700; font-size: 20px; color: var(--tinta); line-height: 1.35; }
.paso { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--amarillo); font-family: var(--titulos); font-weight: 800; font-size: 19px; color: var(--tinta); margin-bottom: 18px; }

/* pantallitas del producto en cada paso */
.fig { margin: 26px 0 0; max-width: 470px; }
.fig figcaption { margin-top: 10px; font-size: 14px; color: var(--tinta-3); }
.ui { background: #fff; border-radius: 16px; box-shadow: 0 18px 44px rgba(30, 30, 46, .12); overflow: hidden; font-size: 14px; }
.ui-lista .ui-fila { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.ui-lista .ui-fila:last-child { border-bottom: 0; }
.ui-main { display: grid; gap: 3px; min-width: 0; }
.ui-main small { color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { display: inline-block; font-style: normal; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill-ok { background: #E3F9EA; color: #0B6B37; }
.pill-aviso { background: var(--amarillo-suave); color: #8A6100; }
.pill-urgente { background: #FFE1DD; color: #A8301F; }
.ui-chat { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #F7F5F0; }
.m.cobro { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.m.cobro span { font-size: 13px; color: var(--tinta-2); }
.m.cobro .pill { grid-row: 1 / span 2; grid-column: 2; }
.ui-ia { padding: 18px; display: grid; gap: 12px; }
.ia-pregunta { justify-self: end; background: var(--tinta); color: #fff; padding: 9px 14px; border-radius: 14px; border-bottom-right-radius: 4px; font-weight: 600; }
.ia-respuesta { display: grid; gap: 6px; background: var(--amarillo-suave); padding: 14px 16px; border-radius: 14px; border-bottom-left-radius: 4px; color: var(--tinta); }
.ia-respuesta b { font-family: var(--titulos); }

/* ---- tablero (SVG), estilo oscuro y amarillo ---- */
.cb-mueble { fill: var(--tinta); }
.cb-bisel { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 2; }
.cb-tornillo circle { fill: #2E2E42; }
.cb-tornillo path { stroke: #57576E; stroke-width: 2; stroke-linecap: round; }
.cb-titulo { font-family: var(--titulos); font-weight: 800; font-size: 17px; letter-spacing: .16em; fill: var(--amarillo); }
.cb-contador rect { fill: #14141F; stroke: rgba(255, 255, 255, .12); stroke-width: 1.5; }
.cb-contador-rotulo { font-family: var(--titulos); font-weight: 700; font-size: 12px; letter-spacing: .12em; fill: rgba(255, 255, 255, .55); }
.cb-contador-num { font-family: var(--titulos); font-weight: 800; font-size: 24px; text-anchor: end; fill: #FF6B5B; font-variant-numeric: tabular-nums; transition: fill .3s; }
.cb-contador.is-cero .cb-contador-num { fill: #4CD964; }
.cb-separador { stroke: rgba(255, 255, 255, .08); stroke-width: 1.5; }
.cb-encabezado { font-family: var(--titulos); font-weight: 700; font-size: 13px; letter-spacing: .16em; fill: rgba(255, 255, 255, .45); }
.cb-jack circle { fill: #2A2A3D; stroke: #4A4A61; stroke-width: 3; }
.cb-jack .cb-hueco { fill: #0B0B13; stroke: none; }
.cb-luz { fill: #3A3A50; transition: fill .25s; }
.cb-glow { fill: var(--amarillo); opacity: 0; transition: opacity .25s; }
.cb-lampara.is-on .cb-luz { fill: var(--amarillo); }
.cb-lampara.is-on .cb-glow { opacity: .3; }
.cb-lampara.is-blink .cb-luz { animation: cb-luz .55s steps(1) infinite; }
.cb-lampara.is-blink .cb-glow { animation: cb-glow .55s steps(1) infinite; }
@keyframes cb-luz { 0% { fill: var(--amarillo); } 50% { fill: #3A3A50; } }
@keyframes cb-glow { 0% { opacity: .35; } 50% { opacity: 0; } }
.cb-tag rect { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .12); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.cb-tag text { font-family: var(--titulos); font-weight: 700; font-size: 17px; letter-spacing: .05em; fill: rgba(255, 255, 255, .55); transition: fill .3s; }
.cb-tag.is-on rect { fill: var(--amarillo); stroke: var(--amarillo); }
.cb-tag.is-on text { fill: var(--tinta); }
.cb-ranura { fill: #0B0B13; stroke: rgba(255, 255, 255, .2); stroke-width: 2; }
.cb-papel { transform: translateY(-190px); transition: transform 1.8s cubic-bezier(.3, .1, .2, 1); }
.cb-papel.is-afuera { transform: translateY(0); }
.cb-papel-hoja { fill: #fff; stroke: rgba(30, 30, 46, .15); stroke-width: 1; }
.cb-papel text { font-family: var(--texto); font-weight: 600; font-size: 13px; fill: var(--tinta); }
.cb-papel .cb-papel-titulo { font-family: var(--titulos); font-weight: 800; letter-spacing: .08em; fill: #C0392B; }
.cb-cable { transition: opacity .35s; }
.cb-cable.is-fuera { opacity: 0; }
.cb-cable-sombra, .cb-cable-base, .cb-cable-brillo { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.4, .1, .2, 1); }
.cb-cable-base { stroke-width: 7; }
.cb-cable-sombra { stroke: rgba(0, 0, 0, .38); stroke-width: 9; }
.cb-cable-brillo { stroke: rgba(255, 255, 255, .3); stroke-width: 2; }
.cb-cable.is-in .cb-cable-sombra, .cb-cable.is-in .cb-cable-base, .cb-cable.is-in .cb-cable-brillo { stroke-dashoffset: 0; }
.cb-ficha { fill: var(--tinta); stroke-width: 3; opacity: 0; transition: opacity .2s; }
.cb-ficha.cb-ficha-2 { transition-delay: .65s; }
.cb-cable.is-in .cb-ficha { opacity: 1; }

/* ---- sin vueltas ---- */
.sin-vueltas { background: var(--tinta); color: #fff; padding: 88px 0; }
.sin-vueltas h2 { color: var(--amarillo); font-size: clamp(36px, 4.6vw, 60px); margin-bottom: 18px; }
.sin-vueltas p { font-family: var(--titulos); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; max-width: 34ch; color: rgba(255, 255, 255, .9); }

/* ---- guía ---- */
.guia { background: #fff; padding: 88px 0; }
.guia h2 { font-size: clamp(32px, 3.8vw, 48px); max-width: 18ch; }
.guia-columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.guia-grupo h3 { font-size: 20px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 3px solid var(--amarillo); }
.guia-grupo ul { list-style: none; margin: 0; padding: 0; }
.guia-grupo li { padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 15.5px; color: var(--tinta-2); }
.integraciones { margin-top: 34px; font-size: 15px; color: var(--tinta-3); }
.integraciones b { color: var(--tinta); margin-right: 6px; }

/* ---- preguntas y pedido ---- */
.cierre { padding: 88px 0; background: var(--papel); }
.cierre-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
.preguntas h2 { font-size: clamp(32px, 3.8vw, 48px); margin-bottom: 18px; }
.preguntas details { border-top: 1px solid var(--linea-2); }
.preguntas details:last-of-type { border-bottom: 1px solid var(--linea-2); }
.preguntas summary { cursor: pointer; list-style: none; font-family: var(--titulos); font-weight: 700; font-size: 20px; color: var(--tinta); padding: 18px 44px 18px 0; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 2.5px solid var(--tinta); border-bottom: 2.5px solid var(--tinta); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.preguntas details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.preguntas details p { padding: 0 0 20px; max-width: 58ch; }
.pedido { display: grid; gap: 14px; padding: 32px; border-radius: 22px; background: var(--amarillo); }
.pedido h2 { font-size: 36px; }
.pedido-bajada { margin-bottom: 6px; color: var(--tinta-2); }
.pedido label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: var(--tinta); }
.pedido input { font: inherit; font-size: 16px; padding: 14px 16px; border-radius: 12px; border: 2px solid transparent; background: #fff; color: var(--tinta); }
.pedido input:focus { outline: none; border-color: var(--tinta); }
.pedido input.con-error { border-color: var(--rojo); background: #FFF3F1; }
.enlace-wa { justify-self: center; font-weight: 600; color: var(--tinta); }

/* ---- pie ---- */
.pie { background: var(--tinta); color: rgba(255, 255, 255, .75); padding: 48px 0 36px; font-size: 15px; }
.pie a { color: #fff; }
.pie-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 18px 40px; }
.pie-marca { display: flex; gap: 12px; align-items: flex-start; }
.pie-marca b { color: #fff; font-family: var(--titulos); font-size: 18px; }
.pie-legal { grid-column: 1 / -1; font-size: 13px; color: rgba(255, 255, 255, .62); border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 18px; }

.wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 8px 18px rgba(18, 140, 126, .4); transition: transform .15s; }
.wa-flotante:hover { transform: scale(1.06); }

/* ---- movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bloque .paso { transition: none; }
  .rotulo-rojo .rotulo-punto, .app-live i, .msg { animation: none; }
  .cb-lampara.is-blink .cb-luz, .cb-lampara.is-blink .cb-glow { animation: none; }
  .cb-lampara.is-blink .cb-luz { fill: var(--amarillo); }
  .cb-cable-base, .cb-cable-brillo, .cb-ficha, .cb-cable, .cb-papel { transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 40px; }
  .hero-ragie { left: auto; right: -14px; bottom: -40px; width: 160px; }
  .guia-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  :root { --gutter: 16px; }
  body { font-size: 16.5px; }
  .nav-links { display: none; }
  .nav-in { height: 58px; }
  .historia { padding-top: 0; }
  .historia-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tablero { order: -1; top: 58px; z-index: 5; padding: 10px var(--gutter) 12px; margin: 0 calc(-1 * var(--gutter)); background: var(--papel); border-bottom: 1px solid var(--linea); }
  .cb-papel { display: none; }
  .cb-tag text { font-size: 19px; }
  .bloque { min-height: 0; padding: 40px 0 48px; }
  .bloque h2 { font-size: clamp(28px, 7.6vw, 36px); }
  .bloque h3 { font-size: clamp(26px, 7vw, 32px); }
  .fig { max-width: none; }
  .acciones .btn { flex: 1 1 100%; }
  .acciones .enlace-flecha { margin: 0 auto; }
  .app-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app-list { display: none; }
  .msgs { min-height: 300px; }
  .sin-vueltas, .guia, .cierre { padding: 60px 0; }
  .guia-columnas { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cierre-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pedido { padding: 22px; }
  .pie-grid { grid-template-columns: minmax(0, 1fr); }
  .wa-flotante { width: 52px; height: 52px; right: 14px; bottom: 14px; }
}

/* ==========================================================================
   v6: secciones nuevas del orden aprobado
   ========================================================================== */

/* hero sin rótulo: el título arranca arriba */
.hero h1 { max-width: 13ch; }
.hero .lead { margin: 22px 0 14px; }
.hero-frase { margin: 0 0 26px; }

/* canales + Meta: una fila limpia debajo del título */
.credenciales { flex-direction: row; flex-wrap: wrap; align-items: center; margin: 22px 0 0; gap: 12px 18px; }
.credenciales-canales { gap: 7px; }
.credenciales-canales img { width: 34px; height: 34px; }
.meta-badge { gap: 10px; padding: 7px 13px; border-radius: 10px; text-decoration: none; transition: transform .15s; }
.meta-badge:hover { transform: translateY(-1px); }
.meta-badge-marca { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.meta-badge-word { font-size: 17px; }
.meta-badge-oficial { font-weight: 700; font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.meta-badge-lado { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; border-left: 1px solid rgba(30, 30, 46, .15); padding-left: 10px; }
.meta-badge-text { font-size: 11.5px; border-left: 0; padding-left: 0; }
.meta-badge-que { font-weight: 600; font-size: 10.5px; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 2px; }
.meta-badge:hover .meta-badge-que { color: #0866FF; }
@media (max-width: 420px) {
  .credenciales { gap: 10px 12px; }
  .credenciales-canales { gap: 5px; }
  .credenciales-canales img { width: 30px; height: 30px; }
}

/* 2. es para vos si */
.para-vos { background: #fff; padding: 84px 0; border-bottom: 1px solid var(--linea); }
.para-vos h2 { font-size: clamp(32px, 3.8vw, 48px); margin-bottom: 30px; }
.para-vos-lista { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
/* cada frase, con una lamparita roja: un mensaje sin atender, como en el tablero */
.para-vos-lista li { position: relative; padding: 18px 0 18px 36px; border-bottom: 1px solid var(--linea-2); font-family: var(--titulos); font-weight: 700; font-size: clamp(21px, 2vw, 27px); line-height: 1.25; color: var(--tinta); }
.para-vos-lista li::before { content: ""; position: absolute; left: 2px; top: calc(18px + .625em - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 5px rgba(229, 72, 77, .16); }
.para-vos-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 0 52px; align-items: start; }
.para-vos-grid h2 { grid-column: 1 / -1; }
/* la "caja negra", abierta: el remate de la sección */
.caja-abierta { background: var(--tinta); color: var(--papel); border-radius: 22px; padding: 34px 34px 30px; }
.caja-canales { display: flex; gap: 7px; margin-bottom: 22px; }
.caja-canales img { width: 30px; height: 30px; }
.caja-abierta p { margin: 0 0 22px; font-family: var(--titulos); font-weight: 800; font-size: clamp(24px, 2.3vw, 31px); line-height: 1.18; color: #fff; }
.caja-abierta .caja-sub { margin: -10px 0 22px; font-family: var(--texto); font-weight: 500; font-size: 17px; line-height: 1.5; color: rgba(255, 249, 234, .8); text-wrap: balance; }
.caja-abierta .enlace-flecha { color: var(--amarillo); }

/* 4. lo que nadie más hace */
.nadie-mas { background: var(--amarillo); padding: 88px 0; }
.nadie-mas h2 { font-size: clamp(32px, 4vw, 52px); max-width: 18ch; }
.nadie-mas-bajada { margin-top: 16px; font-size: clamp(18px, 1.6vw, 20px); max-width: 56ch; color: var(--tinta-2); }
.flujo { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: flujo; }
.flujo li { position: relative; padding: 22px 26px 22px 0; border-top: 3px solid var(--tinta); }
.flujo li::before { counter-increment: flujo; content: counter(flujo); position: absolute; top: -17px; left: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tinta); color: var(--amarillo); font-family: var(--titulos); font-weight: 800; font-size: 14px; }
.flujo b { display: block; font-family: var(--titulos); font-weight: 800; font-size: 21px; color: var(--tinta); margin: 10px 0 6px; }
.flujo span { font-size: 15.5px; color: var(--tinta-2); line-height: 1.45; }

/* 5. ya lo usan */
.casos { background: #fff; padding: 88px 0; }
.casos h2 { font-size: clamp(32px, 3.8vw, 48px); margin-bottom: 34px; }
.casos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* una tarjeta por rubro: qué hace RagTime ahí y la charla que lo muestra */
.rubro { display: flex; flex-direction: column; background: var(--papel); border-radius: 20px; padding: 26px 24px 24px; }
.rubro h3 { font-family: var(--titulos); font-weight: 800; font-size: 23px; line-height: 1.15; color: var(--tinta); margin: 0 0 8px; }
.rubro > p { margin: 0 0 20px; font-size: 16px; line-height: 1.5; color: var(--tinta-2); }
.rubro .ui { margin-top: auto; font-size: 13.5px; box-shadow: 0 10px 28px rgba(30, 30, 46, .10); }
.rubro .ui-chat { padding: 14px; gap: 8px; }
.rubro .m.doc small { display: block; font-size: 12px; color: var(--tinta-3); }
.rubro-otro { background: var(--amarillo); justify-content: center; }
.rubro-otro > p { font-size: 18px; color: var(--tinta); }
.rubro-otro .btn { align-self: flex-start; }
/* audio de WhatsApp */
.m.audio { display: flex; align-items: center; gap: 9px; }
.m.audio .play { width: 0; height: 0; border-left: 11px solid var(--tinta-3); border-top: 7px solid transparent; border-bottom: 7px solid transparent; flex: none; }
.onda { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.onda i { width: 3px; height: var(--h); border-radius: 2px; background: var(--tinta-3); }
.m.audio small { font-size: 11.5px; color: var(--tinta-3); }

/* 6. precios y condiciones: el texto a la izquierda y la tarjeta del precio a la derecha */
.precios-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; }
.precio-card { background: #fff; color: var(--tinta); border-radius: 22px; padding: 28px; box-shadow: 0 24px 48px rgba(0, 0, 0, .35); }
.precio-promo { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--amarillo); color: var(--tinta); font-family: var(--titulos); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.precio-filas { margin: 14px 0 22px; }
.precio-filas > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.precio-filas dt { font-weight: 600; font-size: 16px; color: var(--tinta-2); }
.precio-filas dd { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 8px; }
.precio-filas del { font-size: 16px; color: var(--tinta-3); }
.precio-filas b { font-family: var(--titulos); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: var(--tinta); }
.precio-filas > div:first-child b { font-size: 42px; }
.precio-filas small { font-size: 14px; color: var(--tinta-3); }
.sin-vueltas .precio-card .precio-nota { margin-top: 16px; max-width: none; font-family: var(--texto); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--tinta-3); }
.precios-grid + .incluye { margin-top: 44px; }
/* texto sólo para lectores de pantalla ("antes" y "ahora" del precio tachado) */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 520px) {
  .precio-card { padding: 24px 22px; }
  /* el abono y el usuario (los que tienen precio tachado) van en dos renglones: el nombre arriba y el precio abajo */
  .precio-filas > div:nth-child(-n+2) { display: block; }
  .precio-filas > div:nth-child(-n+2) dd { justify-content: flex-start; margin-top: 4px; }
  .precio-filas > div:first-child b { font-size: 36px; }
}

/* condiciones + todo lo que incluye */
.incluye { margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, .18); }
.incluye summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--titulos); font-weight: 700; font-size: 18px; color: var(--amarillo); }
.incluye summary::-webkit-details-marker { display: none; }
.incluye summary::after { content: " +"; }
.incluye[open] summary::after { content: " –"; }
.incluye-columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-bottom: 10px; }
.incluye h3 { color: #fff; font-size: 18px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 2px solid var(--amarillo); }
.incluye ul { list-style: none; margin: 0; padding: 0; }
.incluye li { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 15px; color: rgba(255, 255, 255, .8); }
.incluye .integraciones { margin-top: 22px; font-family: var(--texto); font-size: 15px; color: rgba(255, 255, 255, .6); max-width: none; }
.incluye .integraciones b { color: #fff; }

@media (max-width: 1020px) {
  .flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .casos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .incluye-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .precios-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .precio-card { max-width: 520px; }
}
@media (max-width: 960px) {
  .para-vos, .nadie-mas, .casos { padding: 60px 0; }
  .para-vos-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .caja-abierta { padding: 26px 22px 24px; margin-top: 32px; }
  .flujo, .casos-grid, .incluye-columnas { grid-template-columns: minmax(0, 1fr); }
}