/* ============================================================
   PELUCHE BOUTIQUE — Villa Mella, RD
   Paleta muestreada del logo y la mascota oficiales.
   ============================================================ */

:root{
  /* Marca */
  --negro:      #050505;
  --negro-2:    #0C0C0C;
  --negro-3:    #141414;
  --amarillo:   #FCCC0C;   /* dominante del lockup: 46.7% */
  --amarillo-d: #E4B40C;
  --rojo:       #CC2424;   /* chaqueta y gorra de la mascota */
  --rojo-d:     #B42424;
  --blanco:     #FFFFFF;
  --hueso:      #EDEAE4;
  --gris:       #8A8A8A;
  --gris-2:     #5A5A5A;
  --linea:      rgba(255,255,255,.10);
  --linea-2:    rgba(255,255,255,.18);

  /* Tipografía */
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --texto:   'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Ritmo */
  --wrap: 1280px;
  --pad:  clamp(1.25rem, 5vw, 4rem);
  --sec:  clamp(5rem, 12vw, 10rem);
  --r:    18px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  margin:0;
  background:var(--negro);
  color:var(--hueso);
  font-family:var(--texto);
  font-size:clamp(1rem,.95rem + .25vw,1.1rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:.92; letter-spacing:-.01em; }
p{ margin:0 0 1em; }

::selection{ background:var(--amarillo); color:var(--negro); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--amarillo); color:var(--negro);
  padding:.75rem 1.25rem; font-weight:700;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  --btn-bg:transparent; --btn-fg:var(--hueso); --btn-bd:var(--linea-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.6rem;
  font-family:var(--texto); font-size:.95rem; font-weight:700;
  letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  background:var(--btn-bg); color:var(--btn-fg);
  border:2px solid var(--btn-bd); border-radius:999px;
  cursor:pointer;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--lg{ padding:1.15rem 2.3rem; font-size:1.05rem; }

.btn--yellow{ --btn-bg:var(--amarillo); --btn-fg:var(--negro); --btn-bd:var(--amarillo); }
.btn--yellow:hover{ box-shadow:0 14px 40px -10px rgba(252,204,12,.65); }

.btn--ghost:hover{ --btn-bd:var(--amarillo); --btn-fg:var(--amarillo); }

.btn--wa{ --btn-bg:#1FAF54; --btn-fg:#fff; --btn-bd:#1FAF54; padding:.7rem 1.25rem; font-size:.9rem; }
.btn--wa:hover{ box-shadow:0 12px 32px -10px rgba(31,175,84,.7); }
.btn--wa svg{ width:19px; height:19px; fill:currentColor; }

.btn__arrow{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:1rem var(--pad);
  transition:background .4s var(--ease), backdrop-filter .4s, border-color .4s, padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--linea);
  padding-block:.65rem;
}
.nav__brand{ flex:0 0 auto; line-height:0; }
.nav__brand img{ width:clamp(118px,13vw,168px); transition:width .4s var(--ease); }
.nav.stuck .nav__brand img{ width:clamp(104px,11vw,138px); }

.nav__links{ display:flex; gap:clamp(1rem,2.2vw,2rem); margin-left:auto; }
.nav__links a{
  position:relative;
  font-size:.9rem; font-weight:600; text-decoration:none; color:var(--hueso);
  padding-block:.35rem; opacity:.82; transition:opacity .3s, color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--amarillo); transition:width .35s var(--ease);
}
.nav__links a:hover{ opacity:1; color:var(--amarillo); }
.nav__links a:hover::after{ width:100%; }

.nav__burger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:8rem 0 0;
  overflow:hidden;
  isolation:isolate;
}
.hero__glow{
  position:absolute; z-index:-2;
  width:min(1100px,120vw); aspect-ratio:1;
  right:-14%; top:-18%;
  background:radial-gradient(circle, rgba(252,204,12,.20) 0%, rgba(204,36,36,.12) 34%, transparent 66%);
  filter:blur(38px);
  animation:breathe 13s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1) translate(0,0); } 50%{ transform:scale(1.14) translate(-3%,3%); } }

.hero__grid{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(ellipse 85% 65% at 50% 42%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 42%, #000 30%, transparent 78%);
}

.hero__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(1rem,4vw,3rem);
  flex:1;
}

.hero__title{
  font-family:var(--display);
  font-size:clamp(3.6rem, 12.5vw, 11rem);
  line-height:.82;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin-bottom:1.6rem;
}
.hero__title .l{ display:block; overflow:hidden; }
.hero__title .l > span{ display:block; }
.hero__title .l--yellow{
  color:var(--amarillo);
  text-shadow:0 0 60px rgba(252,204,12,.28);
}

