/* ============================================================
   ECONNECT · Home (QA)
   Componentes propios del home: hero con conversaciones en vivo,
   productos con demo, sistema, proceso y agenda.
   Tipografía de lectura para Manifiesto y FAQ: Poppins (Brand Book).
   ============================================================ */
:root { --brand-font: 'Poppins', 'Manrope', -apple-system, sans-serif; --wa: #25D366; --ig: #D6336C; --ms: #0A7CFF; }
.h-anchor { position: relative; top: -90px; display: block; height: 0; }

/* ---------- Hero en dos columnas ---------- */
.hero .container.hero-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.hero-layout .hero-meta { grid-column: 1 / -1; margin-top: clamp(40px, 6vh, 72px); }
.hero-layout h1 { font-size: clamp(48px, 7.1vw, 116px); }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
@media (max-width: 1020px) {
  .hero .container.hero-layout { grid-template-columns: 1fr; }
  .hero-layout h1 { font-size: clamp(46px, 11vw, 96px); }
}

/* ---------- Conversaciones en vivo (hero) ---------- */
.h-live { position: relative; z-index: 1; width: 100%; max-width: 480px; margin-left: auto; }
@media (max-width: 1020px) { .h-live { margin: 8px auto 0; } }
.h-live-card { position: relative; border-radius: 26px; background: rgba(255,255,255,.78); border: 1px solid rgba(10,10,18,.08);
  box-shadow: 0 30px 80px -40px rgba(46, 25, 150, .45), 0 2px 0 rgba(255,255,255,.9) inset; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; }
.h-live-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid rgba(10,10,18,.07); font-size: 13px; color: var(--gray); }
.h-live-head b { color: var(--ink); font-weight: 700; font-size: 14px; }
.h-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: hLivePulse 2s ease-out infinite; flex-shrink: 0; }
@keyframes hLivePulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 80%, 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }
.h-live-channels { margin-left: auto; display: flex; gap: 6px; }
.h-ch { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.h-ch svg { width: 15px; height: 15px; }
.h-ch.wa { background: var(--wa); }
.h-ch.ig { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.h-ch.ms { background: var(--ms); }
.h-live-list { list-style: none; margin: 0; padding: 8px 10px 12px; height: 336px; overflow: hidden; position: relative; }
.h-live-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.95)); pointer-events: none; }
.h-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 10px; border-radius: 16px; }
.h-msg + .h-msg { border-top: 1px solid rgba(10,10,18,.05); }
.h-msg.is-new { background: rgba(93,63,255,.06); }
.h-msg .h-ch { width: 34px; height: 34px; }
.h-msg .h-ch svg { width: 18px; height: 18px; }
.h-msg-body { min-width: 0; }
.h-msg-body b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.h-msg-body span { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-status { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 6px 10px; border-radius: 100px; white-space: nowrap; background: var(--purple-soft); color: #3A2A8E; display: inline-flex; align-items: center; gap: 6px; }
.h-status.is-typing { background: #F1EFEA; color: var(--gray); }
.h-status.is-book { background: #DCFCE7; color: #166534; }
.h-status.is-hand { background: #FFF1D6; color: #8A5300; }
.h-status i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; animation: hDots 1s infinite; }
.h-status i:nth-child(2) { animation-delay: .15s; } .h-status i:nth-child(3) { animation-delay: .3s; }
@keyframes hDots { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.h-live-toast { position: absolute; left: -26px; bottom: -22px; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 20px 40px -20px rgba(10,10,18,.6); opacity: 0; transform: translateY(12px); }
.h-live-toast .ok { width: 26px; height: 26px; border-radius: 50%; background: #22C55E; display: inline-flex; align-items: center; justify-content: center; }
.h-live-toast small { display: block; font-weight: 500; color: var(--gray-light); font-size: 11.5px; }
@media (max-width: 1020px) { .h-live-toast { left: 12px; } }
@media (max-width: 560px) { .h-live-list { height: 292px; } .h-msg { grid-template-columns: 30px minmax(0, 1fr); } .h-msg .h-status { grid-column: 2; justify-self: start; margin-top: -4px; } .h-msg .h-ch { width: 30px; height: 30px; } }

/* ---------- Manifiesto y FAQ: tipografía de lectura (Poppins) ---------- */
.manifesto-statement { font-family: var(--brand-font); font-weight: 500; font-size: clamp(27px, 3.6vw, 54px); line-height: 1.17; letter-spacing: -.028em; font-variation-settings: normal; max-width: 1080px; }
.manifesto-statement em { font-style: normal; font-weight: 600; color: var(--purple-light); }
.manifesto-quote blockquote { font-family: var(--brand-font); font-style: normal; font-weight: 400; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.65; letter-spacing: -.005em; color: rgba(250,250,247,.88); }
.manifesto-quote blockquote::before { content: "\201C"; display: block; font-family: var(--brand-font); font-weight: 600; font-size: 54px; line-height: .7; height: 26px; color: var(--purple-light); margin-bottom: 10px; }
.manifesto-quote cite { font-family: var(--brand-font); font-size: 13px; letter-spacing: .02em; }
.faq-question { font-family: var(--brand-font); font-weight: 500; font-size: clamp(16.5px, 1.3vw, 19.5px); line-height: 1.42; letter-spacing: -.01em; font-variation-settings: normal; padding: 24px 0; }
.faq-question:hover { color: var(--purple); }
.faq-answer-inner { font-family: var(--brand-font); font-size: 15.5px; line-height: 1.72; color: #3F3F4B; max-width: 64ch; padding-bottom: 26px; }
.faq-section .lead { font-family: var(--brand-font); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
@media (max-width: 560px) { .faq-question { font-size: 16.5px; padding: 20px 0; } .faq-toggle { width: 30px; height: 30px; } }

/* ---------- Productos ---------- */
.h-products { background: var(--paper); }
.h-product { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(56px, 8vh, 96px);
  padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.h-product::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -180px; top: -200px; background: radial-gradient(circle, rgba(93,63,255,.16), transparent 65%); pointer-events: none; }
.h-product--alt::before { left: -180px; right: auto; top: auto; bottom: -220px; background: radial-gradient(circle, rgba(255,79,237,.12), transparent 65%); }
.h-product-copy { position: relative; z-index: 1; }
.h-product-top { display: flex; align-items: center; gap: 14px; }
.h-product-num { font-family: var(--display-font); font-size: 64px; line-height: .8; letter-spacing: -.05em; color: var(--purple); font-variation-settings: "opsz" 144; }
.h-product-tag { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px; border-radius: 100px; background: var(--purple-soft); color: #3A2A8E; }
.h-product h3 { margin-top: 26px; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.02; }
.h-product h3 em { font-style: italic; color: var(--purple); font-variation-settings: "opsz" 144; }
.h-product-copy > p { margin-top: 18px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--ink-soft); max-width: 560px; }
.h-verbs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.h-verbs li { font-size: 13.5px; font-weight: 600; padding: 9px 14px; border-radius: 100px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.h-verbs li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); margin-right: 8px; transform: translateY(-2px); }
.h-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.h-facts dt { font-family: var(--display-font); font-size: clamp(22px, 2vw, 30px); letter-spacing: -.03em; color: var(--ink); font-variation-settings: "opsz" 144; line-height: 1; }
.h-facts dd { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--gray); }
.h-product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.h-product-visual { position: relative; z-index: 1; display: flex; justify-content: center; min-width: 0; }
@media (max-width: 1020px) {
  .h-product { grid-template-columns: 1fr; }
  .h-product--alt .h-product-visual { order: 2; }
}
@media (max-width: 560px) { .h-product { border-radius: 24px; padding: 24px 18px; } .h-facts { grid-template-columns: 1fr 1fr; } .h-product-num { font-size: 52px; } }

/* ---------- Demo de canales (producto 01) ---------- */
.h-demo { width: 100%; max-width: 380px; }
.h-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px; border-radius: 100px; background: var(--cream); border: 1px solid var(--line); margin-bottom: 18px; }
.h-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border-radius: 100px; font-size: 13px; font-weight: 700; color: var(--gray); cursor: pointer; transition: color .3s; }
.h-tab svg { width: 15px; height: 15px; }
.h-tab[aria-selected="true"] { color: #fff; }
.h-tab-ink { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 100px; background: var(--wa); transition: transform .5s cubic-bezier(.16,1,.3,1), background-color .4s; }
.h-demo[data-ch="ig"] .h-tab-ink { transform: translateX(100%); background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.h-demo[data-ch="ms"] .h-tab-ink { transform: translateX(200%); background: var(--ms); }
.h-phone { width: 300px; max-width: 100%; aspect-ratio: 9 / 18; margin: 0 auto; border-radius: 44px; padding: 10px; background: #16121D; box-shadow: 0 40px 80px -40px rgba(10,10,18,.55), inset 0 0 0 1.5px #3A3442; }
.h-screen { position: relative; height: 100%; border-radius: 35px; overflow: hidden; display: flex; flex-direction: column; background: #ECE5DA; transition: background-color .5s; }
.h-screen-head { display: flex; align-items: center; gap: 10px; padding: 42px 14px 11px; background: #F7F5F1; border-bottom: 1px solid rgba(0,0,0,.06); transition: background-color .5s; }
.h-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display-font); font-size: 16px; flex-shrink: 0; }
.h-screen-head b { display: block; font-size: 13.5px; color: #15111C; }
.h-screen-head small { display: block; font-size: 11px; color: #6E6878; }
.h-screen-head .h-ch { margin-left: auto; width: 26px; height: 26px; }
.h-msgs { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; justify-content: flex-start; }
.h-bb { max-width: 84%; font-size: 12.8px; line-height: 1.42; padding: 8px 11px; border-radius: 14px; color: #15111C; box-shadow: 0 1px .5px rgba(0,0,0,.1); }
.h-bb.in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.h-bb.out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 4px; }
.h-bb.h-tag { align-self: center; box-shadow: none; background: rgba(21,17,28,.78); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 6px 12px; border-radius: 100px; margin-top: 4px; }
.h-typing { align-self: flex-start; display: none; gap: 4px; padding: 10px 12px; border-radius: 14px; background: #fff; }
.h-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9A94A0; display: block; }
.h-compose { margin: 0 10px 12px; padding: 10px 14px; border-radius: 100px; background: #fff; font-size: 12px; color: #9A94A0; }
/* Instagram */
.h-demo[data-ch="ig"] .h-screen, .h-demo[data-ch="ig"] .h-screen-head { background: #fff; }
.h-demo[data-ch="ig"] .h-bb { box-shadow: none; border-radius: 20px; }
.h-demo[data-ch="ig"] .h-bb.in, .h-demo[data-ch="ig"] .h-typing { background: #EFEFEF; }
.h-demo[data-ch="ig"] .h-bb.out { background: linear-gradient(135deg, #7B3FE4, #C13584); color: #fff; }
.h-demo[data-ch="ig"] .h-compose { border: 1px solid #E5E5E5; }
/* Messenger */
.h-demo[data-ch="ms"] .h-screen, .h-demo[data-ch="ms"] .h-screen-head { background: #fff; }
.h-demo[data-ch="ms"] .h-bb { box-shadow: none; border-radius: 18px; }
.h-demo[data-ch="ms"] .h-bb.in, .h-demo[data-ch="ms"] .h-typing { background: #F0F0F0; }
.h-demo[data-ch="ms"] .h-bb.out { background: var(--ms); color: #fff; }
.h-demo[data-ch="ms"] .h-compose { background: #F0F0F0; }
@media (max-width: 560px) { .h-phone { width: 272px; } }

/* ---------- Marca y campañas (producto 02) ---------- */
.h-board { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / .96; }
.h-kit { position: absolute; left: 0; top: 4%; width: 58%; border-radius: 24px; background: var(--ink); color: #fff; padding: 22px; box-shadow: 0 30px 60px -30px rgba(10,10,18,.55); z-index: 2; }
.h-kit-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-light); }
.h-kit-logo { margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.h-kit-logo i { width: 34px; height: 34px; border-radius: 11px; background: conic-gradient(from 200deg, var(--purple), var(--accent), var(--purple-light), var(--purple)); display: block; }
.h-kit-logo b { font-family: var(--display-font); font-size: 30px; font-weight: 400; letter-spacing: -.04em; font-variation-settings: "opsz" 144; }
.h-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 18px; }
.h-swatches i { display: block; aspect-ratio: 1; border-radius: 10px; background: var(--c); border: 1px solid rgba(255,255,255,.22); }
.h-kit-type { margin-top: 16px; display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.h-aa { --w: 400; font-family: var(--display-font); font-size: 46px; line-height: 1; letter-spacing: -.04em; font-variation-settings: "opsz" 144, "wght" var(--w); }
.h-kit-type b { display: block; font-size: 13px; }
.h-kit-type small { display: block; font-size: 11.5px; color: var(--gray-light); margin-top: 3px; }
.h-ads { position: absolute; inset: 0; }
.h-ad { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 50px -30px rgba(10,10,18,.4); padding: 12px; font-size: 11.5px; color: var(--ink-soft); }
.h-ad-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.h-ad-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--purple)); }
.h-ad-img { margin-top: 10px; border-radius: 12px; background: linear-gradient(135deg, #5D3FFF 0%, #8B6FFF 45%, #FF4FED 100%); position: relative; overflow: hidden; }
.h-ad-img::after { content: attr(data-copy); position: absolute; left: 12px; bottom: 10px; right: 12px; font-family: var(--display-font); font-size: 17px; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.h-ad-cta { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--ink); }
.h-ad-cta span { background: var(--ink); color: #fff; border-radius: 100px; padding: 5px 10px; font-size: 10.5px; }
.h-ad--feed { right: 0; top: 0; width: 46%; z-index: 3; --dot: #0866FF; }
.h-ad--feed .h-ad-img { aspect-ratio: 4 / 5; }
.h-ad--search { left: 2%; bottom: 3%; width: 52%; z-index: 6; --dot: #34A853; }
.h-ad--search .h-ad-url { margin-top: 8px; font-size: 11px; color: #1E6E3A; }
.h-ad--search b { display: block; margin-top: 2px; font-size: 14px; line-height: 1.25; color: #1A0DAB; font-weight: 600; }
.h-ad--search p { margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: #4D5156; }
.h-ad--li { right: 0; bottom: 0; width: 40%; z-index: 5; --dot: #0A66C2; }
.h-ad--li .h-ad-img { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0A0A12, #3A2A8E); }
.h-ad--li .h-ad-img::after { font-size: 14px; }
@media (max-width: 560px) { .h-board { aspect-ratio: 1 / 1.22; } .h-kit { width: 64%; top: 0; padding: 16px; } .h-kit-logo b { font-size: 24px; } .h-aa { font-size: 36px; }
  .h-ad--feed { width: 46%; top: 16%; } .h-ad--search { width: 78%; left: 0; bottom: 0; } .h-ad--li { display: none; }
  .h-grow.h-weeks { font-size: 9.5px; letter-spacing: .04em; } }

/* ---------- El sistema: marca → campaña → conversación → agente → cita ---------- */
.h-system { background: var(--cream); overflow: hidden; }
.h-flow-wrap { position: relative; margin-top: 70px; }
.h-flow { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: flow; }
.h-flow-line { position: absolute; left: 10%; right: 10%; top: 29px; height: 2px; background: rgba(10,10,18,.1); border-radius: 2px; overflow: visible; }
.h-flow-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--purple), var(--accent)); transform: scaleX(0); transform-origin: 0 50%; border-radius: 2px; }
.h-flow-line em { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(255,79,237,.18); opacity: 0; }
.h-flow li { position: relative; text-align: center; counter-increment: flow; }
.h-flow .h-node { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1.5px solid rgba(10,10,18,.14); color: var(--gray); transition: background-color .45s, border-color .45s, color .45s, box-shadow .45s; }
.h-flow .h-node svg { width: 24px; height: 24px; }
.h-flow li.is-on .h-node { background: var(--purple); border-color: var(--purple); color: #fff; box-shadow: 0 0 0 8px rgba(93,63,255,.14); }
.h-flow b { display: block; font-family: var(--display-font); font-weight: 500; font-size: 20px; letter-spacing: -.015em; color: var(--ink); }
.h-flow small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--gray); }
.h-flow li::before { content: "0" counter(flow); display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--purple); margin-bottom: 8px; position: absolute; top: -26px; left: 0; right: 0; }
.h-system-note { margin-top: 44px; display: flex; gap: 18px; align-items: center; padding: 22px 26px; border-radius: 20px; background: var(--ink); color: var(--paper); font-family: var(--brand-font); font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.55; }
.h-system-note strong { color: var(--purple-light); font-weight: 600; }
.h-system-note::before { content: ""; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--purple-light), var(--purple) 60%, #2A1680); box-shadow: 0 0 0 6px rgba(139,111,255,.15); }
@media (max-width: 860px) {
  .h-flow-wrap { margin-top: 40px; }
  .h-flow { grid-template-columns: 1fr; gap: 22px; }
  .h-flow-line { left: 29px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .h-flow-line i { transform: scaleY(0); transform-origin: 50% 0; }
  .h-flow-line em { display: none; }
  .h-flow li { display: grid; grid-template-columns: 60px 1fr; column-gap: 16px; align-items: center; text-align: left; }
  .h-flow .h-node { margin: 0; grid-row: 1 / 3; }
  .h-flow li::before { position: static; grid-column: 2; margin: 0 0 2px; }
  .h-flow b, .h-flow small { grid-column: 2; }
  .h-system-note { flex-direction: column; align-items: flex-start; }
}

/* ---------- Proceso (sección oscura) ---------- */
.h-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.h-step { border-radius: 20px; padding: 20px 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.h-step h4 { font-family: var(--body-font); font-size: 15px; font-weight: 700; color: var(--paper); }
.h-step p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--gray-light); }
.h-step .h-pill { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; background: rgba(139,111,255,.16); color: var(--purple-light); }
@media (max-width: 1080px) { .h-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .h-steps { grid-template-columns: 1fr; } }
.h-impl { margin-top: 36px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--purple); color: #fff; position: relative; overflow: hidden; }
.h-impl-big { font-family: var(--display-font); font-size: clamp(88px, 9vw, 132px); line-height: .8; letter-spacing: -.06em; font-variation-settings: "opsz" 144; }
.h-impl-big small { display: block; font-size: clamp(22px, 2vw, 30px); font-style: italic; letter-spacing: -.02em; margin-top: 8px; }
.h-impl-copy > p { color: rgba(255,255,255,.85) !important; font-size: 15px; line-height: 1.55; margin-bottom: 16px; }
.h-gantt { display: grid; gap: 8px; }
.h-grow { display: grid; grid-template-columns: 150px repeat(3, minmax(0, 1fr)); align-items: center; gap: 6px; font-size: 13px; }
.h-grow > span:first-child { color: rgba(255,255,255,.9); font-weight: 600; }
.h-grow.h-weeks { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.h-bar { display: block; height: 18px; border-radius: 6px; background: #fff; transform-origin: 0 50%; }
.h-bar.soft { background: rgba(255,255,255,.55); }
.h-bar.lime { background: #D9F99D; }
@media (max-width: 760px) { .h-impl { grid-template-columns: 1fr; } .h-grow { grid-template-columns: 110px repeat(3, minmax(0, 1fr)); font-size: 12px; } }

/* ---------- Agenda (reemplaza al formulario) ---------- */
.h-book-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.h-book-copy h2 { color: var(--paper); margin-top: 18px; }
.h-book-copy h2 em { color: var(--purple-light); }
.h-book-copy > p { margin-top: 22px; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.6; color: var(--gray-light); max-width: 520px; }
.h-book-steps { list-style: none; margin-top: 30px; display: grid; gap: 0; counter-reset: bk; }
.h-book-steps li { counter-increment: bk; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.1); }
.h-book-steps li::before { content: counter(bk); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display-font); font-size: 18px; color: #fff; background: rgba(139,111,255,.2); border: 1px solid rgba(139,111,255,.4); }
.h-book-steps b { display: block; color: var(--paper); font-size: 15.5px; }
.h-book-steps span { display: block; color: var(--gray-light); font-size: 13.5px; margin-top: 2px; }
.h-book-alt { margin-top: 24px; font-size: 14.5px; color: var(--gray-light); }
.h-book-alt a { color: var(--paper); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.3); }
.h-book-alt a:hover { color: var(--purple-light); border-color: var(--purple-light); }
.h-cal { position: relative; border-radius: 26px; background: #fff; padding: 10px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.h-cal-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 14px; font-size: 13px; color: var(--gray); border-bottom: 1px solid var(--line); }
.h-cal-head b { color: var(--ink); font-size: 14px; }
.h-cal-head .h-live-dot { background: #22C55E; }
.h-cal-head span:last-child { margin-left: auto; font-size: 12px; }
.h-cal iframe { display: block; width: 100%; height: 640px; border: 0; border-radius: 16px; background: #fff; }
.h-cal-open { display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--gray-light); }
.h-cal-open:hover { color: var(--paper); }
@media (max-width: 980px) { .h-book-grid { grid-template-columns: 1fr; } .h-cal iframe { height: 720px; } }
@media (max-width: 560px) { .h-cal { border-radius: 20px; padding: 6px; } .h-cal iframe { height: 760px; border-radius: 14px; } }

/* ---------- Página /agendar ---------- */
.ag-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: 48px; }
.ag-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ag-meta div { padding: 16px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ag-meta strong { display: block; font-family: var(--display-font); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.02em; color: var(--ink); font-variation-settings: "opsz" 144; }
.ag-meta span { display: block; margin-top: 4px; font-size: 12px; color: var(--gray); }
.ag-steps { list-style: none; margin-top: 26px; counter-reset: ag; }
.ag-steps li { counter-increment: ag; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.ag-steps li::before { content: counter(ag); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display-font); font-size: 18px; color: var(--purple); background: var(--purple-soft); }
.ag-steps b { display: block; font-size: 15.5px; color: var(--ink); }
.ag-steps span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--gray); }
.ag-cal { border: 1px solid var(--line); box-shadow: 0 40px 80px -45px rgba(46, 25, 150, .45); }
.ag-open { display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--gray); }
.ag-open:hover { color: var(--purple); }
@media (max-width: 980px) { .ag-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ag-meta { grid-template-columns: 1fr 1fr; } }

/* ---------- Sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) { .h-live-dot, .h-status i { animation: none; } .h-live-toast { opacity: 1; transform: none; } }

/* El manifiesto cierra la página justo después de la agenda: una línea fina separa las dos secciones oscuras */
#agenda + .manifesto { border-top: 1px solid rgba(255,255,255,.08); }