/* =========================================================================
   Fotos y videos: tira de Makeup (home, ambas vistas), página de cada
   tratamiento (?t=... → body[data-vista="tratamiento"], un solo diseño
   responsive), catálogo de productos (?productos) y visor a pantalla completa.
   ========================================================================= */

/* ---------- tira de videos de Makeup ---------- */
.mk{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.mk .h2 em{color:var(--oliva)}
.mk-texto{margin:0;max-width:520px;font-size:17px;line-height:1.65;font-weight:300;color:var(--gris);text-wrap:pretty}
.mk-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--dorado) transparent}
.mk-item{flex:0 0 clamp(190px,19vw,240px);aspect-ratio:9/16;padding:0;border:0;background:var(--tinta);
  cursor:zoom-in;scroll-snap-align:start;overflow:hidden}
.mk-item video{display:block;width:100%;height:100%;object-fit:cover}
.m-makeup{padding:48px 0 0;display:flex;flex-direction:column;gap:18px}
.m-makeup .m-head{padding:0 var(--m-pad)}
.m-makeup .mk-track{padding:0 var(--m-pad);scroll-padding:0 var(--m-pad);scrollbar-width:none}
.m-makeup .mk-track::-webkit-scrollbar{display:none}
.m-makeup .mk-item{flex-basis:58vw}

/* ---------- página de tratamiento ---------- */
.t-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  padding:22px var(--pad-x);max-width:1280px;margin:0 auto}
.t-volver{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--oliva);
  border-bottom:1px solid var(--oliva);padding-bottom:3px}
.t-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(32px,5vw,80px);
  align-items:center;max-width:1280px;margin:0 auto;padding:clamp(8px,2vw,32px) var(--pad-x) clamp(56px,8vw,110px)}
.t-portada{width:100%;aspect-ratio:4/5;max-height:80vh;object-fit:cover}
.t-texto{display:flex;flex-direction:column;gap:22px;max-width:540px;min-width:0}
.t-texto h1{font-size:clamp(44px,6vw,84px);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.t-texto h1 em{color:var(--oliva)}
.t-desc{margin:0;font-size:19px;line-height:1.5;color:var(--tinta-2);text-wrap:pretty}
.t-detalle{margin:0;font-size:16px;line-height:1.7;font-weight:300;color:var(--gris);text-wrap:pretty}
.t-benef{display:flex;flex-direction:column;gap:12px;padding:22px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.t-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-2)}
.t-benef div{display:flex;gap:12px;align-items:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
.t-benef i{width:6px;height:6px;border-radius:50%;background:var(--cobre);flex:none}
.t-texto .btn{align-self:flex-start}

/* galería: grilla pareja 4:5 (fotos ya recortadas sobre el sujeto); destacados 2×2 calculados en app.js */
.t-galeria{background:var(--oliva-profundo);padding:clamp(48px,7vw,100px) var(--pad-x)}
.t-galeria .eyebrow{display:block;text-align:center;color:var(--dorado);margin-bottom:clamp(24px,3vw,40px)}
.t-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:8px;margin:0 auto}
.t-item{display:block;aspect-ratio:4/5;padding:0;border:0;background:#1d2414;cursor:zoom-in;overflow:hidden}
.t-item img,.t-item video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.t-item:hover img,.t-item:hover video{transform:scale(1.03)}
.g-ancho-m{grid-column:1/-1}

.t-otros{max-width:1280px;margin:0 auto;padding:clamp(48px,7vw,100px) var(--pad-x);display:flex;flex-direction:column;gap:24px}
.t-otros-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
  scrollbar-width:thin;scrollbar-color:var(--dorado) transparent}
.t-otros-track a{flex:0 0 clamp(150px,17vw,200px);display:flex;flex-direction:column;gap:10px;color:var(--tinta);scroll-snap-align:start}
.t-otros-track a:hover{color:var(--cobre)}
.t-otros-track img,.t-otros-track .ph{width:100%;aspect-ratio:4/5;object-fit:cover}
.t-otros-track span{font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1.1}
.t-otros-track em{color:var(--cobre)}
.t-pie{border-top:1px solid var(--linea);padding:28px var(--pad-x);display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-2)}
.t-pie a{color:var(--gris-2)}

