/* =============================================================
   DESTINIO · Home (index.php) — componentes del diseño APROBADO (maqueta_4)
   A56 · 2026-07-23 · Agencia Digital Grow

   Este archivo NO redefine el design system: usa los tokens de
   tokens.css (var(--brand), var(--tx)…) para respetar los 6 temas
   y el ámbar de cumplimiento. Solo aporta el layout del home
   aprobado: hero con consola, chips de perfil, marketplace,
   para-quién, modelo hub, comparativo y planes.

   Todo va SCOPED bajo .home para no chocar con el resto del sitio.
   ============================================================= */

.home{ --em:var(--brand); --em2:var(--brand2); --blue:#4b7cff; }

/* ---- HERO ---- */
.home .hero{ padding:34px 0 44px; border-top:none }
.home .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center }
.home .perfilbar{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 14px }
.home .pf{ border:1px solid var(--line); background:color-mix(in srgb,var(--tx) 3%,transparent); color:var(--tx2);
  border-radius:var(--r-pill); padding:7px 13px; font-size:12.5px; font-weight:700; cursor:pointer; transition:.15s;
  font-family:var(--fb) }
.home .pf:hover{ color:var(--tx) }
.home .pf.is-active{ border-color:color-mix(in srgb,var(--brand) 50%,transparent);
  background:color-mix(in srgb,var(--brand) 10%,transparent); color:var(--brand2) }
.home .hero h1{ font-size:clamp(27px,3.3vw,43px); max-width:19ch; line-height:1.08 }
.home .hero .lead{ font-size:clamp(15px,1.5vw,17.5px); color:var(--tx2); max-width:54ch; margin-top:14px }
.home .hero-act{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px }
.home .hero-proof{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px }
.home .hero-proof span{ font-size:12px; color:var(--tx3); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:7px 12px; background:color-mix(in srgb,var(--tx) 2%,transparent) }

/* ---- CONSOLA (Centro de operaciones) ---- */
.home .console{ border:1px solid var(--line2); border-radius:24px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 96%,transparent),color-mix(in srgb,var(--bg) 98%,transparent));
  box-shadow:var(--shadow) 0 24px 70px; padding:18px }
.home .con-h{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:14px }
.home .dots{ display:flex; gap:6px } .home .dots span{ width:9px; height:9px; border-radius:50%; background:#33405a }
.home .dots span:nth-child(1){ background:#ff6d7a } .home .dots span:nth-child(2){ background:var(--amber) } .home .dots span:nth-child(3){ background:var(--brand) }
.home .live{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; color:var(--brand2); text-transform:uppercase; letter-spacing:.08em }
.home .live i{ width:7px; height:7px; border-radius:50%; background:var(--brand); animation:hm-pulse 1.6s infinite }
@keyframes hm-pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
.home .arow{ display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line) }
.home .av{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:900; font-family:var(--ft); font-size:12px;
  background:color-mix(in srgb,var(--brand) 12%,transparent); border:1px solid color-mix(in srgb,var(--brand) 25%,transparent); color:var(--brand2) }
.home .arow h4{ font-size:13.5px; color:var(--tx); font-family:var(--ft) } .home .arow p{ font-size:11.5px; color:var(--tx3) }
.home .stt{ font-size:10px; font-weight:800; color:var(--brand2); background:color-mix(in srgb,var(--brand) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 22%,transparent); border-radius:var(--r-pill); padding:5px 8px }
.home .out{ margin-top:12px; background:color-mix(in srgb,var(--bg) 70%,#000); border:1px solid var(--line); border-radius:14px; padding:14px }
.home .out-h{ display:flex; justify-content:space-between; font-size:12px; color:var(--tx2); margin-bottom:9px }
.home .pgr{ height:7px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--tx) 8%,transparent); overflow:hidden }
.home .pgr i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--blue)); animation:hm-fill 3.2s ease forwards }
@keyframes hm-fill{ to{ width:78% } }

/* ---- SECCIONES ---- */
.home section{ padding:74px 0; border-top:1px solid var(--line) }
.home .sec-h{ max-width:62ch; margin-bottom:30px }
.home .sec-h h2{ font-size:clamp(25px,3.3vw,38px); margin-top:14px }
.home .sec-h p{ margin-top:12px; font-size:16px; color:var(--tx2) }
.home .alt{ background:var(--bg2) }
.home .grid{ display:grid; gap:16px }
.home .g2{ grid-template-columns:1fr 1fr } .home .g3{ grid-template-columns:repeat(3,1fr) } .home .g4{ grid-template-columns:repeat(4,1fr) }
.home .autofit{ grid-template-columns:repeat(auto-fit,minmax(205px,1fr)) }

/* ---- TARJETA (home) ---- */
.home .hcard{ background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line); border-radius:var(--r-blk); padding:22px; transition:.18s }
.home .hcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--brand) 40%,transparent) }
.home .hcard h3{ font-family:var(--ft) }

/* ---- MARKETPLACE ---- */
.home .pills{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px }
.home .fl{ border:1px solid var(--line); background:transparent; color:var(--tx2); border-radius:var(--r-pill); padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--fb) }
.home .fl.is-active{ border-color:color-mix(in srgb,var(--brand) 50%,transparent); background:color-mix(in srgb,var(--brand) 8%,transparent); color:var(--brand2) }
.home .ag-top{ display:flex; justify-content:space-between; align-items:flex-start }
.home .ag-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-family:var(--ft); font-weight:900; color:var(--on); background:linear-gradient(135deg,var(--brand),var(--brand2)) }
.home .badge{ font-size:10px; font-weight:800; font-family:var(--ft); color:var(--brand2); padding:5px 9px; border-radius:var(--r-pill); border:1px solid color-mix(in srgb,var(--brand) 24%,transparent) }
.home .hcard h3{ margin-top:16px; font-size:18px }
.home .hcard .desc{ font-size:13.5px; color:var(--tx2); margin-top:8px; min-height:58px }
.home .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px }
.home .tags span{ font-size:10px; color:var(--tx3); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 8px; background:color-mix(in srgb,var(--bg) 60%,var(--card)) }

