/* ============================================================
   Creativa.app — sistema de diseño compartido
   Marca cálida del panel: coral (marca) + verde (dinero/rentabilidad).
   Layout: bandas a ancho completo; cada banda lleva un .wrap centrado.
   ============================================================ */
:root{
  --bg:#faf8f6; --surface:#ffffff; --surface-2:#f6f2ef; --surface-3:#f0eae4;
  --border:#ece6e1; --border-strong:#ddd4cd;
  --fg:#1c1a18; --fg-muted:#6c645e; --fg-subtle:#a49b94;
  --primary:#e55a3c; --primary-fg:#ffffff; --primary-soft:#fce8e1; --primary-soft-fg:#b8401f;
  --money:#1f8a57; --money-soft:#e2f2e9; --money-soft-fg:#15663f;
  --blue:#2f6fae; --blue-soft:#e6eef7; --blue-soft-fg:#2a5b8a;
  --amber:#b5781a; --amber-soft:#f6ecd7;
  --ink:#241f1b;
  --shadow-sm:0 1px 2px rgba(28,26,24,.06), 0 4px 12px -6px rgba(28,26,24,.12);
  --shadow:0 1px 2px rgba(28,26,24,.06), 0 18px 40px -20px rgba(28,26,24,.28);
  --shadow-lg:0 1px 2px rgba(28,26,24,.06), 0 40px 80px -30px rgba(28,26,24,.40);
  --radius:14px; --radius-lg:20px;
  --maxw:1140px;
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#15130f; --surface:#1e1b17; --surface-2:#262219; --surface-3:#2d2820;
  --border:#312c25; --border-strong:#423b31;
  --fg:#f4efe9; --fg-muted:#a79e95; --fg-subtle:#746b62;
  --primary:#f0734f; --primary-fg:#1b0f0a; --primary-soft:#3a251c; --primary-soft-fg:#f3a98e;
  --money:#49b47e; --money-soft:#1a2e23; --money-soft-fg:#8fd9b4;
  --blue:#6fa7da; --blue-soft:#1b2a3a; --blue-soft-fg:#a9cdef;
  --amber:#e3ab4a; --amber-soft:#2e2514;
  --ink:#100e0b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 6px 16px -8px rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 50px -24px rgba(0,0,0,.8);
  --shadow-lg:0 1px 2px rgba(0,0,0,.5), 0 50px 90px -30px rgba(0,0,0,.9);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#15130f; --surface:#1e1b17; --surface-2:#262219; --surface-3:#2d2820;
  --border:#312c25; --border-strong:#423b31;
  --fg:#f4efe9; --fg-muted:#a79e95; --fg-subtle:#746b62;
  --primary:#f0734f; --primary-fg:#1b0f0a; --primary-soft:#3a251c; --primary-soft-fg:#f3a98e;
  --money:#49b47e; --money-soft:#1a2e23; --money-soft-fg:#8fd9b4;
  --blue:#6fa7da; --blue-soft:#1b2a3a; --blue-soft-fg:#a9cdef;
  --amber:#e3ab4a; --amber-soft:#2e2514;
  --ink:#100e0b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 6px 16px -8px rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 50px -24px rgba(0,0,0,.8);
  --shadow-lg:0 1px 2px rgba(0,0,0,.5), 0 50px 90px -30px rgba(0,0,0,.9);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--body);
  line-height:1.55; -webkit-font-smoothing:antialiased; font-feature-settings:"cv05","ss01";}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none!important; transition:none!important;} }
img{max-width:100%; display:block;}
a{color:inherit;}
.num{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--mono);}

.wrap{max-width:var(--maxw); margin-inline:auto;
  padding-inline:max(20px, env(safe-area-inset-left,0px)) max(20px, env(safe-area-inset-right,0px));}
section > .wrap{padding-block:clamp(54px,8vw,100px);}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.02em;
  text-wrap:balance; margin:0; color:var(--fg);}
h1{font-size:clamp(2.4rem,6vw,4.1rem);}
h2{font-size:clamp(1.85rem,4vw,2.8rem);}
h3{font-size:1.18rem; letter-spacing:-.01em;}
p{margin:0;}
.eyebrow{font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--primary-soft-fg);}
.eyebrow.b{color:var(--blue-soft-fg);} .eyebrow.m{color:var(--money-soft-fg);}
.lead{font-size:clamp(1.05rem,2vw,1.26rem); color:var(--fg-muted);}
.muted{color:var(--fg-muted);}