.hero__sub{
  max-width:44ch;
  font-size:clamp(1.02rem,1.5vw,1.22rem);
  color:#C9C6C0;
  margin-bottom:2.2rem;
}
.hero__sub strong{ color:var(--blanco); font-weight:700; }
.hero__sub em{ color:var(--amarillo); font-style:normal; font-weight:600; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:3rem; }

.hero__stats{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.2rem);
  margin:0; padding-top:1.8rem;
  border-top:1px solid var(--linea);
}
.hero__stats dt{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); margin-bottom:.3rem;
}
.hero__stats dd{
  margin:0;
  font-family:var(--display); font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--blanco); letter-spacing:.01em;
}

.hero__bear{
  margin:0; position:relative;
  justify-self:center;
  filter:drop-shadow(0 44px 70px rgba(0,0,0,.85)) drop-shadow(0 0 90px rgba(204,36,36,.22));
  animation:float 7s ease-in-out infinite;
}
.hero__bear img{ width:min(100%,540px); }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-.4deg); } 50%{ transform:translateY(-18px) rotate(.4deg); } }

/* ---------- Ticker ---------- */
.ticker{
  position:relative;
  border-block:1px solid var(--linea);
  background:var(--negro-2);
  overflow:hidden;
  padding:.85rem 0;
  margin-top:auto;
}
.ticker__track{
  display:flex; align-items:center; gap:1.4rem;
  width:max-content;
  animation:slide 42s linear infinite;
}
.ticker span{
  font-family:var(--display); font-size:clamp(.95rem,1.7vw,1.35rem);
  text-transform:uppercase; letter-spacing:.03em; color:var(--hueso);
  white-space:nowrap;
}
.ticker i{ font-style:normal; font-size:.85rem; opacity:.75; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   DEFINICIÓN / MANIFIESTO
   ============================================================ */
.def{ padding-block:var(--sec); }
.def .wrap{ display:grid; gap:clamp(2rem,5vw,4rem); }

.def__card{
  position:relative; isolation:isolate; overflow:hidden;
  max-width:840px;
  padding:clamp(1.8rem,4vw,3.4rem);
  background:var(--negro-2);
  border:1px solid var(--linea);
  border-left:4px solid var(--amarillo);
  border-radius:var(--r);
}
.def__bg{ position:absolute; inset:0; z-index:-2; display:block; pointer-events:none; }
.def__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block; }
/* El velo pesa a la izquierda, que es donde vive la definición, y se abre a la
   derecha para que se vea la percha. El degradado viejo ahora va encima. */
.def__card::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,
    rgba(5,5,5,.95) 0%,
    rgba(5,5,5,.90) 42%,
    rgba(5,5,5,.66) 78%,
    rgba(5,5,5,.48) 100%);
}
.def__word{
  font-family:var(--display);
  font-size:clamp(3rem,9vw,6.4rem);
  color:var(--amarillo);
  text-transform:lowercase;
  letter-spacing:-.02em;
}
.def__phon{
  font-size:.9rem; color:var(--gris); margin-top:.5rem; margin-bottom:2rem;
}
.def__phon span{ font-style:italic; color:var(--hueso); }

.def__list{ margin:0; padding-left:1.4rem; display:grid; gap:1.6rem; }
.def__list li::marker{ color:var(--amarillo); font-weight:800; }
.def__list p{ margin:0 0 .5rem; font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--blanco); }
.def__list q{
  display:block; font-style:italic; color:var(--gris);
  font-size:1rem;
}
.def__foot{
  margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid var(--linea);
}
.def__foot p{ margin:0; color:var(--gris); font-size:.98rem; }

.pull{
  position:relative; isolation:isolate; overflow:hidden;
  margin:0; justify-self:end; max-width:760px;
  padding:clamp(1.6rem,3.4vw,2.6rem);
  padding-left:clamp(1.3rem,3vw,2.5rem);
  border-left:3px solid var(--rojo);
  border-radius:0 var(--r) var(--r) 0;
}
.pull__bg{ position:absolute; inset:0; z-index:-2; display:block; pointer-events:none; }
.pull__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block; }
.pull::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(5,5,5,.93) 0%,
    rgba(5,5,5,.84) 48%,
    rgba(5,5,5,.58) 100%);
}
.pull p{
  font-family:var(--display);
  font-size:clamp(1.5rem,4.2vw,3rem);
  line-height:1.06; text-transform:uppercase; letter-spacing:-.015em;
  color:var(--blanco); margin-bottom:.9rem;
}
.pull cite{ font-style:normal; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }

/* ============================================================
   GLITCH DE MARCAS (scroll-driven)
   ============================================================ */
