/*
  PRINTGATS · claridad para cliente · 2026-08-07
  Sistema: conservar fotografía real, papel/negro/naranja y contraste serif/sans.
  Estructura: oferta y acción primero; movimiento como acompañamiento, nunca como barrera.
*/

/* La entrada conserva el gesto de marca, pero deja de retener la página. */
.motion-loader.is-complete .motion-loader__curtain{
  animation:clarityCurtain .34s .02s var(--ease) both;
}
@keyframes clarityCurtain{
  0%{transform:scaleX(0)}
  48%{transform:scaleX(1)}
  100%{transform:scaleX(0);transform-origin:center}
}

/* Portada: una explicación útil permanece visible durante la historia visual. */
.hero-story{
  height:190svh;
}
.hero-story__brief{
  position:absolute;
  z-index:12;
  left:var(--pad);
  bottom:clamp(26px,4.8vh,48px);
  width:min(430px,38vw);
  padding:18px 20px 17px;
  border-top:2px solid var(--accent);
  background:rgba(244,246,249,.88);
  color:#111318;
  box-shadow:0 16px 46px rgba(37,45,58,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.hero-story__brief>span,
.hero-story__brief>small{
  display:block;
  font-size:9px;
  font-weight:800;
  letter-spacing:.15em;
  line-height:1.4;
  text-transform:uppercase;
}
.hero-story__brief>span{color:#d43d1c}
.hero-story__brief>small{color:rgba(17,19,24,.62)}
.hero-story__brief p{
  max-width:30ch;
  margin:9px 0 7px;
  font-size:clamp(16px,1.35vw,20px);
  font-weight:650;
  letter-spacing:-.025em;
  line-height:1.22;
  text-wrap:pretty;
}
.hero-story__brief-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}
.hero-story__brief-actions a{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 14px;
  border:1px solid rgba(17,19,24,.28);
  background:rgba(255,255,255,.45);
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:background .3s ease,color .3s ease,transform .4s var(--ease);
}
.hero-story__brief-actions a:last-child{
  border-color:#111318;
  background:#111318;
  color:#fff;
}
.hero-story__brief-actions a:hover,
.hero-story__brief-actions a:focus-visible{
  background:var(--accent);
  border-color:var(--accent);
  color:#111318;
  transform:translateY(-3px);
}
.hero-story__brief-actions b{
  color:var(--accent);
  font-size:15px;
  transition:transform .35s var(--ease);
}
.hero-story__brief-actions a:hover b,
.hero-story__brief-actions a:focus-visible b{
  color:#111318;
  transform:translate(2px,-2px);
}
.hero-story__meta--left,
.hero-story__cta{
  display:none;
}
.motion-horizontal{
  height:270svh;
}

/* Sectores: cada portada dice qué se ofrece y permite actuar sin desplazarse. */
.sg-hero__utility{
  grid-column:2;
  justify-self:end;
  align-self:end;
  width:min(100%,430px);
  pointer-events:auto;
}
.sg-hero__utility .sg-hero__lead{
  max-width:40ch;
  margin:0;
}
.sg-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px;
}
.sg-hero__action{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 16px;
  border:1px solid rgba(21,21,21,.36);
  background:rgba(243,240,232,.82);
  color:var(--ink);
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background .3s,color .3s,transform .4s var(--ease);
}
.sg-hero__action--primary{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--paper);
}
.sg-hero__action span{
  color:var(--accent);
  font-size:15px;
  transition:transform .35s var(--ease);
}
.sg-hero__action:hover,
.sg-hero__action:focus-visible{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--ink);
  transform:translateY(-3px);
}
.sg-hero__action:hover span,
.sg-hero__action:focus-visible span{
  color:var(--ink);
  transform:translate(2px,-2px);
}
.sg-archive__head,
body[data-sector="tiendas"] .sg-archive__head{
  min-height:58svh;
  padding-top:calc(var(--header) + 24px);
  padding-bottom:38px;
}