.band-soft{background:var(--surface-2); border-block:1px solid var(--border);}
.band-ink{background:var(--ink);}

/* ---------- nav ---------- */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); background:var(--surface); z-index:60;}
header.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--border);}
.nav .wrap{display:flex; align-items:center; gap:22px; padding-block:13px;}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:700; font-size:1.2rem; letter-spacing:-.02em; text-decoration:none; color:var(--fg);}
.brand .dot{width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--primary); color:var(--primary-fg); font-size:.95rem; box-shadow:var(--shadow-sm);}
.nav nav{display:flex; gap:20px; margin-left:6px;}
.nav nav a{text-decoration:none; color:var(--fg-muted); font-size:.92rem; font-weight:500; white-space:nowrap;}
.nav nav a:hover{color:var(--fg);} .nav nav a.active{color:var(--primary); font-weight:600;}
.nav .spacer{flex:1;}
.nav-cta{display:flex; align-items:center; gap:12px;}
@media (max-width:900px){ .nav nav{display:none;} .nav-cta .ghost{display:none;} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600;
  font-size:.95rem; text-decoration:none; border-radius:11px; padding:11px 18px; border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--primary); color:var(--primary-fg); box-shadow:var(--shadow-sm);}
.btn-primary:hover{box-shadow:var(--shadow);}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:8px 14px; font-size:.88rem;}
.arrow{transition:transform .15s ease;}
.btn:hover .arrow, .lnk:hover .arrow{transform:translateX(3px);}
.lnk{display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:600; color:var(--primary); font-size:.95rem;}
.lnk:hover{text-decoration:underline;}

/* ---------- pills / chips ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; padding:3px 9px;
  border-radius:999px; font-family:var(--body); letter-spacing:.01em;}
.pill.ok{background:var(--money-soft); color:var(--money-soft-fg);}
.pill.wait{background:var(--amber-soft); color:var(--amber);}
.pill.inv{background:var(--primary-soft); color:var(--primary-soft-fg);}
.pill.blue{background:var(--blue-soft); color:var(--blue-soft-fg);}
.pill.dot::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.sec-head{display:flex; flex-direction:column; gap:12px; max-width:660px; margin-bottom:42px;}
.sec-head.center{margin-inline:auto; text-align:center; align-items:center;}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:-30% -10% auto -10%; height:640px; z-index:0;
  background:
    radial-gradient(60% 70% at 78% 6%, color-mix(in srgb,var(--primary) 20%, transparent), transparent 70%),
    radial-gradient(52% 62% at 10% 0%, color-mix(in srgb,var(--money) 13%, transparent), transparent 70%);
  pointer-events:none;}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,56px); align-items:center; padding-block:clamp(44px,6vw,86px);}
.hero-copy{display:flex; flex-direction:column; gap:22px; align-items:flex-start;}
.hero h1 .accent{color:var(--primary);}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px;}
.hero-note{font-size:.86rem; color:var(--fg-subtle);}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;} .hero-visual{order:2;} }

/* ---------- value tiles ---------- */
.values{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:7px;}
.tile .big{font-family:var(--display); font-weight:700; font-size:2rem; letter-spacing:-.02em; line-height:1;}
.tile .lbl{font-weight:600; font-size:.95rem;}
.tile .sub{font-size:.86rem; color:var(--fg-muted);}
.tile.accent .big{color:var(--primary);} .tile.money .big{color:var(--money);} .tile.blue .big{color:var(--blue);}
@media (max-width:820px){ .values{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .values{grid-template-columns:1fr;} }

/* ---------- logos strip ---------- */
.logos .wrap{padding-block:34px; display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center;}
.logos .caption{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-subtle);}
.logo-row{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px; align-items:center;}
.logo-row span{font-weight:600; color:var(--fg-muted); font-size:1rem; opacity:.85;}

/* ---------- capability cards (home) ---------- */
.caps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch;}
@media (max-width:900px){ .caps{grid-template-columns:1fr; max-width:540px; margin-inline:auto;} }
.cap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:24px; display:flex; flex-direction:column; gap:16px;
  text-decoration:none; color:inherit; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;}
