/* Creaflow — hoja compartida: tokens, base, ayudantes, cabecera, pie y 404.
   Las demás páginas añaden su propio CSS (shop.css, y los de cada página) con su prefijo. */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#05100c;
  --paper:#f1f4f0;
  --surface:#ffffff;
  --tile:#dfe9e4;
  --muted:#47584f;
  --teal:#409c98;
  --teal-d:#1d6b67;
  --teal-l:#7fcfc9;
  --night:#0a1a16;
  --night-2:#12281f;
  --muted-d:#9db3ab;
  --rec:#e5533d;
  --rec-d:#b83a26;
  --line:rgba(5,16,12,.14);
  --line-d:rgba(241,244,240,.16);
  --r:18px;
  --r-s:10px;
  --r-pill:999px;
  --shadow:0 1px 0 rgba(5,16,12,.04), 0 10px 30px -18px rgba(5,16,12,.35);
  --font:"Onest","Segoe UI",Helvetica,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --wrap:1320px;
  --gutter:clamp(16px,4vw,48px);
  --header-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* chat: solo el color de acento; el widget no se restiliza */
  --sc-accent:#1d6b67;
  --sc-icon-stroke:1.75;
}

/* ---------- 2. Reset y base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);
  font:400 1rem/1.6 var(--font);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{flex:1 0 auto;display:block;min-width:0}
img,svg,video,canvas{max-width:100%}
img,video{height:auto}
svg{flex:none}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
[hidden]{display:none !important}
::selection{background:var(--teal);color:var(--ink)}

h1,h2,h3,h4{font-weight:600;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.25rem,1.2rem + 4.6vw,4.5rem);line-height:1.05;font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,2.9rem);line-height:1.1;font-weight:600}
h3{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.2}
h4{font-size:1.05rem;line-height:1.3}
p{text-wrap:pretty}
a{color:var(--teal-d);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ink)}
strong,b{font-weight:600}
small{font-size:.875rem}

:focus-visible{outline:2px solid var(--teal-d);outline-offset:2px}
.on-dark :focus-visible,.tile--night :focus-visible,.site-footer :focus-visible{outline-color:var(--teal-l)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}

/* ---------- 3. Ayudantes de maqueta ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.bleed{width:100vw;margin-left:calc(50% - 50vw);position:relative}
.grid>*{min-width:0}
.grid{display:grid;gap:14px}
.sr-only{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 18px;border-radius:var(--r-s);background:var(--ink);color:var(--paper);font-weight:600;text-decoration:none}
.skip:focus{top:10px;color:var(--paper);outline:2px solid var(--teal-l)}
.table-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

/* bento: 6 columnas; cada tile fija su ancho (c) y su alto (r) con la clase .t-<c>x<r> */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(var(--bento-row,140px),auto);gap:14px}
.bento>*{grid-column:span var(--c,1);grid-row:span var(--r,1);min-width:0}
.t-1x1{--c:1;--r:1}.t-2x1{--c:2;--r:1}.t-3x1{--c:3;--r:1}.t-4x1{--c:4;--r:1}.t-5x1{--c:5;--r:1}.t-6x1{--c:6;--r:1}
.t-1x2{--c:1;--r:2}.t-2x2{--c:2;--r:2}.t-3x2{--c:3;--r:2}.t-4x2{--c:4;--r:2}.t-6x2{--c:6;--r:2}
.t-1x3{--c:1;--r:3}.t-2x3{--c:2;--r:3}.t-3x3{--c:3;--r:3}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .bento>*{grid-column:span 2;grid-row:auto}
  .bento>.t-1x1,.bento>.t-1x2,.bento>.t-1x3{grid-column:span 1}
}
@media (max-width:520px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento>*,.bento>.t-1x1,.bento>.t-1x2,.bento>.t-1x3{grid-column:auto}
}

