/* ==========================================================================
   porta-vidrio.css — la capa «liquid glass» de Porta Milano (29-oct-2026).
   Juani: «la web está básica, dale el estilo moderno liquid glass iPhone bien
   minimalista, bien modernito, motion graphics muy sutiles».
   Va DESPUÉS de porta.css, porta-home.css y porta-paginas.css (base.html) y
   sólo suma encima: el material (vidrio claro con filo de luz, la receta de
   Achalay), las puntas redondeadas, el header-cápsula que flota sobre el
   banner y el movimiento. Sacando este archivo, el tema vuelve a como estaba.

   Reglas que ya costaron (memoria):
   - Un vidrio sólo ve lo de atrás si NINGÚN ancestro tiene opacity < 1,
     mask, filter, clip-path, backdrop-filter o will-change. Por eso el vidrio
     del header va en su ::after y no en la cápsula: el mega menú vive adentro
     y también es vidrio. Adentro de un vidrio no va otro vidrio.
   - backdrop-filter cuesta 10× en el celu: en ≤ 960 px sólo lo llevan las
     piezas fijas (header, burbuja, barra de compra, aviso). Las etiquetas
     sobre foto pasan a blanco al 90 % sin desenfoque (no se distingue).
   - Movimiento sólo con transform y opacity. Nada aparece al scrollear.
     La transición entre páginas (View Transitions) va sólo en la compu: en
     el celu agrega un cuadro largo.
   La refracción del borde (lo que lo hace «líquido») la monta porta.js
   (módulo vidrio) sólo en Chromium de escritorio: deja --refraccion y la
   clase .refracta, y este CSS decide.
   ========================================================================== */

:root{
  --pm-r-xl:26px;--pm-r-l:20px;--pm-r-m:14px;--pm-r-s:10px;
  --pm-spring:cubic-bezier(.32,.72,0,1);    /* la curva de las hojas de iOS */
  --pm-suave:cubic-bezier(.16,1,.3,1);      /* expo out */
  --pm-hd-h:60px;
  --pm-flota:10px;                          /* aire entre el carrito / las hojas y el borde */
  --pm-hd-aire:0px;                         /* el header va de borde a borde, sin aire (Juani, 2-nov) */
  --pm-v-fondo:rgba(255,255,255,.58);
  --pm-v-brillo:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,0) 60%);
  --pm-v-filtro:blur(18px) saturate(1.7) brightness(1.05);
  --pm-v-luz:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -10px 22px -18px rgba(255,255,255,.85);
  --pm-v-sombra:0 0 0 .5px rgba(17,17,17,.07),0 1px 2px rgba(17,17,17,.05),0 16px 40px -20px rgba(17,17,17,.3);
  --pm-v-filo:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.2) 32%,rgba(255,255,255,.06) 62%,rgba(255,255,255,.75));
}
html{scroll-padding-top:calc(var(--pm-hd-h) + var(--pm-hd-aire) + 16px)}

/* ---------- header: barra de vidrio de borde a borde, esquinas rectas (Juani, 2-nov; antes, cápsula que flotaba) ---------- */
.pm-hd{background:transparent;border-bottom:0;padding:var(--pm-hd-aire) 0 0;pointer-events:none}
.pm-hd>*{pointer-events:auto}
.pm-hd.is-scrolled,.pm-hd.is-mega,.pm-hd--compra{border-bottom-color:transparent}
.pm-hd .pm-hd__row{position:relative;isolation:isolate;height:var(--pm-hd-h);padding-left:var(--pm-gut);padding-right:var(--pm-gutR);border-radius:0}
.pm-hd__row::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background-color:var(--pm-v-fondo);background-image:var(--pm-v-brillo);-webkit-backdrop-filter:var(--pm-v-filtro);backdrop-filter:var(--pm-v-filtro);box-shadow:var(--pm-v-luz),var(--pm-v-sombra);transition:background-color .5s var(--pm-suave),box-shadow .5s var(--pm-suave)}
.pm-hd__row.refracta::after{-webkit-backdrop-filter:var(--refraccion) blur(12px) saturate(1.7) brightness(1.05);backdrop-filter:var(--refraccion) blur(12px) saturate(1.7) brightness(1.05)}
/* el filo de luz: más claro arriba a la izquierda y abajo a la derecha (quieto) */
.pm-hd__row::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;background:var(--pm-v-filo);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* barra recta: sin el filo de luz alrededor (en una barra de borde a borde se ve como un marco) */
.pm-hd .pm-hd__row::before{display:none}
.pm-hd.is-scrolled .pm-hd__row::after{background-color:rgba(255,255,255,.72);box-shadow:var(--pm-v-luz),0 0 0 .5px rgba(17,17,17,.08),0 1px 2px rgba(17,17,17,.05),0 18px 44px -18px rgba(17,17,17,.34)}
/* donde la página abre con una foto a todo el ancho (el banner de la home, la portada de Quiénes somos), la foto
   sube por debajo de la cápsula y se ve a través del vidrio */