.cap:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-strong);}
.cap .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; box-shadow:var(--shadow-sm);}
.cap .ic svg{width:24px; height:24px;}
.cap.redes .ic{background:var(--primary-soft); color:var(--primary-soft-fg);}
.cap.proyectos .ic{background:var(--money-soft); color:var(--money-soft-fg);}
.cap.factura .ic{background:var(--blue-soft); color:var(--blue-soft-fg);}
.cap-desc{font-size:.95rem; color:var(--fg-muted);}
.cap-foot{margin-top:auto;}

.feat{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.feat li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem;}
.feat li::before{content:""; flex:none; width:16px; height:16px; margin-top:3px; border-radius:50%;
  background:var(--surface-3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.4 2.4L12 5' fill='none' stroke='%23b8401f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;}

/* checklist (bigger) */
.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.checklist li{display:flex; gap:11px; font-size:.95rem; align-items:flex-start;}
.checklist li::before{content:""; flex:none; width:18px; height:18px; margin-top:1px; border-radius:6px;
  background:var(--money-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.4 2.4L12 5' fill='none' stroke='%2315663f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;}

/* ---------- split (copy + visual) ---------- */
.split{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,56px); align-items:center;}
.split.rev{grid-template-columns:1.08fr .92fr;}
@media (max-width:860px){ .split, .split.rev{grid-template-columns:1fr;} .split .copy{order:1;} .split .visual{order:2;} }
.copy{display:flex; flex-direction:column; gap:18px; align-items:flex-start;}

/* ---------- app frame (listo para captura) ---------- */
.appframe{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;}
.af-chrome{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--border); background:var(--surface-2);}
.af-chrome i{width:9px; height:9px; border-radius:50%; background:var(--border-strong); display:block;}
.af-url{margin-left:10px; font-family:var(--mono); font-size:.74rem; color:var(--fg-subtle);
  background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:3px 10px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.af-body{display:grid; grid-template-columns:148px 1fr; min-height:300px;}
.af-side{border-right:1px solid var(--border); background:var(--surface-2); padding:12px 10px; display:flex; flex-direction:column; gap:3px;}
.af-side .grp{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-subtle); padding:10px 8px 4px;}
.af-item{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; font-size:.82rem; color:var(--fg-muted);}
.af-item svg{width:15px; height:15px; flex:none; opacity:.8;}
.af-item.on{background:var(--surface); color:var(--fg); font-weight:600; box-shadow:var(--shadow-sm);}
.af-item.on svg{opacity:1; color:var(--primary);}
.af-main{padding:16px; display:flex; flex-direction:column; gap:14px; min-width:0;}
.af-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.af-top .t{font-family:var(--display); font-weight:700; font-size:1.05rem;}
.af-badge{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle);
  border:1px dashed var(--border-strong); border-radius:999px; padding:3px 10px;}
@media (max-width:560px){ .af-body{grid-template-columns:1fr;} .af-side{display:none;} }
.capture-note{font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--fg-subtle); text-align:center; margin-top:12px;}

/* metric row inside frames */
.exp-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0;
  border-top:1px dashed var(--border); font-size:.9rem;}
.exp-row:first-of-type{border-top:none;}
.exp-row .k{color:var(--fg-muted);} .exp-row .v{font-weight:600; font-variant-numeric:tabular-nums;}
.exp-row .v.money{color:var(--money);}
.meter{height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden;}
.meter > i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--money));}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.kpi{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:11px 12px; display:flex; flex-direction:column; gap:3px;}
.kpi .n{font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.02em;}
.kpi .l{font-size:.72rem; color:var(--fg-subtle);}
.kpi.money .n{color:var(--money);} .kpi.accent .n{color:var(--primary);} .kpi.blue .n{color:var(--blue);}

/* mini tables */
.mini-table{width:100%; border-collapse:collapse; font-size:.8rem;}
.mini-table th{text-align:left; font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fg-subtle); font-weight:600; padding:0 8px 7px; border-bottom:1px solid var(--border);}
.mini-table td{padding:8px; border-bottom:1px solid var(--border); vertical-align:middle;}
.mini-table td.num{text-align:right; font-variant-numeric:tabular-nums;}
.mini-table tr:last-child td{border-bottom:none;}
.table-scroll{overflow-x:auto;}