.brands{ position:relative; background:#000; }
/* 9 marcas. A 520vh cada una se llevaba media pantalla de scroll: el efecto
   era bonito y el peaje, cuatro pantallas. A 340vh el glitch sigue leyéndose
   y la sección deja de ser el bloque más largo de la página. */
.brands__track{ height:340vh; }

.brands__sticky{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
  border-block:1px solid var(--linea);
}

.brands__scan{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px,
    transparent 1px, transparent 4px
  );
  mix-blend-mode:overlay;
  opacity:.55;
}
.brands__noise{
  position:absolute; inset:-50%; z-index:4; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .55s steps(2) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-4%,3%); }
  50%{ transform:translate(3%,-4%); } 75%{ transform:translate(-3%,-2%); }
  100%{ transform:translate(0,0); }
}

.brands__label{
  position:absolute; top:clamp(5.5rem,11vh,7.5rem); left:0; right:0;
  z-index:5; text-align:center; margin:0;
  font-size:.72rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gris);
}

.brands__stage{
  position:relative; z-index:2;
  width:100%;
  /* El escenario hereda el cuerpo tipográfico de la palabra: así su alto es
     exactamente una línea y el centrado vertical no depende del texto que caiga. */
  font-size:clamp(2.6rem,15.5vw,15rem);
  height:.9em;
  display:grid; place-items:center;
}
.gword{
  grid-area:1/1;
  font-family:var(--display);
  font-size:1em;
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:-.03em;
  white-space:nowrap;
  will-change:transform, clip-path, opacity;
}
.gword[data-layer="c"]{ color:#00F0FF; mix-blend-mode:screen; }
.gword[data-layer="m"]{ color:#FF0060; mix-blend-mode:screen; }
.gword[data-layer="w"]{ color:var(--blanco); }

/* Copia real para crawlers y lectores de pantalla */
.brands__sr{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; margin:-1px; padding:0; border:0;
}

/* Modo estático: sin sticky, sin capas RGB, la lista se vuelve el contenido */
.brands.is-static .brands__track{ height:auto; }
.brands.is-static .brands__sticky{
  position:static; height:auto; padding:clamp(5rem,12vw,8rem) var(--pad);
}
.brands.is-static .brands__scan,
.brands.is-static .brands__noise,
.brands.is-static .brands__meter,
.brands.is-static .brands__stage{ display:none; }
.brands.is-static .brands__label,
.brands.is-static .brands__foot{ position:static; transform:none; }
.brands.is-static .brands__label{ margin-bottom:2.5rem; }
.brands.is-static .brands__foot{ margin-top:2.5rem; }

.brands__sr.is-visible{
  position:static; width:auto; height:auto;
  overflow:visible; clip:auto; clip-path:none; white-space:normal;
  margin:0; padding:0; border:0;
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem 1.6rem;
  max-width:var(--wrap);
}
.brands__sr.is-visible li{
  font-family:var(--display);
  font-size:clamp(1.4rem,4.5vw,3rem);
  text-transform:uppercase; letter-spacing:-.02em;
  color:var(--blanco);
}
.brands__sr.is-visible li:nth-child(odd){ color:var(--amarillo); }

.brands__meter{
  position:absolute; z-index:5;
  bottom:clamp(5rem,10vh,7rem); left:50%; transform:translateX(-50%);
  width:min(340px,54vw); height:2px;
  background:rgba(255,255,255,.14);
}
.brands__meter-fill{
  height:100%; width:0%;
  background:var(--amarillo);
  box-shadow:0 0 14px rgba(252,204,12,.8);
}
.brands__foot{
  position:absolute; z-index:5; bottom:clamp(2.5rem,6vh,4rem); left:0; right:0;
  text-align:center; margin:0; padding-inline:var(--pad);
  font-size:.82rem; color:var(--gris-2);
}

/* ============================================================
   TIENDA / BENTO
   ============================================================ */
.shop{ padding-block:var(--sec); }

.sec-head{ max-width:720px; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head h1, .sec-head h2{
  font-family:var(--display);
  font-size:clamp(2.4rem,7vw,5rem);
  text-transform:uppercase; letter-spacing:-.02em;
  margin-bottom:1rem;
}
.sec-head p{ color:var(--gris); font-size:clamp(1rem,1.4vw,1.15rem); margin:0; }
.sec-head p strong{ color:var(--amarillo); font-weight:700; }

.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(.75rem,1.4vw,1.15rem);
}
.cat{
  --accent:var(--amarillo);
  --pos:50% 40%;
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  min-height:250px;
  padding:clamp(1.4rem,2.4vw,2rem);
  background:var(--negro-2);
  border:1px solid var(--linea);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, background .4s;
}

/* Capa 1 — la prenda */
.cat__bg{
  position:absolute; inset:0; z-index:-3;
  display:block; pointer-events:none;
}
.cat__bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:var(--pos);
  opacity:.68;
  transition:opacity .6s var(--ease), transform .9s var(--ease);
}
.cat:hover .cat__bg img{ opacity:.88; transform:scale(1.06); }

/* Capa 2 — velo. Pesa abajo, que es donde vive el texto, y se abre arriba
   para que la prenda se vea de verdad. */
.cat::after{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(to top,
    rgba(5,5,5,.96) 6%,
    rgba(5,5,5,.84) 30%,
    rgba(5,5,5,.44) 66%,
    rgba(5,5,5,.14) 100%);
}

/* Capa 3 — acento de color de la categoría */
.cat::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%);
  opacity:0; transition:opacity .5s var(--ease);
  mix-blend-mode:screen;
}
.cat:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.cat:hover::before{ opacity:1; }