body:has(.pm-main>:is(.pm-hero,.pm-ab-hero):first-child) .pm-hd{margin-bottom:calc(-1 * (var(--pm-hd-h) + var(--pm-hd-aire)))}
@media (min-width:901px){.pm-main>.pm-ab-hero:first-child .pm-ab-hero__txt{padding-top:calc(var(--pm-hd-h) + var(--pm-hd-aire) + clamp(28px,5vw,72px))}}

/* al bajar, un degradé blanco detrás de la cápsula: lo que pasa por arriba se esfuma en vez de cortarse */
.pm-hd::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--pm-hd-aire) + 26px);z-index:-1;pointer-events:none;background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,0));opacity:0;transition:opacity .4s var(--pm-ease)}
.pm-hd.is-scrolled::before{opacity:1}

/* la luz del menú: una píldora que se desliza al ítem que señalás (porta.js › luz).
   🔴 La lista NO va posicionada: si no, el mega menú se mide contra ella y queda del ancho del menú. La píldora
   y los links se miden contra la cápsula (offsetLeft de cada link). */
.pm-nav.con-luz .pm-nav__lista{gap:4px}
.pm-nav.con-luz .pm-nav__link{padding-inline:8px;z-index:1}
.pm-nav.con-luz{margin-left:-8px}
@media (min-width:1600px){.pm-nav.con-luz .pm-nav__link{padding-inline:10px}.pm-nav.con-luz{margin-left:-10px}}
.pm-nav.con-luz .pm-nav__link::after{display:none}
.pm-nav__luz{position:absolute;left:0;top:50%;height:34px;margin-top:-17px;width:var(--w,0);border-radius:999px;background:rgba(17,17,17,.065);pointer-events:none;opacity:0;transform:translateX(var(--x,0));transition:transform .5s var(--pm-spring),width .5s var(--pm-spring),opacity .25s var(--pm-ease)}
.pm-nav__lista.tiene-luz .pm-nav__luz{opacity:1}
.pm-nav__link::after{bottom:16px}

/* mega menú: hoja de vidrio que baja debajo de la cápsula */
.pm-mega{top:100%;border:0;border-radius:0;background-color:rgba(255,255,255,.74);background-image:var(--pm-v-brillo);-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);box-shadow:var(--pm-v-luz),var(--pm-v-sombra);transform:translateY(-6px) scale(.985);transform-origin:50% 0;transition:opacity .28s var(--pm-suave),transform .45s var(--pm-suave),visibility 0s linear .28s}
.pm-nav__item.is-open .pm-mega{transition:opacity .28s var(--pm-suave),transform .45s var(--pm-suave),visibility 0s}
.pm-mega::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}   /* puente: el mouse cruza sin cerrarlo */
.pm-mega .pm-mega__in{padding-left:28px;padding-right:28px}

/* buscador: otra hoja de vidrio */
.pm-buscador{left:var(--pm-gut);right:var(--pm-gutR);top:calc(100% + 8px);border:0;border-radius:var(--pm-r-l);background-color:rgba(255,255,255,.76);background-image:var(--pm-v-brillo);-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);box-shadow:var(--pm-v-luz),var(--pm-v-sombra);transform-origin:50% 0}
.pm-buscador:not([hidden]){animation:pm-baja .45s var(--pm-suave) both}
.pm-buscador .pm-buscador__in{padding-left:28px;padding-right:28px}
.pm-buscador__form{border-bottom:0;background:rgba(17,17,17,.05);border-radius:14px;padding:4px 6px 4px 16px}
.pm-buscador__form .pm-btn{min-height:40px}
.pm-buscador__sug a{padding:6px 12px;border-radius:999px;background:rgba(17,17,17,.05);transition:background-color .2s var(--pm-ease)}
.pm-buscador__sug a:hover{background:rgba(17,17,17,.09);text-decoration:none}