/* calendar */
.cal{display:grid; grid-template-columns:repeat(5,1fr); gap:6px;}
.cal .d{font-family:var(--mono); font-size:.62rem; color:var(--fg-subtle); text-align:center; text-transform:uppercase;}
.cal .cell{background:var(--surface-2); border:1px solid var(--border); border-radius:8px; min-height:52px; padding:5px; display:flex; flex-direction:column; gap:3px;}
.chip{font-size:.6rem; font-weight:600; padding:2px 5px; border-radius:5px; line-height:1.25;}
.chip.ig{background:var(--primary-soft); color:var(--primary-soft-fg);}
.chip.li{background:var(--blue-soft); color:var(--blue-soft-fg);}
.chip.wp{background:var(--money-soft); color:var(--money-soft-fg);}
.chip.tk{background:var(--surface-3); color:var(--fg-muted);}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:step;}
@media (max-width:820px){ .steps{grid-template-columns:1fr; max-width:520px; margin-inline:auto;} }
.step{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:10px;}
.step::before{counter-increment:step; content:"0" counter(step); font-family:var(--mono); font-weight:600; font-size:.9rem;
  color:var(--primary); background:var(--primary-soft); width:38px; height:38px; border-radius:10px; display:grid; place-items:center;}
.step h3{font-size:1.05rem;} .step p{font-size:.9rem; color:var(--fg-muted);}

/* feature cross-nav */
.switcher{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
@media (max-width:760px){ .switcher{grid-template-columns:1fr;} }
.sw{display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:12px;
  text-decoration:none; color:inherit; background:var(--surface); transition:border-color .14s, background .14s;}
.sw:hover{border-color:var(--border-strong); background:var(--surface-2);}
.sw.on{border-color:var(--primary); background:var(--primary-soft);} .sw.on .sw-t{color:var(--primary-soft-fg);}
.sw .ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;}
.sw .ic svg{width:18px;height:18px;}
.sw-t{font-weight:600; font-size:.95rem;} .sw-s{font-size:.78rem; color:var(--fg-subtle);}

/* differentiator */
.diff .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center;}
@media (max-width:820px){ .diff .wrap{grid-template-columns:1fr;} }
.band-ink h2, .band-ink p{color:var(--primary-fg);}
.band-ink .eyebrow{color:var(--primary);}
.band-ink .muted{color:color-mix(in srgb,var(--primary-fg) 72%, transparent);}
.vs-item{display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:var(--radius);
  background:color-mix(in srgb,var(--primary-fg) 7%, transparent); border:1px solid color-mix(in srgb,var(--primary-fg) 14%, transparent); margin-top:14px;}
.vs-item .tag{font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; flex:none; padding:4px 8px; border-radius:7px;}
.vs-item.them .tag{background:color-mix(in srgb,var(--primary-fg) 16%, transparent); color:color-mix(in srgb,var(--primary-fg) 80%, transparent);}
.vs-item.us .tag{background:var(--primary); color:var(--primary-fg);}
.vs-item .txt{color:var(--primary-fg); font-size:.95rem;} .vs-item .txt b{color:#fff;}

/* pricing */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch;}
@media (max-width:760px){ .price-grid{grid-template-columns:1fr;} }
.price-card{border-radius:var(--radius-lg); padding:26px; display:flex; flex-direction:column; gap:16px;}
.price-card.them{background:var(--surface-2); border:1px solid var(--border);}
.price-card.us{background:var(--surface); border:2px solid var(--primary); box-shadow:var(--shadow); position:relative;}
.price-card.us .ribbon{position:absolute; top:-12px; right:20px; background:var(--primary); color:var(--primary-fg);
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px; font-family:var(--mono);}
.price-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.price-list li{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--border); font-size:.9rem;}
.price-list li:first-child{border-top:none;}
.price-list li .amt{font-variant-numeric:tabular-nums; color:var(--fg-muted); font-weight:600;}
.price-sum{display:flex; align-items:baseline; gap:10px;}
.price-sum .n{font-family:var(--display); font-weight:700; font-size:2.4rem; letter-spacing:-.02em;}
.price-sum .u{color:var(--fg-muted); font-size:.9rem;}
.strike{text-decoration:line-through; color:var(--fg-subtle);}
.foot-note{font-size:.78rem; color:var(--fg-subtle);}

/* faq */
.faq{max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:10px;}
details{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:0 18px;}
details[open]{border-color:var(--border-strong);}
summary{cursor:pointer; list-style:none; padding:16px 0; font-weight:600; font-size:1rem; display:flex; justify-content:space-between; align-items:center; gap:14px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-family:var(--mono); color:var(--primary); font-size:1.3rem; line-height:1; flex:none;}
details[open] summary::after{content:"\2013";}
details .ans{padding:0 0 18px; color:var(--fg-muted); font-size:.94rem;}

