/* ============================================================
   dprint — componentes compartidos
   ============================================================ */

/* ---------- Ticker / marquee ---------- */
.ticker{
  border-block:1px solid var(--line);
  background:var(--ink); color:var(--paper);
  overflow:hidden; padding-block:18px;
}
.ticker__track{
  display:flex; gap:0; width:max-content;
  animation:ticker 34s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  display:inline-flex; align-items:center; gap:22px;
  font-family:var(--f-display); font-weight:500; font-size:clamp(1.1rem,2vw,1.7rem);
  letter-spacing:-0.01em; padding-inline:22px; white-space:nowrap;
}
.ticker__dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.ticker__item:nth-child(4n+1) .ticker__dot{ background:var(--cyan); }
.ticker__item:nth-child(4n+2) .ticker__dot{ background:var(--magenta); }
.ticker__item:nth-child(4n+3) .ticker__dot{ background:var(--yellow); }
.ticker__item:nth-child(4n+4) .ticker__dot{ background:var(--paper); }
@keyframes ticker{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

/* ---------- Encabezado de sección ---------- */
.sec-head{ display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:clamp(40px,5vw,64px); max-width:920px; }
.sec-head h2{ font-size:clamp(2rem,4.4vw,3.5rem); }
.sec-head .lead{ max-width:60ch; }

/* ---------- Categorías ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); }
.cat-card{
  --spot-x:50%;
  --spot-y:50%;
  position:relative; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.cat-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(240px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.18), transparent 60%);
  opacity:0; transition:opacity .35s var(--ease);
}
.cat-card::after{
  content:""; position:absolute; top:-12%; bottom:-12%; left:-34%; width:38%; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.17), transparent);
  transform:translateX(0) rotate(14deg);
  opacity:0; transition:transform .8s var(--ease), opacity .35s var(--ease);
}
.cat-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(11,11,13,.32); border-color:transparent; }
.cat-card:hover::before,
.cat-card:hover::after{ opacity:1; }
.cat-card:hover::after{ transform:translateX(290%) rotate(14deg); }
.cat-card__media{ position:relative; aspect-ratio:4/3.4; overflow:hidden; background:var(--paper-2); }
.cat-card__media image-slot, .cat-card__media img{ width:100%; height:100%; display:block; object-fit:cover; transition:transform .7s var(--ease); }
.cat-card:hover .cat-card__media image-slot, .cat-card:hover .cat-card__media img{ transform:scale(1.045); }
.cat-card__idx{
  position:absolute; top:14px; left:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(18,22,29,.08);
  padding:4px 9px; border-radius:6px; backdrop-filter:blur(4px); z-index:2;
}
.cat-card__body{ position:relative; z-index:2; padding:22px 22px 26px; display:flex; flex-direction:column; gap:7px; flex:1; }
.cat-card__body h3{ font-size:1.5rem; }
.cat-card__body p{ color:var(--muted); font-size:0.94rem; }
.cat-card__go{ margin-top:auto; padding-top:16px; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:0.9rem; }
.cat-card__go svg{ transition:transform .35s var(--ease); }
.cat-card:hover .cat-card__go svg{ transform:translateX(5px); }
.cat-card__bar{ position:absolute; left:0; right:0; bottom:0; height:4px; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.cat-card:hover .cat-card__bar{ transform:scaleX(1); }

/* ---------- Proceso ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,40px); position:relative; }
.process::before{
  content:""; position:absolute; top:21px; left:5%; right:5%; height:1.5px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--yellow),var(--key));
  transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease);
}
.process.in::before{ transform:scaleX(1); }
.step{ display:flex; flex-direction:column; gap:14px; }
.step__num{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--ink); color:var(--paper);
  font-family:var(--f-mono); font-size:0.92rem; position:relative; z-index:2;
}
.step h3{ font-size:1.28rem; }
.step p{ color:var(--muted); font-size:0.95rem; }

/* ---------- Galería ---------- */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:150px; gap:clamp(12px,1.4vw,20px); }
.gal-item{
  --spot-x:50%;
  --spot-y:50%;
  position:relative; overflow:hidden; border-radius:var(--r); background:var(--paper-2); border:1px solid var(--line);
}
.gal-item::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(220px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.2), transparent 62%);
  opacity:0; transition:opacity .3s var(--ease);
}
.gal-item:hover::before{ opacity:1; }
.gal-item image-slot, .gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gal-item:hover image-slot, .gal-item:hover img{ transform:scale(1.06); }
.gal-item__cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  background:linear-gradient(to top,rgba(11,11,13,.78),transparent);
  color:#fff; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  transform:translateY(8px); opacity:0; transition:.4s var(--ease);
}
.gal-item:hover .gal-item__cap{ transform:none; opacity:1; }
.g-wide{ grid-column:span 3; } .g-tall{ grid-row:span 2; }
.g-2x2{ grid-column:span 2; grid-row:span 2; }
.g-3{ grid-column:span 2; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,40px); }
.stat{ display:flex; flex-direction:column; gap:6px; padding-top:26px; border-top:2px solid var(--ink); }
.stat__n{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.4rem,4.5vw,3.6rem); letter-spacing:-0.03em; line-height:1; }
.stat__l{ color:var(--muted); font-size:0.92rem; }