.cat--xl{ grid-column:span 2; grid-row:span 2; min-height:520px; }
.cat--xl::before{ opacity:.35; }
/* Las dos anchas cierran la última fila y dejan la retícula cuadrada */
.cat--wide{ grid-column:span 2; min-height:280px; }
.cat--wide .cat__bg img{ opacity:.6; }
.cat--wide p{ max-width:44ch; }

.cat__num{
  font-family:var(--display); font-size:.9rem; letter-spacing:.2em;
  color:var(--accent); margin-bottom:auto;
}
.cat h3{
  font-family:var(--display);
  font-size:clamp(1.7rem,3.4vw,3.2rem);
  text-transform:uppercase; letter-spacing:-.02em;
  margin:1.6rem 0 .7rem;
}
.cat--xl h3{ font-size:clamp(2.4rem,5.5vw,4.4rem); }
.cat p{ color:var(--gris); font-size:.97rem; max-width:38ch; margin-bottom:1.1rem; }

.cat__tags{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; margin:0 0 1.4rem; padding:0; }
.cat__tags li{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.32rem .7rem; border:1px solid var(--linea-2); border-radius:999px;
  color:#B6B3AD;
}
.cat__go{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.87rem; font-weight:700; text-decoration:none;
  color:var(--accent);
  transition:gap .3s var(--ease);
}
.cat__go svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cat__go:hover{ gap:.85rem; }

/* ============================================================
   CÓMO COMPRAR
   ============================================================ */
.how{ padding-block:var(--sec); background:var(--negro-2); border-block:1px solid var(--linea); }

.steps{
  list-style:none; margin:0 0 clamp(3rem,7vw,5rem); padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2rem);
  counter-reset:s;
}
.step{
  position:relative;
  padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--negro);
  border:1px solid var(--linea);
  border-radius:var(--r);
  transition:border-color .4s, transform .5s var(--ease);
  overflow:hidden;
  isolation:isolate;
}
.step:hover{ border-color:var(--linea-2); transform:translateY(-4px); }

/* Foto de fondo + velo. El velo no es decorativo: sin él, el texto blanco
   pierde contraste sobre las zonas claras de la foto. */
.step__bg{ position:absolute; inset:0; z-index:-2; }
.step__bg img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.step:hover .step__bg img{ transform:scale(1.05); }
.step::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.88) 55%, rgba(5,5,5,.95) 100%);
}
.step__n, .step h3, .step p{ position:relative; }
.step__n{
  display:grid; place-items:center;
  width:52px; height:52px; margin-bottom:1.4rem;
  font-family:var(--display); font-size:1.5rem;
  color:var(--negro); background:var(--amarillo);
  border-radius:50%;
}
.step h3{
  font-family:var(--display); font-size:clamp(1.35rem,2.4vw,1.9rem);
  text-transform:uppercase; margin-bottom:.8rem;
}
.step p{ color:var(--gris); margin:0; font-size:.98rem; }
.step p strong{ color:var(--hueso); font-weight:700; }

.how__cta{ text-align:center; }
.how__note{ margin:1.2rem 0 0; font-size:.88rem; color:var(--gris-2); }

/* ============================================================
   VISÍTANOS
   ============================================================ */
.visit{ padding-block:var(--sec); }
.visit__grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.visit h2{
  font-family:var(--display); font-size:clamp(2.2rem,5.5vw,4.2rem);
  text-transform:uppercase; letter-spacing:-.02em; margin-bottom:1rem;
}
.visit__lead{ color:var(--gris); max-width:48ch; margin-bottom:2.6rem; }

.nap{ list-style:none; margin:0 0 2.6rem; padding:0; display:grid; gap:1.5rem; }
.nap li{
  display:grid; grid-template-columns:130px 1fr; gap:1rem;
  padding-bottom:1.5rem; border-bottom:1px solid var(--linea);
}
.nap li:last-child{ border-bottom:0; padding-bottom:0; }
.nap__k{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-2); padding-top:.28rem;
}
.nap__v{ color:var(--hueso); line-height:1.55; }
.nap__v a{ color:var(--amarillo); text-decoration:none; font-weight:600; }
.nap__v a:hover{ text-decoration:underline; }

.visit__btns{ display:flex; flex-wrap:wrap; gap:.8rem; }

.visit__socials{ display:grid; gap:.9rem; }