@media (min-width:768px){
  .t-grid{grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:14px;max-width:min(1280px,calc(var(--cols) * 340px))}
  .g-ancho-m{grid-column:auto}
  .g-dest{grid-column:span 2;grid-row:span 2}
  .g-dest.der{grid-column:-3/-1}
}
@media (max-width:767.98px){
  .t-hero{padding-top:0}
  .t-portada{width:calc(100% + 2 * var(--pad-x));margin:0 calc(-1 * var(--pad-x));max-height:64vh}
  .t-texto .btn{align-self:stretch;justify-content:center}
}

/* ---------- visor (dialog nativo) ---------- */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(20,24,14,.95);color:var(--marfil)}
.lb::backdrop{background:rgba(20,24,14,.95)}
.lb-media{position:absolute;inset:64px 72px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.lb-media img,.lb-media video{max-width:100%;max-height:100%;object-fit:contain;pointer-events:auto}
.lb button{position:absolute;width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;
  border:1px solid rgba(246,242,236,.5);background:rgba(20,24,14,.4);color:var(--marfil);font-size:20px;cursor:pointer}
.lb button:hover{background:var(--marfil);color:var(--tinta)}
.lb-x{top:max(12px,env(safe-area-inset-top));right:12px;font-size:26px}
.lb-ant,.lb-sig{top:50%;transform:translateY(-50%)}
.lb-ant{left:12px}
.lb-sig{right:12px}
@media (max-width:767.98px){
  .lb-media{inset:68px 0 84px}
  .lb-ant,.lb-sig{top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:none}
  .lb-ant{left:calc(50% - 60px)}
  .lb-sig{right:calc(50% - 60px)}
}

/* ---------- catálogo de productos (?productos → body[data-vista="catalogo"]) ---------- */
.k-cab{max-width:1280px;margin:0 auto;padding:clamp(8px,2vw,32px) var(--pad-x) clamp(28px,4vw,48px);
  display:flex;flex-direction:column;gap:18px}
.k-cab h1{font-size:clamp(44px,6vw,84px);line-height:1;letter-spacing:-.01em}
.k-cab h1 em{color:var(--oliva)}
.k-cab p{margin:0;max-width:560px;font-size:17px;line-height:1.6;font-weight:300;color:var(--tinta-2);text-wrap:pretty}
.k-buscar{max-width:420px;width:100%;padding:14px 16px;border:1px solid var(--linea);background:#fff;
  font:inherit;font-size:16px;color:var(--tinta)}
.k-buscar:focus{outline:2px solid var(--oliva);outline-offset:1px}
/* categorías: fila fija arriba al scrollear; cada una es un ancla a su sección */
.k-cats{position:sticky;top:0;z-index:5;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:12px var(--pad-x);background:var(--marfil);border-bottom:1px solid var(--linea)}
.k-cats::-webkit-scrollbar{display:none}
.k-cats a{flex:none;padding:9px 14px;border:1px solid var(--linea);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta);white-space:nowrap}
.k-cats a:hover{border-color:var(--oliva);color:var(--oliva)}
.k-cats span{color:var(--gris-2);margin-left:4px}
.k-grupo{max-width:1280px;margin:0 auto;padding:clamp(32px,4vw,56px) var(--pad-x) 0;scroll-margin-top:60px}
.k-grupo h2{font-size:clamp(28px,3vw,40px);margin-bottom:clamp(16px,2vw,28px)}
.k-grupo[data-ofertas] h2{color:var(--cobre)}
.k-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
.k-prod{display:flex;flex-direction:column;gap:6px;min-width:0}
.k-prod img,.k-prod .ph{width:100%;aspect-ratio:4/5;object-fit:contain;padding:10%;background:#EDE6DB;margin-bottom:6px}
.k-prod h3{font-size:19px;line-height:1.15}
.k-med{font-size:12px;color:var(--gris-2)}
.k-prod p{margin:0;font-size:13px;line-height:1.5;font-weight:300;color:var(--gris);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.k-pie{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.k-precio{font-size:15px;color:var(--cobre);white-space:nowrap}
.k-precio s{font-size:12px;color:var(--gris-2);margin-right:4px}
.k-pie a{padding:8px 14px;border:1px solid var(--oliva);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--oliva)}
.k-pie a:hover{background:var(--oliva);color:var(--marfil)}
.k-vacio,.k-aviso{max-width:1280px;margin:0 auto;padding:32px var(--pad-x);font-size:14px;color:var(--gris-2)}
.k-aviso{padding-top:clamp(48px,6vw,80px);font-size:12px}
@media (min-width:768px){
  .k-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:40px 24px}
  .k-prod h3{font-size:21px}
}