:root {
  --bg: #071315;
  --surface: #0d2022;
  --surface-2: #10282a;
  --surface-3: #153134;
  --text: #edf8f4;
  --muted: #a9bfbb;
  --line: rgba(222, 246, 239, .16);
  --line-strong: rgba(222, 246, 239, .28);
  --accent: #43d6a3;
  --accent-soft: rgba(67, 214, 163, .14);
  --accent-ink: #061b17;
  --danger: #ff9b9b;
  --display: 'Manrope', 'DM Sans', sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --radius: 18px;
  --max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.55; }
body, button, input, select, textarea { font-family: var(--body); }
img { max-width: 100%; height: auto; }
a { color: inherit; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 20; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.skip-link:focus { top: 16px; }

.site-header { position: sticky; top: 0; z-index: 10; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 13px max(22px, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid var(--line); background: rgba(7, 19, 21, .92); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { display: block; width: 186px; height: auto; aspect-ratio: 736 / 267; object-fit: contain; }
.site-header nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 2.3vw, 32px); white-space: nowrap; }
.site-header nav a { color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 700; }
.site-header nav a:hover { color: var(--text); }
.site-header nav .nav-cta { padding: 11px 15px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); }
.site-header nav .nav-cta:hover { background: var(--accent); color: var(--accent-ink); }