/* ---- SOLUCIONES / USO ---- */
.home .use .num{ font-family:var(--ft); font-weight:800; font-size:12px; color:var(--blue) }
.home .use h3{ margin-top:6px; font-size:19px } .home .use p{ font-size:13.5px; margin-top:8px }
.home .use a,.home .seg a{ display:inline-flex; margin-top:14px; color:var(--brand2); font-size:13px; font-weight:800 }

/* ---- SEGMENTOS (para quién) ---- */
.home .seg h3{ font-size:19px } .home .seg p{ font-size:13.5px; margin-top:7px; color:var(--tx2) }
.home .seg ul{ list-style:none; margin:12px 0 0 } .home .seg li{ font-size:12.5px; color:var(--tx3); padding-left:16px; position:relative; margin:6px 0 }
.home .seg li:before{ content:"→"; position:absolute; left:0; color:var(--brand2) }
.home .slug{ font-family:var(--ft); font-size:11px; color:var(--tx3); margin-top:4px }

/* ---- MODELO HUB ---- */
.home .hubmap{ border:1px solid var(--line); border-radius:var(--r-blk); background:var(--card2); padding:28px; text-align:center }
.home .hubnode{ display:inline-flex; flex-direction:column; align-items:center; gap:6px; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:var(--on); font-family:var(--ft); font-weight:900; padding:16px 26px; border-radius:16px; box-shadow:0 12px 30px color-mix(in srgb,var(--brand) 25%,transparent) }
.home .spokes{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px }
.home .spoke{ font-size:12px; font-weight:700; color:var(--tx2); border:1px solid var(--line); border-radius:12px; padding:10px 13px; background:color-mix(in srgb,var(--tx) 3%,transparent) }
.home .spoke b{ color:var(--tx); font-family:var(--ft) }
.home .conn{ color:var(--tx3); font-size:22px; margin:8px 0 }

/* ---- CUMPLIMIENTO (ámbar · solo Ley 21.719) ---- */
.home .ley{ border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--amber) 12%,transparent),color-mix(in srgb,var(--bg) 60%,transparent));
  border-radius:24px; padding:32px; display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:center }
.home .ley h2{ font-size:clamp(24px,3vw,34px) }
.home .clock{ display:flex; gap:10px; justify-content:center }
.home .cu{ background:color-mix(in srgb,var(--bg) 55%,#000); border:1px solid color-mix(in srgb,var(--amber) 35%,transparent); border-radius:14px; padding:14px 6px; text-align:center; min-width:74px }
.home .cu b{ display:block; font-family:var(--ft); font-weight:900; font-size:30px; color:var(--amberT) }
.home .cu span{ font-size:10px; color:var(--tx3); text-transform:uppercase; letter-spacing:.08em }

/* ---- COMPARATIVO ---- */
.home .cmp{ overflow:auto; border:1px solid var(--line); border-radius:16px }
.home .cmp table{ width:100%; border-collapse:collapse; min-width:640px }
.home .cmp th,.home .cmp td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:13.5px }
.home .cmp th{ font-family:var(--ft); font-size:11.5px; color:var(--tx3); text-transform:uppercase; letter-spacing:.05em }
.home .cmp td:last-child,.home .cmp th:last-child{ background:color-mix(in srgb,var(--brand) 5%,transparent) }
.home .yes{ color:var(--brand2); font-weight:800 } .home .no{ color:var(--tx3) } .home .mid{ color:var(--amberT) }

/* ---- PLANES ---- */
.home .price{ background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line); border-radius:var(--r-blk); padding:24px }
.home .price.feat{ border-color:color-mix(in srgb,var(--brand) 50%,transparent); box-shadow:0 16px 40px color-mix(in srgb,var(--brand) 12%,transparent) }
.home .price .lbl{ font-family:var(--ft); font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--brand2) }
.home .price h3{ margin-top:6px } .home .amt{ font-family:var(--ft); font-weight:900; font-size:30px; color:var(--tx); margin-top:14px }
.home .amt small{ font-size:13px; color:var(--tx3); font-weight:600; font-family:var(--fb) }
.home .price ul{ list-style:none; margin:16px 0 20px } .home .price li{ font-size:13.5px; color:var(--tx2); padding-left:22px; position:relative; margin:9px 0 }
.home .price li:before{ content:"✓"; position:absolute; left:0; color:var(--brand2); font-weight:900 }

/* ---- BLOQUE DIAGNÓSTICO (form) ---- */
.home .cta-blk{ border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);
  background:radial-gradient(440px 240px at 85% 8%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 62%),linear-gradient(135deg,var(--card),var(--card2));
  border-radius:26px; padding:36px; display:grid; grid-template-columns:1fr .9fr; gap:32px; align-items:start }

@media(max-width:960px){
  .home .hero-grid,.home .cta-blk,.home .ley{ grid-template-columns:1fr }
  .home .g4,.home .g3{ grid-template-columns:1fr 1fr } .home .g2{ grid-template-columns:1fr }
}
@media(max-width:600px){ .home .g4,.home .g3{ grid-template-columns:1fr } .home .ley,.home .cta-blk{ padding:22px } }