.storefront{
  margin:0; position:relative; overflow:hidden;
  border:1px solid var(--linea); border-radius:var(--r);
}
.storefront img{
  /* El original mide 361x224. Forzarlo a 4/3 lo recortaba y lo estiraba a casi
     el doble de su ancho real: se veía lavado. Con su propia proporción, al
     menos no se amplía de más mientras no llegue una foto en condiciones. */
  width:100%; aspect-ratio:361/224; object-fit:cover; object-position:50% 50%;
  transition:transform .9s var(--ease);
}
.storefront:hover img{ transform:scale(1.04); }
.storefront figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.4rem 1.2rem .95rem;
  font-size:.85rem; font-weight:600; color:var(--hueso);
  background:linear-gradient(to top, rgba(5,5,5,.94), transparent);
}
.soc{
  display:block; padding:1.5rem;
  background:var(--negro-2); border:1px solid var(--linea); border-radius:var(--r);
  text-decoration:none;
  transition:border-color .4s, transform .5s var(--ease), background .4s;
}
.soc:hover{ border-color:var(--amarillo); transform:translateX(5px); background:var(--negro-3); }
.soc__h{
  display:block; font-family:var(--display); font-size:1.3rem;
  color:var(--blanco); margin-bottom:.3rem; letter-spacing:.005em;
}
.soc__m{ display:block; font-size:.8rem; font-weight:700; color:var(--amarillo); margin-bottom:.6rem; }
.soc__t{ display:block; font-size:.92rem; color:var(--gris); line-height:1.5; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding-block:var(--sec); background:var(--negro-2); border-block:1px solid var(--linea); }
.faq__list{ display:grid; gap:.7rem; max-width:900px; }

.qa{
  background:var(--negro); border:1px solid var(--linea); border-radius:14px;
  overflow:hidden; transition:border-color .35s;
}
.qa[open]{ border-color:var(--linea-2); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.25rem clamp(1.1rem,2.2vw,1.7rem);
  font-size:clamp(1rem,1.5vw,1.14rem); font-weight:700; color:var(--blanco);
  cursor:pointer; list-style:none;
  transition:color .3s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:'+'; flex:0 0 auto;
  font-family:var(--display); font-size:1.5rem; line-height:1; color:var(--amarillo);
  transition:transform .4s var(--ease);
}
.qa[open] summary::after{ transform:rotate(45deg); }
.qa summary:hover{ color:var(--amarillo); }
.qa__body{ padding:0 clamp(1.1rem,2.2vw,1.7rem) 1.4rem; }
.qa__body p{ margin:0; color:var(--gris); }
.qa__body strong{ color:var(--hueso); }

/* ============================================================
   CIERRE
   ============================================================ */
.closer{ position:relative; padding-block:clamp(6rem,15vw,12rem); overflow:hidden; isolation:isolate; text-align:center; }
.closer__bg{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
}
.closer__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; display:block; }
/* Los dos resplandores de marca siguen ahí, ahora encima de la foto */
.closer__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(5,5,5,.88) 0%, rgba(5,5,5,.72) 45%, rgba(5,5,5,.92) 100%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(204,36,36,.30), transparent 62%),
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(252,204,12,.18), transparent 60%);
}
.closer__title{
  font-family:var(--display);
  font-size:clamp(2.2rem,7vw,5.6rem);
  text-transform:uppercase; letter-spacing:-.025em;
  margin-bottom:2.6rem;
}
.closer__title span{ color:var(--amarillo); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--linea); padding-top:clamp(3rem,7vw,5rem); background:var(--negro-2); }
.foot__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.foot__brand img{ width:190px; margin-bottom:1.2rem; }
.foot__brand p{ color:var(--gris); font-size:.94rem; max-width:34ch; margin:0; }

.foot__col h3{
  font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amarillo); margin-bottom:1.1rem;
}
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot__col a{ color:var(--gris); text-decoration:none; font-size:.94rem; transition:color .3s; }
.foot__col a:hover{ color:var(--amarillo); }
.foot__col address{ font-style:normal; color:var(--gris); font-size:.94rem; line-height:1.7; }
.foot__hours{ margin:.9rem 0 0; font-size:.88rem; color:var(--hueso); font-weight:600; }

