/* ============================================================
   INKCU — Estilos de las páginas de línea de negocio
   Projects (portafolio B2B) · Academy (cursos B2C) · Tools (tienda)
   Depende de inkcu.css (tokens, nav, botones, footer)
   ============================================================ */

/* ---------- 1. Acentos por línea ---------- */
.line-projects{ --accent:#E2AA2D; --accent-2:#f4cf72; }
.line-academy { --accent:#8A6BE0; --accent-2:#E2AA2D; }
.line-tools   { --accent:#39B98B; --accent-2:#E2AA2D; }

.badge-line{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-size:.66rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  padding:.4rem .85rem; border-radius:99px;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
}
.badge-line::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.grad-line{ background:linear-gradient(100deg,var(--accent) 0%,var(--accent-2) 85%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- 2. Cabecera de página ---------- */
.phero{
  position:relative; z-index:3; overflow:hidden;
  padding:clamp(7rem,14vh,9.5rem) 0 clamp(3rem,7vh,5rem);
}
.phero-media{ position:absolute; inset:0; z-index:0; }
.phero-media img{ width:100%; height:100%; object-fit:cover; }
.phero-media::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 70% at 30% 40%, rgba(7,11,28,.35) 0%, rgba(7,11,28,.88) 68%, var(--ink) 100%),
    linear-gradient(180deg, rgba(7,11,28,.9) 0%, rgba(7,11,28,.5) 35%, var(--ink) 100%);
}
.phero .wrap{ position:relative; z-index:2; }
.phero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:960px){ .phero-grid{ grid-template-columns:1fr; } }
.phero h1{
  font-size:clamp(2.4rem,5.6vw,4.6rem); letter-spacing:-.04em; line-height:1;
  margin:1.2rem 0 0; text-shadow:0 14px 46px rgba(7,11,28,.7);
}
.phero p.lead{ color:var(--fg-dim); font-size:clamp(1rem,1.3vw,1.18rem); margin-top:1.3rem; max-width:56ch; }
.phero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.phero-logo{ height:clamp(52px,7vw,78px); width:auto; background:#fff; border-radius:14px; padding:.5rem .9rem; }

.phero-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
.phero-facts div{ background:rgba(12,19,48,.72); backdrop-filter:blur(8px); padding:clamp(1rem,2.2vw,1.6rem); }
.phero-facts b{ display:block; font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.3rem); color:#fff; line-height:1; letter-spacing:-.03em; }
.phero-facts small{ display:block; margin-top:.45rem; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-mute); }

/* Migas */
.crumb{ display:flex; gap:.5rem; align-items:center; font-size:.74rem; color:var(--fg-mute); letter-spacing:.06em; }
.crumb a:hover{ color:var(--accent); }
.crumb span{ opacity:.45; }

/* ---------- 3. Bloques genéricos ---------- */
.panel{ border:1px solid var(--line); border-radius:var(--r-l); background:var(--ink-2); padding:clamp(1.4rem,2.6vw,2rem); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.4vw,1.2rem); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.4rem); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,3vw,2.4rem); }
@media (max-width:980px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

.svc{ display:flex; flex-direction:column; gap:.8rem; padding:clamp(1.3rem,2.4vw,1.8rem);
  border:1px solid var(--line); border-radius:var(--r-m); background:rgba(12,19,48,.5);
  transition:border-color .4s, transform .5s var(--slow), background .4s; }
.svc:hover{ border-color:color-mix(in srgb,var(--accent) 45%,transparent); transform:translateY(-4px); background:rgba(12,19,48,.8); }
.svc i{ font-style:normal; font-family:var(--font-display); font-size:.72rem; letter-spacing:.18em; color:var(--accent); }
.svc h3{ font-size:1.08rem; color:#fff; }
.svc p{ color:var(--fg-dim); font-size:.92rem; }

/* Proceso por fases */
.phases{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:ph; }
@media (max-width:900px){ .phases{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .phases{ grid-template-columns:1fr; } }
.phase{ position:relative; padding:2.4rem 1.4rem 1.6rem; border-top:1px solid var(--line); }
.phase::before{
  content:''; position:absolute; top:-6px; left:0; width:11px; height:11px; border-radius:50%;
  background:var(--ink); border:2px solid var(--accent);
}
.phase b{ display:block; font-family:var(--font-display); font-size:.72rem; letter-spacing:.2em; color:var(--accent); margin-bottom:.6rem; }
.phase h3{ font-size:1.15rem; color:#fff; margin-bottom:.5rem; }
.phase p{ color:var(--fg-dim); font-size:.9rem; }

/* ---------- 4. Portafolio (Projects) ---------- */
.pf-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.pf-filters button{
  appearance:none; cursor:pointer; padding:.5rem 1.15rem; border-radius:99px;
  border:1px solid var(--line-2); background:transparent; color:var(--fg-dim);
  font-size:.85rem; font-weight:500; transition:all .3s var(--ease);
}
.pf-filters button:hover{ color:#fff; border-color:var(--accent); }
.pf-filters button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--navy); font-weight:700; }

.pf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.4vw,1.2rem); }
@media (max-width:900px){ .pf-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pf-grid{ grid-template-columns:1fr; } }
.pf-card{
  position:relative; display:block; width:100%; padding:0; cursor:pointer; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; background:var(--ink-2);
  appearance:none; color:inherit; font:inherit;
  transition:transform .5s var(--slow), border-color .4s, box-shadow .5s var(--slow), opacity .4s;
}
.pf-card[hidden]{ display:none; }
.pf-card figure{ margin:0; aspect-ratio:3/2; overflow:hidden; background:var(--navy); }
.pf-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--slow), filter .5s; filter:brightness(.86) saturate(.92); }
.pf-card:hover{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--accent) 50%,transparent); box-shadow:0 26px 54px -32px #000; }
.pf-card:hover img{ transform:scale(1.07); filter:brightness(1) saturate(1); }
.pf-body{ padding:1.05rem 1.15rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pf-body h3{ font-size:1.02rem; color:#fff; letter-spacing:-.02em; }
.pf-body span{ font-size:.7rem; letter-spacing:.14em; color:var(--accent); font-family:var(--font-display); }
.pf-year{ position:absolute; top:.8rem; left:.9rem; z-index:2; font-family:var(--font-display); font-size:.66rem;
  letter-spacing:.16em; background:rgba(7,11,28,.75); backdrop-filter:blur(6px); color:#fff;
  border:1px solid var(--line-2); padding:.25rem .6rem; border-radius:99px; }
.pf-zoom{ position:absolute; right:.9rem; bottom:4.6rem; z-index:2; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:rgba(7,11,28,.75); border:1px solid var(--line-2); color:#fff;
  opacity:0; transform:scale(.85); transition:all .35s var(--ease); }
.pf-card:hover .pf-zoom{ opacity:1; transform:none; }

/* Visor de imagen */
.lbox{ width:min(1000px, calc(100vw - 2rem)); max-width:none; padding:0; border:1px solid var(--line-2);
  border-radius:var(--r-l); background:var(--ink-2); overflow:hidden; }
.lbox::backdrop{ background:rgba(4,7,20,.85); backdrop-filter:blur(6px); }
.lbox img{ width:100%; height:auto; display:block; max-height:72vh; object-fit:contain; background:#05070f; }
.lbox-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; }
.lbox-bar h3{ font-size:1.05rem; color:#fff; }
.lbox-bar small{ color:var(--fg-mute); font-size:.75rem; letter-spacing:.12em; }
.lbox-close{ width:38px; height:38px; border-radius:50%; cursor:pointer; border:1px solid var(--line-2);
  background:rgba(255,255,255,.05); color:#fff; display:grid; place-items:center; transition:all .3s var(--ease); }
.lbox-close:hover{ background:var(--accent); color:var(--navy); border-color:var(--accent); }

/* Sectores compactos */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips span{ display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--fg-dim);
  border:1px solid var(--line); border-radius:99px; padding:.45rem .95rem; background:rgba(255,255,255,.02); }
.chips img{ width:17px; height:17px; opacity:.75; }

/* ---------- 5. Academy ---------- */
.urgency{
  position:relative; z-index:111; background:linear-gradient(90deg,var(--violet),#7c5ad6 55%,var(--gold));
  color:#fff; text-align:center; font-size:.82rem; font-weight:500; padding:.55rem 1rem;
  display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap;
}
.urgency b{ font-family:var(--font-display); letter-spacing:.04em; }
.urgency .clock{ font-variant-numeric:tabular-nums; background:rgba(0,0,0,.28); padding:.15rem .55rem; border-radius:6px; }
/* La barra de urgencia y el nav viajan juntos: la altura del bloque deja de importar */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:111; }
.topbar .nav{ position:static; }
.has-urgency .phero{ padding-top:clamp(9.5rem,17vh,11rem); }
@media (max-width:640px){
  .urgency{ font-size:.76rem; gap:.5rem; padding:.5rem .8rem; }
  .urgency .hide-sm{ display:none; }
}

.rating{ display:inline-flex; align-items:center; gap:.7rem; color:var(--fg-dim); font-size:.88rem; }
.stars{ color:var(--gold); letter-spacing:.1em; font-size:.95rem; }

.course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.3rem); }
@media (max-width:1000px){ .course-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .course-grid{ grid-template-columns:1fr; } }
.course{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-l); background:var(--ink-2);
  transition:border-color .4s, transform .5s var(--slow), box-shadow .5s var(--slow);
}
.course:hover{ transform:translateY(-5px); box-shadow:0 28px 60px -36px #000; }
.course.is-picked{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 28px 60px -36px #000; }
.course figure{ margin:0; aspect-ratio:16/9; overflow:hidden; position:relative; background:var(--navy); }
.course figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--slow); }
.course:hover figure img{ transform:scale(1.05); }
.course-lvl{ position:absolute; top:.75rem; left:.85rem; z-index:2; font-family:var(--font-display);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; background:rgba(7,11,28,.8);
  border:1px solid var(--line-2); color:#fff; padding:.25rem .6rem; border-radius:99px; }
.course-seats{ position:absolute; top:.75rem; right:.85rem; z-index:2; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; background:color-mix(in srgb,var(--gold) 88%,#000); color:var(--navy);
  font-weight:700; padding:.25rem .6rem; border-radius:99px; }
.course-body{ padding:1.3rem 1.25rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.course-body h3{ font-size:1.18rem; color:#fff; letter-spacing:-.025em; }
.course-body > p{ color:var(--fg-dim); font-size:.9rem; margin:.7rem 0 1rem; }
.mods{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.mods li{ font-size:.83rem; color:var(--fg-mute); display:flex; gap:.5rem; align-items:flex-start; }
.mods li::before{ content:''; flex:0 0 auto; width:5px; height:5px; margin-top:.5rem; background:var(--accent); transform:rotate(45deg); }
.course-foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  padding-top:1rem; border-top:1px solid var(--line); }
.price{ display:flex; flex-direction:column; gap:.15rem; }
.price b{ font-family:var(--font-display); font-size:1.32rem; color:#fff; letter-spacing:-.02em; }
.price del{ color:var(--fg-mute); font-size:.82rem; }
.price small{ color:var(--fg-mute); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.pick{
  appearance:none; cursor:pointer; white-space:nowrap;
  border:1px solid var(--accent); background:transparent; color:var(--accent);
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  padding:.6rem 1.1rem; border-radius:99px; transition:all .3s var(--ease);
}
.pick:hover{ background:var(--accent); color:#fff; }
.course.is-picked .pick{ background:var(--accent); color:#fff; }

/* Comparativa de paquetes */
.plans{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-l); background:rgba(12,19,48,.5); }
.plans table{ width:100%; border-collapse:collapse; min-width:620px; }
.plans th,.plans td{ padding:.9rem 1.1rem; text-align:center; border-bottom:1px solid var(--line); font-size:.9rem; }
.plans th:first-child,.plans td:first-child{ text-align:left; color:var(--fg-dim); }
.plans thead th{ color:#fff; font-family:var(--font-display); font-size:1.05rem; letter-spacing:.02em; }
.plans thead th small{ display:block; font-family:var(--font-body); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-mute); font-weight:400; margin-top:.3rem; }
.plans .yes{ color:var(--accent); font-weight:700; }
.plans .no{ color:var(--fg-mute); opacity:.5; }
.plans tbody tr:last-child td{ border-bottom:0; }
.plans .plan-hi{ background:color-mix(in srgb,var(--accent) 8%,transparent); }
.plan-price{ font-family:var(--font-display); font-size:1.5rem; color:#fff; display:block; }
.plan-price del{ display:block; font-size:.8rem; color:var(--fg-mute); font-family:var(--font-body); }

.gal{ columns:4 200px; column-gap:clamp(.6rem,1.2vw,1rem); }
.gal img{ width:100%; height:auto; border-radius:var(--r-s); margin-bottom:clamp(.6rem,1.2vw,1rem);
  border:1px solid var(--line); display:block; transition:transform .5s var(--slow), border-color .4s; }
.gal img:hover{ transform:scale(1.02); border-color:color-mix(in srgb,var(--accent) 50%,transparent); }

.tst-grid{ columns:3 300px; column-gap:clamp(1rem,1.6vw,1.3rem); }
.tst{ break-inside:avoid; margin-bottom:clamp(1rem,1.6vw,1.3rem); padding:1.3rem 1.35rem;
  border:1px solid var(--line); border-radius:var(--r-m); background:rgba(12,19,48,.5); }
.tst-top{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.7rem; }
.tst-top b{ font-family:var(--font-display); color:#fff; font-size:.95rem; display:block; }
.tst-top small{ color:var(--fg-mute); font-size:.74rem; }
.tst p{ color:var(--fg-dim); font-size:.9rem; }
.tst time{ display:block; margin-top:.7rem; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute); }

/* Barra de conversión fija */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:104;
  background:rgba(7,11,28,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .45s var(--slow);
}
.sticky-bar.show{ transform:none; }
.sticky-bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.75rem; }
.sticky-bar .sb-info{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.sticky-bar .sb-info b{ font-family:var(--font-display); color:#fff; font-size:.98rem; }
.sticky-bar .sb-info small{ color:var(--fg-mute); font-size:.76rem; }
@media (max-width:560px){
  .sticky-bar .sb-info small{ display:none; }
  .sticky-bar .btn{ padding:.7rem 1.1rem; font-size:.85rem; }
}

/* ---------- 6. Tools (tienda) ---------- */
.shop-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.6rem); }
@media (max-width:760px){ .shop-grid{ grid-template-columns:1fr; } }
.prod{
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  border:1px solid var(--line); border-radius:var(--r-l); background:var(--ink-2);
  transition:border-color .4s, transform .5s var(--slow), box-shadow .5s var(--slow);
}
.prod:hover{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:0 30px 64px -38px #000; }
.prod-fig{ margin:0; position:relative; aspect-ratio:16/9; display:grid; place-items:center; padding:1.6rem;
  background:#fff; box-shadow:inset 0 -1px 0 rgba(18,27,66,.1); }
.prod-fig img{ max-width:86%; max-height:86%; width:auto; height:auto; object-fit:contain;
  transition:transform .6s var(--slow); }
.prod:hover .prod-fig img{ transform:scale(1.05); }
.prod-fig.is-dark{ background:linear-gradient(150deg,#101838,#1b2557 60%,#0b1128); }
.prod-fig.is-dark img{ filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)); max-width:64%; max-height:78%; }
.prod-kind{ position:absolute; top:.85rem; left:.9rem; font-family:var(--font-display); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; background:var(--navy); color:var(--accent);
  padding:.28rem .65rem; border-radius:99px; }
.prod-stock{ position:absolute; top:.85rem; right:.9rem; font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; background:rgba(57,185,139,.16); color:#7fe3bd;
  border:1px solid rgba(57,185,139,.45); padding:.28rem .65rem; border-radius:99px; }
.prod-body{ padding:1.4rem 1.35rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.prod-body h3{ font-size:1.25rem; color:#fff; letter-spacing:-.025em; }
.prod-sku{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); margin-top:.35rem; display:block; }
.prod-body > p{ color:var(--fg-dim); font-size:.9rem; margin:.85rem 0 1.1rem; }
.specs{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1rem; margin-bottom:1.2rem; }
.specs div{ font-size:.8rem; color:var(--fg-mute); border-left:2px solid var(--line-2); padding-left:.7rem; }
.specs b{ display:block; color:var(--fg); font-weight:600; font-size:.85rem; }
.prod-foot{ margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:99px; overflow:hidden; }
.qty button{ width:32px; height:34px; cursor:pointer; border:0; background:transparent; color:var(--fg-dim); font-size:1rem; transition:background .25s, color .25s; }
.qty button:hover{ background:rgba(255,255,255,.07); color:#fff; }
.qty span{ min-width:28px; text-align:center; font-variant-numeric:tabular-nums; font-weight:600; font-size:.9rem; }

.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
@media (max-width:820px){ .trust{ grid-template-columns:repeat(2,1fr); } }
.trust div{ background:rgba(12,19,48,.6); padding:1.2rem 1.3rem; }
.trust b{ display:block; font-family:var(--font-display); font-size:.95rem; color:#fff; margin-bottom:.3rem; }
.trust small{ color:var(--fg-mute); font-size:.8rem; }
.pay-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }
.pay-logos img{ height:36px; width:auto; object-fit:contain; background:#fff; border-radius:9px;
  padding:6px 12px; transition:transform .3s var(--ease); }
.pay-logos img:hover{ transform:translateY(-2px); }

/* Carrito lateral */
.cart{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw); z-index:120;
  background:rgba(9,14,36,.97); backdrop-filter:blur(18px); border-left:1px solid var(--line-2);
  display:flex; flex-direction:column; transform:translateX(105%);
  transition:transform .45s var(--slow); box-shadow:-30px 0 80px -40px #000;
}
.cart.open{ transform:none; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 1.4rem; border-bottom:1px solid var(--line); }
.cart-head h2{ font-size:1.1rem; color:#fff; }
.cart-items{ flex:1; overflow-y:auto; padding:1.1rem 1.4rem; display:flex; flex-direction:column; gap:.9rem; }
.cart-empty{ color:var(--fg-mute); font-size:.9rem; text-align:center; padding:2.5rem 0; }
.cart-row{ display:grid; grid-template-columns:52px 1fr auto; gap:.85rem; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:.6rem; background:rgba(255,255,255,.02); }
.cart-row img{ width:52px; height:52px; object-fit:contain; background:#eef1f8; border-radius:8px; padding:4px; }
.cart-row b{ display:block; font-size:.86rem; color:#fff; font-weight:600; line-height:1.25; }
.cart-row small{ color:var(--fg-mute); font-size:.75rem; }
.cart-row .rm{ background:none; border:0; color:var(--fg-mute); cursor:pointer; font-size:1.1rem; line-height:1; padding:.2rem .3rem; }
.cart-row .rm:hover{ color:#ff9a9a; }
.cart-foot{ padding:1.2rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.cart-total{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1rem; }
.cart-total span{ color:var(--fg-dim); font-size:.85rem; }
.cart-total b{ font-family:var(--font-display); font-size:1.5rem; color:#fff; }
.cart-foot .btn{ width:100%; }
.cart-foot small{ display:block; margin-top:.8rem; color:var(--fg-mute); font-size:.74rem; text-align:center; }
.cart-back{ position:fixed; inset:0; z-index:119; background:rgba(4,7,20,.6); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
.cart-back.show{ opacity:1; visibility:visible; }

.cart-btn{ position:relative; }
.cart-btn i{ position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 4px;
  border-radius:99px; background:var(--gold); color:var(--navy); font-style:normal;
  font-size:.68rem; font-weight:700; display:grid; place-items:center; }
.cart-btn i:empty,.cart-btn i[data-n="0"]{ display:none; }

/* ---------- 7. Bloque de conversión / formulario ---------- */
.convert{ background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 12%,var(--ink-2)) 0%, var(--ink-2) 55%, var(--ink) 100%); }
.order-note{ font-size:.82rem; color:var(--fg-mute); }
.wa-link{ display:inline-flex; align-items:center; gap:.5rem; color:#7fe3bd; font-weight:600; font-size:.9rem; }
.wa-link:hover{ text-decoration:underline; }

/* ---------- 8. Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  .sticky-bar,.cart,.cart-back{ transition:none; }
}