/* Composición de portada y escalas compactas para Urban House. */
:root{--section-y:clamp(60px,7vw,104px)}
.hero__title{font-size:clamp(3.1rem,11.2vw,9rem);letter-spacing:-.035em}
.hero__media{max-height:630px}
.category-menu{padding-top:26px}
.category-menu__head .h2{font-size:clamp(1.9rem,3.8vw,3.3rem)}
.bento.bento--n6{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:none;grid-template-rows:none;grid-auto-rows:auto;gap:16px}
.bento.bento--n6 .tile{grid-area:auto;aspect-ratio:1.2}
.tile__name{font-size:clamp(1.1rem,2.25vw,1.9rem);line-height:1.07}
.tile__bar{padding:22px}.tile__count{font-size:.72rem}
.sel{grid-template-columns:1fr;gap:30px}
.sel__intro{position:static;display:grid;grid-template-columns:1fr 1fr auto;gap:28px;align-items:center}
.sel__intro .h2{font-size:clamp(1.9rem,3.8vw,3.3rem);max-width:12ch}
.sel__intro .lead{font-size:.95rem;line-height:1.65}
.sel__grid{gap:30px 20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.sel__grid .pcard:nth-child(n){margin-top:0}
.credit .h2{font-size:clamp(2rem,4vw,3.7rem)}
.sizeband__head .h2,.rail__head .h2,.how .h2,.visit .h2{font-size:clamp(1.9rem,3.8vw,3.3rem)}
.visit__addr{font-size:clamp(1.7rem,3.8vw,3.1rem);overflow-wrap:anywhere}
.menu__nav a{font-family:var(--f-body);font-size:1.08rem;font-weight:600;gap:12px;line-height:1.3;min-height:56px;letter-spacing:.01em}
.menu__nav small{font-size:.72rem;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.escena{height:auto}.escena__sticky{position:relative;min-height:600px;height:80dvh}}
@media(max-width:899px){.sel__intro{grid-template-columns:1fr;gap:16px}.sel__intro .h2{max-width:none}.bento.bento--n6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile__bar{padding:14px}.tile__bar .ico{width:18px}.hero__media{max-width:none}.hero__grid{gap:32px}.sel__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.hero__cta .btn{font-size:.78rem;padding-inline:16px}.hero__media::before{inset:8px -8px -8px 8px}}
@media(max-width:400px){.tile__name{font-size:1.1rem}.tile__bar{padding:12px}.btn{white-space:normal;text-align:center;line-height:1.35}.hero__title{font-size:3.3rem}.pcard__name{font-size:1rem}}

/* La tienda forma parte de la portada; el velo conserva la lectura del mensaje. */
.hero{position:relative;isolation:isolate;display:grid;place-items:center;text-align:center;min-height:clamp(620px,calc(100dvh - var(--header-h)),900px);padding-block:clamp(56px,9vh,120px);color:#f8f7f2;background:#10100f}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.68) saturate(.95) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,rgb(0 0 0 / .18) 0%,rgb(0 0 0 / .58) 80%),linear-gradient(0deg,rgb(0 0 0 / .5),rgb(0 0 0 / 0) 60%)}
.hero__grid{display:block;width:100%}
/* Composición centrada: logo grande, lema en verde con letras espaciadas, mensaje y botones */
.hero__copy{position:relative;max-width:940px;margin-inline:auto;display:grid;justify-items:center;gap:clamp(14px,2.4vh,24px)}
.hero__logo{width:min(860px,88vw);filter:drop-shadow(0 6px 28px rgb(0 0 0 / .5))}
.hero .hero__title{font-family:var(--f-display);font-stretch:100%;font-weight:800;font-size:clamp(1.15rem,2.7vw,2.1rem);line-height:1.2;letter-spacing:.22em;color:var(--accent)}
.hero .hero__title span{display:inline-block}
.hero .hero__title span:nth-child(3){margin-inline-start:.55em}
.hero .lead{color:rgb(255 255 250 / .86);margin-inline:auto;text-align:center;max-width:44ch;font-size:clamp(1rem,1.5vw,1.2rem)}
.hero__cta{justify-content:center}
.hero .btn--line{border-color:rgb(255 255 255 / .55);color:#fff}
.hero__media{display:none}
@media(max-width:699px){.hero{min-height:620px;padding-block:48px}.hero .hero__title{font-size:clamp(.95rem,4.6vw,1.3rem);letter-spacing:.16em}}

/* ---- Pase premium (cambio extremo, a petición del usuario) ----
   Grano fijo en toda la tienda (marca de impreso, no de plantilla digital), más profundidad y una
   cámara que respira en la portada, tacto real en botones y tarjetas, y una franja de marca. */

/* Grano: una sola capa fija, nunca sobre contenedores con scroll (barato en rendimiento). */
body::after{content:"";position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-transparency:reduce){body::after{display:none}}

/* Portada: viñeta con un toque del verde de marca abajo, y una cámara que respira muy despacio. */
.hero::after{background:radial-gradient(ellipse 70% 55% at 50% 108%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),radial-gradient(ellipse at 50% 42%,rgb(0 0 0 / .16) 0%,rgb(0 0 0 / .62) 82%),linear-gradient(0deg,rgb(0 0 0 / .56),rgb(0 0 0 / 0) 55%)}
.hero__bg img{transform:scale(1.06)}
@media(prefers-reduced-motion:no-preference){
  .hero__bg img{animation:hero-drift 22s ease-in-out infinite alternate}
  @keyframes hero-drift{from{transform:scale(1.06)}to{transform:scale(1.13)}}
}

/* Tacto: botones y tarjetas se levantan un poco al pasar el mouse, con sombra tintada (nunca negro puro). */
@media(hover:hover){
  .btn--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px -8px color-mix(in srgb,var(--accent) 55%,transparent)}
  .btn--line:hover:not(:disabled),.btn--dark:hover:not(:disabled),.btn--pill:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 22px -10px rgb(0 0 0 / .35)}
  .pcard:hover .pcard__frame{box-shadow:0 22px 40px -18px rgb(0 0 0 / .38)}
}
.pcard__frame{transition:box-shadow .5s var(--ease)}

/* Franja de marca: las categorías reales, en una sola vuelta continua. Un solo carrusel de texto en toda la página. */
.marquee{overflow:hidden;background:var(--accent);padding-block:13px}
.marquee__track{display:flex;gap:52px;width:max-content;white-space:nowrap}
.marquee__track span{font:800 .92rem/1 var(--f-display);font-stretch:110%;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)}
@media(prefers-reduced-motion:no-preference){.marquee__track{animation:marquee-scroll 24s linear infinite}}
@media(prefers-reduced-motion:reduce){.marquee{padding-block:10px}.marquee__track{flex-wrap:wrap;justify-content:center;gap:16px 40px}}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}