/* final cta */
.final{text-align:center;}
.final .card{background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 14%, var(--surface)), var(--surface));
  border:1px solid var(--border-strong); border-radius:24px; padding:clamp(36px,6vw,64px); display:flex; flex-direction:column; gap:20px; align-items:center;}
.final h2 .accent{color:var(--primary);}

/* footer */
footer{background:var(--ink); color:color-mix(in srgb,var(--primary-fg) 82%, transparent);}
footer .wrap{padding-block:52px 30px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:820px){ footer .wrap{grid-template-columns:1fr 1fr;} }
@media (max-width:460px){ footer .wrap{grid-template-columns:1fr;} }
footer .brand{color:#fff;}
footer h4{font-size:.74rem; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb,var(--primary-fg) 55%, transparent); margin:0 0 14px; font-weight:600;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
footer a{text-decoration:none; color:color-mix(in srgb,var(--primary-fg) 78%, transparent); font-size:.9rem;}
footer a:hover{color:#fff;}
footer .about{font-size:.9rem; line-height:1.6; color:color-mix(in srgb,var(--primary-fg) 65%, transparent); max-width:300px;}
.footer-bottom{border-top:1px solid color-mix(in srgb,var(--primary-fg) 15%, transparent);}
.footer-bottom .wrap{padding-block:18px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:.82rem; color:color-mix(in srgb,var(--primary-fg) 55%, transparent);}

.theme-toggle{background:transparent; border:1px solid var(--border-strong); color:var(--fg-muted);
  width:34px; height:34px; border-radius:9px; cursor:pointer; display:grid; place-items:center; font-size:.95rem;}
.theme-toggle:hover{color:var(--fg); background:var(--surface-2);}

/* feature hero accent variants */
.hero.redes::before{background:radial-gradient(60% 70% at 80% 6%, color-mix(in srgb,var(--primary) 22%, transparent), transparent 70%);}
.hero.proyectos::before{background:radial-gradient(60% 70% at 80% 6%, color-mix(in srgb,var(--money) 20%, transparent), transparent 70%);}
.hero.factura::before{background:radial-gradient(60% 70% at 80% 6%, color-mix(in srgb,var(--blue) 20%, transparent), transparent 70%);}
.tag-line{display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); font-size:.8rem; font-weight:600; color:var(--fg-muted); box-shadow:var(--shadow-sm);}
.tag-line .d{width:8px; height:8px; border-radius:50%; background:var(--primary);}
.tag-line.m .d{background:var(--money);} .tag-line.b .d{background:var(--blue);}

/* ---------- carrusel de logos (icono + nombre, color al hover) ---------- */
.logos{padding-bottom:40px;}
.marquee{position:relative; overflow:hidden; width:100%; margin-top:8px; padding-block:12px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);}
.marquee-track{display:flex; align-items:center; gap:16px; width:max-content;
  animation:marquee 34s linear infinite; will-change:transform;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* flotación sutil, escalonada, mientras el carrusel se desliza */
.chip-wrap{flex:none; animation:bob 3.8s ease-in-out infinite;}
.chip-wrap:nth-child(2n){animation-delay:-.6s;} .chip-wrap:nth-child(3n){animation-delay:-1.2s;}
.chip-wrap:nth-child(4n){animation-delay:-1.9s;} .chip-wrap:nth-child(5n){animation-delay:-2.6s;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}

.brand-ic{display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 14px;
  border-radius:999px; border:1px solid var(--border); background:var(--surface);
  color:var(--fg-muted); font-weight:600; font-size:.9rem; letter-spacing:-.01em; white-space:nowrap;
  box-shadow:var(--shadow-sm); cursor:default;
  transition:color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.brand-ic svg{width:19px; height:19px; display:block; fill:currentColor; transition:fill .25s ease;}
.brand-ic:hover{color:var(--bc); border-color:color-mix(in srgb, var(--bc) 50%, var(--border));
  box-shadow:0 10px 24px -10px color-mix(in srgb, var(--bc) 60%, transparent); transform:scale(1.07);}

@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none; mask-image:none;}
  .marquee-track{animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:12px;}
  .chip-wrap{animation:none;}
}