/* FRANKLERS HOMBRE — ajustes sobre style.css (el diseño de clean-boots).
   Va dentro de las mismas capas para que la lectura móvil de @layer utilities siga mandando. */

@layer tokens{
  :root{ --red:#E22334 }   /* el acento rojo de la marca */
}

/* ── el recorrido: las fotos nuevas (cuadradas o altas) ── */
@layer layout{
  .shot--hero{ height:72vh; left:62% }
  .shot--press{ height:80vh; right:8vw; bottom:6vh; transform-origin:50% 90% }
  .shot--open{ width:auto; height:84vh; left:10vw; top:50% }
}

@layer after{
  /* índice de la línea: 9 productos en filas de 6 */
  .line-index{ grid-template-columns:repeat(6, 1fr) }
  .line-index img{ filter:none; mix-blend-mode:multiply }

  /* fotos de producto con fondo blanco: se funden con el estudio claro */
  .prod-cut--sq{ height:auto; width:min(80%, 640px); max-width:80%; filter:none !important; mix-blend-mode:multiply }
  .prod-media--photo{ background:#0b0b0c }

  /* compra */
  .buybox{ display:flex; flex-direction:column; gap:14px; width:100%; margin-top:6px;
           opacity:clamp(0, calc(var(--v,1) * 1.7 - .6), 1) }
  .price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; color:var(--ink) }
  .price output{ font-size:var(--fs-60); line-height:1; font-weight:400 }
  .price span{ font-size:var(--fs-14); color:var(--ink-fade) }
  .var-opts{ display:flex; flex-wrap:wrap; gap:6px }
  .var-opts button{ min-height:42px; padding:0 14px; border:1px solid var(--hairline); border-radius:var(--r);
                    background:transparent; color:var(--ink); font:inherit; font-size:var(--fs-14); cursor:pointer;
                    transition:background 200ms var(--ease-strong), color 200ms var(--ease-strong) }
  .var-opts [aria-checked="true"]{ background:var(--ink); color:var(--plate); border-color:var(--ink) }
  .var-opts button:disabled{ opacity:.35; text-decoration:line-through; cursor:not-allowed }
  .var-opts button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
  .buy{ background:var(--red); color:#fff }
  .buy.is-off{ background:var(--ink); color:var(--plate); opacity:.4; pointer-events:none }
  @media (hover:hover) and (pointer:fine){ .buy:hover{ filter:brightness(1.08) } }

  /* arma tu kit */
  .kit-media{ display:flex; align-items:center; justify-content:center }
  .kit-grid{ position:absolute; inset:6%; display:grid; gap:4%; place-items:center;
             grid-template-columns:repeat(2, 1fr) }
  .kit-grid[data-n="1"]{ grid-template-columns:1fr }
  .kit-grid[data-n="5"], .kit-grid[data-n="6"]{ grid-template-columns:repeat(3, 1fr) }
  .kit-grid img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;
                 animation:kitIn 600ms var(--ease-expo) both }
  @keyframes kitIn{ from{ opacity:0; transform:translateY(16px) scale(.94) } }
  .kit-pick{ list-style:none; display:flex; flex-direction:column; border-top:1px solid var(--hairline) }
  .kit-pick li{ display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--hairline);
                font-size:var(--fs-14); color:var(--ink) }
  .kit-pick label{ flex:1; display:flex; align-items:center; gap:12px; cursor:pointer; min-height:44px }
  .kit-pick input{ width:18px; height:18px; accent-color:var(--red); flex:none }
  .kit-pick img{ flex:none; width:44px; height:44px; object-fit:contain; border-radius:6px; background:#f2f2f0; mix-blend-mode:multiply }
  .kit-pick select{ font:inherit; font-size:12px; padding:6px 8px; border:1px solid var(--hairline); border-radius:6px;
                    background:transparent; color:var(--ink); max-width:120px }
  .kp-p{ min-width:72px; text-align:right; font-variant-numeric:tabular-nums }
  .kit-buy{ align-items:center }
  .kit-total{ display:flex; flex-direction:column; gap:2px; min-width:120px; color:var(--ink) }
  .kit-total span{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; opacity:.55 }
  .kit-total output{ font-size:var(--fs-24) }

  .foot-legal a{ text-decoration:underline; text-underline-offset:3px }
}

@layer after{
  /* video en loop y visor 3D dentro del bloque visual de cada producto */
  .prod-media--vid{ background:none }
  .prod-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
  .prod-3d{ position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; transition:opacity .4s ease;
            --poster-color:transparent }
  .is-3d .prod-3d, .prod-3d--sabor{ opacity:1; pointer-events:auto }
  .m3d-tag{ position:absolute; left:16px; bottom:16px; padding:8px 14px; border-radius:999px; font-size:13px;
            background:rgba(10,10,12,.72); color:#fff; pointer-events:none }
  .is-3d .prod-vid{ opacity:0 }
  .tone-light .prod-media--vid.is-3d{ background:radial-gradient(ellipse 62% 58% at 50% 50%, #ffffff 0%, #f2f2f0 68%, #eaeae7 100%) }
  .tone-dark  .prod-media--vid.is-3d{ background:radial-gradient(ellipse 48% 54% at 50% 52%, #393a3f 0%, #17181b 56%, #0b0b0c 100%) }
  .m3d{ position:absolute; z-index:2; left:16px; bottom:16px; min-height:44px; padding:0 18px; border-radius:999px;
        border:1px solid rgba(255,255,255,.35); background:rgba(10,10,12,.72); color:#fff; font:inherit; font-size:14px;
        letter-spacing:.02em; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
  .m3d:hover{ background:var(--red); border-color:var(--red) }
  .m3d:focus-visible{ outline:2px solid var(--red); outline-offset:3px }
  /* pantallas 2 y 3: los sachets son altos y angostos, se dimensionan por alto */
  .shot--press{ height:82vh; width:auto; right:14vw; bottom:6vh }
  .shot--open{ height:82vh; width:auto; left:16vw }
  /* galería del producto: miniaturas en fila, se desliza en celular */
  .prod-copy{ min-width:0 }   /* la fila de miniaturas no debe ensanchar la columna */
  .gal{ max-width:100%; display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; margin:22px 0 6px; padding:2px 2px 6px;
        scrollbar-width:thin }
  .gal-t{ position:relative; flex:0 0 92px; height:92px; padding:0; border-radius:10px; overflow:hidden; cursor:pointer;
          border:1px solid var(--hairline); background:#f2f2f0; scroll-snap-align:start }
  .tone-dark .gal-t{ border-color:rgba(255,255,255,.18); background:#17181b }
  .gal-t img, .gal-t video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none }
  .gal-t:hover, .gal-t:focus-visible{ border-color:var(--red); outline:none }
  .gal-play{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.28) }
  .gal-play::after{ content:''; width:0; height:0; margin-left:4px; border-style:solid; border-width:10px 0 10px 16px;
                    border-color:transparent transparent transparent #fff }
  .lb{ position:fixed; inset:0; margin:auto; width:fit-content; height:fit-content; padding:0; border:0; background:transparent;
        max-width:min(92vw, 880px); max-height:92vh; overflow:visible }
  .lb::backdrop{ background:rgba(5,5,6,.86) }
  .lb-in img, .lb-in video{ display:block; max-width:min(92vw, 880px); max-height:86vh; border-radius:12px }
  .lb-in img{ width:min(92vw, 86vh, 880px); height:auto; aspect-ratio:1; background:#17181b }
  .lb-in video{ height:min(86vh, 1112px); width:auto; aspect-ratio:3 / 4; background:#000 }
  .lb-x{ position:absolute; top:8px; right:8px; z-index:2; width:44px; height:44px; border-radius:50%; border:0;
         background:#fff; color:#111; font-size:26px; line-height:1; cursor:pointer }
  .lb-x:focus-visible{ outline:2px solid var(--red); outline-offset:2px }
  /* el gel 3D de la portada: model-viewer necesita ancho explícito */
  .mv-hero{ width:56vh; filter:none; --poster-color:transparent }
  .mv-m{ width:100%; height:60vh; padding:0; background:none; --poster-color:transparent }
}

@layer utilities{
  @media (max-width:767px){
    .line-index{ grid-template-columns:repeat(3, 1fr) }
    /* sachets altos en las pantallas 2 y 3 */
    .scr--2 .m-shot, .scr--3 .m-shot{ width:auto; height:56vh; align-self:center; padding:0 }
    .m-shot.mv-m{ width:100%; height:58vh; padding:0; align-self:stretch }
    .price output{ font-size:36px }
    .kit-pick select{ max-width:96px }
    .kp-p{ min-width:60px }
  }
}

/* celular angosto: la píldora «Arma tu kit» tapaba «Línea»; queda solo la flecha */
@layer utilities{
  @media (max-width:420px){ .pill-act .chip{ display:none } }
}