/* losas: base de un tile (papel, tonal, monitor oscuro) */
.tile{position:relative;overflow:hidden;border-radius:var(--r);padding:clamp(18px,2.2vw,28px);background:var(--surface);box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tile--tone{background:var(--tile);box-shadow:none}
.tile--flat{box-shadow:none;border:1px solid var(--line)}
.tile--night,.on-dark{color:var(--paper)}
.tile--night{background:var(--night);background-image:radial-gradient(120% 90% at 100% 0,rgba(64,156,152,.16),transparent 60%);box-shadow:none}
.tile--lift:hover,a.tile:hover{transform:translateY(-3px)}
a.tile{display:block;color:inherit;text-decoration:none}
.on-dark a:not(.btn),.tile--night a:not(.btn){color:var(--teal-l)}
.on-dark a:not(.btn):hover,.tile--night a:not(.btn):hover{color:var(--paper)}
.on-dark .eyebrow,.tile--night .eyebrow{color:var(--teal-l)}
.on-dark .muted,.tile--night .muted{color:var(--muted-d)}
.muted{color:var(--muted)}

/* revelado al hacer scroll: solo con JS (html.js); sin JS todo es visible */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.js .reveal:not(.in){opacity:0;transform:translateY(16px)}
html.js .reveal.in{animation:rise .6s var(--ease) backwards}
html.js .reveal.in[data-delay="1"]{animation-delay:.08s}
html.js .reveal.in[data-delay="2"]{animation-delay:.16s}
html.js .reveal.in[data-delay="3"]{animation-delay:.24s}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:44px;padding:0 24px;border:1.5px solid var(--teal-d);border-radius:var(--r-pill);
  background:var(--teal-d);color:#fff;font:600 .95rem/1.2 var(--font);text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-1px)}
.btn:active{transform:none}
.btn svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--night-2);border-color:var(--night-2);color:#fff}
.btn--light{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn--light:hover{background:var(--teal-l);border-color:var(--teal-l);color:var(--ink)}
.btn--sm{min-height:44px;padding:0 16px;font-size:.875rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.on-dark .btn,.tile--night .btn{background:var(--teal-l);border-color:var(--teal-l);color:var(--ink)}
.on-dark .btn:hover,.tile--night .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.on-dark .btn--ghost,.tile--night .btn--ghost{background:transparent;border-color:var(--line-d);color:var(--paper)}
.on-dark .btn--ghost:hover,.tile--night .btn--ghost:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.link-more{display:inline-flex;align-items:center;gap:.4em;font-weight:600;text-decoration:none}
.link-more::after{content:"→";transition:transform .2s var(--ease)}
.link-more:hover::after{transform:translateX(4px)}

/* etiquetas y tipografía de "timeline" */
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font:500 .8125rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-d)}
.eyebrow--rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rec);animation:blink 1.6s steps(2,jump-none) infinite}
.tag{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);background:var(--tile);color:var(--ink);font:600 .8125rem/1.3 var(--font);white-space:nowrap}
.tag--teal{background:var(--teal-d);color:#fff}
.tag--line{background:transparent;border:1px solid var(--line)}
.tag--night{background:var(--night-2);color:var(--paper)}
.tc{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tc--lg{font-size:clamp(1.6rem,1rem + 2.4vw,2.8rem);line-height:1;letter-spacing:0}
.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rec);animation:blink 1.6s steps(2,jump-none) infinite}
.ticks{height:10px;background:
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 60px) 0 0/100% 100% no-repeat,
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 12px) 0 100%/100% 50% no-repeat;opacity:.45}
@keyframes blink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* campos de formulario (base opcional para las demás páginas) */
.input{display:block;width:100%;min-height:44px;padding:9px 14px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink)}
.input:hover{border-color:var(--muted)}
.input::placeholder{color:var(--muted);opacity:1}