.pm-tool__n{display:inline-block}
.pm-tool__n.is-salto{animation:pm-salto .5s var(--pm-spring)}

/* ---------- carrusel de banners ---------- */
.pm-slide__media>:is(picture,figure){overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  /* la foto que entra se asienta (1,045 → 1) y el texto sube apenas, en cascada corta */
  .pm-slide.is-on .pm-slide__media>:is(picture,figure) img,.pm-slide.is-on .pm-slide__video{animation:pm-asienta 1.8s var(--pm-suave) both}
  .pm-slide.is-on .pm-slide__txt>*{animation:pm-sube .9s var(--pm-suave) both}
  .pm-slide.is-on .pm-slide__txt>:nth-child(2){animation-delay:.07s}
  .pm-slide.is-on .pm-slide__txt>:nth-child(3){animation-delay:.14s}
  .pm-slide.is-on .pm-slide__txt>:nth-child(4){animation-delay:.21s}
}

/* ---------- marcas: chips ---------- */

/* ---------- Hombre / Mujer, categorías, banda, videos: fotos con puntas rectas y la palabra abajo, sin globo (Gonza, 31-oct) ---------- */
.pm-duo{gap:12px}
.pm-cats{gap:12px}
.pm-duo__item,.pm-cat{position:relative}
.pm-duo__img,.pm-cat__img,.pm-banda,.pm-vid__box{isolation:isolate}
.pm-duo__img img,.pm-cat__img img,.pm-banda img{transition:transform 1.2s var(--pm-suave)}
@media (hover:hover){
  .pm-duo__item:hover .pm-duo__img img,.pm-cat:hover .pm-cat__img img,.pm-banda:hover img{transform:scale(1.03)}
  .pm-duo__item:hover .pm-cap,.pm-cat:hover .pm-cap{text-decoration:none}
}
.pm-duo__item:active .pm-duo__img,.pm-cat:active .pm-cat__img{transform:scale(.985)}
.pm-duo__img,.pm-cat__img{transition:transform .3s var(--pm-suave)}
.pm-banda .pm-btn--blanco{border-color:transparent}
.pm-vid__play{border:0;background:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 0 .5px rgba(255,255,255,.35);transition:background-color .25s var(--pm-ease),transform .35s var(--pm-suave)}
.pm-vid__box:hover .pm-vid__play{background:rgba(255,255,255,.38);transform:scale(1.06)}

/* ---------- tarjeta de producto ---------- */
.pm-card__img{isolation:isolate;transition:transform .3s var(--pm-suave)}
.pm-card__img img{transition:transform 1.1s var(--pm-suave),opacity .3s var(--pm-ease)}
@media (hover:hover){.pm-card:hover .pm-card__img img{transform:scale(1.04)}}
.pm-card:active .pm-card__img{transform:scale(.98)}
.pm-tags{top:10px;left:10px}
.pm-tag--agotado{background:rgba(17,17,17,.84)}
@media (min-width:961px) and (hover:hover){
}
/* la foto entra con un fundido corto cuando termina de bajar (porta.js › fotos) */
img.pm-fade-t{transition:opacity .4s var(--pm-ease),transform 1.1s var(--pm-suave)}
img.pm-fade{opacity:0!important}