.foot__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:1.5rem;
  border-top:1px solid var(--linea);
}
.foot__bar p{ margin:0; font-size:.82rem; color:var(--gris-2); }
.foot__by a{ color:var(--gris); text-decoration:none; font-weight:700; }
.foot__by a:hover{ color:var(--amarillo); }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa-float{
  position:fixed; z-index:90;
  right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  width:58px; height:58px;
  display:grid; place-items:center;
  background:#1FAF54; border-radius:50%;
  box-shadow:0 12px 34px -8px rgba(31,175,84,.8);
  opacity:0; transform:scale(.5) translateY(14px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), box-shadow .3s;
}
.wa-float.on{ opacity:1; transform:none; pointer-events:auto; }
.wa-float:hover{ box-shadow:0 16px 44px -8px rgba(31,175,84,1); }
.wa-float svg{ width:31px; height:31px; fill:#fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; text-align:left; padding-top:2rem; }
  /* La mascota es el mejor activo de la marca: en vez de esconderla en móvil,
     cae debajo del bloque de texto sin empujar el CTA fuera del primer golpe de vista. */
  .hero__bear{ justify-self:center; margin-top:1.5rem; }
  .hero__bear img{ width:min(74%,330px); }
  .hero__title{ font-size:clamp(3.4rem,15vw,8rem); }
  .visit__grid{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .nav__links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; align-items:center; justify-content:center; gap:2rem;
    background:rgba(5,5,5,.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    opacity:0; pointer-events:none;
    transition:opacity .4s var(--ease);
  }
  .nav__links.open{ opacity:1; pointer-events:auto; z-index:99; }
  .nav__links a{ font-family:var(--display); font-size:2rem; text-transform:uppercase; opacity:1; }

  .nav__cta span{ display:none; }
  /* El menú deja de ocupar el flujo, así que el CTA es quien empuja a la derecha */
  .nav__cta{ padding:.7rem; margin-left:auto; }
  .nav__cta svg{ width:21px; height:21px; }

  .nav__burger{
    display:grid; gap:5px; place-content:center;
    width:44px; height:44px; z-index:100;
    background:none; border:0; cursor:pointer; padding:0;
  }
  .nav__burger span{
    display:block; width:24px; height:2px; background:var(--hueso);
    transition:transform .4s var(--ease), opacity .3s;
  }
  .nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .bento{ grid-template-columns:repeat(2,1fr); }
  .cat--xl{ grid-column:span 2; grid-row:auto; min-height:340px; }
  .cat--wide{ grid-column:span 2; }

  .steps{ grid-template-columns:1fr; }
  .brands__track{ height:240vh; }
  .pull{ justify-self:start; }
}

@media (max-width:560px){
  /* Retícula compacta: las 7 categorías entran en una pantalla y media en vez de
     en siete. Manda la foto; la descripción y los tags se callan (siguen en el
     HTML para desktop y para el buscador) y el azulejo completo es el tap. */
  .bento{ grid-template-columns:repeat(2,1fr); gap:.55rem; }
  .cat{
    min-height:0; aspect-ratio:1/1;
    padding:.85rem;
    border-radius:calc(var(--r) * .68);
  }
  .cat--xl,.cat--wide{ grid-column:span 1; min-height:0; }
  /* La séptima cierra la fila impar a lo ancho, en formato banner */
  .cat:last-child{ grid-column:span 2; aspect-ratio:16/6.5; }

  /* Sin texto de apoyo compitiendo, la prenda puede subir de opacidad */
  .cat__bg img,
  .cat--wide .cat__bg img{ opacity:.82; }
  .cat::after{
    background:linear-gradient(to top,
      rgba(5,5,5,.94) 0%,
      rgba(5,5,5,.70) 44%,
      rgba(5,5,5,.10) 100%);
  }

  .cat__num{ font-size:.62rem; letter-spacing:.16em; }
  .cat h3,
  .cat--xl h3{ font-size:1.1rem; line-height:1.02; margin:0; }
  .cat:last-child h3{ font-size:1.45rem; }
  .cat p,
  .cat__tags{ display:none; }

  /* El enlace pasa de renglón a superficie: cubre el azulejo entero y su texto
     se apaga con font-size:0 (el aria-label sigue anunciándolo). Queda solo la
     flecha, que es la que dice "esto se toca". */
  .cat__go{
    position:absolute; inset:0; z-index:2;
    align-items:flex-start; justify-content:flex-end;
    padding:.7rem; gap:0;
    font-size:0;
  }
  .cat__go svg{
    width:25px; height:25px; padding:5px; box-sizing:border-box;
    border-radius:999px;
    background:rgba(5,5,5,.5); border:1px solid var(--linea-2);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }

  .foot__grid{ grid-template-columns:1fr; }
  /* En una columna, gap+padding+borde daban ~250px por dato: cuatro datos
     ocupaban más que la foto de la tienda. Nada se oculta —la dirección y los
     teléfonos son justo lo que busca quien llega por Google— solo se aprieta. */
  .nap{ gap:.9rem; margin-bottom:1.8rem; }
  .nap li{ grid-template-columns:1fr; gap:.15rem; padding-bottom:.9rem; }
  .nap__k{ font-size:.64rem; padding-top:0; }
  .nap__v{ line-height:1.45; }
  .hero__stats{ gap:1.4rem 2rem; }
  .brands__label{ top:5rem; }
}

/* ============================================================
   ACCESIBILIDAD — movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .brands__track{ height:auto; }
  .brands__sticky{ position:static; height:auto; padding-block:6rem; }
  .brands__noise,.brands__scan{ display:none; }
  .gword[data-layer="c"],.gword[data-layer="m"]{ display:none; }
}

/* ============================================================
   BLOG / ARTÍCULOS
   ============================================================ */

/* -- Migas de pan -- */
.crumbs{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  font-size:.82rem; color:var(--gris-2); margin-bottom:2.2rem;
}
.crumbs a{ color:var(--gris); text-decoration:none; transition:color .25s; }
.crumbs a:hover{ color:var(--amarillo); }
.crumbs span{ color:var(--gris-2); }
.crumbs .here{ color:var(--hueso); }

/* -- Encabezado del artículo -- */
.art-head{ max-width:74ch; margin-bottom:clamp(2.5rem,6vw,4rem); }
.art-head .kicker{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amarillo); margin-bottom:1rem;
}
.art-head h1{
  font-family:var(--display); text-transform:uppercase; letter-spacing:-.015em;
  line-height:.95; font-size:clamp(2.2rem,5.2vw,4.2rem); margin:0 0 1.1rem;
}
.art-head .dek{
  font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--gris); max-width:60ch; margin:0 0 1.4rem;
}
.art-meta{
  display:flex; flex-wrap:wrap; gap:.9rem; align-items:center;
  font-size:.86rem; color:var(--gris-2); padding-top:1.2rem; border-top:1px solid var(--linea);
}
.art-meta b{ color:var(--gris); font-weight:600; }
.art-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--gris-2); }