/* Proceso: el lenguaje técnico se convierte en un recorrido de cliente. */
.process-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:2rem;
}
.process-hero__actions .process-arrow-link{
  margin-top:0;
}
.process-method{
  padding-top:clamp(5rem,8vw,8rem);
  padding-bottom:clamp(5rem,8vw,8rem);
}
.process-step{
  min-height:clamp(285px,39svh,430px);
  padding:clamp(1.8rem,3.2vw,3rem) 0;
}
.process-primary-link{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding:0 1.15rem;
  background:var(--process-ink);
  color:var(--process-paper);
  font-size:.72rem;
  font-weight:750;
  letter-spacing:.1em;
  text-decoration:none;
  text-transform:uppercase;
  transition:background .3s,color .3s,transform .4s cubic-bezier(.2,.8,.2,1);
}
.process-primary-link i{
  color:var(--process-accent);
  font-size:1rem;
  font-style:normal;
}
.process-primary-link:hover,
.process-primary-link:focus-visible{
  background:var(--process-accent);
  color:var(--process-ink);
  transform:translateY(-3px);
}
.process-primary-link:hover i,
.process-primary-link:focus-visible i{color:var(--process-ink)}
.process-start-card{
  grid-column:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:28px;
  padding:24px 26px;
  background:var(--process-ink);
  color:var(--process-paper);
}
.process-start-card div{display:grid;gap:7px}
.process-start-card span{
  color:var(--process-accent);
  font-size:.65rem;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.process-start-card strong{
  max-width:40ch;
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(1.45rem,2.3vw,2.25rem);
  font-weight:400;
  line-height:1.05;
}
.process-start-card a{
  flex:0 0 auto;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:0 16px;
  border:1px solid rgba(246,242,233,.44);
  color:var(--process-paper);
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.1em;
  text-decoration:none;
  text-transform:uppercase;
  transition:background .3s,color .3s,transform .4s cubic-bezier(.2,.8,.2,1);
}
.process-start-card a:hover,
.process-start-card a:focus-visible{
  background:var(--process-accent);
  border-color:var(--process-accent);
  color:var(--process-ink);
  transform:translateY(-3px);
}

@media(max-width:900px){
  .hero-story{height:165svh}
  .hero-story__brief{
    right:20px;
    bottom:22px;
    left:20px;
    width:auto;
    padding:15px 16px 14px;
  }
  .hero-story__brief p{font-size:16px}
  .hero-story__brief>small{display:none}
  .hero-story__brief-actions{margin-top:12px}
  .hero-story__brief-actions a{min-height:44px;flex:1 1 145px}
  .motion-horizontal{height:auto}
  .sg-hero__utility{
    width:100%;
    max-width:none;
    margin-top:24px;
    align-self:stretch;
  }
  .sg-hero__utility .sg-hero__lead{max-width:34ch}
  .sg-hero__actions{margin-top:16px}
  .sg-hero__action{min-height:46px}
  .sg-hero__hint{display:none}
  .sg-archive__head,
  body[data-sector="tiendas"] .sg-archive__head{
    min-height:58svh;
    padding-top:calc(var(--header) + 20px);
  }
  .process-start-card{
    grid-column:1;
    align-items:flex-start;
    flex-direction:column;
    padding:22px;
  }
  .process-start-card a{width:100%;justify-content:space-between}
}

@media(max-width:560px){
  .hero-story__brief>span{font-size:8px}
  .hero-story__brief-actions a{font-size:8px;padding:0 11px}
  .sg-hero__actions{display:grid;grid-template-columns:1fr}
  .sg-hero__action{width:100%}
  .process-hero__actions{align-items:stretch;flex-direction:column}
  .process-primary-link{width:100%;justify-content:space-between}
}

@media(prefers-reduced-motion:reduce){
  .motion-loader{display:none}
  .hero-story{height:100svh}
  .hero-story__brief-actions a,
  .sg-hero__action,
  .process-primary-link,
  .process-start-card a{transition:none}
}

/* Trabajos reales: una sola acción inequívoca por tarjeta. */
.motion-horizontal .work-card__copy{
  grid-template-columns:1fr;
}

/* Índices editoriales: señalan una serie sin parecer pasos de un tutorial. */
.section-index{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  margin:0;
}
.section-index__number{
  color:var(--accent)!important;
}
.section-index__mark{
  display:inline-block;
  width:1.8em;
  height:1px;
  background:currentColor;
  opacity:.42;
}
.section-index__label{
  color:currentColor!important;
}