/* ---------- Banda CTA ---------- */
.cta-band{
  --spot-x:50%;
  --spot-y:50%;
  background:var(--ink); color:var(--paper); border-radius:clamp(16px,2vw,28px); padding:clamp(40px,6vw,80px); position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; inset:-10%; pointer-events:none;
  background:
    radial-gradient(320px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.12), transparent 60%),
    linear-gradient(120deg, transparent, rgba(255,255,255,.05), transparent 68%);
  opacity:.8;
}
.cta-band .halftone{ position:absolute; inset:0; color:var(--paper); }
.cta-band__inner{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(2rem,4.6vw,3.6rem); max-width:16ch; }
.cta-band .actions{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width: 940px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .process::before{ display:none; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .g-wide,.g-2x2,.g-3{ grid-column:span 2; } .g-tall{ grid-row:span 1; }
}
@media (max-width: 540px){
  .cat-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Encabezado de página interior ---------- */
.page-hero{ padding-top:140px; padding-bottom:clamp(30px,4vw,52px); position:relative; overflow:hidden; }
.page-hero h1{ font-size:clamp(2.6rem,6.5vw,5rem); letter-spacing:-0.04em; margin:18px 0 20px; line-height:0.98; }
.page-hero .lead{ max-width:56ch; }
.page-hero__wm{ position:absolute; right:-4%; top:-30%; font-family:var(--f-display); font-weight:700; font-size:38vw; color:var(--ink); opacity:0.025; pointer-events:none; user-select:none; line-height:1; }

/* ---------- Sub-nav de catálogo (sticky) ---------- */
.catnav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.88); backdrop-filter:blur(12px); border-block:1px solid var(--line); }
.catnav__inner{ display:flex; gap:6px; overflow-x:auto; padding-block:12px; scrollbar-width:none; }
.catnav__inner::-webkit-scrollbar{ display:none; }
.catnav a{ flex:none; font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; padding:9px 15px; border-radius:100px; color:var(--muted); transition:.25s var(--ease); white-space:nowrap; border:1px solid transparent; }
.catnav a:hover{ color:var(--ink); border-color:var(--line); }

/* ---------- Bloque de categoría ---------- */
.cat-block{ padding-block:clamp(48px,6vw,84px); border-top:1px solid var(--line); scroll-margin-top:60px; }
.cat-block:first-of-type{ border-top:none; }
.cat-block__head{ display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(28px,3vw,44px); flex-wrap:wrap; }
.cat-block__head .num{ font-family:var(--f-mono); font-size:0.8rem; color:var(--muted); }
.cat-block__head h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); }
.cat-block__head p{ color:var(--muted); margin-left:auto; max-width:34ch; font-size:0.95rem; }

