/* Sitio público de Synaptic ID: cabecera y pie, tienda (catálogo, ficha, carrito) y «Avísame».
   Sobre /shared/synaptic.css. El color de cada producto llega del servidor en --product-* (bloques .themed): aquí solo
   se decide dónde aparece. Regla: el acento crudo es la «sinapsis» (una línea, un punto, el monograma); el texto y los
   botones usan sus variantes accesibles. */

/* --- cabecera y pie --------------------------------------------------------------------------------------------- */
.site-top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line)}
.site-top-in{display:flex;align-items:center;gap:8px 20px;min-height:64px;flex-wrap:wrap}
.site-nav{display:flex;gap:2px}
.site-nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;border-radius:var(--r-s);
  color:var(--ink-2);text-decoration:none;font-size:var(--t-15)}
.site-nav a:hover{background:var(--stone);color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.site-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.site-cart{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 10px;border-radius:var(--r-s);
  color:var(--ink-2);text-decoration:none;font-size:var(--t-15)}
.site-cart:hover{background:var(--stone);color:var(--ink)}
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);font-size:var(--t-12);font-weight:650;font-variant-numeric:tabular-nums}
@media (max-width:719px){
  .site-top-in{padding-top:6px;padding-bottom:4px}
  .site-nav{order:3;width:100%;overflow-x:auto;margin:0 -8px;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
}
.site-foot{border-top:1px solid var(--line);background:var(--paper);padding:28px 0 40px;margin-top:var(--s-20)}
.site-foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:0 4px}
.site-foot nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 10px;color:var(--ink-2);
  text-decoration:none;border-radius:var(--r-s)}
.site-foot nav a:hover{background:var(--stone);color:var(--ink)}
.site-foot .small{margin-left:auto}
main:focus{outline:none}

/* --- piezas comunes --------------------------------------------------------------------------------------------- */
.lead{font-size:var(--t-18);line-height:1.5;color:var(--ink-2);max-width:60ch}
.crumbs{font-size:var(--t-14);color:var(--muted);margin-bottom:var(--s-4)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.narrow{max-width:820px}
.checks{list-style:none;margin:var(--s-4) 0;padding:0;display:grid;gap:10px}
.checks li{position:relative;padding-left:24px}
.checks li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--product,var(--accent));box-shadow:0 0 0 3px var(--accent-tint)}
.price-from{font-size:var(--t-15);color:var(--ink-2)}
.price-from strong{font-size:var(--t-20);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.form-msg{font-size:var(--t-14);margin:0}
.form-msg:empty{display:none}
.form-msg.ok{color:var(--ok)}.form-msg.bad{color:var(--bad)}

/* --- tienda: catálogo ------------------------------------------------------------------------------------------- */
.store-head{padding-top:var(--s-12);padding-bottom:var(--s-8)}
.store-head h1{font-size:clamp(var(--t-30),4.4vw,var(--t-48));letter-spacing:-.03em;font-weight:640}
.store-head .lead{margin-top:var(--s-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-6)}
.chip{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2);text-decoration:none;font-size:var(--t-14)}
.chip:hover{border-color:var(--ink-2);color:var(--ink)}
.chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:720px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.tile{position:relative;display:grid;gap:6px;align-content:start;height:100%;padding:28px 24px 24px;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);color:var(--ink);text-decoration:none;
  overflow:hidden;box-shadow:var(--sh-1);transition:border-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
.tile::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--product,var(--accent))}
.tile:hover{border-color:var(--line-strong);box-shadow:var(--sh-2);text-decoration:none}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.tile-name{font-size:var(--t-24);font-weight:640;letter-spacing:-.02em}
.tile-tag{font-size:var(--t-16);color:var(--ink-2)}
.tile-cat{font-size:var(--t-13);color:var(--muted)}
.tile .price-from{margin-top:12px}
.tile-cta{margin-top:6px;color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.store-facts{margin-top:var(--s-16)}
.store-facts h2,.plans-wrap h2,.about h2{font-size:var(--t-24);letter-spacing:-.02em}
.facts-grid{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.facts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts-grid li{display:grid;gap:4px;padding:18px 18px 20px;border-top:2px solid var(--ink);background:var(--panel);
  border-radius:0 0 var(--r-m) var(--r-m)}
.facts-grid span{color:var(--muted);font-size:var(--t-14)}

/* --- tienda: ficha de producto ---------------------------------------------------------------------------------- */
.sheet-head{position:relative;background:var(--accent-tint);border-bottom:1px solid var(--line);
  padding:var(--s-8) 0 var(--s-10)}
.sheet-head::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--product,var(--accent))}
.sheet-head-in{display:grid;gap:var(--s-6);align-items:end}
@media (min-width:880px){.sheet-head-in{grid-template-columns:1fr auto}}
.sheet-head .crumbs{grid-column:1/-1;margin:0}
.sheet-id{display:flex;gap:20px;align-items:center}
.sheet-id h1{font-size:clamp(var(--t-30),4vw,var(--t-48));letter-spacing:-.03em;font-weight:650}
.sheet-tag{font-size:var(--t-18);color:var(--ink-2);margin-top:4px}
.sheet-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:10px;font-size:var(--t-13);
  color:var(--muted)}