/* ---------- controles: píldoras ---------- */
.pm-btn,.pm-add{border-radius:999px;transition:background-color var(--pm-t2) var(--pm-ease),color var(--pm-t2) var(--pm-ease),border-color var(--pm-t2) var(--pm-ease),opacity var(--pm-t2) var(--pm-ease),transform .25s var(--pm-suave)}
.pm-btn:active,.pm-add:active{transform:scale(.97)}
.pm-arrow{border-radius:50%;transition:background-color .25s var(--pm-ease),border-color .25s var(--pm-ease),opacity .25s var(--pm-ease),transform .25s var(--pm-suave)}
.pm-arrow:hover{background:var(--pm-studio);border-color:var(--pm-studio)}
.pm-arrow:active{transform:scale(.92)}
.pm-arrow[aria-disabled="true"]{background:transparent;border-color:var(--pm-line)}
.pm-chip{border-radius:999px}
.pm-sz button{border-radius:12px;transition:border-color var(--pm-t2) var(--pm-ease),background-color var(--pm-t2) var(--pm-ease),color var(--pm-t2) var(--pm-ease),transform .25s var(--pm-suave)}
.pm-sz button:active:not(:disabled){transform:scale(.94)}
.pm-f input,.pm-f textarea,.pm-f select,.pm-sel__btn{border-radius:12px}
.pm-sel__pop{border:0;border-radius:var(--pm-r-m);background-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);box-shadow:var(--pm-v-luz),var(--pm-v-sombra);animation:pm-baja .35s var(--pm-suave) both}
.pm-sel__op{border-radius:8px}
.pm-pill__panel{border-radius:var(--pm-r-m)}
.pm-stage{isolation:isolate}
.pm-agotada{border-radius:var(--pm-r-m)}

/* ---------- páginas: carrito, checkout, cuenta ---------- */
.pm-ro,.pm-box,.pm-co__aviso,.pm-help{border-radius:var(--pm-r-m)}
.pm-ro{transition:border-color var(--pm-t2) var(--pm-ease),background-color var(--pm-t2) var(--pm-ease),transform .25s var(--pm-suave)}
.pm-ro:active{transform:scale(.99)}
.pm-qty{border-radius:999px;overflow:hidden}
.pm-carro__img,.pm-st__img,.pm-sum__img{isolation:isolate}
.pm-estado{border-radius:999px}
@media (min-width:961px){.pm-sum,.pm-carro__res{border-radius:var(--pm-r-l)}}

/* ---------- hojas laterales y carrito: vidrio que flota (compu) ---------- */
.pm-sheet__bg,.pm-cart__bg{background:rgba(17,17,17,.2)}
.pm-cart__in,.pm-sheet__in,.pm-drawer{transition-duration:.55s;transition-timing-function:var(--pm-spring)}
@media (min-width:961px){
  .pm-cart__in,.pm-sheet__in{top:var(--pm-flota);bottom:var(--pm-flota);right:var(--pm-flota);border-radius:var(--pm-r-xl);overflow:hidden;background-color:rgba(255,255,255,.8);background-image:var(--pm-v-brillo);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--pm-v-luz),0 0 0 .5px rgba(17,17,17,.08),0 30px 80px -30px rgba(17,17,17,.45);transform:translateX(calc(100% + 24px))}
  .pm-sheet__in{overflow-y:auto}
  .pm-cart.is-open .pm-cart__in,.pm-sheet.is-open .pm-sheet__in{transform:none}
  .pm-cart__hd,.pm-ci,.pm-cart__ft{border-color:rgba(17,17,17,.07)}
}
.pm-drawer__buscar{border-bottom:0;background:var(--pm-studio);border-radius:14px;padding:4px 14px}
@media (prefers-reduced-motion:no-preference){
  .pm-drawer.is-open .pm-drawer__lista>li,.pm-drawer.is-open .pm-drawer__extra>li{animation:pm-entra .6s var(--pm-suave) both}
  .pm-drawer.is-open .pm-drawer__lista>li:nth-child(2){animation-delay:.035s}
  .pm-drawer.is-open .pm-drawer__lista>li:nth-child(3){animation-delay:.07s}
  .pm-drawer.is-open .pm-drawer__lista>li:nth-child(4){animation-delay:.105s}
  .pm-drawer.is-open .pm-drawer__lista>li:nth-child(5){animation-delay:.14s}
  .pm-drawer.is-open .pm-drawer__lista>li:nth-child(6){animation-delay:.175s}
  .pm-drawer.is-open .pm-drawer__lista>li:nth-child(n+7){animation-delay:.21s}
  .pm-drawer.is-open .pm-drawer__extra>li{animation-delay:.24s}
}

