/* ==========================================================================
   porta-home.css — la home de Porta Milano (maqueta home). Se suma a porta.css.
   Banners: en la compu, "full" (foto apaisada de 2400 px) va a todo el ancho
   con el texto abajo a la izquierda; una foto chica o vertical va partida
   (texto a un lado, la foto al otro, a su proporción): nunca se estira.
   En el celu y la tablet: la foto arriba (4:5) y el texto abajo.
   ========================================================================== */

/* ---------- 1 · carrusel ---------- */
.pm-hero{position:relative;background:var(--pm-studio);overflow:hidden}
.pm-hero__slides{display:grid}
.pm-slide{grid-area:1/1;position:relative;height:clamp(420px,37.5vw,560px);display:grid;grid-template-columns:minmax(0,1fr) auto;opacity:0;visibility:hidden;transition:opacity var(--pm-t4) var(--pm-ease),visibility 0s linear var(--pm-t4)}
.pm-slide.is-on{opacity:1;visibility:visible;transition:opacity var(--pm-t4) var(--pm-ease),visibility 0s}
.pm-slide--media-izq{grid-template-columns:auto minmax(0,1fr)}
.pm-slide__media{position:relative;height:100%;display:flex;gap:2px;min-width:0;overflow:hidden}
.pm-slide--media-der .pm-slide__media{grid-column:2;grid-row:1;justify-content:flex-end}
.pm-slide--media-der .pm-slide__txt{grid-column:1;grid-row:1}
.pm-slide--media-izq .pm-slide__media{grid-column:1;grid-row:1}
.pm-slide--media-izq .pm-slide__txt{grid-column:2;grid-row:1}
.pm-slide__media picture,.pm-slide__foto{position:relative;height:100%;aspect-ratio:4/5;margin:0;flex:none}
.pm-slide__media img,.pm-slide__video{width:100%;height:100%;object-fit:cover}
.pm-slide__prods{list-style:none;display:flex;align-items:center;gap:12px;height:100%;padding:0 clamp(16px,3vw,40px)}
.pm-slide__prods li{height:62%;aspect-ratio:4/5;flex:none}
.pm-slide__prods a{position:relative;display:block;height:100%}
.pm-slide__prods img{width:100%;height:100%;object-fit:cover}
.pm-slide__marca{position:absolute;left:0;right:0;bottom:-26px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pm-mute);text-align:center}
.pm-slide__txt{align-self:end;display:grid;gap:12px;justify-items:start;max-width:600px;padding:48px var(--pm-pad) 72px var(--pm-gut)}
.pm-slide--media-izq .pm-slide__txt{padding-left:var(--pm-pad)}
.pm-slide__h{font-size:clamp(24px,2.8vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.pm-slide__txt p{font-size:14px;color:var(--pm-ink-2);max-width:44ch}
.pm-slide__cta{margin-top:4px}
/* a todo el ancho (foto apaisada o video) */
.pm-slide--full,.pm-slide--video{grid-template-columns:minmax(0,1fr)}
.pm-slide--full .pm-slide__media,.pm-slide--video .pm-slide__media{position:absolute;inset:0;grid-column:1/-1}
.pm-slide--full .pm-slide__media picture{width:100%;aspect-ratio:auto}
.pm-slide--full .pm-slide__media::after,.pm-slide--video .pm-slide__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0) 58%);pointer-events:none}
.pm-slide--full .pm-slide__txt,.pm-slide--video .pm-slide__txt{position:relative;grid-column:1;color:#fff}
.pm-slide--full .pm-slide__txt p,.pm-slide--video .pm-slide__txt p{color:rgba(255,255,255,.88)}
/* controles: barritas (las pide el mentor) + ‹ › + pausa */
/* una flecha a cada costado, a mitad de altura (Gonza, 2-nov): blanca, se lee sobre la foto y sobre el fondo claro */
.pm-hero__lado{position:absolute;top:50%;z-index:3;width:46px;height:46px;margin-top:-23px;display:grid;place-items:center;border-radius:50%;color:var(--pm-ink);background:rgba(255,255,255,.92);box-shadow:0 2px 14px rgba(17,17,17,.14);transition:background-color var(--pm-t2) var(--pm-ease),transform var(--pm-t2) var(--pm-ease)}
.pm-hero__lado--prev{left:var(--pm-gut)}
.pm-hero__lado--next{right:var(--pm-gutR)}
.pm-hero__lado .pm-ico{width:18px;height:18px}
@media (hover:hover){.pm-hero__lado:hover{background:#fff;transform:scale(1.06)}}
.pm-hero__lado:active{transform:scale(.95)}

/* ---------- H1 + marcas ---------- */
.pm-marcas{padding-block:clamp(20px,2.4vw,32px) clamp(28px,4vw,56px)}
.pm-brands{overflow:hidden}
.pm-brands__track{display:flex;width:max-content;list-style:none;margin:0;padding:0;animation:pm-marcas calc(var(--n,8)*4.5s) linear infinite}
.pm-brands:hover .pm-brands__track,.pm-brands:focus-within .pm-brands__track{animation-play-state:paused}
@keyframes pm-marcas{from{transform:translate3d(-25%,0,0)}to{transform:translate3d(0,0,0)}}
.pm-brands__item{flex:none}
.pm-brand{width:232px;height:88px;display:grid;place-items:center;padding:0 24px;color:var(--pm-ink);transition:opacity var(--pm-t2) var(--pm-ease)}
.pm-brand:hover,.pm-brand:focus-visible{opacity:.6}
.pm-brand__img{display:block;height:36px;width:auto;max-width:168px;object-fit:contain}
.pm-brand__logo{font-size:15px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-align:center;line-height:1.15;white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .pm-brands{overflow-x:auto}
  .pm-brands__track{animation:none}
  .pm-brands__item[aria-hidden="true"]{display:none}
}

/* ---------- 2 · Hombre / Mujer ---------- */
.pm-sec--pegada{padding-top:0}
.pm-duo{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pm-duo__item{display:block}
.pm-duo__img{display:block;aspect-ratio:4/5;background:var(--pm-studio);overflow:hidden}
.pm-duo__img img{width:100%;height:100%;object-fit:cover}
.pm-duo__lbl{display:flex;justify-content:center;align-items:baseline;gap:10px;padding-top:16px;font-size:12px}
.pm-duo__item:hover .pm-cap{text-decoration:underline;text-underline-offset:4px}

/* ---------- 5 · categorías ---------- */
.pm-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.pm-cat{display:block}
.pm-cat__img{display:block;aspect-ratio:1/1;background:var(--pm-studio);overflow:hidden}
.pm-cat__img img{width:100%;height:100%;object-fit:cover}
.pm-cat__lbl{display:grid;gap:2px;justify-items:center;padding-top:16px;font-size:12px}
.pm-cat:hover .pm-cap{text-decoration:underline;text-underline-offset:4px}

/* ---------- 6 · banda de marca ---------- */
.pm .pm-banda{color:#fff}
.pm-banda{position:relative;display:block;height:clamp(320px,38vw,560px);overflow:hidden;background:#2a2d31;color:#fff}
.pm-banda picture,.pm-banda img{width:100%;height:100%}
.pm-banda img{object-fit:cover}
.pm-banda::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 55%);pointer-events:none}
.pm-banda__txt{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:40px clamp(20px,3vw,40px)}
.pm-banda__txt>span:first-child{display:grid;gap:8px}
.pm-banda__h{font-size:clamp(22px,2.6vw,34px);letter-spacing:.3em;font-weight:500;text-transform:uppercase}
.pm-banda:hover .pm-btn--blanco{background:#ececea}

/* ---------- 8 · Amigos de la Casa ---------- */
.pm-vids{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pm-vid__box{position:relative;display:block;width:100%;aspect-ratio:4/5;background:#d9d9d6;overflow:hidden}
.pm-vid__box img{width:100%;height:100%;object-fit:cover}
.pm-vid__play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.2);transition:background-color var(--pm-t2) var(--pm-ease)}
.pm-vid__play .pm-ico{width:16px;height:16px;margin-left:2px}
.pm-vid__box:hover .pm-vid__play{background:rgba(0,0,0,.42)}
.pm-vid__body{padding-top:12px;display:grid;gap:2px;justify-items:start;font-size:12px}
.pm-vid__nombre{font-size:13px;font-weight:500}
.pm-vid__body .pm-lnk{margin-top:6px}

/* ---------- 9 · showroom ---------- */
.pm-show{display:grid;grid-template-columns:1.2fr 1fr;min-height:420px;background:var(--pm-bg)}
.pm-show__img{position:relative;background:var(--pm-studio);overflow:hidden;min-height:320px}
.pm-show__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pm-show__txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding-block:48px}
.pm-show__txt h2{font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:.02em}
.pm-show__txt .pm-btn{margin-top:10px}

/* la home termina en el showroom (a todo el ancho): el footer va pegado */
.pm-tpl-home .pm-ft{margin-top:0}
/* showroom sólo con texto (sin foto propia): banda sobria a todo el ancho */
.pm-show-txt{background:var(--pm-studio);border-top:1px solid var(--pm-line);border-bottom:1px solid var(--pm-line)}
.pm-show-txt__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;padding-block:clamp(48px,7vw,104px)}
.pm-show-txt__marca{display:grid;gap:18px;justify-items:start}
.pm-show-txt__h{font-size:clamp(30px,4.4vw,64px);line-height:1;font-weight:500}
.pm-show-txt__h .pm-logo{font-size:1em}
.pm-show-txt__datos{display:grid;gap:6px;justify-items:start;font-size:15px}
.pm-show-txt__datos .pm-btn{margin-top:18px}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .pm-slide--gal .pm-slide__foto:nth-child(n+2){display:none}
  .pm-slide__prods li:nth-child(3){display:none}
}
@media (max-width:960px){
  .pm-slide,.pm-slide--media-izq{height:auto;display:flex;flex-direction:column}
  .pm-slide__media,.pm-slide--full .pm-slide__media,.pm-slide--video .pm-slide__media{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;max-height:70svh}
  .pm-slide__media picture,.pm-slide__foto{width:100%;height:100%;aspect-ratio:auto}
  .pm-slide--gal .pm-slide__foto:nth-child(n+2){display:none}
  .pm-slide__prods{width:100%;justify-content:center;gap:8px;padding:0 16px}
  .pm-slide__prods li{height:auto;width:calc((100% - 16px)/3)}
  .pm-slide__prods li:nth-child(3){display:block}
  .pm-slide__marca{bottom:-22px}
  .pm-slide--full .pm-slide__media::after,.pm-slide--video .pm-slide__media::after{display:none}
  /* el banner es sólo la foto, pasa solo y se desliza con el dedo (Gonza, 31-oct: «todo esto que aparece debajo del banner no tiene que estar») */
  .pm-slide__txt{display:none}
  .pm-hero__lado{width:38px;height:38px;margin-top:-19px}
  .pm-hero__lado--prev{left:10px}
  .pm-hero__lado--next{right:10px}
  .pm-hero__lado .pm-ico{width:16px;height:16px}
  .pm-hero{background:var(--pm-bg)}
  .pm-slide__media{background:var(--pm-studio)}
  .pm-cats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .pm-vids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm-show{grid-template-columns:1fr}
  .pm-show__img{aspect-ratio:4/5;min-height:0;max-height:70svh}
  .pm-banda__txt{flex-direction:column;align-items:flex-start;gap:16px;padding:28px 20px}
  .pm-show-txt__in{grid-template-columns:1fr;align-items:start;gap:28px}
}
@media (min-width:600px) and (max-width:960px){
  .pm-slide__media,.pm-slide--full .pm-slide__media,.pm-slide--video .pm-slide__media{max-height:58svh}
}
@media (max-width:520px){
  .pm-duo{gap:10px}
  .pm-brand{width:172px;height:72px;padding:0 18px}
  .pm-brand__img{height:28px;max-width:136px}
  .pm-brand__logo{font-size:13px}
  .pm-slide__h{font-size:24px}
}