.sheet-buy{display:grid;gap:12px;justify-items:start}
@media (min-width:880px){.sheet-buy{justify-items:end;text-align:right}}
@media (max-width:519px){.sheet-id{align-items:flex-start}.sheet-id .pmark.xl{--m:56px}.sheet-buy .btn{width:100%}}
.shots{margin-top:var(--s-8)}
.shots-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(88%,760px);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin}
.shot{margin:0;scroll-snap-align:start;display:grid;gap:8px}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--stone)}
.shot figcaption{font-size:var(--t-13);color:var(--muted);max-width:var(--measure)}
.sheet-body{display:grid;gap:var(--s-8);margin-top:var(--s-10)}
@media (min-width:960px){.sheet-body{grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-12)}}
.about{max-width:var(--measure)}
.about p{margin-top:var(--s-4);font-size:var(--t-16);line-height:1.65;color:var(--ink-2)}
.about h2+p{margin-top:var(--s-3)}
.side-facts{margin:0;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel)}
.side-facts div{padding:16px 18px;border-top:1px solid var(--line)}
.side-facts div:first-child{border-top:0}
.side-facts dt{font-weight:600;font-size:var(--t-14)}
.side-facts dd{margin:4px 0 0;color:var(--muted);font-size:var(--t-14)}
.plans-wrap{margin-top:var(--s-12)}
.plans-wrap>p{margin-top:6px}
.plans-wrap .notice{margin-top:var(--s-4)}
.plan-group{margin-top:var(--s-6)}
.plan-group-title{font-size:var(--t-14);font-weight:600;color:var(--muted);margin-bottom:10px}
.plans{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.plan{display:grid;gap:8px;align-content:start;padding:22px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--panel);box-shadow:var(--sh-1)}
.plan h3{font-size:var(--t-18)}
.plan-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan-price strong{font-size:var(--t-30);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.plan-price span{color:var(--muted)}
.plan-tax{font-size:var(--t-13);color:var(--muted);font-variant-numeric:tabular-nums}
.plan-trial{font-size:var(--t-13);color:var(--ok);font-weight:600}
.plan-desc{color:var(--ink-2);font-size:var(--t-14);min-height:3em}
.plan .btn{margin-top:8px}
.plan-later{margin-top:8px;font-size:var(--t-14);color:var(--muted);padding:10px 12px;border-radius:var(--r-s);
  background:var(--stone)}
.soon-price{margin-top:var(--s-5);padding:24px;border:1px dashed var(--line-strong);border-radius:var(--r-l);
  background:var(--panel);max-width:560px}
.soon-price h3{font-size:var(--t-20)}
.soon-price p{margin-top:6px;color:var(--muted)}
.waitlist{margin:var(--s-12) auto 0;max-width:calc(var(--wrap) - 56px);padding:var(--s-8);border-radius:var(--r-xl);
  background:var(--accent-tint);position:relative;overflow:hidden}
@media (max-width:719px){.waitlist{margin-left:16px;margin-right:16px;padding:var(--s-6) var(--s-5)}}
.waitlist h2{font-size:var(--t-24);letter-spacing:-.02em}
.waitlist>p{margin-top:8px;color:var(--ink-2);max-width:56ch}
.waitlist-form{display:grid;gap:12px;margin-top:var(--s-5);max-width:560px}
@media (min-width:600px){.waitlist-form{grid-template-columns:1fr auto;align-items:end}.waitlist-form .form-msg{grid-column:1/-1}}

/* --- carrito ---------------------------------------------------------------------------------------------------- */
.cart{padding-top:var(--s-10)}
.cart h1{font-size:clamp(var(--t-30),4vw,var(--t-38));letter-spacing:-.03em}
.cart .lead{margin-top:var(--s-3)}
.cart-body{margin-top:var(--s-8);display:grid;gap:var(--s-6)}
@media (min-width:880px){.cart-body.filled{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
.lines{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel)}
.line{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:center;padding:16px 18px;
  border-top:1px solid var(--line)}
.line:first-child{border-top:0}
.line .pmark{grid-row:span 2}
.line-name{font-weight:600}
.line-plan{font-size:var(--t-14);color:var(--muted);grid-column:2}
.line-price{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.line-remove{grid-column:3;justify-self:end}
.summary{display:grid;gap:14px;padding:20px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);
  box-shadow:var(--sh-1)}
@media (min-width:880px){.summary{position:sticky;top:84px}}
.summary h2{font-size:var(--t-18)}
.totals{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-variant-numeric:tabular-nums}
.totals dt{color:var(--muted)}.totals dd{margin:0;text-align:right}
.totals .total{font-size:var(--t-20);font-weight:650;color:var(--ink);padding-top:10px;border-top:1px solid var(--line)}
.coupon{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.coupon .field{grid-column:1/-1}
.summary .note{font-size:var(--t-13);color:var(--muted)}
.cart-empty{padding:32px;border:1px dashed var(--line-strong);border-radius:var(--r-l);text-align:center;
  display:grid;gap:12px;justify-items:center;background:var(--panel)}
.notice{margin:0}