/* -- Cuerpo del artículo -- */
.art-body{
  max-width:68ch; font-size:clamp(1.02rem,1.15vw,1.14rem); line-height:1.75; color:var(--hueso);
}
.art-body > * + *{ margin-top:1.5rem; }
.art-body h2{
  font-family:var(--display); text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1; margin-top:3.2rem; color:var(--blanco);
}
.art-body h3{
  font-size:clamp(1.08rem,1.4vw,1.28rem); font-weight:800; color:var(--amarillo);
  margin-top:2.2rem; letter-spacing:-.005em;
}
.art-body p{ color:var(--gris); }
.art-body p strong, .art-body li strong{ color:var(--hueso); font-weight:700; }
.art-body a{ color:var(--amarillo); text-decoration-thickness:1px; text-underline-offset:3px; }
.art-body a:hover{ color:var(--amarillo-d); }
.art-body ul, .art-body ol{ color:var(--gris); padding-left:1.35rem; display:grid; gap:.6rem; }
.art-body ul{ list-style:none; padding-left:0; }
.art-body ul > li{ position:relative; padding-left:1.5rem; }
.art-body ul > li::before{
  content:''; position:absolute; left:0; top:.62em; width:8px; height:8px;
  background:var(--amarillo); border-radius:2px; transform:rotate(45deg);
}
/* Sin list-style:none salían dos numeraciones: el marcador nativo "1." y el
   círculo amarillo del ::before. El contador propio es el que manda. */
.art-body ol{ counter-reset:art-ol; list-style:none; padding-left:0; }
.art-body ol > li{ position:relative; padding-left:2rem; }
.art-body ol > li::before{
  counter-increment:art-ol; content:counter(art-ol);
  position:absolute; left:0; top:0; width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--amarillo); color:var(--negro); font-weight:800; font-size:.78rem;
  display:flex; align-items:center; justify-content:center;
}
.art-body table{ width:100%; border-collapse:collapse; font-size:.94rem; }
.art-body th, .art-body td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--linea); }
.art-body th{ color:var(--amarillo); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
.art-body td{ color:var(--gris); }
.art-body td strong{ color:var(--hueso); }

/* -- Callout / tip -- */
.art-tip{
  border-left:3px solid var(--amarillo); background:var(--negro-2);
  border-radius:0 var(--r) var(--r) 0; padding:1.3rem 1.6rem;
}
.art-tip p{ margin:0; color:var(--hueso); font-size:.98rem; }
.art-tip p:first-child{ color:var(--amarillo); font-weight:800; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5rem; }

/* -- CTA de cierre -- */
.art-cta{
  margin-top:clamp(3rem,6vw,4.5rem); padding:clamp(2rem,4vw,2.8rem);
  background:var(--negro-2); border:1px solid var(--linea-2); border-radius:var(--r);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
}
.art-cta h3{
  font-family:var(--display); text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.3rem,2.4vw,1.8rem); margin:0; max-width:26ch; line-height:1.05;
}
.art-cta p{ color:var(--gris); margin:.5rem 0 0; max-width:40ch; }

