@font-face { font-family:"UbuntuV"; src:url("bolosapiens-fonts/ubuntu-variable.ttf") format("truetype"); font-weight:300 700; font-display:swap; }


  /* Tokens de marca: paleta "Huel + verde Linear" del probador, con el punto como variable única */
  :root {
    --bs-bg:#0c0c0d;        /* negro de Huel */
    --bs-fg:#ffffff;        /* texto sobre negro */
    --bs-dot:#89d196;       /* verde de Linear: punto, .com y acento */
    --bs-accent:#89d196;    /* botón principal */
    --bs-muted:#a3a3a6;     /* texto secundario sobre negro */
    --bs-surface:#ececed;   /* gris claro de Huel */
    --bs-ink:#0c0c0d;       /* texto sobre claro */
    --bs-ink-2:#55565a;     /* texto secundario sobre claro */
    --bs-paper:#ffffff;
    --bs-line:#d6d6d8;
    --radius:14px;
    --pill:999px;
    --maxw:1200px;
    --pad:clamp(20px,5vw,64px);
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; font-family:"UbuntuV", Ubuntu, system-ui, sans-serif; color:var(--bs-ink); background:var(--bs-paper); -webkit-font-smoothing:antialiased; line-height:1.5; }
  a { color:inherit; }
  img { display:block; max-width:100%; }
  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
  .d { color:var(--bs-dot); }

  /* Botones estilo Huel: píldora, peso medio */
  .btn { display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:var(--pill); font-weight:500; font-size:16px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s, background .15s; }
  .btn:hover { transform:translateY(-1px); }
  .btn.primary { background:var(--bs-accent); color:var(--bs-bg); }
  .btn.ghost { border-color:currentColor; }
  .btn.dark { background:var(--bs-ink); color:var(--bs-paper); }

  /* Barra superior */
  .bar { background:var(--bs-bg); color:var(--bs-muted); font-size:13px; text-align:center; padding:9px var(--pad); }
  .bar b { color:var(--bs-fg); font-weight:500; }
  header.nav { position:sticky; top:0; z-index:20; background:var(--bs-bg); color:var(--bs-fg); }
  header.nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; }
  .wm { font-weight:500; font-size:26px; letter-spacing:-.01em; text-decoration:none; white-space:nowrap; }
  nav ul { display:flex; gap:30px; list-style:none; margin:0; padding:0; font-size:15px; color:var(--bs-muted); }
  nav a { text-decoration:none; } nav a:hover { color:var(--bs-fg); }
  .nav .btn { padding:11px 20px; font-size:15px; }

  /* Hero */
  .hero { background:var(--bs-bg); color:var(--bs-fg); padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,96px); overflow:hidden; }
  .hero .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center; }
  .eyebrow { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--bs-muted); margin:0 0 18px; }
  .hero h1 { font-size:clamp(46px,7.2vw,104px); line-height:.95; letter-spacing:-.035em; font-weight:700; margin:0 0 24px; }
  .hero p.lead { font-size:clamp(18px,1.6vw,21px); color:var(--bs-muted); max-width:30em; margin:0 0 30px; }
  .price-chip { display:inline-flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; background:#1a1a1c; border-radius:var(--radius); padding:16px 20px; margin:0 0 30px; }
  .price-chip strong { white-space:nowrap; font-size:34px; font-weight:700; letter-spacing:-.02em; }
  .price-chip span span, .price-chip .pp > span { color:var(--bs-muted); font-size:14px; }
  .price-chip .pp { white-space:nowrap; display:inline-flex; gap:8px; align-items:baseline; }
  .cta-row { display:flex; gap:12px; flex-wrap:wrap; }
  .hero-img { position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/5; }
  .hero-img img { width:100%; height:100%; object-fit:cover; object-position:center 62%; }
  .hero-img .tag { position:absolute; left:16px; bottom:16px; background:rgba(12,12,13,.78); backdrop-filter:blur(6px); color:var(--bs-fg); padding:10px 14px; border-radius:12px; font-size:13px; }

  /* Fila de datos (estilo "nutritionally complete" de Huel) */
  .stats { background:var(--bs-surface); }
  .stats .wrap { display:grid; grid-template-columns:repeat(4,1fr); }
  .stat { padding:34px 22px; border-right:1px solid var(--bs-line); }
  .stat:last-child { border-right:0; }
  .stat strong { display:block; white-space:nowrap; font-size:clamp(30px,3.4vw,46px); font-weight:700; letter-spacing:-.03em; line-height:1; }
  .stat span { display:block; margin-top:10px; color:var(--bs-ink-2); font-size:15px; }

  section { padding:clamp(64px,9vw,120px) 0; }
  h2 { font-size:clamp(34px,4.6vw,64px); line-height:1; letter-spacing:-.03em; font-weight:700; margin:0 0 18px; }
  .sub { font-size:19px; color:var(--bs-ink-2); max-width:38em; margin:0 0 44px; }

  /* Comparación de precio */
  .compare { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .bars { display:grid; gap:18px; }
  .barrow { display:grid; grid-template-columns:150px 1fr 78px; gap:14px; align-items:center; font-size:15px; }
  .track { height:44px; background:var(--bs-surface); border-radius:10px; overflow:hidden; }
  .fill { height:100%; border-radius:10px; background:#bdbdc1; }
  .fill.us { background:var(--bs-ink); }
  .barrow b { font-weight:700; font-size:18px; text-align:right; }
  .note { font-size:13px; color:var(--bs-ink-2); margin-top:16px; }

  /* Precio abierto */
  .open { background:var(--bs-bg); color:var(--bs-fg); }
  .open .sub { color:var(--bs-muted); }
  .open-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
  .receipt { background:#141416; border-radius:20px; padding:30px; font-size:16px; }
  .receipt .row { display:grid; grid-template-columns:1fr auto; gap:12px; padding:14px 0; border-bottom:1px dashed #2c2c30; }
  .receipt .row:last-child { border-bottom:0; }
  .receipt .row span:last-child { font-weight:500; }
  .receipt .row.total { border-top:2px solid var(--bs-fg); border-bottom:0; margin-top:6px; padding-top:18px; font-size:20px; font-weight:700; }
  .pending { color:var(--bs-dot); }
  .receipt small { display:block; color:var(--bs-muted); font-size:12px; font-weight:400; margin-top:2px; }
  .open ul.points { list-style:none; padding:0; margin:0; display:grid; gap:20px; }
  .open ul.points li { padding-left:30px; position:relative; color:var(--bs-muted); }
  .open ul.points li b { color:var(--bs-fg); font-weight:500; display:block; }
  .open ul.points li::before { content:""; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:50%; background:var(--bs-dot); }

  /* Qué lleva */
  .groups { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .group { background:var(--bs-surface); border-radius:var(--radius); padding:26px; }
  .group h3 { margin:0 0 6px; font-size:20px; font-weight:700; letter-spacing:-.01em; }
  .group p { margin:0 0 16px; color:var(--bs-ink-2); font-size:14px; }
  .chips { display:flex; flex-wrap:wrap; gap:8px; }
  .chip { background:var(--bs-paper); border-radius:var(--pill); padding:7px 12px; font-size:14px; }

  /* Cómo se cocina */
  .method { background:var(--bs-surface); }
  .method-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
  .layers { display:grid; gap:10px; }
  .layer { border-radius:12px; padding:18px 20px; color:var(--bs-paper); display:flex; justify-content:space-between; font-size:15px; }
  .layer span:last-child { opacity:.75; }
  .l1 { background:#3d4a3d; } .l2 { background:#8a5a2e; } .l3 { background:#6b2a35; } .l4 { background:#2c2a26; }
  .steam { font-size:14px; color:var(--bs-ink-2); text-align:center; letter-spacing:.2em; text-transform:uppercase; }

  /* Historia */
  .story { background:var(--bs-bg); color:var(--bs-fg); text-align:center; }
  .story h2 { font-size:clamp(40px,6vw,88px); max-width:12em; margin:0 auto 26px; }
  .story p { color:var(--bs-muted); font-size:19px; max-width:36em; margin:0 auto 14px; }
  .story .fine { font-size:13px; max-width:46em; margin-top:26px; }

  /* Familia de productos */
  .family { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .prod { background:var(--bs-surface); border-radius:20px; padding:28px; display:flex; flex-direction:column; min-height:360px; }
  .prod .ph { height:220px; border-radius:14px; margin-bottom:22px; background-size:cover; background-position:center 60%; }
  .prod h3 { margin:0; font-size:24px; font-weight:700; letter-spacing:-.02em; }
  .prod p { margin:6px 0 18px; color:var(--bs-ink-2); flex:1; }
  .badge { align-self:flex-start; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; border-radius:var(--pill); background:var(--bs-ink); color:var(--bs-paper); }
  .badge.soon { background:transparent; color:var(--bs-ink-2); border:1px solid var(--bs-line); }
  .soonph { background:repeating-linear-gradient(135deg,#e2e2e4 0 12px,#ececed 12px 24px); display:flex; align-items:center; justify-content:center; color:#9a9a9e; font-size:14px; }

  /* Cómo pedir */
  .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:paso; }
  .step { border:1px solid var(--bs-line); border-radius:20px; padding:30px; }
  .step::before { counter-increment:paso; content:counter(paso); display:flex; width:42px; height:42px; border-radius:50%; background:var(--bs-ink); color:var(--bs-paper); align-items:center; justify-content:center; font-weight:700; margin-bottom:22px; }
  .step h3 { margin:0 0 8px; font-size:21px; font-weight:700; }
  .step p { margin:0; color:var(--bs-ink-2); }

  /* Preguntas */
  .faq { max-width:820px; }
  details { border-bottom:1px solid var(--bs-line); padding:22px 0; }
  summary { cursor:pointer; font-size:20px; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:20px; }
  summary::after { content:"+"; font-weight:300; font-size:26px; line-height:1; }
  details[open] summary::after { content:"−"; }
  details p { color:var(--bs-ink-2); margin:12px 0 0; max-width:40em; }

  /* Cierre y pie */
  .final { background:var(--bs-accent); color:var(--bs-bg); text-align:center; }
  .final h2 { margin-bottom:22px; }
  .final .btn.dark { font-size:17px; padding:17px 30px; }
  footer { background:var(--bs-bg); color:var(--bs-muted); padding:64px 0 40px; font-size:14px; }
  footer .wrap { display:grid; grid-template-columns:auto 1fr auto; gap:48px; align-items:start; }
  .icon3 { width:132px; height:132px; border-radius:50%; background:#1a1a1c; color:var(--bs-fg); display:flex; align-items:center; justify-content:center; font-weight:500; font-size:24px; line-height:.95; letter-spacing:-.01em; }
  .icon3 span { display:block; }
  footer .lema { color:var(--bs-fg); font-size:13px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 12px; }
  footer ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
  .legal { grid-column:1 / -1; border-top:1px solid #222; padding-top:22px; font-size:12px; }

  /* Notas de diseño (se activan con el botón flotante) */
  .notes-toggle { position:fixed; right:18px; bottom:18px; z-index:50; background:#ffd84a; color:#111; border:0; border-radius:var(--pill); padding:12px 18px; font:500 14px "UbuntuV", Ubuntu, sans-serif; cursor:pointer; box-shadow:0 6px 24px rgba(0,0,0,.25); }
  body.notes [data-todo] { outline:2px dashed #ffd84a; outline-offset:3px; position:relative; }
  body.notes [data-todo]::after { content:attr(data-todo); position:absolute; left:0; top:100%; margin-top:6px; z-index:40; background:#ffd84a; color:#111; font:500 12px/1.35 "UbuntuV", Ubuntu, sans-serif; padding:6px 9px; border-radius:6px; max-width:300px; width:max-content; letter-spacing:0; text-transform:none; text-align:left; }
  .notes-panel { position:fixed; right:18px; bottom:72px; z-index:50; width:min(420px,calc(100vw - 36px)); max-height:70vh; overflow:auto; background:#fff; color:#111; border-radius:16px; padding:22px; box-shadow:0 12px 48px rgba(0,0,0,.3); font-size:13px; display:none; }
  body.notes .notes-panel { display:block; }
  .notes-panel h4 { margin:14px 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#666; }
  .notes-panel h4:first-child { margin-top:0; }
  .notes-panel ul { margin:0; padding-left:18px; display:grid; gap:4px; }

  @media (max-width:900px) {
    nav ul { display:none; }
    .hero .wrap, .compare, .open-grid, .method-grid { grid-template-columns:1fr; }
    .stats .wrap { grid-template-columns:1fr 1fr; }
    .stat:nth-child(2) { border-right:0; }
    .stat { border-bottom:1px solid var(--bs-line); }
    .groups { grid-template-columns:1fr 1fr; }
    .family, .steps { grid-template-columns:1fr; }
    footer .wrap { grid-template-columns:1fr; }
    .barrow { grid-template-columns:110px 1fr 64px; }
    .stat strong { font-size:28px; }
    .stat { padding:26px 16px; }
    .price-chip strong { font-size:28px; }
  }

/* Styles retained from the shared HTML attributes. */
:root body .shared-style-1 { padding-top:clamp(40px,7vw,96px) }
:root body .shared-style-2 { font-size:24px }
:root body .shared-style-3 { color:var(--bs-fg) }
:root body .shared-style-4 { margin-bottom:0 }
:root body .shared-style-5 { width:100% }
:root body .shared-style-6 { width:69.6% }
:root body .shared-style-7 { font-size:15px;text-align:left }
:root body .shared-style-8 { width:45.7% }
:root body .shared-style-9 { margin-bottom:0 }
:root body .shared-style-10 { background-image:url('bolosapiens-assets/guiso-referencia.png'); }
:root body .shared-style-11 { margin-top:14px }
:root body .shared-style-12 { align-self:flex-start }
:root body .shared-style-13 { margin-top:14px }
:root body .shared-style-14 { margin-top:14px }
:root body .shared-style-15 { background:var(--bs-surface) }
:root body .shared-style-16 { margin-top:36px }
:root body .shared-style-17 { color:var(--bs-bg) }
:root body .shared-style-18 { max-width:28em;margin:0 }

section[id] { scroll-margin-top: 72px; }
@media (max-width: 480px) {
  header.nav .wrap { gap: 12px; }
  .wm { font-size: 22px; }
  .nav .btn { padding: 10px 14px; }
}