/* ---------- burbuja de Mia y chat (estilo mensajes del iPhone) ---------- */
.pm-mia__fab{border:0;border-radius:999px;padding:7px 18px 7px 7px;background-color:rgba(255,255,255,.6);background-image:var(--pm-v-brillo);-webkit-backdrop-filter:var(--pm-v-filtro);backdrop-filter:var(--pm-v-filtro);box-shadow:var(--pm-v-luz),var(--pm-v-sombra);transition:transform .3s var(--pm-suave),box-shadow .3s var(--pm-suave)}
.pm-mia__fab.refracta{-webkit-backdrop-filter:var(--refraccion) blur(12px) saturate(1.7) brightness(1.05);backdrop-filter:var(--refraccion) blur(12px) saturate(1.7) brightness(1.05)}
@media (hover:hover){.pm-mia__fab:hover{transform:translateY(-2px)}}
.pm-mia__fab:active{transform:scale(.97)}
.pm-mia__panel{border:0;border-radius:var(--pm-r-xl);overflow:hidden;background-color:rgba(255,255,255,.84);background-image:var(--pm-v-brillo);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--pm-v-luz),0 0 0 .5px rgba(17,17,17,.08),0 30px 70px -28px rgba(17,17,17,.42);transform-origin:100% 100%}
.pm-mia__hd{border-bottom-color:rgba(17,17,17,.06)}
.pm-mia__pie{border-top-color:rgba(17,17,17,.06)}
.pm-mia__msg{border-radius:18px}
.pm-mia__msg--bot{background:rgba(17,17,17,.055);border-bottom-left-radius:6px}
.pm-mia__msg--user{border-bottom-right-radius:6px}
.pm-mia__input{border-radius:999px;border-color:transparent;background:rgba(17,17,17,.055)}
.pm-mia__input:focus{border-color:rgba(17,17,17,.2)}
.pm-mia__enviar{border-radius:50%;transition:transform .25s var(--pm-suave),opacity .2s var(--pm-ease)}
.pm-mia__enviar:active:not(:disabled){transform:scale(.9)}

/* ---------- aviso: píldora oscura de vidrio ---------- */
.pm-aviso{border-radius:999px;padding:12px 22px;background-color:rgba(26,26,26,.74);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 0 0 .5px rgba(255,255,255,.08),0 18px 40px -16px rgba(0,0,0,.45);transform:translateY(14px) scale(.96);transition:opacity .3s var(--pm-ease),transform .55s var(--pm-spring)}
.pm-aviso.is-on{transform:none}

/* ---------- celular y tablet ---------- */
@media (max-width:960px){
  :root{--pm-hd-h:52px;--pm-flota:8px}
  .pm-hd .pm-hd__row{padding-left:max(4px,calc(var(--pm-gut) - 10px));padding-right:max(4px,calc(var(--pm-gutR) - 10px));border-radius:0}
  /* sin desenfoque en lo que se repite sobre fotos (el blanco al 90 % no se distingue) */
  /* la barra de compra de la ficha flota como la barra de pestañas de iOS */
  .pm-mbar{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:8px 8px 8px 16px;border-top:0;border-radius:22px;background-color:rgba(255,255,255,.66);background-image:var(--pm-v-brillo);-webkit-backdrop-filter:var(--pm-v-filtro);backdrop-filter:var(--pm-v-filtro);box-shadow:var(--pm-v-luz),var(--pm-v-sombra)}
  body.pm-tpl-product{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:520px){
  .pm-mia__panel{border-radius:var(--pm-r-xl) var(--pm-r-xl) 0 0;transform-origin:50% 100%}
}

/* quien pidió menos transparencia en el sistema ve todo sólido */
@media (prefers-reduced-transparency:reduce){
  .pm-hd__row::after,.pm-mega,.pm-buscador,.pm-mia__fab,.pm-mia__panel,.pm-cart__in,.pm-sheet__in,.pm-mbar,.pm-sel__pop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:rgba(255,255,255,.97)!important}
}

/* ---------- pasar de página: fundido (sólo compu: en el celu cuesta un cuadro largo) ---------- */
@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:pm-vt-sale .2s var(--pm-ease) both}
  ::view-transition-new(root){animation:pm-vt-entra .36s var(--pm-ease) both}
}

@keyframes pm-baja{from{opacity:0;transform:translateY(-6px) scale(.985)}}
@keyframes pm-salto{40%{transform:scale(1.32)}}
@keyframes pm-asienta{from{transform:scale(1.045)}}
@keyframes pm-sube{from{opacity:0;transform:translateY(12px)}}
@keyframes pm-entra{from{opacity:0;transform:translateX(-14px)}}
@keyframes pm-vt-sale{to{opacity:0}}
@keyframes pm-vt-entra{from{opacity:0}}