/* -- Enlaces relacionados -- */
.art-related{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.art-related h3{
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris-2); margin-bottom:1rem;
}
.art-related ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.art-related a{
  color:var(--hueso); text-decoration:none; font-weight:600; font-size:1rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.art-related a::before{ content:'→'; color:var(--amarillo); }
.art-related a:hover{ color:var(--amarillo); }

/* -- Índice del blog -- */
.blog-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.5vw,1.8rem);
}
.blog-card{
  display:flex; flex-direction:column; text-decoration:none; padding:0; overflow:hidden;
  background:var(--negro-2); border:1px solid var(--linea); border-radius:var(--r);
  transition:border-color .3s, transform .3s;
}
.blog-card:hover{ border-color:var(--amarillo); transform:translateY(-3px); }
.blog-card__img{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--negro); }
.blog-card__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
.blog-card:hover .blog-card__img img{ transform:scale(1.05); }
.blog-card__body{ display:block; padding:clamp(1.4rem,2.6vw,1.9rem); }
.blog-card .kicker{
  display:block; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amarillo); margin-bottom:.8rem;
}
.blog-card h2{
  font-family:var(--display); text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.25rem,2.2vw,1.65rem); line-height:1.02; color:var(--blanco); margin:0 0 .7rem;
}
.blog-card p{ color:var(--gris); font-size:.96rem; line-height:1.55; margin:0; }

@media (max-width:760px){
  .blog-grid{ grid-template-columns:1fr; }
  .art-cta{ flex-direction:column; align-items:flex-start; }
}

/* -- Imágenes del artículo --
   La portada va pegada al titular; las figuras del cuerpo llevan pie de foto,
   que es donde se explica lo que el texto no puede mostrar. */
.art-hero{
  margin:0 0 clamp(2.2rem,5vw,3.2rem);
}
.art-hero picture{
  display:block; overflow:hidden;
  border:1px solid var(--linea); border-radius:var(--r);
}
.art-hero img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover;
}
.art-fig{
  /* gana al margin-top de .art-body > * + * por ir después en la hoja */
  margin:clamp(2rem,4.5vw,2.8rem) 0;
}
.art-fig picture{
  display:block; overflow:hidden;
  border:1px solid var(--linea); border-radius:var(--r);
}
.art-fig img{ width:100%; height:auto; display:block; }
.art-hero figcaption,
.art-fig figcaption{
  margin-top:.8rem; padding-left:.8rem;
  border-left:2px solid var(--amarillo);
  color:#8E8A83; font-size:.86rem; line-height:1.55;
}

/* Contador del botón "Ver catálogo" en el hero */
.btn__badge{
  display:inline-grid; place-items:center;
  min-width:1.45em; height:1.45em; padding:0 .35em; margin-left:.15em;
  border-radius:999px; background:var(--amarillo); color:var(--negro);
  font-size:.74em; font-weight:800; line-height:1;
}


/* ============================================================
   DESPLEGABLES (pasos y redes) — ver desplegablesMoviles() en animations.js
   ============================================================ */
.step__d > summary,
.socs > summary{
  list-style:none;
  display:flex; align-items:center; gap:.9rem;
}
.step__d > summary::-webkit-details-marker,
.socs > summary::-webkit-details-marker{ display:none; }

/* El número y el título pasan a ser una sola fila de cabecera */
.step__d .step__n{ margin-bottom:0; flex:0 0 auto; }
.step__d h3{ margin:0; }
.step__d > p{ margin:1.1rem 0 0; }

.socs > summary{
  padding:1rem 1.2rem;
  background:var(--negro-2); border:1px solid var(--linea); border-radius:var(--r);
  font-family:var(--display); font-size:1.05rem; letter-spacing:.02em;
  color:var(--hueso);
}
.socs > summary span{
  margin-left:auto; font-family:var(--texto); font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gris-2);
}
.socs__body{ display:grid; gap:.9rem; margin-top:.9rem; }

/* Por encima del punto de corte están siempre abiertos: el resumen de redes
   sobra como botón y el de los pasos no debe parecer pulsable. */
@media (min-width:701px){
  .socs > summary{ display:none; }
  .socs__body{ margin-top:0; }
  .step__d > summary{ cursor:default; }
}

@media (max-width:700px){
  .step__d > summary,
  .socs > summary{ cursor:pointer; }
  /* Flecha: la única señal de que el bloque se abre */
  .step__d > summary::after,
  .socs > summary::after{
    content:''; flex:0 0 auto; margin-left:auto;
    width:9px; height:9px;
    border-right:2px solid var(--amarillo);
    border-bottom:2px solid var(--amarillo);
    transform:translateY(-3px) rotate(45deg);
    transition:transform .3s var(--ease);
  }
  .socs > summary::after{ margin-left:.8rem; }
  .step__d[open] > summary::after,
  .socs[open] > summary::after{ transform:translateY(2px) rotate(-135deg); }

  /* Cerrado, el paso es solo la fila de cabecera: tres pasos caben de un golpe */
  .step{ padding:1.1rem 1.2rem; }
  .step__n{ width:40px; height:40px; font-size:1.15rem; }
  .step h3{ font-size:1.15rem; }
}