main { overflow: hidden; }
section { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr); align-items: center; gap: clamp(42px, 7vw, 112px); min-height: calc(100dvh - 76px); padding-top: clamp(62px, 9vw, 120px); padding-bottom: clamp(68px, 9vw, 120px); }
.eyebrow { margin: 0 0 22px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: var(--display); letter-spacing: -.045em; line-height: 1.03; }
h1 { max-width: 670px; font-size: clamp(3.2rem, 6.8vw, 7rem); font-weight: 800; }
h1 span { color: var(--accent); }
.hero-lead { max-width: 570px; margin: 28px 0 0; color: var(--muted); font-size: clamp(1.04rem, 1.7vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 13px 19px; border: 1px solid transparent; border-radius: 999px; text-decoration: none; font-size: .88rem; font-weight: 800; cursor: pointer; transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button.primary { background: var(--accent); color: var(--accent-ink); }
.button.primary:hover { background: #77e6bb; }
.button.secondary { border-color: var(--line-strong); color: var(--text); background: transparent; }
.button.secondary:hover { border-color: var(--accent); color: var(--accent); }

.hero-product { min-width: 0; padding: 13px; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--surface); box-shadow: 0 24px 72px rgba(0, 0, 0, .24); }
.product-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 8px 13px; color: var(--muted); font-size: .72rem; }
.product-bar strong { color: var(--accent); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.product-window { overflow: hidden; min-height: 470px; border: 1px solid var(--line); border-radius: 14px; background: #0a1718; }
.product-window a { display: block; height: 510px; background: #0a1718; }
.product-window img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .35s ease, filter .35s ease; }
.product-window a:hover img { transform: scale(1.015); filter: brightness(1.04); }
.product-link { display: block; padding: 13px 8px 1px; color: var(--accent); font-size: .78rem; font-weight: 800; text-decoration: none; }

.response-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0; padding: 26px max(22px, calc((100vw - var(--max)) / 2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), #0a1a1d); }
.response-strip div { position: relative; display: grid; grid-template-columns: clamp(58px, 5.4vw, 78px) 1fr; gap: clamp(14px, 1.7vw, 24px); align-items: center; min-height: 126px; padding: clamp(18px, 2.4vw, 30px); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.response-strip div:after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 85%); opacity: .72; }
.response-strip span { display: grid; place-items: center; width: clamp(58px, 5.4vw, 78px); height: clamp(58px, 5.4vw, 78px); border: 1px solid rgba(84,214,156,.58); border-radius: 20px 20px 20px 6px; background: rgba(84,214,156,.08); color: var(--accent); font-family: var(--display); font-size: clamp(1.45rem, 2.1vw, 2.2rem); font-weight: 900; letter-spacing: -.07em; transform: rotate(-3deg); }
.response-strip p { max-width: 17ch; margin: 0; color: var(--text); font-family: var(--display); font-size: clamp(1.18rem, 1.45vw, 1.48rem); font-weight: 820; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }

.pain { display: grid; grid-template-columns: minmax(0, .9fr) minmax(370px, 1.1fr); gap: clamp(54px, 9vw, 145px); padding-top: clamp(100px, 13vw, 180px); padding-bottom: clamp(100px, 13vw, 180px); }
.pain-copy h2 { max-width: 650px; font-size: clamp(2.4rem, 5vw, 5rem); }
.pain-copy p { max-width: 570px; margin: 28px 0 0; color: var(--muted); }
.pain-scene { align-self: center; padding: 29px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.scene-question { margin: 0 0 22px; color: var(--text); font-family: var(--display); font-size: 1.3rem; font-weight: 700; }
.scene-delay, .scene-answer { padding: 21px 0; border-top: 1px solid var(--line); }
.scene-delay span, .scene-answer span { display: block; margin-bottom: 8px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.scene-delay strong, .scene-answer strong { display: block; font-family: var(--display); font-size: 1.2rem; }
.scene-delay p, .scene-answer p { margin: 7px 0 0; color: var(--muted); font-size: .88rem; }
.scene-answer { border-top-color: var(--accent); }
.scene-answer span, .scene-answer strong { color: var(--accent); }

.system { padding-top: clamp(100px, 12vw, 160px); padding-bottom: clamp(100px, 12vw, 160px); }
.section-heading { max-width: 760px; }
.section-heading h2 { font-size: clamp(2.35rem, 5vw, 5rem); }
.section-heading p { margin: 22px 0 0; color: var(--muted); font-size: 1.04rem; }
.system-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 1px; margin-top: 70px; border: 1px solid var(--line); background: var(--line); }
.system-grid article { min-height: 240px; padding: clamp(25px, 4vw, 48px); background: var(--surface); }
.system-grid .system-main { grid-row: span 2; min-height: 480px; background: var(--surface-2); }
.system-grid .system-wide { grid-column: 1 / -1; min-height: auto; background: var(--surface-3); }
.system-label { display: block; margin-bottom: 48px; color: var(--accent); font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.system-grid h3 { max-width: 560px; font-size: clamp(1.6rem, 3vw, 2.75rem); }
.system-grid p { max-width: 560px; margin: 18px 0 0; color: var(--muted); }

.difference { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); gap: clamp(54px, 9vw, 150px); padding-top: clamp(100px, 12vw, 160px); padding-bottom: clamp(100px, 12vw, 160px); border-top: 1px solid var(--line); }
.difference-statement p { margin: 0 0 24px; color: var(--accent); font-weight: 800; }
.difference-statement h2 { max-width: 680px; font-size: clamp(2.4rem, 5vw, 5rem); }
.difference-list { border-top: 1px solid var(--line); }
.difference-list div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.difference-list strong { color: var(--accent); font-family: var(--display); font-size: 1.15rem; }
.difference-list p { margin: 0; color: var(--muted); }

.demo { display: grid; grid-template-columns: minmax(0, .82fr) minmax(360px, 1.18fr); gap: clamp(50px, 9vw, 140px); align-items: center; padding-top: clamp(100px, 12vw, 160px); padding-bottom: clamp(100px, 12vw, 160px); }
.demo-copy h2 { max-width: 620px; font-size: clamp(2.4rem, 5vw, 5rem); }
.demo-copy p { max-width: 530px; margin: 24px 0 30px; color: var(--muted); }
.demo-flow { border-top: 1px solid var(--line); }
.demo-flow div { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.demo-flow span { color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.demo-flow strong { font-family: var(--display); font-size: 1.17rem; }

.fit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(42px, 8vw, 120px); padding-top: clamp(90px, 10vw, 135px); padding-bottom: clamp(90px, 10vw, 135px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fit h2 { max-width: 760px; font-size: clamp(2.25rem, 4.6vw, 4.6rem); }
.fit p { margin: 21px 0 0; color: var(--muted); }
.fit aside { align-self: end; padding: 25px; border-left: 2px solid var(--accent); background: var(--accent-soft); }
.fit aside strong { font-family: var(--display); font-size: 1.2rem; }

.plans { padding-top: clamp(100px, 12vw, 160px); padding-bottom: clamp(100px, 12vw, 160px); }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 62px; }
.plan-card { display: flex; flex-direction: column; min-height: 620px; padding: clamp(26px, 4vw, 50px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.plan-card.featured { border-color: var(--accent); background: var(--surface-2); }
.plan-name { padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.plan-name span { color: var(--accent); font-family: var(--display); font-size: 1.55rem; font-weight: 800; }
.plan-name p { margin: 8px 0 0; color: var(--muted); }
.plan-price { display: grid; gap: 7px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.plan-price strong { font-family: var(--display); font-size: clamp(2.8rem, 4.2vw, 4.9rem); letter-spacing: -.07em; line-height: 1; }
.plan-price small { color: var(--muted); }
.plan-price b { margin-top: 10px; color: var(--accent); }
.plan-card ul { display: grid; gap: 10px; margin: 26px 0 32px; padding: 0; list-style: none; flex: 1; }
.plan-card li { position: relative; padding-left: 22px; color: var(--muted); }
.plan-card li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.payment-note { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; margin-top: 18px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.payment-note strong { color: var(--accent); font-family: var(--display); font-size: 1.18rem; }
.payment-note p { margin: 0; color: var(--muted); }

.faq { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: clamp(48px, 9vw, 140px); padding-top: clamp(100px, 12vw, 160px); padding-bottom: clamp(100px, 12vw, 160px); }
.faq-heading h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); }
.faq-heading p { margin: 20px 0 0; color: var(--muted); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: 1.12rem; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--accent); font-size: 1.6rem; font-weight: 400; transition: transform .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 720px; margin: 0; padding: 0 52px 24px 0; color: var(--muted); }

.contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(380px, 1.2fr); gap: clamp(48px, 9vw, 140px); padding-top: clamp(100px, 12vw, 160px); padding-bottom: clamp(100px, 12vw, 160px); }
.contact-copy h2 { max-width: 650px; font-size: clamp(2.4rem, 5vw, 5rem); }
.contact-copy > p:not(.eyebrow) { max-width: 580px; margin: 24px 0 0; color: var(--muted); }
.contact-summary { display: grid; gap: 10px; margin-top: 34px; }
.contact-summary span { width: fit-content; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--accent); font-size: .75rem; font-weight: 800; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.form-intro { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.form-intro strong { font-family: var(--display); }
.form-intro p { margin: 0; color: var(--muted); font-size: .76rem; }
.trap { position: absolute !important; left: -9999px !important; opacity: 0 !important; }
.field { display: grid; gap: 7px; }
.field.full, .consent, .submit, .form-note, .form-status, .thanks { grid-column: 1 / -1; }
.field label { font-size: .8rem; font-weight: 800; }
.field label small { color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; outline: none; background: var(--bg); color: var(--text); padding: 13px 14px; font-size: 16px; }
.field textarea { min-height: 122px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7e9994; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.error { min-height: 1em; color: var(--danger); font-size: .75rem; }
.consent { display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: .8rem; }
.consent input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.consent a { color: var(--accent); font-weight: 800; }
.submit { width: 100%; }
.form-note { margin: -3px 0 0; color: var(--muted); font-size: .74rem; text-align: center; }
.form-status { min-height: 1.4em; margin: 0; color: var(--accent); font-weight: 700; }
.thanks { padding: 20px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
.thanks h3 { font-size: 1.35rem; }
.thanks p { margin: 8px 0; color: var(--muted); }
.text-link { color: var(--accent); font-weight: 800; }

footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 30px; align-items: end; width: min(var(--max), calc(100% - 44px)); margin: 0 auto; padding: 42px 0 54px; border-top: 1px solid var(--line); }
.footer-brand img { display: block; width: 156px; height: auto; aspect-ratio: 736 / 267; object-fit: contain; }
.footer-brand p { margin: 8px 0 0; color: var(--muted); font-size: .76rem; }
footer > p { margin: 0; color: var(--muted); font-family: var(--display); font-weight: 700; }
footer nav { display: flex; justify-content: flex-end; gap: 20px; }
footer nav a { color: var(--muted); font-size: .78rem; text-decoration: none; }
footer nav a:hover { color: var(--accent); }

.button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-product { max-width: 760px; }
  .pain, .difference, .demo, .contact { grid-template-columns: 1fr; }
  .pain-scene, .demo-flow { max-width: 760px; }
  .fit { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .faq-heading { max-width: 700px; }
  footer { grid-template-columns: 1fr 1fr; }
  footer > p { display: none; }
}

@media (max-width: 820px) {
  .site-header nav a:not(.nav-cta) { display: none; }
  .response-strip { grid-template-columns: 1fr 1fr; }
  .system-grid { grid-template-columns: 1fr; }
  .system-grid .system-main { grid-row: auto; min-height: auto; }
  .system-grid .system-wide { grid-column: auto; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: auto; }
  .payment-note { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .field, .field.full, .consent, .submit, .form-note, .form-status, .thanks { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  section, footer { width: min(100% - 32px, var(--max)); }
  .site-header { min-height: 68px; padding: 10px 16px; }
  .brand img { width: 142px; }
  .site-header nav .nav-cta { padding: 9px 12px; font-size: .72rem; }
  .hero { padding-top: 56px; }
  h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .product-window iframe { height: 480px; }
  .response-strip { grid-template-columns: 1fr; padding: 16px; }
  .response-strip div { min-height: 112px; }
  .response-strip p { max-width: none; font-size: clamp(1.25rem, 6vw, 1.55rem); }
  .pain-scene, .contact-form { padding: 21px; }
  .difference-list div, .demo-flow div { grid-template-columns: 1fr; gap: 8px; }
  .system-label { margin-bottom: 28px; }
  .form-intro { display: grid; }
  footer { grid-template-columns: 1fr; }
  footer nav { justify-content: flex-start; }
}

.assistants { padding-top: clamp(100px, 12vw, 160px); padding-bottom: clamp(100px, 12vw, 160px); border-top: 1px solid var(--line); }
.assistants-note { max-width: 660px; margin: 44px 0 28px; padding: 16px 20px; border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-soft); color: var(--muted); font-size: .86rem; }
.assistants-note strong { color: var(--accent); }
.assistants-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.chat-widget { display: flex; flex-direction: column; min-height: 400px; padding: 22px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.chat-widget--primary { max-width: 660px; margin: 46px 0 0; min-height: 440px; border-color: var(--accent); background: var(--surface-2); }
.chat-widget-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.chat-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-family: var(--display); font-weight: 800; font-size: .82rem; }
.chat-widget-head strong { display: block; font-family: var(--display); font-size: 1rem; }
.chat-widget-head small { display: block; margin-top: 2px; color: var(--muted); font-size: .74rem; }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 10px; margin: 16px 0; overflow-y: auto; max-height: 320px; }
.chat-bubble { max-width: 88%; padding: 10px 13px; border-radius: 12px; font-size: .86rem; line-height: 1.45; }
.chat-bubble.assistant { align-self: flex-start; border: 1px solid var(--line); background: var(--surface-3); }
.chat-bubble.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chat-form { display: flex; gap: 8px; }
.chat-form input[type="text"] { flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: 10px; outline: none; background: var(--bg); color: var(--text); padding: 11px 12px; font-size: 16px; }
.chat-form input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-form button { min-height: 42px; padding: 10px 16px; }
.chat-status { min-height: 1.2em; margin: 8px 0 0; color: var(--muted); font-size: .74rem; }
.chat-audio-toggle { margin-left: auto; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-3); font-size: .95rem; line-height: 1; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.chat-audio-toggle:hover, .chat-audio-toggle:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.chat-audio-toggle[aria-pressed="false"] { opacity: .55; }

/* Micrófono: es la invitación a "hablale a Matías", así que se distingue del
   resto de los botones del formulario en vez de mimetizarse con ellos —
   aro color acento igual que .chat-avatar, se rellena sólido al pasar el
   mouse o enfocarlo, y al grabar pasa a rojo con el mismo pulso de antes. */
.chat-mic {
  position: relative;
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.chat-mic:hover, .chat-mic:focus-visible { background: var(--accent); color: var(--accent-ink); outline: none; }
.chat-mic:active { transform: scale(.93); }
.chat-mic:disabled { opacity: .5; cursor: default; transform: none; }
.chat-mic.recording { border-color: #e5484d; background: rgba(229, 72, 77, .18); color: #e5484d; animation: chat-mic-pulse 1.1s ease-in-out infinite; }
.chat-mic[hidden] { display: none; }

@keyframes chat-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .35); }
  50% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); }
}

@media (max-width: 1050px) {
  .assistants-grid { grid-template-columns: 1fr; }
  .chat-widget--primary { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Bloque del asistente: dos columnas para que no quede medio lado vacio --- */
.assistants-layout { display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); gap: clamp(26px, 4vw, 54px); align-items: start; }
.assistants-main { min-width: 0; }
.assistants-aside { margin-top: 44px; display: grid; gap: 14px; align-content: start; }
.aside-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.aside-ico { display: block; font-size: 1.25rem; line-height: 1; margin-bottom: 10px; }
.aside-card strong { display: block; font-size: .95rem; margin-bottom: 6px; }
.aside-card p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }
@media (max-width: 1000px) { .assistants-layout { grid-template-columns: 1fr; } .assistants-aside { margin-top: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .assistants-aside { grid-template-columns: 1fr; } }

/* Aviso del asistente de IA arriba de todo */
.hero-ai { max-width: 560px; margin: 20px 0 0; padding: 14px 16px; border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-soft); color: var(--muted); font-size: .9rem; line-height: 1.55; }
.hero-ai strong { color: var(--accent); }

/* Aclaracion mas visible en los tres ejemplos de oficio */
.assistants-note--fuerte { max-width: 900px; border-left-width: 3px; }
.nota-acotada { display: block; margin-top: 10px; font-size: .95rem; line-height: 1.55; color: var(--accent); }

/* Contacto Firme copy update 2026-07-28 */
.hero-system .system-window { min-height: 470px; padding: clamp(26px, 4vw, 44px); border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, #0a1718, #0f2326); }
.system-kicker { margin: 0 0 18px; color: var(--accent); font-weight: 800; }
.system-window h2 { max-width: 620px; margin: 0; font-size: clamp(2rem, 4vw, 3.6rem); line-height: .98; }
.system-benefits { display: grid; gap: 14px; margin: clamp(26px, 4vw, 40px) 0; }
.system-benefits div { padding: 16px 0; border-top: 1px solid var(--line); }
.system-benefits strong { display: block; color: var(--text); font-family: var(--display); font-size: 1.05rem; }
.system-benefits p, .system-close { margin: 7px 0 0; color: var(--muted); }
.system-close { max-width: 560px; color: var(--text); font-weight: 700; }
.proof-note { max-width: 620px; margin-top: 34px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.proof-note strong { display: block; color: var(--text); font-family: var(--display); font-size: 1.1rem; }
.proof-note p { margin: 12px 0 0; }
.proof-sources { font-size: .86rem; }
.proof-sources a { color: var(--accent); font-weight: 800; text-decoration: none; }
.proof-sources a:hover { text-decoration: underline; }
.plan-disclaimer { max-width: 980px; margin: 26px auto 0; color: var(--muted); font-size: .94rem; line-height: 1.65; }
@media (max-width: 620px) {
  .hero-system .system-window { min-height: 0; padding: 22px; }
  .system-benefits { margin: 24px 0; }
  .proof-note { padding: 18px; }
}

/* ==========================================================================
   REDISENO VISUAL - 21/08/2026
   Va AL FINAL a proposito: no reemplaza nada de arriba, lo pisa por cascada.
   Para volver al diseno anterior, borrar desde este comentario hasta el final.
   No cambia ni un id, ni un name, ni una clase que use el JavaScript.
   ========================================================================== */
:root {
  --bg:#050c1a; --surface:#0a1730; --surface-2:#0e1f3f; --surface-3:#13294f;
  --text:#e9f1fb; --muted:#93a8c8;
  --line:rgba(150,195,255,.15); --line-strong:rgba(150,195,255,.30);
  --accent:#22a8f5; --accent-2:#46dcf7; --accent-deep:#1b52d8;
  --accent-soft:rgba(34,168,245,.13); --accent-ink:#03101f;
  --danger:#ff9ba6; --radius:16px;
}
h1,h2,h3 { letter-spacing:-.021em; line-height:1.1; }
h1 { max-width:17ch; font-size:clamp(2.45rem,4.4vw,4.1rem); font-weight:800; }
h1 span { color:var(--accent-2); }
.hero-lead { max-width:54ch; font-size:clamp(1.02rem,1.25vw,1.17rem); line-height:1.6; }
.pain-copy h2,.difference-statement h2,.demo-copy h2,.contact-copy h2,
.section-heading h2 { font-size:clamp(1.95rem,3.1vw,3rem); max-width:19ch; }
.fit h2 { font-size:clamp(1.9rem,3vw,2.85rem); max-width:22ch; }
.faq-heading h2 { font-size:clamp(1.85rem,2.9vw,2.7rem); }
.system-grid h3 { font-size:clamp(1.3rem,1.9vw,1.85rem); }
.system-window h2 { font-size:clamp(1.8rem,2.8vw,2.6rem); line-height:1.12; }
.plan-price strong { font-size:clamp(2.2rem,3vw,3.1rem); letter-spacing:-.035em; }
.response-strip p { font-size:clamp(1rem,1.1vw,1.14rem); font-weight:700; letter-spacing:-.015em; line-height:1.25; }
.response-strip span { font-size:clamp(1.15rem,1.5vw,1.6rem); letter-spacing:-.04em; }
@media (max-width:560px){ h1 { font-size:clamp(2.05rem,8.5vw,2.7rem); } }
.hero { padding-top:clamp(48px,6vw,84px); padding-bottom:clamp(52px,6vw,88px); min-height:0; }
.pain,.system,.difference,.demo,.plans,.faq,.contact,.assistants {
  padding-top:clamp(64px,7vw,104px); padding-bottom:clamp(64px,7vw,104px); }
.fit { padding-top:clamp(58px,6vw,92px); padding-bottom:clamp(58px,6vw,92px); }
body { background:
    radial-gradient(1100px 620px at 78% -12%, rgba(34,168,245,.13), transparent 62%),
    radial-gradient(880px 520px at 4% 8%, rgba(27,82,216,.12), transparent 60%),
    var(--bg); }
.site-header { background:rgba(5,12,26,.88); }
.button.primary { background:linear-gradient(135deg,var(--accent-2),var(--accent) 52%,var(--accent-deep));
  color:#04121f; box-shadow:0 8px 22px rgba(27,82,216,.3); }
.button.primary:hover { background:linear-gradient(135deg,#6ce6ff,#3ab7ff 52%,#2a63e8); }
.site-header nav .nav-cta { border-color:var(--accent); color:var(--accent-2); }
.site-header nav .nav-cta:hover { background:var(--accent); color:#04121f; }
.pain-scene,.plan-card,.contact-form,.proof-note,.chat-widget,.aside-card {
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--surface);
  box-shadow:0 18px 44px rgba(2,8,20,.42); }
.plan-card.featured { border-color:var(--accent); box-shadow:0 20px 56px rgba(27,82,216,.26); }
.system-grid article { background:var(--surface); }
.system-grid .system-main { background:linear-gradient(160deg,var(--surface-2),var(--surface)); }
.system-grid .system-wide { background:var(--surface-3); }
.response-strip { background:linear-gradient(180deg,var(--surface),#071230); }
.response-strip div:after { background:linear-gradient(90deg,var(--accent-2),transparent 85%); }
.response-strip span { border-color:rgba(70,220,247,.5); background:rgba(34,168,245,.1); color:var(--accent-2); }
.hero-system .system-window { background:linear-gradient(150deg,#081530,#0c1e3e); }
.field input::placeholder,.field textarea::placeholder { color:#6d84a6; }
.chat-bubble.assistant { background:var(--surface-3); }
.chat-bubble.user { background:var(--accent); color:#04121f; }
/* LA DEMO NO SE REDISENA. Solo el marco, para que se lea como la pagina de
   OTRA empresa abierta en una ventana de navegador. */
.hero-product { padding:0; border:1px solid rgba(150,195,255,.22); border-radius:14px;
  background:#0d1424; box-shadow:0 30px 80px rgba(2,8,20,.6),0 2px 0 rgba(255,255,255,.05) inset;
  overflow:hidden; }
.hero-product .product-bar { position:relative; padding:11px 14px 11px 74px;
  border-bottom:1px solid rgba(150,195,255,.16); background:#131b2e; color:#8fa2bd; font-size:.71rem; }
.hero-product .product-bar::before { content:""; position:absolute; left:16px; top:50%;
  width:42px; height:10px; transform:translateY(-50%); border-radius:10px;
  background:radial-gradient(circle 5px at 5px 50%,#ff5f57 96%,transparent),
             radial-gradient(circle 5px at 21px 50%,#febc2e 96%,transparent),
             radial-gradient(circle 5px at 37px 50%,#28c840 96%,transparent); }
.hero-product .product-bar strong { color:#9fb4d2; }
.hero-product .product-window { border:0; border-radius:0; background:#0a1120; }
.hero-product .product-link { padding:12px 16px 14px; color:var(--accent-2); }
.scene-answer { border-top-color:var(--accent-2); }
.scene-answer span,.scene-answer strong { color:var(--accent-2); }
.difference-list strong,.demo-flow span,.system-label,.eyebrow { color:var(--accent-2); }
.fit aside { border-left-color:var(--accent-2); }
.hero-ai,.assistants-note { border-left-color:var(--accent-2); }
.plan-card li::before { color:var(--accent-2); }
footer nav a:hover { color:var(--accent-2); }
.chat-avatar { background:var(--accent-soft); color:var(--accent-2); }

/* El asistente es lo primero que se lee en cada plan: es lo que mas cambia
   el dia a dia del cliente, no un item mas de la lista. */
.plan-card li.destacado { padding: 14px 14px 14px 34px; margin-bottom: 6px;
  border: 1px solid rgba(70,220,247,.35); border-radius: 12px;
  background: rgba(34,168,245,.08); color: var(--muted); }
.plan-card li.destacado::before { left: 13px; top: 14px; color: var(--accent-2); }
.plan-card li.destacado strong { display: block; margin-bottom: 4px; color: var(--text);
  font-family: var(--display); font-size: 1rem; }

/* Premium lista TODO lo de Profesional, y ademas marca lo que suma. Antes
   decia "todo lo incluido en Profesional" y parecia tener menos items que el
   plan mas barato: leia al reves de lo que cuesta. */
.plan-card li.mas { color: var(--text); }
.plan-card li.mas::before { content: '+'; color: var(--accent-2); font-size: 1.05rem; }
.plan-card { min-height: 0; }
.plan-grid { align-items: stretch; }

/* Caso real. Va pegado abajo de la demo, que dice DATOS FICTICIOS en grande:
   el contraste entre "esto es de mentira" y "esto es de verdad" es el que
   convence. Por eso el bloque no se parece a ninguna otra caja de la pagina. */
.caso-real { width: min(var(--max), calc(100% - 44px)); margin: 0 auto;
  padding-bottom: clamp(64px,7vw,104px); }
.caso-box { position: relative; overflow: hidden; padding: clamp(28px,4vw,46px);
  border: 1px solid rgba(70,220,247,.34); border-radius: 18px;
  background: linear-gradient(140deg, rgba(34,168,245,.14), rgba(27,82,216,.07) 60%, transparent), var(--surface-2);
  box-shadow: 0 22px 60px rgba(2,8,20,.45); }
.caso-kicker { margin: 0 0 12px; color: var(--accent-2);
  font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.caso-box h2 { max-width: 22ch; font-size: clamp(1.6rem,2.6vw,2.4rem); }
.caso-box p:not(.caso-kicker) { max-width: 62ch; margin: 16px 0 26px; color: var(--muted); }

/* Ganancia de tiempo. Va justo despues de ver a Matias funcionando: primero
   la prueba, despues el porque conviene. Es el argumento que mas pesa y por
   eso ocupa ancho completo, no una columna. */
.tiempo { width: min(var(--max), calc(100% - 44px)); margin: 0 auto;
  padding-bottom: clamp(64px,7vw,104px); }
.tiempo-box { padding: clamp(28px,4vw,50px); border: 1px solid var(--line);
  border-radius: 18px; background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.tiempo-box h2 { max-width: 20ch; font-size: clamp(1.7rem,2.8vw,2.6rem); }
.tiempo-lead { max-width: 68ch; margin: 18px 0 0; color: var(--muted); }
.tiempo-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(18px,2.4vw,30px); margin: clamp(28px,4vw,42px) 0 0; }
.tiempo-grid div { padding-top: 18px; border-top: 2px solid var(--accent); }
.tiempo-grid strong { display: block; margin-bottom: 8px; color: var(--text);
  font-family: var(--display); font-size: 1.06rem; letter-spacing: -.015em; }
.tiempo-grid p { margin: 0; color: var(--muted); font-size: .93rem; }
.tiempo-cierre { max-width: 60ch; margin: clamp(26px,3.4vw,38px) 0 0; color: var(--text);
  font-family: var(--display); font-size: clamp(1.05rem,1.5vw,1.3rem); font-weight: 700;
  letter-spacing: -.015em; }
@media (max-width: 860px) { .tiempo-grid { grid-template-columns: 1fr; } }

/* El pago anual es una condicion comercial, no un item de la lista: por eso
   vive con las otras condiciones de pago y no adentro de los planes. */
.payment-note .anual { grid-column: 1 / -1; margin-top: 14px; padding: 14px 16px;
  border-left: 2px solid var(--accent-2); border-radius: 0 10px 10px 0;
  background: rgba(34,168,245,.09); color: var(--muted); }
.payment-note .anual strong { display: block; margin-bottom: 4px; color: var(--text);
  font-family: var(--display); font-size: 1.02rem; }

/* ==== FIX AUDITORIA 21/08/2026 ====
   El header sticky tenia fondo translucido (.88 de opacidad). Al scrollear,
   el titulo de cada seccion quedaba un instante debajo del header y se
   transparentaba (efecto "fantasma" / doble exposicion de texto), visible
   sobre todo en la seccion "El tiempo que dejas de perder...". Se pisa la
   regla original con opacidad total para que el header tape del todo. */
.site-header { background: rgba(5,12,26,1); }

/* ==== PANTALLA DE SUSPENDIDO - solo logo, sin texto (21/08/2026) ====
   Regla de Lisandro: cuando un cliente esta suspendido, cliente.php NO
   debe decir nada (ni "no disponible", ni "soporte", nada). Solo se ve el
   logo de Contacto Firme centrado sobre el fondo del sitio, y al tocarlo
   redirige a contactofirme.com.ar. Nada de texto que pueda leerse como
   "esto esta roto". */
.client-suspended {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.client-suspended a { display: block; line-height: 0; }
.client-suspended img { max-width: min(320px, 70vw); height: auto; }


/* ==== FIX CONTRASTE BOTON PRIMARIO WCAG AA (21/08/2026) ==== */
.button.primary { background: linear-gradient(135deg, var(--accent-2), var(--accent) 52%, #537fe9); }
.button.primary:hover { background: linear-gradient(135deg, #6ce6ff, #3ab7ff 52%, #5381ec); }