/* ---------- 4. Cabecera ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(241,244,240,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 1px 0 var(--line)}
.site-header__in{display:flex;align-items:center;gap:8px;height:var(--header-h)}
.site-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;color:var(--ink);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;text-decoration:none}
.site-brand:hover{color:var(--ink)}
.site-brand img{display:block;width:40px;height:40px}
.site-nav{display:none;align-items:center;gap:2px;margin-right:auto}
.site-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-pill);color:var(--ink);font-weight:500;font-size:.9375rem;text-decoration:none;white-space:nowrap;transition:background-color .2s}
.site-nav a:hover{background:var(--tile);color:var(--ink)}
.site-nav a[aria-current="page"]{font-weight:600;background:var(--tile)}
.site-nav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:var(--rec)}

.site-search{display:none;position:relative}
.site-search input{width:160px;height:40px;padding:0 42px 0 16px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:.9375rem;-webkit-appearance:none;appearance:none}
.site-search input::placeholder{color:var(--muted);opacity:1}
.site-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.site-search input:hover{border-color:var(--muted)}
.site-search button{position:absolute;right:3px;top:3px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--paper)}
.site-search button:hover{background:var(--teal-d)}
.site-search svg,.site-iconlink svg,.site-cart svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.site-iconlink{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--ink);transition:background-color .2s}
.site-iconlink:hover{background:var(--tile);color:var(--ink)}

.site-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font-weight:600;font-size:.9375rem;text-decoration:none;transition:background-color .2s}
.site-cart:hover{background:var(--teal-d);color:#fff}
.site-cart__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-cart__n{position:absolute;top:-5px;right:-5px;box-sizing:content-box;min-width:16px;height:16px;padding:0 2px;border:2px solid var(--paper);border-radius:12px;background:var(--teal-l);color:var(--ink);font:500 .75rem/16px var(--mono);text-align:center}

.site-menu{margin-left:0}
.site-menu summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;list-style:none;cursor:pointer;transition:background-color .2s}
.site-menu summary::-webkit-details-marker{display:none}
.site-menu summary:hover{background:var(--tile)}
.site-menu__bars,.site-menu__bars::before,.site-menu__bars::after{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease),background-color .2s}
.site-menu__bars{position:relative}
.site-menu__bars::before,.site-menu__bars::after{content:"";position:absolute;left:0}
.site-menu__bars::before{top:-6px}
.site-menu__bars::after{top:6px}
.site-menu[open] .site-menu__bars{background:transparent}
.site-menu[open] .site-menu__bars::before{transform:translateY(6px) rotate(45deg)}
.site-menu[open] .site-menu__bars::after{transform:translateY(-6px) rotate(-45deg)}
.site-menu__panel{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(5,16,12,.4);animation:menu-in .22s var(--ease)}
.site-menu__panel nav{display:flex;flex-direction:column;padding-block:8px 16px}
.site-menu__panel a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);color:var(--ink);font-size:1.125rem;font-weight:600;text-decoration:none}
.site-menu__panel a[aria-current="page"]{color:var(--teal-d)}
.site-menu__panel a[aria-current="page"]::before{content:"";width:3px;height:1.1em;margin-right:12px;border-radius:2px;background:var(--rec)}
.site-menu__panel a.is-minor{min-height:46px;font-size:.9375rem;font-weight:500;color:var(--muted)}

@media (min-width:900px){
  .site-search{display:block}
  .site-searchlink{display:none}
}
@media (min-width:1024px){
  .site-nav{display:flex}
  .site-brand{margin-right:0}
  .site-menu{display:none}
}
@media (min-width:1200px){
  .site-search input{width:220px}
  .site-cart{padding:0 18px 0 16px}
  .site-cart__txt{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}

/* ---------- 5. Pie ---------- */
.site-footer{position:relative;margin-top:clamp(56px,8vw,112px);background:var(--night);color:var(--paper);padding-bottom:28px}
.site-footer__ruler{height:16px;color:var(--paper);opacity:.5;background:
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 100px) 0 0/100% 100% no-repeat,
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 20px) 0 0/100% 55% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 85%);mask-image:linear-gradient(90deg,#000,transparent 85%)}
.site-footer a{color:var(--paper);text-decoration:none}
.site-footer a:hover{color:var(--teal-l);text-decoration:underline;text-underline-offset:.2em}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px clamp(20px,3vw,48px);padding-block:clamp(40px,5vw,64px) 36px}
.site-footer__logo{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.site-footer__badge{display:inline-flex;padding:6px;border-radius:50%;background:var(--paper)}
.site-footer__badge img{display:block;width:44px;height:44px}
.site-footer__brand p{max-width:34ch;margin-top:12px;color:var(--muted-d);font-size:.9375rem;line-height:1.55}
.site-footer__brand p a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.site-footer__h{margin-bottom:10px;color:var(--teal-l);font:500 .8125rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.site-footer__col a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;font-size:.9375rem;line-height:1.35}
.site-footer__col .tc{color:var(--muted-d);font-size:.8125rem}
.site-footer__pay{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-block:22px;border-block:1px solid var(--line-d)}
.site-footer__cards{display:flex;flex-wrap:wrap;gap:8px}
.site-footer__cards img{display:block;height:26px;width:auto}
.site-footer__pay p{flex:1 1 260px;color:var(--muted-d);font-size:.875rem;line-height:1.45}
.site-footer__base{padding-top:20px;color:var(--muted-d);font:500 .8125rem/1.4 var(--mono);letter-spacing:.04em}
@media (max-width:900px){
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__brand{grid-column:1/-1}
}
@media (max-width:520px){
  .site-footer__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .site-footer__col a{padding:10px 0;min-height:44px;align-items:center}
}

/* ---------- 6. 404: «clip no encontrado» ---------- */
.nf{padding-block:clamp(28px,5vw,64px) 0}
.nf-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:14px}
.nf-clip{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(340px,42vw,520px)}
.nf-offline{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(241,244,240,.05) 0 14px,transparent 14px 28px);pointer-events:none}
.nf-clip>*{position:relative}
.nf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font:500 .8125rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-d)}
.nf-bar .rec-dot{margin-right:-6px}
.nf-clip h1{margin-block:4px 16px;max-width:14ch;font-size:clamp(2.2rem,1.1rem + 4.4vw,4.4rem)}
.nf-clip p{max-width:44ch;color:var(--muted-d);font-size:1.0625rem}
.nf-tc{display:block;margin-bottom:6px;font-size:clamp(1.9rem,.9rem + 4vw,3.6rem);color:var(--teal-l)}
.nf-track{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;color:var(--muted-d);font:500 .8125rem/1 var(--mono);letter-spacing:.06em}
.nf-track i{display:block;height:22px;border:1px dashed var(--line-d);border-radius:6px}
.nf-side{display:grid;gap:14px;align-content:start}
.nf-search label{display:block;margin-bottom:10px;font-weight:600}
.nf-search div{display:flex;gap:8px}
.nf-search .input{flex:1 1 auto;min-width:0;border-radius:var(--r-pill);padding-inline:18px}
.nf-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.nf-shelves h2{margin-bottom:6px;font-size:1.25rem}
.nf-shelves a{display:flex;align-items:center;gap:12px;min-height:48px;border-top:1px solid var(--line);color:var(--ink);font-weight:500;text-decoration:none}
.nf-shelves li:first-child a{border-top:0}
.nf-shelves a .tc{min-width:2.4ch;color:var(--teal-d);font-size:.8125rem}
.nf-shelves a:hover{color:var(--teal-d)}
.nf-shelves a::after{content:"→";margin-left:auto;color:var(--muted)}
@media (max-width:900px){
  .nf-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 7. Movimiento reducido e impresión ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
  html.js .reveal:not(.in){opacity:1;transform:none}
  .tile--lift:hover,a.tile:hover,.btn:hover{transform:none}
}
@media print{
  .skip,.sc-launch,.sc,.site-search,.site-searchlink,.site-menu{display:none !important}
  .site-header{position:static;box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.js .reveal:not(.in){opacity:1;transform:none}
}