/* ---------- Tarjeta de producto ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,24px); }
.prod-card{
  --spot-x:50%;
  --spot-y:50%;
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.prod-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(220px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.18), transparent 62%);
  opacity:0; transition:opacity .35s var(--ease);
}
.prod-card::after{
  content:""; position:absolute; top:-10%; bottom:-10%; left:-36%; width:38%; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform:translateX(0) rotate(14deg);
  opacity:0; transition:transform .8s var(--ease), opacity .35s var(--ease);
}
.prod-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -26px rgba(11,11,13,.28); border-color:transparent; }
.prod-card:hover::before,
.prod-card:hover::after{ opacity:1; }
.prod-card:hover::after{ transform:translateX(290%) rotate(14deg); }
.prod-card__media{ position:relative; aspect-ratio:1/1; background:var(--paper-2); overflow:hidden; }
.prod-card__media image-slot, .prod-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.prod-card:hover .prod-card__media image-slot, .prod-card:hover .prod-card__media img{ transform:scale(1.05); }
.prod-card__tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(18,22,29,.08);
  backdrop-filter:blur(4px); padding:4px 9px; border-radius:6px;
}
.prod-card__body{ position:relative; z-index:2; padding:18px 18px 20px; }
.prod-card__body h3{ font-size:1.18rem; margin-bottom:4px; }
.prod-card__body p{ color:var(--muted); font-size:0.88rem; min-height:2.4em; }
.prod-card__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
.prod-card__cta{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:0.88rem; }
.prod-card__cta svg{ transition:transform .3s var(--ease); }
.prod-card:hover .prod-card__cta svg{ transform:translateX(4px); }
.prod-card__dots{ display:flex; gap:4px; }
.prod-card__dots span{ width:7px; height:7px; border-radius:50%; }
.prod-card__dots span:nth-child(1){ background:var(--cyan);} .prod-card__dots span:nth-child(2){ background:var(--magenta);} .prod-card__dots span:nth-child(3){ background:var(--yellow);} .prod-card__dots span:nth-child(4){ background:var(--key);}

@media (max-width: 860px){ .prod-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 480px){ .prod-grid{ grid-template-columns:1fr; } .cat-block__head p{ margin-left:0; } }

/* ============================================================
   Superficies limpias: texto oscuro sobre tarjetas claras
   ============================================================ */
.cat-card,
.prod-card{
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(244,248,252,.98));
  border-color:var(--line);
}
.cat-card__body h3, .prod-card__body h3{ color:var(--ink); }
.cat-card__body p, .prod-card__body p{ color:var(--muted); }
.cat-card__go, .prod-card__cta{ color:var(--ink-soft); }
.prod-card__foot{ border-top-color:var(--line-soft); }
.cat-card__idx, .prod-card__tag{
  background:rgba(255,255,255,.88);
  color:var(--ink-soft);
  box-shadow:0 10px 22px -18px rgba(18,22,29,.35);
}
.cat-card__idx b, .prod-card__tag b{ color:var(--ink-soft); }
.cat-card:hover, .prod-card:hover{ border-color:transparent; box-shadow:0 26px 50px -28px rgba(18,22,29,.18); }

/* Placeholder de imagen (tema WordPress) */
.img-ph{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:var(--paper-2); color:var(--muted); }
.img-ph img{ width:34px; height:auto; opacity:.55; }
.img-ph span{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; }

/* ============================================================
   Efectos (FX) — refuerzan la metáfora de imprenta
   ============================================================ */
/* Cursor: marca de registro que sigue al puntero */
.fx-cursor{ position:fixed; left:0; top:0; width:30px; height:30px; margin:-15px 0 0 -15px; z-index:9999; pointer-events:none; opacity:0; mix-blend-mode:difference; color:#fff; transition:opacity .35s var(--ease), width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease); }
.fx-cursor.show{ opacity:.9; }
.fx-cursor.hot{ width:54px; height:54px; margin:-27px 0 0 -27px; }
.fx-cursor svg{ width:100%; height:100%; display:block; }
@media (hover:none),(pointer:coarse){ .fx-cursor{ display:none; } }

/* Botón magnético (transform aplicado por JS) */
.btn{ will-change:transform; }

/* Revelado "en impresión" para imágenes */
.fx-print{ clip-path:inset(0 0 100% 0); filter:grayscale(1) contrast(1.04); transition:clip-path 1.05s var(--ease-out), filter 1.25s var(--ease-out); }
.fx-print.in{ clip-path:inset(0 0 0 0); filter:none; }

@media (prefers-reduced-motion: reduce){
  .fx-print{ clip-path:none !important; filter:none !important; transition:none !important; }
  .fx-cursor{ display:none !important; }
}