/* Diseño A — Óptica Centenera, lenguaje visual de tienda premium de anteojos
   (referencia: sunglasshut.com). Serif fina para títulos + sans neutra chica. */
:root{
  --tinta:#111;
  --tinta2:#3a3a3a;
  --gris:#6e6e6e;
  --gris2:#9a9a9a;
  --linea:#e4e4e4;
  --fondo:#ffffff;
  --tile:#f5f5f4;
  --tile2:#ecebe9;
  --calido:#e6e3de;
  --etiqueta:#8a7356;   /* acento: beige oscuro (elegido por Gaby, 14/10) */
  --ok:#1f7a4d;
  --serif:"Newsreader", "Times New Roman", serif;
  --sans:"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease2:cubic-bezier(.65,0,.35,1);
  --pad:40px;
  --cab:64px;
  --aviso:36px;
  color-scheme: light;
}
@media (max-width:820px){ :root{ --pad:16px; --cab:56px; --aviso:32px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--sans); font-size:14px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html.trabado, html.trabado body{ overflow:hidden; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
input{ font:inherit; }
.oculto-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:1px solid var(--tinta); outline-offset:3px; }

/* ---------- tipografía ---------- */
.serif{ font-family:var(--serif); font-weight:300; letter-spacing:-.01em; }
.t-xl{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,5.4vw,80px); line-height:.98; letter-spacing:-.02em; margin:0; }
.t-l{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,3.4vw,44px); line-height:1.05; letter-spacing:-.012em; margin:0; }
.t-m{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.2vw,30px); line-height:1.1; margin:0; }
.sobre{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.link{
  display:inline-block; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  padding-bottom:3px; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .5s var(--ease);
}
.link:hover{ background-size:0 1px; background-position:100% 100%; }
.pastilla{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 28px; border-radius:999px; background:var(--tinta); color:#fff;
  font-size:14px; font-weight:500; letter-spacing:.01em; transition:background .3s, transform .3s var(--ease);
}
.pastilla:hover{ background:#000; }
.pastilla:active{ transform:scale(.98); }
.pastilla.borde{ background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 1px var(--tinta); }
.pastilla.borde:hover{ background:var(--tinta); color:#fff; }
.pastilla svg{ width:18px; height:18px; }

/* ---------- barra de avisos ---------- */
.aviso{
  height:var(--aviso); background:#000; color:#fff; font-size:12.5px;
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad);
  position:relative; z-index:60;
}
.aviso-rot{ display:flex; align-items:center; gap:14px; min-width:0; flex:1; }
.aviso-rot button{ width:20px; height:20px; display:grid; place-items:center; opacity:.8; flex:none; }
.aviso-rot button svg{ width:10px; height:10px; stroke:#fff; fill:none; stroke-width:1.6; }
.aviso-msj{ position:relative; height:20px; overflow:hidden; flex:1; min-width:0; }
.aviso-msj span{
  position:absolute; inset:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transform:translateY(100%); opacity:0; transition:transform .6s var(--ease), opacity .6s;
}
.aviso-msj span.on{ transform:none; opacity:1; }
.aviso-msj span.fuera{ transform:translateY(-100%); opacity:0; }
.aviso-der{ display:flex; gap:26px; }
.aviso-der a:hover{ text-decoration:underline; }
@media (max-width:820px){
  .aviso-der{ display:none; }
  .aviso-rot{ justify-content:center; text-align:center; }
  .aviso-msj span{ text-align:center; }
}

/* ---------- cabecera ---------- */
.cab{
  position:sticky; top:0; z-index:50; background:#fff; height:var(--cab);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 var(--pad);
  transition:transform .45s var(--ease), box-shadow .3s;
}
.cab.escondida{ transform:translateY(-100%); }
.cab.sombra{ box-shadow:0 1px 0 var(--linea); }
.logo{ display:flex; align-items:center; gap:10px; justify-self:start; }
.logo img{ width:30px; height:30px; border-radius:50%; }
.logo span{ font-family:var(--serif); font-size:21px; font-weight:400; letter-spacing:-.01em; white-space:nowrap; }
.menu{ display:flex; gap:42px; }
.menu > a, .menu > button{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:400;
  padding:22px 0; position:relative;
}
.menu > a::after, .menu > button::after{
  content:""; position:absolute; left:0; right:0; bottom:16px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.menu > a:hover::after, .menu > button:hover::after, .menu > .on::after{ transform:scaleX(1); transform-origin:left; }
.menu .rojo{ color:var(--etiqueta); }
.cab-iconos{ display:flex; gap:6px; justify-self:end; align-items:center; }
.ico{ width:40px; height:40px; display:grid; place-items:center; position:relative; }
.ico svg{ width:21px; height:21px; fill:none; stroke:var(--tinta); stroke-width:1.25; }
.ico .n{
  position:absolute; top:4px; right:2px; min-width:16px; height:16px; border-radius:8px; background:var(--tinta);
  color:#fff; font-size:10px; display:grid; place-items:center; padding:0 4px; font-weight:600;
}
.ico .n:empty{ display:none; }
.solo-movil{ display:none !important; }
@media (max-width:1024px){
  .menu{ display:none; }
  .solo-movil{ display:grid !important; }
  .cab{ grid-template-columns:auto 1fr auto; }
  .logo{ justify-self:center; }
  .logo span{ font-size:19px; }
  .logo img{ width:26px; height:26px; }
}
@media (max-width:380px){ .logo span{ font-size:17px; } }
/* cuatro íconos en el celu: más juntos para que entre el logo */
@media (max-width:520px){
  .cab-iconos{ gap:0; margin-right:-6px; }
  .cab-iconos .ico{ width:36px; height:44px; }
  .cab > .ico:first-child, .cab .solo-movil.ico{ width:36px; margin-left:-6px; }
  .logo{ gap:7px; }
  .logo span{ font-size:17px; }
  .logo img{ width:24px; height:24px; }
}
@media (max-width:370px){ .cab .logo span{ font-size:15px; } .cab .logo{ gap:5px; } }

/* aviso corto abajo (p. ej. "Link copiado") */
.tostada{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:200;
  transform:translate(-50%, 16px); opacity:0; pointer-events:none;
  background:var(--tinta); color:#fff; font-size:13px; letter-spacing:.02em; padding:11px 18px; border-radius:999px;
  transition:opacity .25s, transform .4s var(--ease);
}
.tostada.on{ opacity:1; transform:translate(-50%, 0); }

/* mega menú de marcas */
@media (max-width:1024px){ .mega{ display:none !important; } }
.mega{
  position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--linea);
  display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:var(--pad); padding:36px var(--pad) 44px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .35s, transform .45s var(--ease), visibility .35s;
  box-shadow:0 20px 40px -30px rgba(0,0,0,.25);
}
.mega.on{ opacity:1; visibility:visible; transform:none; }
.mega h4{ margin:0 0 16px; font-weight:500; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); }
.mega ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mega li a{ font-size:15px; }
.mega li a:hover{ text-decoration:underline; text-underline-offset:4px; }
.mega-foto{ background:var(--tile); display:grid; grid-template-rows:1fr auto; cursor:pointer; overflow:hidden; }
.mega-foto img{ mix-blend-mode:multiply; padding:24px 40px; width:100%; height:200px; object-fit:contain; transition:transform 1.2s var(--ease); }
.mega-foto:hover img{ transform:scale(1.04); }
.mega-foto div{ padding:0 20px 18px; }

/* ---------- capa del menú (celular) ---------- */
.velo{
  position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:80; opacity:0; visibility:hidden;
  transition:opacity .4s, visibility .4s;
}
.velo.on{ opacity:1; visibility:visible; }
.cajon{
  position:fixed; top:0; bottom:0; left:0; width:min(440px,100vw); background:#fff; z-index:90;
  transform:translateX(-102%); transition:transform .55s var(--ease); display:flex; flex-direction:column;
}
.cajon.der{ left:auto; right:0; transform:translateX(102%); }
.cajon.on{ transform:none; }
.cajon-cab{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px 24px; border-bottom:1px solid var(--linea); }
.cajon-cab h3{ margin:0; font-family:var(--serif); font-weight:300; font-size:26px; }
.cajon-cuerpo{ flex:1; overflow:auto; overscroll-behavior:contain; }
.x{ width:40px; height:40px; display:grid; place-items:center; }
.x svg{ width:18px; height:18px; stroke:var(--tinta); stroke-width:1.3; fill:none; }
.mm-lista{ list-style:none; margin:0; padding:10px 24px 24px; }
.mm-lista > li{ border-bottom:1px solid var(--linea); }
.mm-lista > li > a, .mm-lista > li > button{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  font-family:var(--serif); font-weight:300; font-size:28px; padding:16px 0; text-align:left;
}
.mm-lista > li > a span, .mm-lista > li > button span{ font-family:var(--sans); font-size:12px; color:var(--gris); }
.mm-marcas{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.mm-marcas.on{ grid-template-rows:1fr; }
.mm-marcas > div{ overflow:hidden; }
.mm-marcas a{ display:block; padding:9px 0; font-size:15px; }
.mm-marcas a:last-child{ padding-bottom:18px; }
.mm-pie{ padding:20px 24px 32px; display:grid; gap:12px; font-size:13px; color:var(--tinta2); }
.mm-pie a{ display:flex; gap:10px; align-items:center; }
.mm-pie svg{ width:18px; height:18px; fill:none; stroke:var(--tinta); stroke-width:1.3; }

/* ---------- búsqueda ---------- */
.busca{
  position:fixed; inset:0; z-index:95; background:#fff; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s, transform .5s var(--ease), visibility .35s;
}
.busca.on{ opacity:1; visibility:visible; transform:none; }
.busca-cab{ display:flex; align-items:center; gap:14px; padding:18px var(--pad); border-bottom:1px solid var(--tinta); }
.busca-cab svg{ width:22px; height:22px; stroke:var(--tinta); fill:none; stroke-width:1.3; flex:none; }
.busca-cab input::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }
.busca-cab input{
  flex:1; min-width:0; border:0; outline:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(24px,3vw,38px); padding:6px 0; background:transparent; color:var(--tinta);
  -webkit-appearance:none; appearance:none; border-radius:0;
}
.busca-cuerpo{ flex:1; overflow:auto; padding:26px var(--pad) 60px; }
.busca-sug{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 30px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:999px;
  box-shadow:inset 0 0 0 1px #cfcfcf; font-size:13px; white-space:nowrap; transition:box-shadow .2s, background .2s;
}
.chip:hover{ box-shadow:inset 0 0 0 1px var(--tinta); }
.chip.on{ background:var(--tinta); color:#fff; box-shadow:none; }
.chip svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; }
.busca-res{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:#fff; }
@media (max-width:820px){ .busca-res{ grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 calc(-1 * var(--pad)); } }
.busca-vacio{ color:var(--gris); padding:30px 0; }

/* ---------- vistas ---------- */
.vista{ display:none; }
.vista.on{ display:block; animation:entra .7s var(--ease); }
@keyframes entra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- aparecer al scrollear ---------- */
.rev{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.rev.visto{ opacity:1; transform:none; }
.rev-img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--ease2); }
.rev-img.visto{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  .rev,.rev-img{ opacity:1; transform:none; clip-path:none; transition:none; }
}

/* ---------- HERO: campaña con los clips ---------- */
.hero{
  position:relative; background:var(--calido); overflow:hidden;
  display:grid; grid-template-columns:minmax(440px,1fr) 2fr; align-items:stretch;
}
.hero-clips{ display:grid; grid-template-columns:1fr 1fr; gap:0; position:relative; }
.hero-clip{ position:relative; overflow:hidden; background:var(--calido); aspect-ratio:1/1; }
.hero-clip:nth-child(3){ display:none; }
.hero-giro{
  position:absolute; inset:0; transform:scale(1.12); transition:transform 2.6s var(--ease);
}
.hero.listo .hero-giro{ transform:scale(1); }
.hero-clip:nth-child(2) .hero-giro{ transition-delay:.15s; }
.hero-clip::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.22)); pointer-events:none; }
.hero-clip .rotulo{
  position:absolute; left:22px; bottom:20px; color:#fff; z-index:2; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transform:translateY(10px); transition:opacity .8s .9s, transform .8s .9s var(--ease);
}
.hero.listo .rotulo{ opacity:1; transform:none; }
.hero-texto{ position:relative; z-index:3; align-self:end; padding:48px var(--pad) 56px; max-width:600px; }
.hero-texto .sobre{ color:var(--tinta2); }
.hero-texto h1{ margin:16px 0 18px; }
.hero-texto p{ margin:0 0 30px; color:var(--tinta2); font-size:15px; max-width:36ch; }
.hero-texto .acc{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.hero-texto .linea{ overflow:hidden; display:block; padding-bottom:.06em; }
.hero-texto .linea > span{ display:block; transform:translateY(108%); transition:transform 1.2s var(--ease2); }
.hero.listo .hero-texto .linea > span{ transform:none; }
.hero.listo .hero-texto .linea:nth-child(2) > span{ transition-delay:.12s; }
.hero-texto .sobre, .hero-texto p, .hero-texto .acc{ opacity:0; transform:translateY(14px); transition:opacity 1s .5s, transform 1s .5s var(--ease); }
.hero.listo .hero-texto .sobre, .hero.listo .hero-texto p, .hero.listo .hero-texto .acc{ opacity:1; transform:none; }
.hero-cuenta{ display:none; }
.hero-cuenta i{ display:block; width:36px; height:2px; background:rgba(255,255,255,.5); overflow:hidden; position:relative; }
.hero-cuenta i b{ position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; }
.hero-cuenta i.on b{ animation:barra 6s linear forwards; }
.hero-cuenta i.hecho b{ transform:scaleX(1); }
@keyframes barra{ to{ transform:scaleX(1); } }
@media (max-width:820px){
  .hero{ display:flex; flex-direction:column; height:auto; min-height:0; }
  .hero-clips{ order:-1; display:block; height:auto; aspect-ratio:1/1; }
  .hero-clip, .hero-clip:nth-child(3){ display:block; position:absolute; inset:0; opacity:0; transition:opacity 1.2s; }
  .hero-clip.on{ opacity:1; }
  .hero-clip .rotulo{ left:var(--pad); bottom:30px; }
  .hero-texto{ padding:26px var(--pad) 36px; max-width:none; }
  .hero-texto h1{ font-size:46px; }
  .hero-cuenta{ display:flex; gap:6px; position:absolute; z-index:4; left:var(--pad); top:calc(100vw - 16px); }
  .hero-clip{ aspect-ratio:auto; }
}

/* ---------- secciones ---------- */
.sec{ padding:72px var(--pad) 0; }
.sec-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.sec-cab p{ margin:8px 0 0; color:var(--gris); font-size:14px; }
@media (max-width:820px){ .sec{ padding-top:52px; } .sec-cab{ margin-bottom:18px; } .sec-cab .link{ white-space:nowrap; } }
.sangre{ margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad)); }

/* marcas */
.marcas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.marca-t{
  background:var(--tile); height:96px; display:grid; place-items:center; padding:0 18%;
  transition:background .4s; position:relative; overflow:hidden;
}
.marca-t img{ max-height:38px; width:auto; max-width:100%; object-fit:contain; filter:grayscale(1) contrast(1.1); opacity:.86; transition:opacity .3s, transform .6s var(--ease); }
.marca-t:hover{ background:var(--tile2); }
.marca-t:hover img{ opacity:1; transform:scale(1.04); }
.marca-t.todo{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; background:var(--tile2); }
.marca-t.todo span{ text-decoration:underline; text-underline-offset:4px; }
@media (max-width:820px){ .marcas{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; } .marca-t{ height:76px; } .marca-t img{ max-height:30px; } }

/* carrusel de productos */
.carril{ position:relative; }
.carril-pista{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3px) / 4); gap:1px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth;
  overscroll-behavior-x:contain;
}
.carril-pista::-webkit-scrollbar{ display:none; }
.carril-pista > *{ scroll-snap-align:start; }
.carril-flechas{ display:flex; gap:8px; }
.flecha{ width:42px; height:42px; border-radius:50%; box-shadow:inset 0 0 0 1px #cfcfcf; display:grid; place-items:center; transition:box-shadow .2s, opacity .2s; }
.flecha:hover{ box-shadow:inset 0 0 0 1px var(--tinta); }
.flecha:disabled{ opacity:.3; cursor:default; }
.flecha svg{ width:14px; height:14px; stroke:var(--tinta); fill:none; stroke-width:1.4; }
.carril-barra{ height:1px; background:var(--linea); margin-top:22px; position:relative; }
.carril-barra b{ position:absolute; top:-1px; height:3px; background:var(--tinta); left:0; width:25%; transition:left .3s, width .3s; }
@media (max-width:1100px){ .carril-pista{ grid-auto-columns:calc((100% - 2px) / 3); } }
@media (max-width:820px){
  .carril-pista{ grid-auto-columns:72%; scroll-padding-left:var(--pad); padding:0 var(--pad); gap:1px; }
  .carril .sangre-m{ margin:0 calc(-1 * var(--pad)); }
  .carril-flechas{ display:none; }
  .carril-barra{ margin-left:0; margin-right:0; }
}

/* ---------- tarjeta de producto (modelo) ---------- */
.tj{ background:#fff; position:relative; display:flex; flex-direction:column; min-width:0; cursor:pointer; }
.tj-foto{
  background:var(--tile); aspect-ratio:1/1; position:relative; overflow:hidden; display:grid; place-items:center;
}
.tj-foto img{
  position:absolute; inset:0; margin:auto; width:84%; height:84%; object-fit:contain; mix-blend-mode:multiply;
  transition:opacity .5s, transform 1.1s var(--ease);
}
.tj-foto img.b{ opacity:0; }
@media (hover:hover){
  .tj:hover .tj-foto img.a{ transform:scale(1.035); }
  .tj.con-b:hover .tj-foto img.a{ opacity:0; }
  .tj.con-b:hover .tj-foto img.b{ opacity:1; transform:scale(1.035); }
}
.tj-sup{ position:absolute; top:12px; left:12px; right:48px; display:flex; flex-wrap:wrap; gap:6px; z-index:2; }
.insig{
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; background:#fff;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; border-radius:999px;
}
.insig svg{ width:12px; height:12px; stroke:var(--tinta); fill:none; stroke-width:1.5; }
.corazon{ position:absolute; top:6px; right:6px; z-index:3; width:40px; height:40px; display:grid; place-items:center; }
.corazon svg{ width:19px; height:19px; stroke:var(--tinta); stroke-width:1.2; fill:transparent; transition:fill .25s, transform .35s var(--ease); }
.corazon.on svg{ fill:var(--tinta); }
.corazon:active svg{ transform:scale(.85); }
.tj-datos{ padding:14px 14px 22px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.tj-marca{ font-weight:600; font-size:14px; }
.tj-modelo{ font-size:13px; color:var(--tinta2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tj-colores{ display:flex; align-items:center; gap:6px; margin:6px 0 4px; min-height:16px; font-size:12px; color:var(--gris); }
.punto{ width:13px; height:13px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); flex:none; transition:transform .2s; }
.punto.on{ box-shadow:0 0 0 1px #fff, 0 0 0 2px var(--tinta); }
@media (hover:hover){ .punto:hover{ transform:scale(1.25); } }
.tj-precio{ font-size:14px; margin-top:4px; min-height:21px; }
.tj-precio small{ color:var(--gris); font-size:12px; }
.tj-eti{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--etiqueta); font-weight:600; margin-top:3px; min-height:16px; }
.tj.agotado .tj-foto img{ filter:grayscale(1); opacity:.6; }
.skel{ background:linear-gradient(90deg,var(--tile) 0%,#efefee 40%,var(--tile) 80%); background-size:200% 100%; animation:skel 1.4s linear infinite; }
@keyframes skel{ to{ background-position:-200% 0; } }
@media (max-width:820px){
  .tj-datos{ padding:10px 10px 18px; }
  .tj-marca{ font-size:13px; }
  .tj-modelo{ font-size:12.5px; }
  .tj-precio{ font-size:13.5px; }
  .tj-sup{ top:8px; left:8px; }
  .insig{ height:20px; font-size:9.5px; padding:0 7px; }
}

/* ---------- categorías grandes (sol / receta) ---------- */
.dos{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cat{ position:relative; background:var(--tile); aspect-ratio:5/4; overflow:hidden; cursor:pointer; display:block; }
.cat .cat-fotos{ position:absolute; inset:0 0 120px; display:grid; place-items:center; }
.cat .cat-fotos img{ width:70%; mix-blend-mode:multiply; transition:transform 1.4s var(--ease); }
.cat:hover .cat-fotos img{ transform:scale(1.05) rotate(-1deg); }
.cat .cat-texto{ position:absolute; left:32px; bottom:28px; right:32px; }
.cat .cat-texto p{ margin:6px 0 14px; color:var(--gris); }
.cat.oscura{ background:#1a1a1a; color:#fff; }
.cat.oscura .cat-fotos img{ mix-blend-mode:normal; filter:none; }
.cat.oscura .cat-texto p{ color:#bbb; }
@media (max-width:820px){
  .dos{ grid-template-columns:1fr; gap:4px; }
  .cat{ aspect-ratio:1/1; }
  .cat .cat-texto{ left:20px; bottom:20px; }
  .cat.oscura{ aspect-ratio:auto; display:flex; flex-direction:column; background:var(--calido); }
  .cat.oscura .cat-video{ position:relative; inset:auto; aspect-ratio:1/1; height:auto; width:100%; }
  .cat.oscura .cat-texto{ position:relative; left:auto !important; right:auto; bottom:auto; max-width:none !important; padding:22px var(--pad) 26px !important; }
}

/* por estilo */
.estilos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.estilo{ background:var(--tile); cursor:pointer; display:flex; flex-direction:column; overflow:hidden; }
.estilo .est-f{ aspect-ratio:4/3; display:grid; place-items:center; }
.estilo img{ width:78%; mix-blend-mode:multiply; transition:transform 1.1s var(--ease); }
.estilo:hover img{ transform:translateY(-6px) scale(1.03); }
.estilo .est-t{ padding:0 18px 18px; display:flex; justify-content:space-between; align-items:baseline; }
.estilo .est-t span{ font-size:12px; color:var(--gris); }
@media (max-width:820px){ .estilos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; } .estilo .est-t{ padding:0 12px 14px; } .estilo .est-t .t-m{ font-size:21px; } }

/* clips: "En movimiento" */
.clips-sec{ background:#0f0f0f; color:#fff; margin-top:84px; padding:72px 0 64px; }
.clips-sec .sec-cab{ padding:0 var(--pad); }
.clips-sec .sec-cab p{ color:#a8a8a8; }
.clips-sec .flecha{ box-shadow:inset 0 0 0 1px #555; }
.clips-sec .flecha svg{ stroke:#fff; }
.clips-sec .flecha:hover{ box-shadow:inset 0 0 0 1px #fff; }
.reels{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2 * var(--pad) - 3 * 10px) / 4); gap:10px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:0 var(--pad); scroll-padding:0 var(--pad);
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.reels::-webkit-scrollbar{ display:none; }
.reel{ scroll-snap-align:start; position:relative; aspect-ratio:1/1; background:#2a2826; overflow:hidden; cursor:pointer; }
.reel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.0) 60%,rgba(0,0,0,.55)); }
.reel-t{ position:absolute; left:14px; right:14px; bottom:14px; z-index:2; }
.reel-t b{ display:block; font-weight:600; font-size:13px; }
.reel-t span{ font-size:12px; color:#ddd; }
.reel-t .precio{ display:block; font-family:var(--serif); font-size:20px; margin-top:4px; color:#fff; }
.reel .play{ position:absolute; top:12px; left:12px; z-index:2; height:22px; padding:0 9px; border-radius:999px; background:#fff; color:var(--tinta); display:grid; place-items:center; font-size:10.5px; letter-spacing:.08em; font-weight:500; }
@media (max-width:1100px){ .reels{ grid-auto-columns:calc((100% - 2 * var(--pad) - 2 * 10px) / 3); } }
@media (max-width:820px){ .reels{ grid-auto-columns:78%; gap:6px; } .clips-sec{ padding:52px 0 48px; margin-top:56px; } }

/* 360 en la portada */
.giro-sec{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--pad); align-items:center; padding:84px var(--pad) 0; }
.giro-sec .giro-caja{ aspect-ratio:1/1; background:var(--calido); position:relative; }
.giro-sec .giro-texto p{ color:var(--tinta2); font-size:15px; max-width:40ch; margin:16px 0 26px; }
.giro-sec .giro-datos{ display:flex; gap:28px; margin:0 0 28px; padding:0; list-style:none; }
.giro-sec .giro-datos li b{ display:block; font-family:var(--serif); font-weight:300; font-size:38px; line-height:1; }
.giro-sec .giro-datos li span{ font-size:12px; color:var(--gris); }
@media (max-width:820px){ .giro-sec{ grid-template-columns:1fr; padding-top:56px; } .giro-sec .giro-caja{ margin:0 calc(-1 * var(--pad)); } }

/* local */
.local{ display:grid; grid-template-columns:1.1fr 1fr; margin-top:84px; background:var(--tile); }
.local-foto{ position:relative; overflow:hidden; min-height:420px; }
.local-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.local-texto{ padding:64px var(--pad); align-self:center; }
.local-texto p{ color:var(--tinta2); font-size:15px; max-width:42ch; margin:16px 0 28px; }
.local-texto .acc{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:820px){ .local{ grid-template-columns:1fr; margin-top:56px; } .local-foto{ min-height:0; aspect-ratio:4/3; } .local-texto{ padding:34px var(--pad) 40px; } }

/* beneficios */
.benef{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); margin:84px var(--pad) 0; }
.benef > div > div{ display:block; padding:0; border:0; }
.benef > div{ padding:30px 26px; display:flex; gap:16px; align-items:flex-start; }
.benef > div + div{ border-left:1px solid var(--linea); }
.benef svg{ width:28px; height:28px; stroke:var(--tinta); stroke-width:1.1; fill:none; flex:none; }
.benef b{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin-bottom:3px; }
.benef span{ font-size:13px; color:var(--gris); }
@media (max-width:820px){
  .benef{ grid-template-columns:1fr 1fr; margin-top:56px; }
  .benef > div{ padding:22px 12px; flex-direction:column; gap:10px; }
  .benef > div:nth-child(3){ border-left:0; }
  .benef > div:nth-child(n+3){ border-top:1px solid var(--linea); }
}

/* ---------- pie ---------- */
.pie{ margin-top:84px; border-top:1px solid var(--linea); }
.pie-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--pad); padding:56px var(--pad) 48px; }
.pie h5{ margin:0 0 18px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:13px; color:var(--tinta2); }
.pie ul a:hover, .pie ul button:hover{ text-decoration:underline; text-underline-offset:3px; }
.pie .logo{ display:inline-flex; }
.pie-marca p{ color:var(--tinta2); font-size:13px; max-width:34ch; margin:14px 0 20px; }
.pie-abajo{ background:#000; color:#bdbdbd; font-size:12px; padding:18px var(--pad); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pie details{ border-bottom:1px solid var(--linea); }
.pie summary{ list-style:none; }
@media (max-width:820px){
  .pie{ margin-top:56px; }
  .pie-cols{ grid-template-columns:1fr; gap:0; padding:28px var(--pad) 26px; }
  .pie-cols > div:not(.pie-marca){ border-top:1px solid var(--linea); padding:20px 0; }
  .pie-marca{ padding-bottom:22px; }
}

/* ---------- CATÁLOGO ---------- */
.cat-cab{ padding:42px var(--pad) 22px; }
.migas{ font-size:12px; color:var(--gris); margin-bottom:18px; }
.migas a:hover{ text-decoration:underline; }
.cat-cab .fila{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.cat-cab .cuenta{ font-size:13px; color:var(--gris); }
.barra-f{
  position:sticky; top:var(--cab); z-index:40; background:#fff; display:flex; align-items:center; gap:10px;
  padding:12px var(--pad); border-bottom:1px solid var(--linea); transition:top .45s var(--ease);
}
.barra-f.arriba{ top:0; }
.barra-f .filtrar{ display:inline-flex; align-items:center; gap:10px; height:36px; font-weight:500; font-size:13.5px; padding-right:14px; flex:none; }
.barra-f .filtrar svg{ width:18px; height:18px; stroke:var(--tinta); fill:none; stroke-width:1.3; }
.barra-f .filtrar .n{ background:var(--tinta); color:#fff; border-radius:9px; font-size:10.5px; min-width:18px; height:18px; display:inline-grid; place-items:center; padding:0 5px; }
.barra-f .filtrar .n:empty{ display:none; }
.rapidos{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; padding:2px 1px; }
.rapidos::-webkit-scrollbar{ display:none; }
.orden{ display:flex; align-items:center; gap:8px; font-size:13px; flex:none; }
.orden select{ border:0; font:inherit; font-weight:500; background:transparent; color:var(--tinta); padding:4px 2px; cursor:pointer; -webkit-appearance:none; appearance:none; }
.orden .flechita{ width:10px; height:10px; stroke:var(--tinta); fill:none; stroke-width:1.5; }
@media (max-width:820px){
  .cat-cab{ padding:26px var(--pad) 16px; }
  .orden .lbl{ display:none; }
  .barra-f{ padding:10px var(--pad); gap:8px; }
  .barra-f .filtrar{ padding-right:4px; }
  .barra-f .filtrar .txt-l{ display:none; }
  .orden{ display:none; }
}
.activos{ display:flex; gap:8px; flex-wrap:wrap; padding:14px var(--pad) 0; }
.activos:empty{ display:none; }
.activos .chip{ height:30px; font-size:12.5px; background:var(--tile); box-shadow:none; }
.activos .chip svg{ width:10px; height:10px; }
.activos .borrar{ font-size:12px; text-decoration:underline; text-underline-offset:3px; padding:0 6px; height:30px; }
.grilla{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:#fff; margin-top:14px; }
@media (min-width:1600px){ .grilla{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:1100px){ .grilla{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .grilla{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.grilla .tj{ opacity:0; transform:translateY(16px); animation:tj .8s var(--ease) forwards; }
@keyframes tj{ to{ opacity:1; transform:none; } }
.pie, .vista > .mas{ overflow-anchor:none; }
.mas{ overflow-anchor:none; display:flex; flex-direction:column; align-items:center; gap:16px; padding:46px var(--pad) 0; }
.mas .prog{ width:200px; height:1px; background:var(--linea); position:relative; }
.mas .prog b{ position:absolute; left:0; top:-1px; height:3px; background:var(--tinta); }
.mas small{ color:var(--gris); }
.nada{ padding:70px var(--pad); text-align:center; }
.nada p{ color:var(--gris); margin:10px 0 24px; }
.editorial{ grid-column:span 2; background:var(--calido); position:relative; overflow:hidden; cursor:pointer; min-height:100%; }
.editorial .ed-t{ position:absolute; left:24px; bottom:22px; right:24px; background:#fff; padding:18px 20px; max-width:340px; }
.editorial .ed-t p{ margin:6px 0 10px; color:var(--gris); font-size:13px; }
@media (max-width:820px){ .editorial{ grid-column:span 2; aspect-ratio:4/5; min-height:0; } .editorial .ed-t{ left:12px; right:12px; bottom:12px; } }

/* cajón de filtros */
.f-acc{ border-bottom:1px solid var(--linea); }
.f-acc > button{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 24px; font-size:15px; text-align:left; }
.f-acc > button em{ font-style:normal; font-size:12px; color:var(--gris); margin-left:8px; }
.f-acc > button svg{ width:12px; height:12px; stroke:var(--tinta); fill:none; stroke-width:1.4; transition:transform .35s var(--ease); flex:none; }
.f-acc.on > button svg{ transform:rotate(180deg); }
.f-cuerpo{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.f-acc.on .f-cuerpo{ grid-template-rows:1fr; }
.f-cuerpo > div{ overflow:hidden; }
.f-ops{ display:flex; flex-wrap:wrap; gap:8px; padding:0 24px 22px; }
.f-ops .chip .c{ color:var(--gris); font-size:11px; }
.f-ops .chip.on .c{ color:#bbb; }
.f-ops .chip:disabled{ opacity:.35; cursor:default; }
.sw{ width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); flex:none; }
.chip.on .sw{ box-shadow:0 0 0 1px #fff; }
.f-marcas{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 24px 22px; }
.f-marca{ height:62px; background:var(--tile); display:grid; place-items:center; padding:0 16%; position:relative; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .2s; }
.f-marca img{ max-height:26px; width:auto; max-width:100%; filter:grayscale(1); }
.f-marca.on{ box-shadow:inset 0 0 0 1px var(--tinta); background:#fff; }
.f-marca .c{ position:absolute; right:7px; bottom:4px; font-size:10.5px; color:var(--gris); }
.f-disp{ display:flex; gap:8px; padding:20px 24px; border-bottom:1px solid var(--linea); align-items:center; justify-content:space-between; }
.interruptor{ width:42px; height:24px; border-radius:12px; background:#cfcfcf; position:relative; transition:background .3s; flex:none; }
.interruptor::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .35s var(--ease); }
.interruptor.on{ background:var(--tinta); }
.interruptor.on::after{ transform:translateX(18px); }
.f-orden{ padding:20px 24px; border-bottom:1px solid var(--linea); }
.f-orden .f-ops{ padding:12px 0 0; }
.f-tit{ font-size:15px; font-weight:400; }   /* Mostrar y Ordenar por, con la letra de Tipo y Marca */
.cajon-pie{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--linea); background:#fff; }
.cajon-pie .borrar{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; font-weight:500; }
.cajon-pie .pastilla{ flex:1; max-width:250px; }

/* ---------- FICHA ---------- */
.ficha{
  position:fixed; inset:0; z-index:70; background:#fff; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(24px);
  transition:opacity .45s var(--ease), transform .6s var(--ease), visibility .45s;
  -webkit-overflow-scrolling:touch;
}
.ficha.on{ opacity:1; visibility:visible; transform:none; }
.fi-barra{
  position:sticky; top:0; z-index:5; height:var(--cab); background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 calc(var(--pad) - 8px);
  border-bottom:1px solid var(--linea);
}
.fi-barra .volver{ display:flex; align-items:center; gap:8px; font-size:13px; height:40px; padding:0 8px; justify-self:start; }
.fi-barra .volver svg{ width:18px; height:18px; stroke:var(--tinta); fill:none; stroke-width:1.3; }
.fi-barra .x{ justify-self:end; }
.fi-der{ justify-self:end; display:flex; align-items:center; }
.fi{ display:grid; grid-template-columns:minmax(0,1fr) 440px; align-items:start; }
.fi-galeria{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#fff; }
.fm{ background:var(--tile); aspect-ratio:1/1; position:relative; overflow:hidden; }
.fm.ancho{ grid-column:span 2; aspect-ratio:16/10; }
.fm img.foto{ position:absolute; inset:0; margin:auto; width:82%; height:82%; object-fit:contain; mix-blend-mode:multiply; cursor:zoom-in; transition:transform .25s ease-out; }
.fm.medidas img.foto{ width:92%; height:92%; mix-blend-mode:multiply; }
.fm .rot{ position:absolute; left:16px; bottom:14px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta2); z-index:2; display:flex; gap:7px; align-items:center; }
.fm .rot svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.4; }

/* visor 360 */
.giro{ position:absolute; inset:0; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; background:var(--calido); }
.giro.arrastrando{ cursor:grabbing; }
.giro img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.fm.ancho .giro img{ object-fit:cover; object-position:50% 52%; }
.giro-carga{ position:absolute; left:0; bottom:0; height:2px; background:var(--tinta); width:0; transition:width .3s, opacity .5s; z-index:2; }
.giro-ayuda{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:10px;
  background:#fff; padding:8px 16px 8px 12px; border-radius:999px; font-size:12px; white-space:nowrap; transition:opacity .5s, transform .5s var(--ease);
  box-shadow:0 6px 20px -10px rgba(0,0,0,.3);
}
/* el aviso se esconde solo mientras la 360 da la vuelta sola; al arrastrar queda visible (pedido de Gaby) */
.giro.girando .giro-ayuda{ opacity:0; transform:translate(-50%,8px); }
.giro-ayuda svg{ width:18px; height:18px; stroke:var(--tinta); fill:none; stroke-width:1.3; }
.giro-ayuda .mano{ animation:mano 2.2s var(--ease) infinite; }
@keyframes mano{ 0%,100%{ transform:translateX(-4px); } 50%{ transform:translateX(4px); } }
.giro-sello{ position:absolute; top:14px; left:14px; z-index:3; font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:#fff; border-radius:999px; padding:4px 10px; font-weight:500; }
.giro-escala{ position:absolute; left:50%; bottom:64px; transform:translateX(-50%); width:120px; height:2px; background:rgba(0,0,0,.12); z-index:3; }
.giro-escala b{ position:absolute; top:-2px; width:12px; height:6px; background:var(--tinta); border-radius:3px; left:0; }

.fi-panel{ position:sticky; top:var(--cab); padding:34px 40px 40px; max-height:none; }
.fi-precio{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.fi-precio .p{ font-size:22px; font-weight:500; }
.fi-precio .cuo{ font-size:13px; color:var(--tinta2); margin-top:2px; }
.fi-precio .corazon{ position:static; margin:-8px -10px 0 0; }
.fi-marca{ font-family:var(--serif); font-weight:300; font-size:38px; line-height:1.05; margin:22px 0 2px; letter-spacing:-.01em; }
.fi-modelo{ font-size:13px; color:var(--gris); text-transform:uppercase; letter-spacing:.04em; }
.fi-estado{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin:10px 0 18px; display:flex; align-items:center; gap:7px; min-height:17px; }
.fi-estado i{ width:7px; height:7px; border-radius:50%; background:var(--etiqueta); }
.fi-estado.no i{ background:#c9a227; }
.fi-atr{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px; margin-bottom:18px; }
.fi-atr dt{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); padding-top:2px; }
.fi-atr dd{ margin:0; }
.ir-medidas{ font:inherit; color:inherit; text-align:left; padding:0; display:inline-flex; flex-wrap:wrap; gap:0 8px; align-items:baseline; min-height:28px; }
.ir-medidas span{ font-size:12px; color:var(--tinta); text-decoration:underline; text-underline-offset:3px; }
#acc-medidas{ scroll-margin-top:calc(var(--cab) + 4px); }
.fi-colores{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px; }
.fi-color{ aspect-ratio:1/1; background:var(--tile); position:relative; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .2s; }
.fi-color img{ position:absolute; inset:0; margin:auto; width:84%; height:84%; object-fit:contain; mix-blend-mode:multiply; }
.fi-color.on{ box-shadow:inset 0 0 0 1px var(--tinta); }
.fi-color:hover{ box-shadow:inset 0 0 0 1px #999; }
.fi-color.on:hover{ box-shadow:inset 0 0 0 1px var(--tinta); }
.fi-color.sin img{ filter:grayscale(1); opacity:.45; }
.fi-color.sin::after{ content:""; position:absolute; left:10%; right:10%; top:50%; height:1px; background:#999; transform:rotate(-20deg); }
.fi-nota{ font-size:12px; color:var(--gris); margin-bottom:20px; }
.fi-talles{ display:flex; gap:8px; margin:0 0 20px; flex-wrap:wrap; }
.fi-talles .chip{ height:38px; padding:0 18px; }
.fi-ops{ display:grid; gap:8px; margin:6px 0 14px; }
.fi-op{ display:grid; grid-template-columns:18px 1fr auto; gap:12px; align-items:center; padding:14px 16px; box-shadow:inset 0 0 0 1px var(--linea); text-align:left; transition:box-shadow .2s; }
.fi-op .r{ width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px #999; position:relative; }
.fi-op.on{ box-shadow:inset 0 0 0 1px var(--tinta); }
.fi-op.on .r::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--tinta); }
.fi-op b{ font-weight:500; font-size:14px; display:block; }
.fi-op small{ font-size:12px; color:var(--gris); }
.fi-op .v{ font-size:14px; font-weight:500; }
.fi-cta{ display:grid; gap:10px; margin-top:6px; }
.fi-cta .pastilla{ width:100%; height:52px; }
.fi-aclara{ font-size:12px; color:var(--gris); margin:10px 0 0; text-align:center; }
.fi-servicios{ display:grid; gap:16px; margin:28px 0 8px; padding:22px 0 0; border-top:1px solid var(--linea); }
.fi-servicios > div{ display:grid; grid-template-columns:26px 1fr; gap:12px; font-size:13px; }
.fi-servicios svg{ width:24px; height:24px; stroke:var(--tinta); stroke-width:1.1; fill:none; }
.fi-servicios b{ display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.fi-servicios span{ color:var(--ok); }
.fi-acc-z{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) 440px; }
.fi-accs{ background:var(--tile); }
.fi-acc{ border-bottom:1px solid #fff; }
.fi-acc > button{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:26px 40px; text-align:left; }
.fi-acc > button .t-m{ font-size:26px; font-weight:300; }
.fi-acc > button svg{ width:14px; height:14px; stroke:var(--tinta); fill:none; stroke-width:1.3; transition:transform .4s var(--ease); flex:none; }
.fi-acc.on > button svg{ transform:rotate(180deg); }
.fi-acc .f-cuerpo > div > div{ padding:0 40px 30px; }
.fi-acc.on .f-cuerpo{ grid-template-rows:1fr; }
.tabla{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tabla th, .tabla td{ text-align:left; padding:10px 0; border-bottom:1px solid #e4e4e2; vertical-align:top; }
.tabla th{ font-weight:400; color:var(--gris); width:46%; padding-right:12px; }
.fi-medidas{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
.fi-medidas img{ mix-blend-mode:multiply; width:100%; }
.fi-medidas .nums{ display:flex; gap:22px; }
.fi-medidas .nums b{ display:block; font-family:var(--serif); font-size:34px; font-weight:300; line-height:1; }
.fi-medidas .nums span{ font-size:11px; color:var(--gris); text-transform:uppercase; letter-spacing:.1em; }
.med-dibujo{ width:100%; max-width:380px; overflow:visible; }
.med-dibujo .aro{ fill:none; stroke:var(--tinta); stroke-width:1.4; stroke-linecap:round; }
.med-dibujo .cota{ fill:none; stroke:var(--etiqueta); stroke-width:1; }
.med-dibujo text{ font-family:var(--sans); font-size:13px; fill:var(--etiqueta); text-anchor:middle; font-weight:600; }
.med-dibujo text.rotulo{ fill:var(--gris); text-anchor:start; font-weight:400; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
/* bloque de medidas: dibujo grande + referencias chicas abajo */
.med-bloque{ grid-column:1/-1; display:grid; gap:22px; max-width:560px; }
.med-bloque .med-dibujo{ max-width:none; }
.med-bloque .med-dibujo .cota{ stroke:var(--etiqueta); }
.med-bloque .med-dibujo text{ fill:var(--etiqueta); }
.med-bloque .med-dibujo text.rotulo{ fill:var(--gris); }
.med-bloque .med-dibujo text{ font-size:15px; }
.med-bloque .med-dibujo text.rotulo{ font-size:8.5px; }
.med-ref{ margin:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; border-top:1px solid var(--linea); padding-top:16px; }
.med-mini{ display:block; width:56px; height:auto; margin-bottom:8px; overflow:visible; fill:none; stroke:var(--tinta); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.med-mini .hi{ stroke:var(--etiqueta); stroke-width:2.6; }
.med-ref dt{ display:flex; align-items:baseline; flex-wrap:wrap; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; }
.med-ref dt b{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:0; color:var(--etiqueta); margin-left:6px; }
.med-ref dd{ margin:4px 0 0; font-size:12.5px; line-height:1.35; color:var(--tinta2); }
.med-tip{ grid-column:1/-1; font-size:13px; color:var(--gris); margin:4px 0 0; }
.fi-texto{ white-space:pre-line; font-size:13.5px; color:var(--tinta2); max-width:70ch; }
.fi-relac{ padding:64px 0 90px; }
.fi-relac .sec-cab{ padding:0 var(--pad); }
.fi-migas{ padding:20px var(--pad); font-size:12px; color:var(--gris); }
.fi-fija{
  position:fixed; left:0; right:0; bottom:0; z-index:75; background:#fff; border-top:1px solid var(--linea);
  display:flex; align-items:center; gap:18px; padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  transform:translateY(105%); transition:transform .5s var(--ease);
}
.fi-fija.on{ transform:none; }
.fi-fija img{ width:76px; height:44px; object-fit:contain; mix-blend-mode:multiply; background:var(--tile); }
.fi-fija .n{ font-family:var(--serif); font-size:22px; font-weight:300; }
.fi-fija .n small{ font-family:var(--sans); font-size:12px; color:var(--gris); margin-left:8px; }
.fi-fija .esp{ flex:1; }
.fi-fija .p{ font-size:16px; font-weight:500; }
.fi-fija .pastilla{ height:44px; }
.fi-movil-medios{ display:none; }

@media (max-width:1024px){
  .fi{ grid-template-columns:1fr; }
  .fi-acc-z{ grid-template-columns:1fr; }
  .fi-panel{ position:static; padding:22px var(--pad) 10px; }
  .fi-galeria{
    display:grid; grid-auto-flow:column; grid-auto-columns:100%; grid-template-columns:none; gap:0;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .fi-galeria::-webkit-scrollbar{ display:none; }
  .fm, .fm.ancho{ grid-column:auto; aspect-ratio:1/1; scroll-snap-align:start; scroll-snap-stop:always; }
    .fi-movil-medios{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px var(--pad) 0; }
  .fi-puntos{ display:flex; gap:6px; }
  .fi-puntos button{ width:22px; height:22px; display:grid; place-items:center; }
  .fi-puntos button i{ width:6px; height:6px; border-radius:50%; background:#cdcdcd; transition:background .3s, transform .3s; }
  .fi-puntos button.on i{ background:var(--tinta); transform:scale(1.2); }
  .fi-saltos{ display:flex; gap:6px; }
  .fi-movil-medios{ justify-content:center !important; }
  .fi-vistas{ display:flex; gap:8px; justify-content:center; }
  .fi-vistas .chip{ height:40px; min-width:84px; font-size:13px; padding:0 16px; justify-content:center; }
  .fi-vistas .chip svg{ width:16px; height:16px; margin-right:6px; fill:none; stroke:currentColor; stroke-width:1.3; }
  .fi-saltos .chip{ height:30px; font-size:12px; padding:0 12px; }
  .fi-marca{ font-size:32px; margin-top:14px; }
  .fi-acc > button{ padding:22px var(--pad); }
  .fi-acc > button .t-m{ font-size:22px; }
  .fi-acc .f-cuerpo > div > div{ padding:0 var(--pad) 24px; }
  .fi-fija{ gap:12px; }
  .fi-fija img{ display:none; }
  .fi-fija .n{ font-size:18px; }
  .fi-fija .n small{ display:block; margin:0; }
  .fi-fija .pastilla{ padding:0 20px; font-size:13.5px; }
  .fi-relac{ padding:44px 0 110px; }
  .fi-medidas{ grid-template-columns:1fr; }
}
@media (max-width:820px){ .fi-barra{ padding:0 8px; } }

/* zoom de foto */
.zoom{ position:fixed; inset:0; z-index:96; background:#fff; display:none; touch-action:none; }
.zoom.on{ display:block; }
.zoom img{ position:absolute; left:50%; top:50%; max-width:none; transform-origin:0 0; user-select:none; -webkit-user-drag:none; mix-blend-mode:multiply; }
.zoom .x{ position:absolute; top:12px; right:12px; z-index:2; background:#fff; border-radius:50%; }
.zoom-ayuda{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--gris); }

/* whatsapp flotante */
.wa-flot{
  position:fixed; right:18px; bottom:18px; z-index:45; width:52px; height:52px; border-radius:50%; background:#111; display:grid; place-items:center;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5); transition:transform .4s var(--ease), opacity .3s;
}
.wa-flot svg{ width:24px; height:24px; fill:#fff; }
.wa-flot:hover{ transform:scale(1.06); }
html.trabado .wa-flot{ opacity:0; pointer-events:none; }

.cursor-ver{
  position:fixed; z-index:200; left:0; top:0; width:84px; height:84px; border-radius:50%; background:#111; color:#fff;
  display:grid; place-items:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase; pointer-events:none;
  transform:translate(-50%,-50%) scale(0); transition:transform .35s var(--ease);
}
.cursor-ver.on{ transform:translate(-50%,-50%) scale(1); }
@media (hover:none){ .cursor-ver{ display:none; } }

/* las fotos de producto entran con un fundido, no de golpe */
.tj-foto img.a, .fi-color img, .estilo img, .cat-fotos img{ opacity:0; transition:opacity .6s, transform 1.1s var(--ease); }
.tj-foto img.a.ok, .fi-color img.ok, .estilo img.ok, .cat-fotos img.ok{ opacity:1; }
.tj.agotado .tj-foto img.a.ok{ opacity:.6; }

/* giro automático (reemplaza a los videos): sin interfaz, llena la caja */
.giro.giro-auto{ cursor:pointer; touch-action:auto; }
.giro.giro-auto img{ object-fit:cover; object-position:50% 50%; }
.hero-giro, .reel-giro, .ed-giro, .cat-video{ position:absolute; inset:0; }

/* ---- revisión QA ---- */
/* WhatsApp: ya no flota encima del contenido; va como ícono en la cabecera */
.ico-wa svg{ fill:var(--tinta); stroke:none; width:20px; height:20px; }
@media (max-width:1024px){ .cab-iconos{ gap:0; } }
@media (max-width:420px){ .logo span{ font-size:17px; } .logo{ gap:8px; } .cab{ padding:0 8px; } }
@media (max-width:359px){ .logo span{ font-size:15px; } }
/* áreas de toque de al menos ~40 px sin cambiar el dibujo */
.punto{ position:relative; }
.punto::after{ content:""; position:absolute; inset:-12px -4px; }
@media (max-width:820px){ .tj-colores{ gap:8px; } }
.aviso-rot button{ width:36px; height:32px; }
.migas a{ display:inline-block; padding:12px 6px 12px 0; margin:-12px 0; }
.cajon-pie .borrar{ padding:12px 4px; }
@media (max-width:1024px){ .fi-puntos button{ width:30px; height:40px; } }
/* aviso: versión corta en el celular */
.aviso-msj .c{ display:none; }
@media (max-width:820px){ .aviso-msj .l{ display:none; } .aviso-msj .c{ display:inline; } }
.aviso-msj span{ transition:transform .45s var(--ease), opacity .35s; }
/* búsqueda sin resultados con margen */
.busca-vacio{ padding:30px 0; }
@media (max-width:820px){ .busca-vacio{ padding:30px var(--pad); } }

/* en el celu la ficha ya marca la 360 con el botón negro de abajo: sin el sello "360°" sobre la foto */
@media (max-width:1024px){ #fi-galeria .giro-sello{ display:none; } }

/* nombre de la óptica junto al logo: sin serifa geométrica, en mayúsculas espaciadas como el anillo del logo (Jost ≈ Futura) */
.logo span{ font-family:"Jost", "Futura", "Century Gothic", var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.16em; font-size:15px; }
@media (max-width:1024px){ .logo span{ font-size:13.5px; letter-spacing:.14em; } }
@media (max-width:420px){ .logo span{ font-size:12.5px; letter-spacing:.12em; } }
@media (max-width:370px){ .cab .logo span, .logo span{ font-size:11.5px; letter-spacing:.1em; } }
/* centrado óptico: las mayúsculas de Jost quedaban 1 px más arriba que el isologo y los íconos */
.logo span{ position:relative; top:1px; }

/* barra de compra fija (como la referencia de Gaby): siempre visible con la ficha abierta, fondo sólido */
.fi-fija{ padding:0; gap:0; align-items:stretch; height:calc(72px + env(safe-area-inset-bottom, 0px)); }
.ff-precio{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad) env(safe-area-inset-bottom, 0px); }
.ff-precio b{ font-size:24px; font-weight:500; letter-spacing:-.01em; line-height:1.1; font-variant-numeric:tabular-nums; }
.ff-precio b.chico{ font-size:17px; }
.ff-precio span{ font-size:12px; color:var(--gris); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ff-cta{ flex:0 0 40%; max-width:320px; display:grid; place-items:center; background:var(--tinta); color:#fff; font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding-bottom:env(safe-area-inset-bottom, 0px); transition:background .3s; }
.ff-cta:hover{ background:#333; }
.ff-cta:focus-visible{ outline:2px solid var(--etiqueta); outline-offset:-4px; }
#ficha-cont{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }

/* corazón de favoritos en la esquina superior derecha de la foto de la ficha */
.fi-gal-caja{ position:relative; }
.fi-gal-caja > .corazon{ top:10px; right:6px; z-index:6; width:44px; height:44px; }
.fi-gal-caja > .corazon svg{ width:22px; height:22px; }

/* cabecera de la ficha: marca grande, modelo abajo; datos en renglones con línea (valor a la izquierda) */
.fc .fi-precio{ display:none; }
.fc-marca{ font-family:var(--sans); font-weight:700; font-size:34px; line-height:1; letter-spacing:.01em; text-transform:uppercase; margin:0; }
.fc-modelo{ font-family:var(--sans); font-size:19px; font-weight:400; margin-top:8px; letter-spacing:.02em; }
.fc-tipo{ margin:0 0 10px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta2); }
.fc .fi-estado{ margin:16px 0 18px; }
.fc .fi-atr{ grid-template-columns:auto minmax(0,1fr); gap:0; align-items:baseline; border-top:1px solid var(--linea); }
.fc .fi-atr dt, .fc .fi-atr dd{ padding:12px 0; border-bottom:1px solid var(--linea); align-self:stretch; display:flex; align-items:center; }
.fc .fi-atr dt{ padding-right:22px; }

/* portada con una foto de campaña entera */
.hero-foto{ display:block; position:relative; overflow:hidden; height:100%; min-height:520px; background:var(--calido); }
.hero-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; transform:scale(1.06); transition:transform 2.6s var(--ease); }
.hero.listo .hero-foto img{ transform:scale(1); }
.hero-foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 65%,rgba(0,0,0,.25)); pointer-events:none; }
.hero-foto .rotulo{ position:absolute; left:22px; bottom:20px; color:#fff; z-index:2; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:0; transform:translateY(10px); transition:opacity .8s .9s, transform .8s .9s var(--ease); }
.hero.listo .hero-foto .rotulo{ opacity:1; transform:none; }
.hero-clips:has(.hero-foto){ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.hero-foto-2 img{ object-position:center 22%; transition-delay:.15s; }
@media (max-width:820px){
  .hero-clips:has(.hero-foto){ display:block; aspect-ratio:4/5; }
  .hero-foto-2{ display:none; }
  .hero-foto{ min-height:0; position:absolute; inset:0; }
  .hero-foto .rotulo{ left:var(--pad); bottom:22px; }
}

/* apertura de marca arriba del catálogo */
.apertura{ display:grid; grid-template-columns:1fr 1fr; background:var(--tile); min-height:min(560px, 62vh); }
.ap-foto{ position:relative; overflow:hidden; min-height:420px; }
.ap-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:apEntra 1.6s var(--ease) both; }
@keyframes apEntra{ from{ transform:scale(1.06); opacity:.4; } to{ transform:none; opacity:1; } }
.ap-texto{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:18px; padding:48px clamp(32px, 6vw, 96px); }
.ap-logo{ height:42px; width:auto; max-width:240px; object-fit:contain; object-position:left; mix-blend-mode:multiply; }
.ap-texto p{ margin:0; font-size:17px; line-height:1.45; color:var(--tinta2); max-width:32ch; }
@media (max-width:820px){
  .apertura{ grid-template-columns:1fr; min-height:0; }
  .ap-foto{ min-height:0; aspect-ratio:4/5; }
  .ap-texto{ padding:22px var(--pad) 26px; gap:12px; }
  .ap-logo{ height:28px; }
  .ap-texto p{ font-size:15px; }
}

/* selector 360 / Perfil / Frente en el celu (elegido por Gaby): texto con número chico, la elegida subrayada */
.fi-vistas .vs-n, .fi-vistas .vs-punto{ display:none; }
@media (max-width:1024px){
  .vs-lineas .fi-vistas{ gap:26px; }
  .vs-lineas .chip{ background:none; border:0; box-shadow:none; border-radius:0; height:40px; min-width:0; padding:0; color:var(--gris); font-size:14px; position:relative; }
  .vs-lineas .chip svg{ display:none; }
  .vs-lineas .chip{ gap:3px; }
  .vs-lineas .chip .vs-n{ display:inline; font-size:9px; vertical-align:super; align-self:flex-start; margin-top:9px; }
  .vs-lineas .chip::after{ content:""; position:absolute; left:0; right:0; bottom:6px; height:1.5px; background:var(--tinta); transform:scaleX(0); transition:transform .4s var(--ease); }
  .vs-lineas .chip.on{ color:var(--tinta); background:none; }
  .vs-lineas .chip.on::after{ transform:scaleX(1); }
}
/* marca con el modelo al lado, más finito */
.fc-linea{ margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 12px; }
.fc-linea .fc-marca{ margin:0; }
.fc-modelo-fino{ font-family:var(--sans); font-weight:300; text-transform:uppercase; letter-spacing:.01em; }

/* "Los más elegidos": en lugar del botón, dos accesos mínimos a los más vendidos de sol y de receta */
.acc-min{ gap:34px !important; }
.acc-min a{ display:inline-flex; align-items:center; gap:10px; min-height:40px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
.acc-min svg{ width:16px; height:16px; fill:none; stroke:var(--tinta); stroke-width:1.3; transform:rotate(180deg); transition:transform .4s var(--ease); }
.acc-min a:hover svg{ transform:rotate(180deg) translateX(-4px); }

/* "Los más elegidos" sobre fondo negro (pedido de Gaby) */
.hero{ background:var(--tinta); }
.hero-texto, .hero-texto h1{ color:#fff; }
.hero-texto .sobre, .hero-texto p{ color:rgba(255,255,255,.72); }
.acc-min a{ color:#fff; }
.acc-min svg{ stroke:#fff; }
@media (max-width:820px){ .hero-texto{ align-self:stretch; } }

/* selector en el celu (elegido por Gaby): solo rayitas, sin palabras; la elegida en negro */
@media (max-width:1024px){
  .vs-rayas .fi-vistas{ gap:6px; }
  .vs-rayas .chip{ width:44px; min-width:0; height:40px; padding:0; justify-content:center; }
  .vs-rayas .chip .vs-nom, .vs-rayas .chip .vs-n{ display:none !important; }
  .vs-rayas .chip::after{ left:4px; right:4px; bottom:auto; top:50%; height:2px; background:#d4d4d4; transform:none; }
  .vs-rayas .chip.on::after{ background:var(--tinta); }
}
/* la rayita de la 360 igual a las de abajo: mismo largo total (3 rayas = 136 px) y mismo grosor (2 px) */
.giro-escala{ width:136px; height:2px; background:rgba(0,0,0,.16); }
.giro-escala b{ top:0; width:36px; height:2px; border-radius:0; background:var(--tinta); }

/* aviso de la 360: solo texto, mismo largo que la rayita */
.giro-ayuda.ay-texto{ background:none; box-shadow:none; padding:0; bottom:40px; }
.giro-ayuda.ay-texto svg{ display:block; overflow:visible; width:136px; height:12px; stroke:none; }
.ay-texto text{ font-family:var(--sans); font-size:9px; font-weight:500; fill:var(--tinta); }
.ay-texto .ay-fl{ font-size:14px; font-weight:400; animation:ayFl 2s var(--ease) infinite; }
.ay-texto .ay-fl2{ animation-name:ayFl2; }
@keyframes ayFl{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-3px); } }
@keyframes ayFl2{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }
@media (prefers-reduced-motion:reduce){ .ay-texto .ay-fl{ animation:none; } }
/* "Medidas … mm" lleva una flechita hacia abajo (al diagrama) en lugar de "Ver" */
.ir-medidas{ align-items:center; }
.ir-medidas svg{ width:15px; height:15px; fill:none; stroke:var(--tinta); stroke-width:1.4; transform:rotate(-90deg); transition:transform .35s var(--ease); }
.ir-medidas:hover svg{ transform:rotate(-90deg) translateX(-3px); }
/* video de campaña en la apertura de marca: tapa la foto apenas arranca */
.ap-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s; }
.ap-video.listo{ opacity:1; }
/* video de campaña en la portada del celu (sobre la foto de la pareja) */
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; opacity:0; transition:opacity .8s; }
.hero-video.listo{ opacity:1; }

/* PRUEBA: títulos sin serifa (?tit=1 Jost liviana · 2 Archivo liviana · 3 Schibsted Grotesk) */
.tit-1{ --serif:"Jost", "Futura", var(--sans); }
.tit-1 .t-xl, .tit-1 .t-l, .tit-1 .t-m{ font-weight:300; letter-spacing:-.01em; }
.tit-2{ --serif:"Archivo", var(--sans); }
.tit-2 .t-xl, .tit-2 .t-l, .tit-2 .t-m{ font-weight:300; letter-spacing:-.035em; }
.tit-3{ --serif:"Schibsted Grotesk", var(--sans); }
.tit-3 .t-xl, .tit-3 .t-l, .tit-3 .t-m{ font-weight:400; letter-spacing:-.035em; }
.tit-4{ --serif:"Outfit", var(--sans); }
.tit-4 .t-xl, .tit-4 .t-l, .tit-4 .t-m{ font-weight:300; letter-spacing:-.02em; }
.tit-5{ --serif:"Bricolage Grotesque", var(--sans); }
.tit-5 .t-xl, .tit-5 .t-l, .tit-5 .t-m{ font-weight:300; letter-spacing:-.03em; }
.tit-6{ --serif:"Hanken Grotesk", var(--sans); }
.tit-6 .t-xl, .tit-6 .t-l, .tit-6 .t-m{ font-weight:300; letter-spacing:-.03em; }
.tit-7{ --serif:"Syne", var(--sans); }
.tit-7 .t-xl, .tit-7 .t-l, .tit-7 .t-m{ font-weight:500; letter-spacing:-.02em; }
.tit-8{ --serif:"Unbounded", var(--sans); }
.tit-8 .t-xl, .tit-8 .t-l, .tit-8 .t-m{ font-weight:300; letter-spacing:-.03em; font-size-adjust:none; }
.tit-8 .t-xl{ font-size:clamp(34px,4.6vw,68px); }
.tit-9{ --serif:"Archivo", var(--sans); }
.tit-9 .t-xl, .tit-9 .t-l, .tit-9 .t-m{ font-weight:300; font-stretch:125%; font-variation-settings:"wdth" 125; letter-spacing:-.02em; }
.tit-10{ --serif:"Darker Grotesque", var(--sans); }
.tit-10 .t-xl, .tit-10 .t-l, .tit-10 .t-m{ font-weight:400; letter-spacing:-.01em; line-height:.9; }
.tit-10 .t-xl{ font-size:clamp(54px,7vw,104px); }
/* portada en la compu: las fotos de cada lugar se turnan con fundido y un zoom lento */
.hero .hero-foto img.hf-img, .hero.listo .hero-foto img.hf-img{ opacity:0; transform:scale(1.08); transition:opacity 1.4s ease, transform 7s linear; }
.hero .hero-foto img.hf-img.on, .hero.listo .hero-foto img.hf-img.on{ opacity:1; transform:scale(1); }

/* títulos en Syne (elegida por Gaby); la cola de la "g" es larga: más aire abajo en las líneas que se recortan */
:root{ --serif:"Syne", "Archivo", "Helvetica Neue", Arial, sans-serif; }
.t-xl, .t-l, .t-m, .serif{ font-weight:500; letter-spacing:-.02em; }
.t-xl{ line-height:1.02; }
.hero-texto .linea{ padding-bottom:.2em; margin-bottom:-.14em; }
.cajon-cab h3, .fi-acc > button .t-m{ font-weight:500; }
/* menú sin la palabra "Menú" arriba (queda para lectores de pantalla); la X sigue a la derecha */
.solo-lector{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cab-sin-titulo{ justify-content:flex-end; }

/* "Nuestras marcas": piezas de las variantes (ocultas por defecto) */
.marca-t .mt-n, .marca-t .mt-f{ display:none; }
/* 1 · grilla blanca con líneas finas */
.marcas.mo1{ gap:0; border-top:1px solid var(--linea); border-left:1px solid var(--linea); }
.mo1 .marca-t{ background:#fff; border-right:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.mo1 .marca-t.todo{ background:#fff; }
.mo1 .marca-t img{ filter:grayscale(1); opacity:1; }
/* 2 · una fila que se desliza, logos sueltos separados por rayitas */
.marcas.mo2{ display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(-1 * var(--pad)); padding:0 var(--pad); scrollbar-width:none; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.marcas.mo2::-webkit-scrollbar{ display:none; }
.mo2 .marca-t{ flex:0 0 42%; background:none; scroll-snap-align:start; height:96px; }
.mo2 .marca-t + .marca-t{ border-left:1px solid var(--linea); }
.mo2 .marca-t.todo{ background:none; flex-basis:32%; }
@media (min-width:821px){ .mo2 .marca-t{ flex-basis:18%; height:120px; } }
/* 3 · índice: logo, cantidad de modelos y flechita, en renglones */
.marcas.mo3{ display:block; border-top:1px solid var(--linea); }
.mo3 .marca-t{ display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:12px; height:68px; padding:0 4px; background:none; border-bottom:1px solid var(--linea); }
.mo3 .marca-t img{ justify-self:start; }
.mo3 .marca-t .mt-n{ display:block; font-size:12px; color:var(--gris); justify-self:end; letter-spacing:.04em; }
.mo3 .marca-t .mt-f{ display:block; width:15px; height:15px; fill:none; stroke:var(--tinta); stroke-width:1.3; transform:rotate(180deg); }
.mo3 .marca-t.todo{ display:flex; justify-content:flex-start; background:none; }

/* menú en negro con letra más chica (?menu=1|2|3) */
.menu1 #menu-movil, .menu2 #menu-movil, .menu3 #menu-movil{ background:var(--tinta); color:#fff; }
:is(.menu1,.menu2,.menu3) #menu-movil .cajon-cab{ border-color:#2a2a2a; }
:is(.menu1,.menu2,.menu3) #menu-movil .x svg{ stroke:#fff; }
:is(.menu1,.menu2,.menu3) #menu-movil .mm-lista > li{ border-color:#2a2a2a; }
:is(.menu1,.menu2,.menu3) #menu-movil .mm-lista a, :is(.menu1,.menu2,.menu3) #menu-movil .mm-lista button{ color:#fff; }
:is(.menu1,.menu2,.menu3) #menu-movil .mm-lista span{ color:#8a8a8a !important; }
:is(.menu1,.menu2,.menu3) #menu-movil .mm-lista button svg, :is(.menu1,.menu2,.menu3) #menu-movil .mm-pie svg{ stroke:#fff !important; fill:#fff !important; }
:is(.menu1,.menu2,.menu3) #menu-movil .mm-pie, :is(.menu1,.menu2,.menu3) #menu-movil .mm-pie a{ color:#cfcfcf; border-color:#2a2a2a; }
.menu1 #menu-movil .mm-lista a, .menu1 #menu-movil .mm-lista button{ font-size:21px; padding:13px 0; }
.menu2 #menu-movil .mm-lista a, .menu2 #menu-movil .mm-lista button{ font-family:var(--sans); font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; padding:15px 0; }
.menu3 #menu-movil .mm-lista > li{ border:0; }
.menu3 #menu-movil .mm-lista a, .menu3 #menu-movil .mm-lista button{ font-size:17px; padding:9px 0; }
.menu2 #menu-movil .mm-marcas a{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#cfcfcf !important; }
/* "Nuestras marcas" (versión 2 elegida): recuadro y rayitas en negro; Ray-Ban con su recuadro en negro */
.marcas.mo2{ border-top:1px solid var(--tinta); border-bottom:1px solid var(--tinta); }
.mo2 .marca-t + .marca-t{ border-left:1px solid var(--tinta); }
.mo2 .marca-t img{ filter:grayscale(1); opacity:1; }
.mo2 .marca-t img[data-m="Ray-Ban"]{ filter:grayscale(1) brightness(.28) contrast(1.6); }
.mo2 .marca-t{ padding:0 12px; display:grid; place-items:center; overflow:hidden; }
/* menú: los números grises (modelos) más chicos */
.menu2 #menu-movil .mm-lista > li > a span{ font-size:9.5px; letter-spacing:.14em; }
.menu2 #menu-movil .mm-marcas a span{ font-size:9.5px !important; }
/* menú: íconos de WhatsApp y del local en línea blanca */
:is(.menu1,.menu2,.menu3) #menu-movil .mm-pie svg.ico-linea{ fill:none !important; stroke:#fff !important; stroke-width:1.3; stroke-linejoin:round; stroke-linecap:round; }
/* grilla blanca (1): Ray-Ban en negro y logos centrados también acá */
.mo1 .marca-t img[data-m="Ray-Ban"]{ filter:grayscale(1) brightness(.28) contrast(1.6); }
.mo1 .marca-t{ padding:0 12px; display:grid; place-items:center; overflow:hidden; }
/* opción gris (como antes): cajas grises, logos emparejados y centrados, Ray-Ban en negro */
.mo4 .marca-t{ padding:0 12px; display:grid; place-items:center; overflow:hidden; }
.mo4 .marca-t img{ filter:grayscale(1); opacity:1; }
.mo4 .marca-t img[data-m="Ray-Ban"]{ filter:grayscale(1) brightness(.28) contrast(1.6); }
/* "Ver todo" con flechita, sin subrayado y sin fondo gris */
.marcas .marca-t.todo{ background:none !important; display:flex; align-items:center; justify-content:center; gap:10px; }
.marcas .marca-t.todo span{ text-decoration:none; }
.marca-t.todo .vt-f{ width:16px; height:16px; fill:none; stroke:var(--tinta); stroke-width:1.3; transform:rotate(180deg); transition:transform .35s var(--ease); }
.marca-t.todo:hover .vt-f{ transform:rotate(180deg) translateX(-4px); }
.mo3 .marca-t.todo .vt-f{ display:block; }
/* PRUEBA: frase de las fotos de portada — 1 a la derecha abajo, 2 en vertical sobre el margen derecho */
.rot1 .hero-foto .rotulo{ left:auto !important; right:22px; text-align:right; }
.rot2 .hero-foto .rotulo{ left:auto !important; right:16px; bottom:22px; writing-mode:vertical-rl; transform:rotate(180deg) !important; }
@media (max-width:820px){ .rot1 .hero-foto .rotulo{ right:var(--pad); } .rot2 .hero-foto .rotulo{ right:12px; } }
/* números parejos en toda la página (pedido de Gaby): que no suban ni bajen del renglón */
html, body, button, input, select, textarea, svg text{ font-variant-numeric:lining-nums; }
/* tarjetas: el "360°" y el corazón en la misma línea y más arriba (pedido de Gaby) */
.tj-sup{ top:8px; }
.tj .corazon{ top:-1px; }       /* centro del corazón = centro del "360°" (19 px) */
@media (max-width:820px){ .tj-sup{ top:6px; left:8px; } .tj .corazon{ top:-4px; right:4px; } }   /* centro a 16 px */
/* marca y modelo: un solo tamaño para todos los productos (pedido de Gaby), el que deja entrar en un renglón
   hasta los nombres más largos ("PRUNE FOREVER AND EVER") */
.fc-linea{ font-size:20px !important; }
@media (max-width:820px){ .fc-linea{ font-size:20px !important; } }
.fc-linea .fc-marca, .fc-linea .fc-modelo-fino{ font-size:1em; line-height:1.15; }   /* marca y modelo del mismo tamaño */
.fc-linea .fc-modelo-fino{ font-size:.8em; }   /* el modelo un poco más chico que la marca, en el mismo renglón (Gaby) */
.fc-linea{ gap:0 .22em; }   /* el modelo más cerca de la marca (Gaby) */
/* sin stock: el círculo en línea, sin pintar (Gaby) */
.fi-estado.no i{ background:none; box-shadow:inset 0 0 0 1.2px var(--etiqueta); }

/* logo (pedido de Gaby): solo "OC" y "OPTICA" del logo original, sin las frases en círculo, y más grande */
.logo img{ width:42px; height:42px; }
.pie .logo img{ width:38px; height:38px; }
@media (max-width:820px){ .cab .logo img, .logo img{ width:36px; height:36px; } }
@media (max-width:370px){ .cab .logo img{ width:32px; height:32px; } }

/* ficha (pedido de Gaby): marca y modelo en dos renglones, con el mismo formato que la tarjeta del catálogo
   (marca como viene, en negrita; modelo en mayúscula, normal y gris), a escala de la ficha */
.fc-linea{ display:block; font-size:22px !important; }
@media (max-width:820px){ .fc-linea{ font-size:21px !important; } }
.fc-linea .fc-marca{ display:block; font-weight:600; text-transform:none; letter-spacing:0; font-size:1em; line-height:1.2; }
.fc-linea .fc-modelo-fino{ display:block; font-weight:400; text-transform:uppercase; letter-spacing:.01em; color:var(--tinta2); font-size:.8em; line-height:1.25; margin-top:3px; }

/* ficha (pedido de Gaby): disponible = círculo negro lleno; sin stock = círculo de línea negra */
.fi-estado i{ background:var(--tinta); }
.fi-estado.no i{ background:none; box-shadow:inset 0 0 0 1.2px var(--tinta); }

/* PRUEBA (Gaby): foto de la apertura al pasar el mouse por "Nuestras marcas" — 1 en la caja, 2 de fondo de la grilla */
#marcas{ position:relative; }
#marcas .marca-t{ z-index:1; }
#marcas .marca-t img{ position:relative; z-index:2; transition:filter .5s, opacity .5s, transform .6s var(--ease); }
.mt-foto, .mt-fondo span{ position:absolute; inset:0; background:center 30%/cover no-repeat; opacity:0; pointer-events:none; }
.mt-foto{ z-index:1; transform:scale(1.08); transition:opacity .6s var(--ease), transform 1.4s var(--ease); }
.mt-foto::after, .mt-fondo span::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.3); }
.mt-fondo{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.mt-fondo span{ transform:scale(1.04); transition:opacity .7s var(--ease), transform 1.6s var(--ease); }
.mt-fondo span.on{ opacity:1; transform:none; }
@media (hover:hover){
  .marca-t.mh1:hover .mt-foto{ opacity:1; transform:none; }
  .marcas .marca-t.mh1:hover img{ filter:brightness(0) invert(1) !important; opacity:1; }
  #marcas.con-fondo .marca-t{ background:transparent !important; }
  #marcas.con-fondo .marca-t img{ filter:brightness(0) invert(1) !important; opacity:.6; }
  #marcas.con-fondo .marca-t.ve img{ opacity:1; }
  #marcas.con-fondo .marca-t.todo{ color:#fff; }
  #marcas.con-fondo .marca-t.todo .vt-f{ stroke:#fff; }
}

/* WhatsApp de la cabecera en línea, con el mismo grosor que la lupa, el corazón y compartir (Gaby) */
.cab .ico-wa svg{ fill:none; stroke:var(--tinta); stroke-width:1.25; width:21px; height:21px; stroke-linejoin:round; stroke-linecap:round; }
.cab .ico-wa svg{ color:var(--tinta); }
@media (hover:hover){
  /* versión 2 (Gaby): al pasar por una marca, las demás desaparecen y queda solo su logo sobre la foto */
  #marcas.con-fondo .marca-t:not(.ve) img, #marcas.con-fondo .marca-t.todo{ opacity:0 !important; }
  #marcas.con-fondo .marca-t.ve img{ transform:scale(1.08); }
}

/* =====================================================================
   BORRADOR 02 · capa estilo Niksen (estudioniksen.com, solo el lenguaje visual):
   blanco y negro, fotos a sangre, letra grotesca chica en mayúscula para todo lo chico,
   títulos grandes y finos sobre la foto, botones negros rectangulares, productos pegados.
   ===================================================================== */
:root{ --nk:"Geist", "Helvetica Neue", Arial, sans-serif; --nkg:#f2f2f0; }   /* (la cabecera volvió a la del Borrador 01: sin --cab propio) */
body, button, input, select, textarea{ font-family:var(--nk); }
.t-xl, .t-l, .t-m, h1, h2, h3{ font-family:var(--nk) !important; }
.nk-tit{ font-family:var(--nk); font-weight:400; font-size:clamp(34px,3.4vw,46px); line-height:1.02; letter-spacing:-.035em; margin:0; }
.nk-tit.chico{ font-size:clamp(24px,2vw,30px); letter-spacing:-.03em; }
.nk-et{ font-family:var(--nk); font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; margin:0; }
.nk-btn{ display:inline-flex; align-items:center; height:28px; padding:0 12px; background:#000; color:#fff; font-size:10.5px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; }
.nk-btn.claro{ background:#fff; color:#000; }
.nk-l{ font-family:var(--nk); font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--tinta); padding:0 2px; height:40px; display:inline-flex; align-items:center; }
.nk-l:hover{ text-decoration:underline; text-underline-offset:3px; }

/* aviso arriba: blanco, una línea chiquita */
/* (cabecera del 01) */
/* (cabecera del 01) */
/* (cabecera del 01) */
/* (cabecera del 01) */

/* cabecera: fina, con palabras en lugar de íconos */
/* (cabecera del 01) */
/* (cabecera del 01) */
/* (cabecera del 01) */
/* (cabecera del 01) */
/* (cabecera del 01) */
@media (max-width:820px){
/* (cabecera del 01) */
/* (cabecera del 01) */
/* (cabecera del 01) */
}

/* portada: una sola foto/video a sangre, título blanco abajo a la izquierda */
.hero{ display:block !important; background:#000; }
.hero-clips:has(.hero-foto){ display:block !important; height:calc(100svh - var(--cab) - 28px); min-height:520px; max-height:980px; aspect-ratio:auto !important; }
.hero-foto{ position:absolute !important; inset:0; min-height:0 !important; }
.hero-foto-2{ display:none !important; }
.hero-foto .rotulo{ display:none; }
.hero-foto::after{ background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35)) !important; }
.hero-texto{ position:absolute !important; left:0; bottom:0; z-index:4; padding:0 var(--pad) 26px !important; max-width:560px; color:#fff; pointer-events:none; }
.hero-texto > *{ pointer-events:auto; }
.hero-texto .nk-tit{ color:#fff; margin:0 0 10px; font-size:clamp(38px,4vw,56px); }
.hero-texto p{ color:rgba(255,255,255,.88) !important; font-size:12px; margin:0 0 14px !important; }
.hero-texto, .hero-texto p, .hero-texto .nk-btn{ opacity:1 !important; transform:none !important; }
.hero-cuenta{ display:none !important; }

/* secciones que no van en esta primera vista */
.sec:has(#cats){ display:none !important; }   /* las entradas viejas de Sol/Receta: las reemplaza .nk-cats */

/* carrusel "Lo más elegido": etiqueta chica, flechas cuadradas, productos pegados */
#sec-top{ padding-top:44px; }
#sec-top .sec-cab{ align-items:center; margin-bottom:12px; }
.flecha{ width:22px !important; height:22px !important; border-radius:0 !important; box-shadow:inset 0 0 0 1px #000 !important; }
.flecha svg{ width:10px !important; height:10px !important; }
.carril-pista{ gap:0 !important; grid-auto-columns:25% !important; }
.carril-barra{ display:none !important; }
@media (max-width:820px){ .carril-pista{ grid-auto-columns:50% !important; padding:0 !important; scroll-padding-left:0 !important; } }

/* tarjeta: foto sobre gris claro pegada a la siguiente, texto mínimo en mayúscula */
.tj-foto{ background:var(--nkg) !important; aspect-ratio:4/5 !important; }
.tj-datos{ padding:8px 8px 22px !important; gap:1px !important; }
.tj-marca, .tj-modelo{ font-size:10px !important; font-weight:500 !important; letter-spacing:.02em; text-transform:uppercase; color:#000 !important; }
.tj-marca{ display:none; }
.tj-datos *{ font-size:10px !important; }
.tj-colores .punto{ width:9px !important; height:9px !important; }
.grilla, .busca-res{ gap:0 !important; }

/* foto editorial a sangre con título */
.nk-edit{ margin-top:56px; }
.nk-edit-foto{ display:block; position:relative; height:min(86svh,900px); min-height:480px; overflow:hidden; color:#fff; }
.nk-edit-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; transition:transform 1.6s var(--ease); }
.nk-edit-foto:hover img{ transform:scale(1.02); }
.nk-edit-foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35)); }
.nk-edit-texto{ position:absolute; left:var(--pad); bottom:26px; z-index:2; max-width:420px; }
.nk-edit-texto .nk-tit{ color:#fff; margin-bottom:10px; }
.nk-edit-texto p{ font-size:12px; margin:0 0 14px; color:rgba(255,255,255,.9); }

/* "el look": 2x2 productos chicos + foto grande */
.nk-look{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr); gap:0; margin-top:56px; align-items:stretch; }
.nk-look-txt{ grid-column:1; align-self:end; padding:0 var(--pad) 24px; grid-row:2; }
.nk-look-txt p{ font-size:12px; color:var(--tinta2); margin:8px 0 0; }
.nk-look-grilla{ grid-column:2; grid-row:1 / 3; display:grid; grid-template-columns:1fr 1fr; align-content:start; }
.nk-look-foto{ grid-column:3; grid-row:1 / 3; position:relative; min-height:640px; overflow:hidden; }
.nk-look-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
@media (max-width:820px){
  .nk-look{ grid-template-columns:1fr; }
  .nk-look-foto{ grid-column:1; grid-row:1; min-height:0; aspect-ratio:4/5; }
  .nk-look-txt{ grid-column:1; grid-row:2; padding:20px var(--pad) 14px; }
  .nk-look-grilla{ grid-column:1; grid-row:3; }
}

/* entradas con botón negro abajo a la izquierda */
.nk-cats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:56px; }
.nk-cats a{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--nkg); }
.nk-cats img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.nk-cats a:hover img{ transform:scale(1.03); }
.nk-cats #nk-cat-rec{ object-fit:contain; padding:14%; mix-blend-mode:multiply; }
.nk-cats .nk-btn{ position:absolute; left:14px; bottom:14px; z-index:2; }
@media (max-width:820px){ .nk-cats{ grid-template-columns:1fr 1fr; } .nk-cats a:first-child{ grid-column:1 / -1; aspect-ratio:4/4; } }

/* local y pie más sobrios */
.local{ margin-top:72px; }
.local .t-l{ font-weight:400; letter-spacing:-.03em; }
.pastilla{ border-radius:0 !important; height:30px !important; padding:0 14px !important; font-size:10.5px !important; letter-spacing:.03em !important; text-transform:uppercase; }
.pie, .pie *{ font-family:var(--nk); }

/* catálogo: título grande y fino, filtros chicos en mayúscula, grilla pegada */
.cat-cab h1, #cat-titulo{ font-weight:400 !important; letter-spacing:-.035em !important; }
.chip{ border-radius:0 !important; font-size:10.5px !important; text-transform:uppercase; letter-spacing:.03em; height:28px !important; }
.migas{ font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; }
.apertura .ap-texto p{ font-size:13px; }

/* ficha: marca y modelo en la misma letra, botón negro recto */
.fc-linea .fc-marca, .fc-linea .fc-modelo-fino{ font-family:var(--nk) !important; }
.ff-btn, .fc .pastilla{ border-radius:0 !important; }

/* ajustes de la primera vista */
#sec-top, #sec-pol, .nk-sec-marcas{ padding-left:0 !important; padding-right:0 !important; }
:is(#sec-top, #sec-pol, .nk-sec-marcas) .sec-cab{ padding:0 var(--pad); }
:is(#sec-top, #sec-pol) .sangre-m{ margin:0 !important; }
.tj-eti, .tj-colores, .insig{ display:none !important; }
.tj-precio{ color:#000 !important; }
/* (Marcas y Ray-Ban vuelven al menú, como en el 01) */

/* ===== Borrador 02 · toda la web ===== */
/* encabezados de sección: etiqueta chica en mayúscula, sin bajada */
.sec, .clips-sec{ padding-top:56px !important; }
.sec-cab{ align-items:center !important; margin-bottom:12px !important; }
.sec-cab .t-l, .clips-sec .sec-cab .t-l{ font-size:11px !important; font-weight:500 !important; letter-spacing:.02em !important; text-transform:uppercase; line-height:1.3 !important; }
.sec-cab p, .sec-cab .sobre{ display:none !important; }
.sec-cab .link{ font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.02em; }

/* marcas: fotos de campaña pegadas con el nombre en botón negro */
.nk-marcas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.nk-marca{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--nkg); }
.nk-marca img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.nk-marca img.prod{ object-fit:contain; padding:16%; mix-blend-mode:multiply; }
.nk-marca:hover img{ transform:scale(1.03); }
.nk-marca .nk-btn{ position:absolute; left:14px; bottom:14px; z-index:2; }
.nk-marca.todo{ background:#fff; box-shadow:inset 0 0 0 1px #e6e6e3; }
.nk-marca.todo .nk-btn{ left:50%; top:50%; bottom:auto; transform:translate(-50%,-50%); }
@media (max-width:820px){ .nk-marcas{ grid-template-columns:1fr 1fr; } .nk-marca .nk-btn{ left:10px; bottom:10px; } }

/* polarizados: igual que "lo más elegido" */
#sec-pol{ padding-top:56px; }

/* 360: título fino, datos chicos */
.giro-sec{ padding-top:64px !important; }
.giro-sec .t-l{ font-size:clamp(26px,2.4vw,34px) !important; font-weight:400 !important; letter-spacing:-.03em !important; }
.giro-sec .giro-texto p{ font-size:13px !important; }
.giro-sec .giro-datos li b{ font-family:var(--nk) !important; font-weight:400 !important; font-size:30px !important; letter-spacing:-.03em; }
.giro-sec .giro-datos li span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; }
.giro-sec .giro-caja{ background:var(--nkg) !important; }
.giro-sec .link{ font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.02em; }

/* estilos: cajas grises pegadas, texto chico */
.estilos{ gap:0 !important; }
.estilo{ background:var(--nkg) !important; box-shadow:inset -1px 0 0 #fff; }
.estilo .est-t{ padding:0 12px 14px !important; }
.estilo .est-t .t-m{ font-size:11px !important; font-weight:500 !important; text-transform:uppercase; letter-spacing:.02em; }
.estilo .est-t span{ font-size:10.5px !important; }
.nk-sec-marcas + .nk-edit, .sec:has(#estilos){ padding-left:0 !important; padding-right:0 !important; }
.sec:has(#estilos) .sec-cab{ padding:0 var(--pad); }

/* 360 en carrusel ("Dando la vuelta") */
.clips-sec{ background:#000 !important; }
.clips-sec .sec-cab .t-l{ color:#fff !important; }
.reels{ gap:0 !important; }

/* beneficios: una línea de texto chico, sin íconos */

/* el local: foto a sangre y texto al costado, botones negros rectos */
.local{ background:#fff !important; margin-top:0 !important; }
.local .t-l{ font-size:clamp(26px,2.4vw,34px) !important; }
.local-texto p{ font-size:13px !important; }
.local-texto .sobre{ font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; }

/* apertura de marca en el catálogo: foto a sangre con el texto blanco encima */
.apertura{ display:block !important; position:relative; min-height:0 !important; height:min(78svh,820px); background:#000 !important; }
.ap-foto{ position:absolute !important; inset:0; min-height:0 !important; aspect-ratio:auto !important; }
.ap-foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.4)); z-index:2; pointer-events:none; }
.ap-texto{ position:absolute !important; left:0; bottom:0; z-index:3; padding:0 var(--pad) 26px !important; gap:10px !important; color:#fff; align-items:flex-start; }
.ap-logo{ filter:brightness(0) invert(1); mix-blend-mode:normal !important; height:34px !important; }
.ap-texto p{ color:rgba(255,255,255,.9) !important; font-size:12px !important; max-width:40ch; }
.ap-texto .link{ display:inline-flex; align-items:center; height:28px; padding:0 12px; background:#fff; color:#000 !important; font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.03em; text-decoration:none !important; border:0 !important; }
.ap-texto .link::after{ display:none !important; }
@media (max-width:820px){ .apertura{ height:auto; aspect-ratio:4/5; } }

/* catálogo */
.cat-cab{ padding-top:24px; }
#cat-titulo{ font-size:clamp(30px,3vw,42px) !important; }
.cuenta{ font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; }
.barra-f{ font-size:11px; }
.filtrar, #orden{ font-size:11px !important; text-transform:uppercase; letter-spacing:.02em; }

/* menú del celu */
.mm-lista > li > a, .mm-lista > li > button{ font-family:var(--nk) !important; font-size:20px !important; font-weight:400 !important; letter-spacing:-.02em !important; }
.mm-pie{ font-size:11px !important; text-transform:uppercase; letter-spacing:.02em; }

/* tarjeta del Borrador 02: marca + modelo + colores (versiones a/b/c) */
.tj:is(.tj-a,.tj-b,.tj-c) .tj-marca{ display:block !important; text-transform:none !important; font-size:11.5px !important; font-weight:500 !important; letter-spacing:0; }
.tj:is(.tj-a,.tj-b,.tj-c) .tj-modelo{ font-size:10.5px !important; font-weight:400 !important; text-transform:uppercase; letter-spacing:.02em; }
.tj:is(.tj-a,.tj-b,.tj-c) .tj-colores{ display:flex !important; align-items:center; gap:7px; margin:5px 0 3px; min-height:0; }
.tj:is(.tj-a,.tj-b,.tj-c) .tj-colores span{ font-size:10.5px !important; color:var(--gris); }
.gris-p{ display:inline-flex; gap:3px; }
.gris-p i{ width:7px; height:7px; border-radius:50%; background:#c2c2c0; }
.tj-nc{ color:var(--gris); text-transform:none; font-size:10.5px !important; }
.tj:is(.tj-a,.tj-b,.tj-c) .tj-precio{ margin-top:2px; }

/* ===== ficha más simple y minimalista (Borrador 02, pedido de Gaby) ===== */
.fc-tipo{ font-size:10px !important; margin-bottom:8px !important; }
.fi-estado{ font-size:10px !important; margin:10px 0 16px !important; }
.fi-atr{ font-size:12px !important; gap:2px 14px !important; }
.fi-atr dt{ font-size:10px !important; letter-spacing:.03em !important; }
.fi-atr > *{ border:0 !important; padding-top:3px !important; padding-bottom:3px !important; }
/* colores: una fila de miniaturas chicas */
.fi-colores{ grid-template-columns:repeat(auto-fill,minmax(52px,1fr)) !important; gap:0 !important; max-width:360px; }
.fi-color{ background:var(--nkg) !important; }
.fi-color.on{ box-shadow:inset 0 0 0 1px #000 !important; }
.fi-nota{ font-size:10.5px !important; margin:8px 0 16px !important; }
/* compra: un botón negro recto; WhatsApp como texto */
.fi-cta{ gap:4px !important; }
.fi-cta .pastilla{ height:44px !important; border-radius:0 !important; font-size:11px !important; }
.fi-cta .pastilla.borde{ height:30px !important; box-shadow:none !important; background:none !important; color:var(--tinta) !important; text-decoration:underline; text-underline-offset:3px; }
.fi-cta .pastilla.borde svg{ display:none; }
.fi-aclara{ display:none !important; }
/* envío, devolución y garantía: una línea chica */
/* desplegables: títulos chicos, fondo blanco, una línea fina */
.fi-acc{ background:#fff !important; border-bottom:1px solid #e6e6e3 !important; }
.fi-acc > button{ padding:16px var(--pad) !important; }
.fi-acc > button .t-m{ font-size:11px !important; font-weight:500 !important; text-transform:uppercase; letter-spacing:.03em; }
.fi-acc .f-cuerpo > div > div{ font-size:12px; }
.fi-accs, .fi-acc-z{ background:#fff !important; }
.fi-relac{ padding-top:40px !important; }
.fi-acc .f-cuerpo :is(dt, dd, th, td, li, p){ font-size:12px !important; }
.fi-acc .f-cuerpo :is(dt, th){ color:var(--gris); }
.fi-acc .f-cuerpo :is(dl > *, tr > *){ padding-top:7px !important; padding-bottom:7px !important; }

/* PRUEBA en el Terdey: "N colores" que abre los círculos de colores */
.tj-d .tj-colores{ flex-direction:column; align-items:flex-start !important; gap:0 !important; }
.tj-abrir{ font-size:10.5px; color:var(--gris); display:inline-flex; align-items:center; gap:6px; padding:4px 0; min-height:24px; }
.tj-abrir::after{ content:""; width:5px; height:5px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease); }
.tj-d.abierto .tj-abrir::after{ transform:rotate(-135deg) translateY(-1px); }
.tj-pts{ display:flex; gap:6px; height:0; opacity:0; overflow:hidden; transition:height .35s var(--ease), opacity .35s, margin .35s; }
.tj-d.abierto .tj-pts{ height:22px; opacity:1; margin:2px 0 4px; padding:2px; }
@media (hover:hover){ .tj-d:hover .tj-pts{ height:22px; opacity:1; margin:2px 0 4px; padding:2px; } }
.tj-pts .punto{ width:13px !important; height:13px !important; flex:none; }
.tj-pts .punto.on{ box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px #000; }

/* PRUEBA marcas con logo (mk2) y con fotos en blanco y negro (mk3) */
.nk-marcas:is(.mk2,.mk3) .nk-marca::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); pointer-events:none; transition:background .5s; }
.nk-marcas:is(.mk2,.mk3) .nk-marca.sin-foto::after, .nk-marcas:is(.mk2,.mk3) .nk-marca.todo::after{ display:none; }
.nk-logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; height:30px; width:auto; max-width:62%; object-fit:contain; filter:brightness(0) invert(1); pointer-events:none; }
.nk-logo[data-m="Vulk"], .nk-logo[data-m="Prune"]{ height:22px; }
.nk-logo[data-m="Ray-Ban"]{ height:40px; }
.nk-marca.sin-foto .nk-logo{ filter:grayscale(1) brightness(.2); top:auto; bottom:18px; transform:translateX(-50%); }
.nk-marcas.mk3 .nk-marca img:not(.nk-logo){ filter:grayscale(1) contrast(1.05); transition:filter .6s, transform 1.4s var(--ease); }
@media (hover:hover){ .nk-marcas.mk3 .nk-marca:hover img:not(.nk-logo){ filter:none; } .nk-marcas:is(.mk2,.mk3) .nk-marca:hover::after{ background:rgba(0,0,0,.08); } }
@media (max-width:820px){ .nk-logo{ height:24px; } .nk-logo[data-m="Vulk"], .nk-logo[data-m="Prune"]{ height:18px; } .nk-logo[data-m="Ray-Ban"]{ height:32px; } }
.nk-marca img.nk-logo{ inset:auto; left:50%; top:50%; width:auto; height:30px; max-width:62%; object-fit:contain; transform:translate(-50%,-50%) !important; padding:0; mix-blend-mode:normal; filter:brightness(0) invert(1) !important; }
.nk-marca img.nk-logo[data-m="Vulk"], .nk-marca img.nk-logo[data-m="Prune"]{ height:22px; }
.nk-marca img.nk-logo[data-m="Ray-Ban"]{ height:40px; }
.nk-marca.sin-foto img.nk-logo{ top:auto; bottom:18px; transform:translateX(-50%) !important; filter:grayscale(1) brightness(.25) contrast(1.6) !important; }
@media (max-width:820px){ .nk-marca img.nk-logo{ height:22px; } .nk-marca img.nk-logo[data-m="Vulk"], .nk-marca img.nk-logo[data-m="Prune"]{ height:16px; } .nk-marca img.nk-logo[data-m="Ray-Ban"]{ height:30px; } }
.nk-marca img.nk-logo[data-m="Prototype"]{ height:17px; }
.nk-marca img.nk-logo[data-m="Mistral"]{ height:24px; }
.nk-marca img.nk-logo[data-m="María Cher"]{ height:36px; }
.nk-marcas:is(.mk2,.mk3) .nk-marca::after{ background:rgba(0,0,0,.24); }
@media (max-width:820px){ .nk-marca img.nk-logo[data-m="Prototype"]{ height:13px; } .nk-marca img.nk-logo[data-m="Mistral"]{ height:18px; } .nk-marca img.nk-logo[data-m="María Cher"]{ height:28px; } }

/* PRUEBA marcas 4/5/6 (Gaby: que se lean mejor; foto más chica en blanco y negro) */
.nk-marcas:is(.mk4,.mk5,.mk6) .nk-marca img:not(.nk-logo){ filter:grayscale(1) contrast(1.05); transition:filter .6s, transform 1.4s var(--ease); }
@media (hover:hover){ .nk-marcas:is(.mk4,.mk5,.mk6) .nk-marca:hover img:not(.nk-logo){ filter:none; transform:none; } }
.nk-marcas:is(.mk4,.mk5,.mk6) .nk-marca img.nk-logo{ top:auto; bottom:32px; transform:translate(-50%,50%) !important; }
.nk-marcas:is(.mk4,.mk5,.mk6) .nk-marca.sin-foto img.prod{ background:var(--nkg); }
/* 4: foto arriba, franja negra abajo con el logo en blanco */
.nk-marcas.mk4 .nk-marca{ background:#000; }
.nk-marcas.mk4 .nk-marca img:not(.nk-logo){ inset:0 0 64px 0; height:auto; width:100%; }
.nk-marcas.mk4 .nk-marca.sin-foto img.nk-logo{ filter:brightness(0) invert(1) !important; bottom:32px; transform:translate(-50%,50%) !important; }
/* 5: caja blanca, foto chica con margen y logo en negro */
.nk-marcas.mk5{ gap:0; background:#fff; }
.nk-marcas.mk5 .nk-marca{ background:#fff; box-shadow:inset 0 0 0 .5px #e3e3e0; }
.nk-marcas.mk5 .nk-marca img:not(.nk-logo){ inset:14px 14px 64px 14px; width:auto; height:auto; }
.nk-marcas.mk5 .nk-marca img.nk-logo, .nk-marcas.mk5 .nk-marca.sin-foto img.nk-logo{ filter:grayscale(1) brightness(.15) contrast(1.6) !important; bottom:32px; transform:translate(-50%,50%) !important; }
/* 6: caja negra, foto chica con margen y logo en blanco */
.nk-marcas.mk6{ background:#000; }
.nk-marcas.mk6 .nk-marca{ background:#000; }
.nk-marcas.mk6 .nk-marca img:not(.nk-logo){ inset:14px 14px 64px 14px; width:auto; height:auto; }
.nk-marcas.mk6 .nk-marca.sin-foto img.nk-logo{ filter:brightness(0) invert(1) !important; bottom:32px; transform:translate(-50%,50%) !important; }
.nk-marcas:is(.mk4,.mk6) .nk-marca.todo{ background:#000; box-shadow:none; }
.nk-marcas:is(.mk4,.mk6) .nk-marca.todo .nk-btn{ background:#fff; color:#000; }
@media (max-width:820px){
  .nk-marcas:is(.mk4,.mk5,.mk6) .nk-marca img.nk-logo{ bottom:24px; }
  .nk-marcas.mk4 .nk-marca img:not(.nk-logo){ inset:0 0 48px 0; }
  .nk-marcas:is(.mk5,.mk6) .nk-marca img:not(.nk-logo){ inset:8px 8px 48px 8px; }
}
/* medidas explícitas (con alto automático la foto ignoraba el margen de abajo) */
.nk-marcas.mk4 .nk-marca img:not(.nk-logo){ left:0; top:0; right:auto; bottom:auto; width:100%; height:calc(100% - 64px); }
.nk-marcas:is(.mk5,.mk6) .nk-marca img:not(.nk-logo){ left:14px; top:14px; right:auto; bottom:auto; width:calc(100% - 28px); height:calc(100% - 78px); }
.nk-marcas:is(.mk4,.mk6) .nk-marca img.prod{ mix-blend-mode:normal; background:var(--nkg); }
@media (max-width:820px){
  .nk-marcas.mk4 .nk-marca img:not(.nk-logo){ height:calc(100% - 48px); }
  .nk-marcas:is(.mk5,.mk6) .nk-marca img:not(.nk-logo){ left:8px; top:8px; width:calc(100% - 16px); height:calc(100% - 56px); }
}

/* PRUEBA colores (Reporter: se abren al costado; Booping: siempre abiertos) */
.tj-d .tj-colores, .tj-f .tj-colores{ flex-direction:row !important; align-items:center !important; gap:0 !important; min-height:24px; overflow:hidden; }
.tj-d .tj-abrir{ flex:none; transition:max-width .4s var(--ease), opacity .3s; max-width:120px; overflow:hidden; white-space:nowrap; }
.tj-d .tj-abrir::after{ transform:rotate(-45deg) !important; }
.tj-d .tj-pts{ height:auto !important; margin:0 !important; padding:2px !important; opacity:0; max-width:0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; transition:max-width .5s var(--ease), opacity .4s .1s; }
.tj-d .tj-pts::-webkit-scrollbar{ display:none; }
.tj-d.abierto .tj-abrir{ max-width:16px; }
.tj-d.abierto .tj-abrir{ font-size:0; gap:0; }
.tj-d.abierto .tj-abrir::after{ transform:rotate(135deg) !important; width:6px; height:6px; margin-right:8px; }
.tj-d.abierto .tj-pts{ opacity:1; max-width:100%; }
@media (hover:hover){ .tj-d:hover .tj-pts{ height:auto !important; margin:0 !important; } }
.tj-f .tj-pts{ display:flex; gap:6px; height:auto; opacity:1; padding:2px; overflow-x:auto; scrollbar-width:none; }
.tj-f .tj-pts::-webkit-scrollbar{ display:none; }
.tj-d .tj-pts .punto, .tj-f .tj-pts .punto{ width:12px !important; height:12px !important; flex:none; }
.tj-d.abierto .tj-abrir{ font-size:0 !important; }

/* marcas 7 (Gaby): foto en blanco y negro y, centrado, un recuadro negro igual para todas con el logo en blanco */
.nk-marcas.mk7 .nk-marca img:not(.nk-logo){ filter:grayscale(1) contrast(1.05); transition:filter .6s, transform 1.4s var(--ease); }
@media (hover:hover){ .nk-marcas.mk7 .nk-marca:hover img:not(.nk-logo){ filter:none; } }
.nk-marcas.mk7 .nk-placa{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:60%; height:68px; background:#000; display:flex; align-items:center; justify-content:center; padding:0 18px; pointer-events:none; }
.nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo{ position:static; transform:none !important; width:100%; height:100%; max-width:none; max-height:28px; object-fit:contain; filter:brightness(0) invert(1) !important; }
.nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="Vulk"], .nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="Prune"]{ max-height:20px; }
.nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:38px; }
.nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="Prototype"]{ max-height:15px; }
.nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="María Cher"]{ max-height:34px; }
.nk-marcas.mk7 .nk-marca.sin-foto img.prod{ mix-blend-mode:multiply; }
.nk-marcas.mk7 .nk-marca.todo .nk-btn{ height:68px; width:60%; justify-content:center; padding:0; }
@media (max-width:820px){
  .nk-marcas.mk7 .nk-placa{ width:72%; height:48px; padding:0 12px; }
  .nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo{ max-height:20px; }
  .nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="Vulk"], .nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="Prune"]{ max-height:15px; }
  .nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:28px; }
  .nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="Prototype"]{ max-height:11px; }
  .nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="María Cher"]{ max-height:26px; }
  .nk-marcas.mk7 .nk-marca.todo .nk-btn{ height:48px; width:72%; }
}
.nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="Mistral"]{ max-height:21px; }
@media (max-width:820px){ .nk-marcas.mk7 .nk-marca .nk-placa img.nk-logo[data-m="Mistral"]{ max-height:15px; } }

/* marcas 8 (Gaby): como la primera opción (botón negro chico) pero centrado en la foto en blanco y negro y con el logo en blanco */
.nk-marcas.mk8 .nk-placa{ width:auto; min-width:42%; height:40px; padding:0 16px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo{ width:auto; height:auto; max-width:150px; max-height:16px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Vulk"], .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Prune"]{ max-height:12px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:24px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Prototype"]{ max-height:10px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Mistral"]{ max-height:13px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="María Cher"]{ max-height:22px; }
.nk-marcas.mk8 .nk-marca.todo .nk-btn{ height:40px; width:auto; min-width:42%; padding:0 16px; }
@media (max-width:820px){
  .nk-marcas.mk8 .nk-placa{ min-width:56%; height:32px; padding:0 10px; }
  .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo{ max-width:110px; max-height:13px; }
  .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Vulk"], .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Prune"]{ max-height:10px; }
  .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:19px; }
  .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Prototype"]{ max-height:8px; }
  .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Mistral"]{ max-height:11px; }
  .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="María Cher"]{ max-height:18px; }
  .nk-marcas.mk8 .nk-marca.todo .nk-btn{ height:32px; min-width:56%; }
}
.nk-marcas.mk8 .nk-placa, .nk-marcas.mk8 .nk-marca.todo .nk-btn{ width:46%; min-width:0; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo{ max-width:100%; }
@media (max-width:820px){ .nk-marcas.mk8 .nk-placa, .nk-marcas.mk8 .nk-marca.todo .nk-btn{ width:60%; } }
/* marcas con fotos más chicas (Gaby): en la compu las 8 en una fila; en el celu cuadradas */
.nk-marcas{ grid-template-columns:repeat(8,minmax(0,1fr)); }
.nk-marca{ aspect-ratio:3/4; }
.nk-marcas.mk8 .nk-placa, .nk-marcas.mk8 .nk-marca.todo .nk-btn{ width:78%; height:34px; padding:0 10px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo{ max-height:13px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Vulk"], .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Prune"]{ max-height:10px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:20px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Prototype"]{ max-height:8px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Mistral"]{ max-height:11px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="María Cher"]{ max-height:18px; }
.nk-marca.sin-foto img.prod{ padding:10%; }
@media (max-width:1100px){ .nk-marcas{ grid-template-columns:repeat(4,minmax(0,1fr)); } .nk-marca{ aspect-ratio:1/1; } }
@media (max-width:820px){
  .nk-marcas{ grid-template-columns:1fr 1fr; }
  .nk-marca{ aspect-ratio:1/1; }
  .nk-marcas.mk8 .nk-placa, .nk-marcas.mk8 .nk-marca.todo .nk-btn{ width:62%; height:30px; }
}
/* fotos de marcas más claras para que resalte el logo (Gaby) */
.nk-marcas:is(.mk7,.mk8) .nk-marca img:not(.nk-logo):not(.prod){ filter:grayscale(1) brightness(1.22) contrast(.88) !important; }
@media (hover:hover){ .nk-marcas:is(.mk7,.mk8) .nk-marca:hover img:not(.nk-logo):not(.prod){ filter:brightness(1.05) !important; } }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:17px; }
@media (max-width:820px){ .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:15px; } }
/* encuadre (Gaby): que se vean los anteojos arriba del recuadro */
.nk-marca[data-marca="Rusty"] img:not(.nk-logo){ object-position:30% 64% !important; }
.nk-marca[data-marca="Prototype"] img:not(.nk-logo){ top:-24% !important; height:128% !important; object-position:58% center !important; }
@media (min-width:1101px){ .nk-marca[data-marca="Rusty"] img:not(.nk-logo){ top:-16% !important; height:122% !important; object-position:30% 30% !important; } }
/* logo de Ray-Ban más grande dentro del mismo recuadro (Gaby) */
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:26px; }
@media (max-width:820px){ .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:23px; } }

/* fotos de marcas en color suave para que resalten los logos (Gaby) */
.nk-marcas.suave:is(.mk7,.mk8) .nk-marca img:not(.nk-logo):not(.prod){ filter:saturate(.5) brightness(1.12) contrast(.88) !important; }
@media (hover:hover){ .nk-marcas.suave:is(.mk7,.mk8) .nk-marca:hover img:not(.nk-logo):not(.prod){ filter:saturate(.9) brightness(1.04) !important; } }
/* letras de Ray-Ban más grandes dentro del mismo recuadro */
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:31px; }
@media (max-width:820px){ .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Ray-Ban"]{ max-height:27px; } }

/* María Cher: subir la foto para que el lente quede arriba del recuadro (Gaby) */
.nk-marca[data-marca="María Cher"] img:not(.nk-logo){ top:-30% !important; height:135% !important; }
.nk-marca[data-marca="Vulk"] img:not(.nk-logo){ object-position:center 0% !important; }
/* fotos de marcas al 70 % de intensidad; al pasar el mouse, al 100 % (Gaby) */
.nk-marcas.suave:is(.mk7,.mk8) .nk-marca{ background:#fff; }
.nk-marcas.suave:is(.mk7,.mk8) .nk-marca img:not(.nk-logo):not(.prod){ filter:none !important; opacity:.7; transition:opacity .5s, transform 1.4s var(--ease); }
@media (hover:hover){ .nk-marcas.suave:is(.mk7,.mk8) .nk-marca:hover img:not(.nk-logo):not(.prod){ filter:none !important; opacity:1; } }
/* tamaños de logo: Prüne más grande, Rusty un poco más chico */
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Prune"]{ max-height:15px; }
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Rusty"]{ max-height:11px; max-width:84%; }
@media (max-width:820px){
  .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Prune"]{ max-height:13px; }
  .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="Rusty"]{ max-height:10px; max-width:82%; }
  .nk-marca[data-marca="Vulk"] img:not(.nk-logo){ top:-12% !important; height:115% !important; }
}
@media (max-width:820px){ .nk-marca[data-marca="Vulk"] img:not(.nk-logo){ top:0 !important; height:100% !important; object-position:center 0% !important; } }

/* apertura de marca sin "Ver los modelos" (Gaby) */
.apertura .ap-texto .link{ display:none !important; }
/* María Cher sin "EYEWEAR" para que el nombre quede más grande (Gaby) */
.nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="María Cher"]{ max-height:17px; }
@media (max-width:820px){ .nk-marcas.mk8 .nk-marca .nk-placa img.nk-logo[data-m="María Cher"]{ max-height:15px; } }

/* logo de 360° en las tarjetas que tienen vista 360 (Gaby) */
.tj-sup .insig.nk-360{ display:inline-flex !important; align-items:center; gap:4px; background:none !important; box-shadow:none !important; padding:0 !important; font-size:10px !important; font-weight:500; letter-spacing:.02em; color:#000; }
.tj-sup .insig.nk-360 svg{ width:14px; height:14px; }

/* PRUEBA dibujos de medidas: frente completo, parte medida pintada, mm en el dibujo */
.med-bloque.med-gris{ --pinta:#cfcfcc; }
.med-bloque.med-amarillo{ --pinta:#f2c230; }
.med-mini2{ display:block; width:100%; max-width:150px; height:auto; margin-bottom:8px; overflow:visible; fill:none; stroke:var(--tinta); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.med-mini2 .pinta{ fill:var(--pinta); }
.med-mini2 .pinta-l{ stroke:var(--pinta); stroke-width:5; }
.med-mini2 text{ fill:var(--tinta); stroke:none; font-family:var(--nk); font-size:10px; font-weight:500; text-anchor:middle; }
.med-ref2{ border-top:0 !important; padding-top:0 !important; gap:18px !important; }
.med-ref2 dt{ font-size:10.5px !important; letter-spacing:.04em !important; }
.med-ref2 dd{ font-size:11.5px !important; }

/* PRUEBA: la marca en recuadro negro con letra blanca (solo Vulk Reporter) */
.tj-mn .tj-marca{ display:inline-block !important; align-self:flex-start; background:#000; color:#fff !important; padding:3px 7px 2px; margin-bottom:3px; font-size:10.5px !important; letter-spacing:.02em !important; }
.fc-linea.fc-mn .fc-marca{ display:inline-block !important; background:#000; color:#fff; padding:4px 10px 3px; margin-bottom:6px; font-size:.82em; }
.med-mini2 .cota2{ stroke:var(--tinta); stroke-width:1; }
.med-ref2 dt b{ font-family:var(--nk) !important; font-size:10.5px !important; font-weight:500 !important; color:var(--tinta) !important; margin-left:6px; letter-spacing:.02em; }
.med-ref2 > div{ display:flex; flex-direction:column; }
.med-ref2 .med-mini2{ align-self:stretch; }
/* palabra + número dentro de un recuadro del color de la versión, con letra negra (Gaby) */
.med-ref2 dt{ display:inline-flex !important; align-self:flex-start; align-items:baseline; gap:0; background:var(--pinta); color:#000 !important; padding:4px 8px 3px; }
.med-ref2 dt b{ color:#000 !important; }

/* ícono de polarizado (Gaby): cristal con líneas en diagonal */
.tj-sup{ display:flex; gap:10px; align-items:center; }
.tj-sup .insig.nk-pol svg{ width:15px; height:15px; fill:none; stroke:#000; stroke-width:1.3; stroke-linecap:round; }
.fc-pol{ display:inline-flex; align-items:center; gap:4px; }
.fc-pol svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; position:relative; top:-1px; }
/* medidas: palabra y número en un solo renglón */
.med-ref2 dt{ white-space:nowrap; font-size:9.5px !important; padding:4px 6px 3px !important; }
.med-ref2 dt b{ font-size:9.5px !important; margin-left:4px !important; }

/* PRUEBA ficha (?fi=2) */
.fi-estado .fi-ok{ width:13px; height:13px; fill:none; stroke:#000; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.fi-360{ position:absolute; left:14px; top:14px; z-index:3; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:500; letter-spacing:.02em; color:#000; pointer-events:none; }
.fi-360 svg{ width:16px; height:16px; fill:none; stroke:#000; stroke-width:1.3; }
.fi-panel .fi-colores + .fi-nota + .fi-atr, .fi-panel .fi-talles + .fi-atr{ margin-top:6px; }

/* marcas en blanco y negro suave (Gaby): gris al 70 %; al pasar el mouse, en color */
.nk-marcas.suave-bn:is(.mk7,.mk8) .nk-marca img:not(.nk-logo):not(.prod){ filter:grayscale(1) !important; opacity:.7; }
@media (hover:hover){ .nk-marcas.suave-bn:is(.mk7,.mk8) .nk-marca:hover img:not(.nk-logo):not(.prod){ filter:none !important; opacity:1; } }

/* celu: la foto que "se prende" pasa a color y vuelve sola al gris */
.nk-marcas.suave-bn:is(.mk7,.mk8) .nk-marca img:not(.nk-logo):not(.prod){ transition:filter .6s ease, opacity .6s ease, transform 1.4s var(--ease); }
.nk-marcas.suave-bn:is(.mk7,.mk8) .nk-marca.prende img:not(.nk-logo):not(.prod){ filter:none !important; opacity:1; }

/* PRUEBA (Gaby, solo Vulk Reporter): en el celu la foto de la ficha más baja, sacando el aire de arriba, para que entre toda la info */
@media (max-width:820px){
  .fi-baja .fm, .fi-baja .fm.ancho{ aspect-ratio:390/280; }
  .fi-baja .fm img.foto{ width:76%; height:88%; top:auto; bottom:4%; }
  .fi-baja .fm .giro img, .fi-baja .fm.ancho .giro img{ object-position:50% 78% !important; }
}
@media (max-width:820px){ .fi-baja .fm .giro img{ object-fit:cover !important; object-position:50% 72% !important; } }
/* Reporter: menos recorte (Gaby) y el "Arrastrá · girá 360°" más abajo */
@media (max-width:820px){
  .fi-baja .fm, .fi-baja .fm.ancho{ aspect-ratio:390/330; }
  .fi-baja .fm .giro img{ object-position:50% 64% !important; }
  .fi-baja .giro-ayuda{ bottom:6px !important; }
}
/* Reporter: la línea del 360 más abajo (justo arriba de "Arrastrá") y el anteojo otra vez más grande */
@media (max-width:820px){
  .fi-baja .giro-escala{ top:auto !important; bottom:28px !important; }
  .fi-baja .fm .giro img{ transform:scale(1.08); transform-origin:50% 60%; }
}

/* corazón alineado con el logo 360° (misma altura y mismo margen del borde), en todas las fichas (aprobado por Gaby) */
.fi .fi-gal-caja > .corazon{ top:0 !important; right:3px !important; }
.fi .fi-360{ top:14px; left:14px; height:16px; }

/* medidas: sin recuadro; la palabra en amarillo huevo y el número al lado, sin "mm" (Gaby) */
.med-txt1 .med-ref2 dt{ background:none !important; padding:0 !important; color:var(--pinta) !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.06em !important; }
.med-txt1 .med-ref2 dt b{ color:var(--pinta) !important; font-size:11px !important; font-weight:600 !important; margin-left:6px !important; }

/* PRUEBA medidas 2: rectángulo negro, palabra en blanco y número en amarillo huevo */
.med-txt2 .med-ref2 dt{ background:#000 !important; color:#fff !important; padding:4px 8px 3px !important; font-size:10.5px !important; font-weight:600 !important; letter-spacing:.06em !important; }
.med-txt2 .med-ref2 dt b{ color:var(--pinta) !important; font-size:10.5px !important; font-weight:600 !important; margin-left:6px !important; }

/* PRUEBA medidas 3: sin recuadro, palabra en negro y número en amarillo huevo */
.med-txt3 .med-ref2 dt{ background:none !important; color:#000 !important; padding:0 !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.06em !important; }
.med-txt3 .med-ref2 dt b{ color:var(--pinta) !important; font-size:11px !important; font-weight:600 !important; margin-left:6px !important; }
/* medidas 3: el número también en negro (Gaby) */
.med-txt3 .med-ref2 dt b{ color:#000 !important; }

/* envío, cuotas, devolución y garantía: como en el Borrador 01 (Gaby), con la letra del 02 */
.benef{ margin-top:64px; }

/* "por Mercado Libre" en el azul de Mercado Libre (Gaby) */
.fi-servicios span{ color:#3483fa !important; }

/* ===== campañas (Gaby): una detrás de otra, con rayitas de avance, y abajo los anteojos de cada una ===== */
.nk-camp{ margin-top:56px; }
.nk-camp-cab{ display:flex; justify-content:space-between; align-items:center; padding:0 var(--pad); margin-bottom:12px; }
.nk-camp-num{ font-size:11px; font-weight:500; letter-spacing:.04em; }
.nk-camp-medios{ position:relative; height:min(82svh,860px); min-height:480px; overflow:hidden; background:#000; }
.nk-camp-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease; color:#fff; pointer-events:none; }
.nk-camp-slide.on{ opacity:1; pointer-events:auto; }
.nk-camp-slide img, .nk-camp-slide video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nk-camp-slide video{ opacity:0; transition:opacity .8s; }
.nk-camp-slide video.listo{ opacity:1; }
.nk-camp-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.4)); }
.nk-camp-txt{ position:absolute; left:var(--pad); bottom:48px; z-index:2; }
.nk-camp-txt .nk-tit{ color:#fff; margin:0 0 10px; }
.nk-camp-rayas{ position:absolute; left:var(--pad); right:var(--pad); bottom:16px; display:flex; gap:6px; z-index:3; }
.nk-camp-rayas button{ flex:1; height:16px; position:relative; background:none; padding:0; }
.nk-camp-rayas button::before, .nk-camp-rayas i{ content:""; position:absolute; left:0; right:0; top:7px; height:2px; }
.nk-camp-rayas button::before{ background:rgba(255,255,255,.35); }
.nk-camp-rayas i{ background:#fff; transform:scaleX(0); transform-origin:left; }
.nk-camp-rayas button.hecho i{ transform:scaleX(1); }
.nk-camp-rayas button.on i{ animation:nkLlena var(--dur,5s) linear forwards; }
@keyframes nkLlena{ to{ transform:scaleX(1); } }
.nk-camp-lentes{ padding-top:18px; }
.nk-camp-en{ padding:0 var(--pad); margin-bottom:10px; }
.nk-camp-grilla{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); transition:opacity .25s; min-height:200px; }
.nk-camp-grilla.cambia{ opacity:0; }
@media (max-width:820px){
  .nk-camp-medios{ height:auto; aspect-ratio:4/5; min-height:0; }
  .nk-camp-grilla{ grid-template-columns:1fr 1fr; }
}

/* PRUEBA Reporter: sello de polarizado F; chico en la tarjeta (sin palabra), grande sobre la foto de la ficha */
.tj-sup .insig.nk-sello-ch{ display:inline-flex !important; background:none !important; box-shadow:none !important; padding:0 !important; }
.tj-sup .insig.nk-sello-ch svg{ width:17px !important; height:17px !important; stroke:none !important; }
.fi-sello{ position:absolute; right:14px; bottom:14px; z-index:3; width:68px; height:68px; pointer-events:none; }
.fi-sello svg{ width:100%; height:100%; }
@media (max-width:820px){ .fi-sello{ width:58px; height:58px; right:12px; bottom:12px; } }

/* PRUEBA: 6 entradas en cuadros que encajan (Gaby): Sol grande, Receta, Polarizados, Clip on alto, Lente amarillo y Deportivo anchos */
.nk-cats.nk-mosaico{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:23vw 23vw 21vw; gap:4px;
  grid-template-areas:"sol sol rec clip" "sol sol pol clip" "amar amar dep dep"; }
.nk-mosaico > a{ aspect-ratio:auto !important; }
.nk-mosaico .c-sol{ grid-area:sol; } .nk-mosaico .c-rec{ grid-area:rec; } .nk-mosaico .c-pol{ grid-area:pol; }
.nk-mosaico .c-clip{ grid-area:clip; } .nk-mosaico .c-amar{ grid-area:amar; } .nk-mosaico .c-dep{ grid-area:dep; }
.nk-mosaico #nk-cat-amar{ object-fit:contain; padding:8% 22%; mix-blend-mode:multiply; }
@media (max-width:820px){
  .nk-cats.nk-mosaico{ grid-template-columns:1fr 1fr; grid-template-rows:auto; grid-auto-rows:46vw; grid-template-areas:"sol sol" "sol sol" "rec pol" "clip amar" "clip dep"; }
  .nk-mosaico #nk-cat-amar{ padding:12%; }
}

.nk-mosaico .c-sol{ grid-area:sol !important; } .nk-mosaico .c-rec{ grid-area:rec !important; } .nk-mosaico .c-pol{ grid-area:pol !important; }
.nk-mosaico .c-clip{ grid-area:clip !important; } .nk-mosaico .c-amar{ grid-area:amar !important; } .nk-mosaico .c-dep{ grid-area:dep !important; }
/* sello de polarizado de la ficha más chico (Gaby) */
.fi-sello{ width:48px !important; height:48px !important; }
@media (max-width:820px){ .fi-sello{ width:42px !important; height:42px !important; } }

/* ===== Giralo (Gaby): logo + los más vendidos girando, después de la portada ===== */
.giro-sec.nk-giro{ display:block !important; padding:56px 0 0 !important; }
.nk-giro-cab{ padding:0 var(--pad); display:grid; grid-template-columns:auto 1fr; gap:6px 22px; align-items:end; margin-bottom:22px; }
.nk-giro-cab p{ grid-column:2; margin:0; font-size:12.5px; color:var(--tinta2); max-width:46ch; }
.nk-giro-cab .nk-tit{ grid-column:2; font-size:clamp(28px,3vw,40px); }
.nk-giro-logo{ grid-row:1 / 3; display:flex; flex-direction:column; align-items:center; gap:4px; }
.nk-giro-logo svg{ width:74px; height:74px; fill:none; stroke:#000; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.nk-giro-logo text{ fill:#000; stroke:none; font-family:var(--nk); font-size:13px; font-weight:600; }
.nk-giro-logo span{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.nk-giro-fila{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.nk-giro-it{ display:block; position:relative; color:inherit; }
.nk-giro-caja{ position:relative; aspect-ratio:1/1; background:var(--nkg); overflow:hidden; }
.nk-giro-dato{ padding:10px 10px 18px; display:grid; gap:2px; }
.nk-giro-n{ display:inline-block; justify-self:start; background:#000; color:#fff; font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px 2px; }
.nk-giro-nom{ font-size:11px; text-transform:uppercase; letter-spacing:.02em; }
.nk-giro-nom b{ font-weight:600; text-transform:none; letter-spacing:0; margin-right:4px; }
@media (max-width:820px){
  .nk-giro-cab{ grid-template-columns:1fr; justify-items:start; }
  .nk-giro-logo{ grid-row:auto; flex-direction:row; gap:8px; }
  .nk-giro-logo svg{ width:44px; height:44px; }
  .nk-giro-cab .nk-tit, .nk-giro-cab p{ grid-column:1; }
  .nk-giro-fila{ grid-template-columns:1fr 1fr; }
}

/* mosaico: siempre fotos publicitarias (Gaby); clip on en blanco y negro para no confundir con el lente amarillo */
.nk-mosaico img.bn{ filter:grayscale(1) contrast(1.05); }

/* orden de la portada elegido por Gaby: Portada, Giralo, Campañas, Marcas, cuadros, Estilos, Beneficios, Local.
   Lo más elegido, Dando la vuelta y la tira de Polarizados quedan ocultas (siguen en el código por si vuelven) */
#sec-top, #sec-clips, #sec-pol{ display:none !important; }
.sec:has(#estilos){ padding-top:56px !important; }

/* cuadro Clip on sin link por ahora (Gaby) */
.c-sin-link{ cursor:default; }
.c-sin-link:hover img{ transform:none !important; }

/* medidas a la vista, debajo de la medida (Gaby) */
.fi-med-ya{ margin:4px 0 18px; }
.fi-med-ya .med-bloque{ gap:12px; }
.fi-med-ya .med-tip{ font-size:11px !important; margin:0 !important; }

/* beneficios (Gaby): más aire abajo y la línea gris de abajo a la vista, antes de la foto de la óptica */
#v-inicio .benef{ margin-bottom:64px !important; }
@media (max-width:820px){ #v-inicio .benef{ margin-bottom:44px !important; } }
/* en la ficha: el mismo formato, después de "Detalles del producto"; reemplaza la lista de servicios del panel */
.fi-servicios{ display:none !important; }
.benef.benef-ficha{ margin:0 !important; background:#fff; }
.benef.benef-ficha > div{ padding:18px var(--pad) !important; }

/* medidas: cerradas, se abren justo debajo de "Medidas" con la flechita (Gaby) */
.fi-med-ya{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease), margin .45s; margin:0 !important; }
.fi-med-ya > div{ overflow:hidden; min-height:0; }
.fi-med-ya.on{ grid-template-rows:1fr; margin:6px 0 18px !important; }
.ir-medidas{ display:inline-flex; align-items:center; gap:6px; font:inherit; color:inherit; }
.ir-medidas svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .35s var(--ease); }
.ir-medidas[aria-expanded="true"] svg{ transform:rotate(180deg); }
/* dibujos de medidas con línea más fina y negra */
.med-mini2{ stroke:#000 !important; stroke-width:1 !important; }
.med-mini2 .pinta-l{ stroke-width:3.2 !important; }
.med-mini2 .cota2{ stroke:#000 !important; stroke-width:.8 !important; }
.med-mini2 text{ fill:#000 !important; }

/* medidas en gris y con línea más fina (prueba de Gaby, 19/10) */
.med-bloque.med-gris{ --pinta:#c4c4c1; }
.med-mini2{ stroke-width:.75 !important; }
.med-mini2 .pinta-l{ stroke-width:2.4 !important; }
.med-mini2 .cota2{ stroke-width:.6 !important; }

/* ficha (Gaby): marca y modelo en un mismo renglón para ver los colores sin bajar */
.fc-linea.fc-mn{ display:flex !important; align-items:center; flex-wrap:nowrap; gap:10px; white-space:nowrap; }
.fc-linea.fc-mn .fc-marca{ margin-bottom:0 !important; flex:none; }
.fc-linea.fc-mn .fc-modelo-fino{ display:inline-block !important; margin-top:0 !important; min-width:0; }
/* "Lentes de sol · Polarizado" más cerca de las rayitas de las fotos */
@media (max-width:820px){
  .fi-panel{ padding-top:6px !important; }
  .fi-movil-medios{ padding-top:8px !important; }
  .fc-tipo{ margin-bottom:8px !important; }
}
.fc-linea.fc-mn{ max-width:100%; min-width:0; overflow:hidden; }
.fc-linea.fc-mn .fc-modelo-fino{ flex:none; }
.fi-panel{ min-width:0; }
.fc-linea.fc-mn.dos{ flex-wrap:wrap; white-space:normal; row-gap:6px; }
.fc-linea.fc-mn.dos .fc-modelo-fino{ flex:1 1 100%; }
/* sin la frase chiquita debajo de los colores (Gaby: esa info ya está después) */
.fi-panel .fi-nota{ display:none !important; }
.fi-panel .fi-colores{ margin-bottom:16px !important; }
/* Montura, Cristales y Medidas con el mismo interlineado (Gaby): el botón de Medidas sin alto extra */
.fi-atr .ir-medidas{ padding:0 !important; margin:0 !important; height:auto !important; min-height:0 !important; line-height:inherit !important; font-size:inherit !important; vertical-align:baseline; }
.fi-atr dd, .fi-atr dt{ line-height:1.5 !important; }

/* círculos de color de las tarjetas (Gaby): un poco más chicos, misma separación, aro del elegido completo y fáciles de tocar */
.tj-d .tj-pts, .tj-f .tj-pts{ gap:8px !important; padding:4px !important; margin-left:-4px !important; }
.tj-d .tj-pts .punto, .tj-f .tj-pts .punto{ width:10px !important; height:10px !important; position:relative; }
.tj-d .tj-pts .punto::before, .tj-f .tj-pts .punto::before{ content:""; position:absolute; inset:-5px; }   /* zona para tocar con el dedo */
.tj-pts .punto.on{ box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px #000 !important; }
.tj-d .tj-colores, .tj-f .tj-colores{ overflow:visible !important; }
/* círculos (Gaby): más chicos y el aro del elegido nunca recortado — sin scroll ni recorte en la fila */
.tj-d .tj-pts, .tj-f .tj-pts{ overflow:visible !important; flex-wrap:wrap; row-gap:8px; gap:9px !important; padding:4px !important; }
.tj-d .tj-pts .punto, .tj-f .tj-pts .punto{ width:9px !important; height:9px !important; }
.tj-pts .punto.on{ box-shadow:0 0 0 1.5px #fff, 0 0 0 2.6px #000 !important; }
.tj, .tj-datos{ overflow:visible; }
/* flechita de "Medidas" igual que las de los desplegables (Gaby): cerrada hacia abajo, abierta hacia arriba */
.fi-atr .ir-medidas svg, .fi-atr .ir-medidas:hover svg{ transform:none !important; }
.fi-atr .ir-medidas[aria-expanded="true"] svg, .fi-atr .ir-medidas[aria-expanded="true"]:hover svg{ transform:rotate(180deg) !important; }

/* "Sin stock por ahora · consultanos" sin el círculo adelante (Gaby) */
.fi-estado.no i{ display:none !important; }

/* "Lentes de sol · Polarizado" con el mismo cuerpo que "Colores · N" (Gaby) */
.fi-panel .fc-tipo{ font-size:11.5px !important; font-weight:500 !important; letter-spacing:.14em !important; color:rgb(110,110,110) !important; }
/* las muestras de color más cerca de "Colores · N" (Gaby) */
.fi-panel .sobre:has(+ .fi-colores){ margin-bottom:4px !important; }

/* PRUEBA en el Vulk Reporter (Gaby): las rayitas de las fotos sobre el borde de abajo de la foto, para ganar espacio */
@media (max-width:820px){
  .fi-izq.rayas-en-foto{ position:relative; }
  .fi-izq.rayas-en-foto .fi-movil-medios{ position:absolute; left:0; right:0; bottom:10px; padding:0 !important; z-index:3; pointer-events:none; }
  .fi-izq.rayas-en-foto .fi-movil-medios .fi-vistas{ pointer-events:auto; }
}
@media (max-width:820px){ .fi-izq.rayas-en-foto .fi-movil-medios{ bottom:0 !important; } }   /* un poco más abajo, todavía dentro de la foto (Gaby) */

/* barra de arriba igual a la del Borrador 01 (Gaby): franja negra de avisos y cabecera con íconos, con su misma letra */
.aviso, .aviso *, .cab .menu a, .cab .menu button{ font-family:var(--sans) !important; }

/* ===== PRUEBA Giralo (?gir=a|b|c) ===== */
.gir-cab{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:0; margin-bottom:0; }
.gir-txt{ padding:48px var(--pad); }
.gir-tit{ font-family:var(--nk) !important; font-size:clamp(56px,7vw,104px) !important; font-weight:400 !important; letter-spacing:-.045em; line-height:.9; margin:0; }
.gir-sub{ font-size:clamp(22px,2.4vw,32px); letter-spacing:-.025em; line-height:1.1; margin:10px 0 18px; }
.gir-cuerpo{ font-size:15px; line-height:1.5; max-width:44ch; margin:0 0 22px; color:inherit; opacity:.8; }
.gir-pasos{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; }
.gir-pasos li{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.gir-pasos b{ display:inline-grid; place-items:center; width:22px; height:22px; border:1px solid currentColor; border-radius:50%; font-size:10px; }
.gir-media{ position:relative; min-height:420px; height:100%; }
.gir-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* A: negro, texto a la izquierda y video a la derecha */
.giro-sec.gir-a .gir-cab{ background:#000; color:#fff; }
.giro-sec.gir-a .gir-media{ min-height:520px; }
/* B: blanco, anteojo grande para girar con la manito y un video chico */
.giro-sec.gir-b .gir-media{ display:grid; grid-template-columns:2fr 1fr; gap:0; min-height:460px; }
.gir-demo{ position:relative; display:block; background:var(--nkg); }
.gir-demo-caja{ position:absolute; inset:0; }
.gir-mano{ position:absolute; left:50%; bottom:18%; width:54px; height:54px; margin-left:-27px; fill:#fff; stroke:#000; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; animation:girMano 2.4s ease-in-out infinite; pointer-events:none; }
@keyframes girMano{ 0%,100%{ transform:translateX(-46px); } 50%{ transform:translateX(46px); } }
.gir-probalo{ position:absolute; left:14px; top:14px; font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; background:#000; color:#fff; padding:5px 9px 4px; }
.gir-vid-chico{ position:relative; }
.giro-sec.gir-b .gir-media > .gir-vid{ position:relative; height:100%; }
/* C: video de fondo a todo el ancho y el texto blanco encima */
.giro-sec.gir-c .gir-cab{ position:relative; display:block; min-height:min(86svh,820px); color:#fff; background:#000; overflow:hidden; }
.giro-sec.gir-c .gir-fondo{ opacity:.7; }
.giro-sec.gir-c .gir-txt{ position:relative; z-index:2; padding-top:clamp(64px,12vh,140px); max-width:720px; }
.giro-sec.gir-c .gir-btn{ position:absolute; left:var(--pad); bottom:28px; z-index:2; }
.giro-sec:is(.gir-a,.gir-b,.gir-c) .nk-giro-fila{ margin-top:0; }
@media (max-width:820px){
  .gir-cab{ grid-template-columns:1fr; }
  .gir-txt{ padding:36px var(--pad) 28px; }
  .gir-media{ min-height:0; aspect-ratio:4/5; }
  .giro-sec.gir-a .gir-media{ min-height:0; }
  .giro-sec.gir-b .gir-media{ grid-template-columns:1fr; aspect-ratio:auto; }
  .giro-sec.gir-b .gir-demo{ aspect-ratio:1/1; }
  .giro-sec.gir-b .gir-media > .gir-vid{ aspect-ratio:16/9; height:auto; }
  .giro-sec.gir-c .gir-cab{ min-height:620px; }
}
.giro-sec.gir-b .gir-media > .gir-vid{ object-fit:cover; background:#000; min-height:220px; }

/* Giralo B + ícono de 360 de las fotos (Gaby) */
.gir-tit{ display:flex; align-items:center; gap:.18em; }
.gir-ico{ width:.62em; height:.62em; fill:none; stroke:currentColor; stroke-width:1.1; flex:none; }
.gir-demo .gir-360{ left:14px; top:14px; z-index:3; }
.gir-demo .gir-probalo{ left:auto; right:14px; }
.giro-sec.gir-b .gir-media > .gir-vid{ background:#fff !important; object-fit:contain !important; }
@media (max-width:820px){ .giro-sec.gir-b .gir-media > .gir-vid{ display:none !important; } }   /* en el celu, solo el anteojo para girar (el video vertical quedaba chiquito) */

/* Giralo: espacio entre el anteojo grande y los más vendidos (Gaby) */
.giro-sec:is(.gir-a,.gir-b,.gir-c) .nk-giro-fila{ margin-top:48px !important; }
@media (max-width:820px){ .giro-sec:is(.gir-a,.gir-b,.gir-c) .nk-giro-fila{ margin-top:32px !important; } }

/* Giralo en el celu: que nada quede más ancho que la pantalla (cortaba "Probalo acá") */
@media (max-width:820px){ .gir-cab{ grid-template-columns:minmax(0,1fr) !important; } .giro-sec.gir-b .gir-media{ grid-template-columns:minmax(0,1fr) !important; } .gir-txt, .gir-media, .gir-demo{ min-width:0; max-width:100%; } }

/* ícono de 360 nuevo (Gaby): "360°" con dos flechas curvas; el número ya está en el dibujo, va sin texto al lado */
.tj-sup .insig.nk-360 svg{ width:24px !important; height:24px !important; stroke-width:1.1 !important; color:#000; }
.fi-360 svg{ width:30px !important; height:30px !important; stroke-width:1 !important; color:#000; }
.fi-vistas .chip svg{ width:20px; height:20px; }
.gir-ico{ width:.8em !important; height:.8em !important; stroke-width:.9 !important; }
.tj-sup .insig.nk-360 svg{ width:30px !important; height:30px !important; }
.fi-360 svg{ width:38px !important; height:38px !important; }
@media (max-width:820px){ .tj-sup .insig.nk-360 svg{ width:28px !important; height:28px !important; } .fi-360 svg{ width:34px !important; height:34px !important; } }

/* Giralo B (Gaby): el lente grande va pasando por los 4 más vendidos; sin la fila de 4 chicos abajo */
.giro-sec.gir-b .nk-giro-fila{ display:none !important; }
.gir-demo-caja.on{ animation:girEntra .6s ease both; }
@keyframes girEntra{ from{ opacity:0; } to{ opacity:1; } }
.gir-cual{ position:absolute; left:14px; bottom:14px; z-index:3; display:grid; gap:4px; justify-items:start; pointer-events:none; }
.gir-cual .nk-giro-nom{ font-size:11px; }
.gir-demo .gir-mano{ bottom:24%; }

/* ícono de 360: el de Gaby redibujado en línea más fina, versión A (img/icono-360.svg) */
.i360{ display:block; height:auto; flex:none; }
.tj-sup .insig.nk-360 .i360{ width:30px; }
.fi-360 .i360{ width:40px; }
.fi-vistas .i360{ width:22px; margin-right:6px; }
.gir-tit .gir-ico{ width:.9em !important; height:auto !important; }
@media (max-width:820px){ .tj-sup .insig.nk-360 .i360{ width:28px; } .fi-360 .i360{ width:36px; } }

/* Giralo: fundido a negro entre lente y lente con el 360 blanco chiquito al centro (Gaby) */
.gir-negro{ position:absolute; inset:0; z-index:5; background:#000; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .5s ease; }
.gir-negro .i360{ width:46px; filter:invert(1); }
.gir-demo.negro .gir-negro{ opacity:1; }
.gir-demo-caja.on{ animation:none; }

/* Giralo: el lente grande se gira con el dedo ahí mismo (Gaby) */
.gir-demo{ cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.gir-demo:active{ cursor:grabbing; }
.gir-demo img{ -webkit-user-drag:none; pointer-events:none; }
.gir-demo.tocado .gir-mano{ display:none; }

/* Campañas más arriba, sin tanto aire después de Giralo (Gaby) */
#giro-sec + .nk-camp, #giro-sec ~ .nk-camp:first-of-type{ margin-top:20px !important; }

/* pantalla negra de Giralo: el 360 blanco, la manito moviéndose de lado a lado y "Probalo acá" (Gaby) */
.gir-negro{ grid-template-rows:auto auto auto; align-content:center; gap:16px; }
.gir-negro .gir-mano{ position:static; margin:0; width:48px; height:48px; fill:#000; stroke:#fff; animation:girMano 1.6s ease-in-out infinite; }
.gir-demo.tocado .gir-negro .gir-mano{ display:block; }
.gir-negro-txt{ color:#fff; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
/* Giralo: lente sin fondo sobre blanco, un solo giro seguido (Gaby) */
.giro-sec.gir-b .gir-demo{ background:#fff !important; }
.gir-cv{ position:absolute; inset:0; width:100%; height:100%; }
.gir-negro{ display:none !important; }
.giro-sec.gir-b .gir-demo{ background:var(--nkg) !important; }   /* con el fondo original de las fotos 360 */

/* manito con flechas más chica (Gaby) */
.gir-demo .gir-mano{ width:36px !important; height:36px !important; margin-left:-18px !important; }
@keyframes girMano{ 0%,100%{ transform:translateX(-30px); } 50%{ transform:translateX(30px); } }

/* Giralo: los dos pasos en un solo renglón (Gaby) */
.gir-pasos{ flex-wrap:nowrap !important; gap:0 16px !important; white-space:nowrap; }
@media (max-width:420px){ .gir-pasos{ gap:0 12px !important; } .gir-pasos li{ font-size:10px !important; letter-spacing:.04em !important; gap:6px !important; } .gir-pasos b{ width:20px; height:20px; } }

/* el ícono de 360 se puede tocar: lleva a la vista 360 (Gaby) */
.tj-sup .nk-360, .fi-360:not(.gir-360){ cursor:pointer; pointer-events:auto; }
.tj-sup .nk-360{ position:relative; }
.fi .fi-360{ height:auto; }
.tj-sup .nk-360::after, .fi-360:not(.gir-360)::after{ content:""; position:absolute; inset:-10px; }

/* "Giralo 360°" gira como el lente sobre la base (Gaby): una vuelta completa cada 5 s */
.gir-txt{ perspective:900px; }
.gir-tit{ display:inline-block !important; transform-origin:50% 50%; animation:girTit 5s cubic-bezier(.45,0,.25,1) infinite; backface-visibility:visible; }
@keyframes girTit{ 0%,55%{ transform:rotateY(0); } 85%,100%{ transform:rotateY(360deg); } }
@media (prefers-reduced-motion:reduce){ .gir-tit{ animation:none; } }

/* "Giralo 360°": las letras se van por un costado y entran por el otro (Gaby), en vez de girar */
.gir-tit{ animation:none !important; transform:none !important; overflow:hidden; display:block !important; }
.gir-tit > span{ display:inline-block; animation:girPasa 5s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes girPasa{ 0%,52%{ transform:translateX(0); } 68%{ transform:translateX(-110%); } 68.01%{ transform:translateX(110vw); } 86%,100%{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .gir-tit > span{ animation:none; } }
/* "Giralo 360°" (Gaby): sale por la izquierda y entra por la derecha; después sale por la derecha y entra por la izquierda */
.gir-tit > span{ animation:girPasa2 10s cubic-bezier(.6,0,.3,1) infinite !important; }
@keyframes girPasa2{
  0%,25%{ transform:translateX(0); }
  33%{ transform:translateX(-110%); } 33.01%{ transform:translateX(110vw); }
  43%,75%{ transform:translateX(0); }
  83%{ transform:translateX(110vw); } 83.01%{ transform:translateX(-110%); }
  93%,100%{ transform:translateX(0); }
}
/* "Giralo 360°" mucho más rápido (Gaby): cada salida/entrada dura ~0,35 s, ciclo de 6 s */
.gir-tit > span{ animation:girPasa3 6s cubic-bezier(.55,0,.35,1) infinite !important; }
@keyframes girPasa3{
  0%,32%{ transform:translateX(0); }
  38%{ transform:translateX(-110%); } 38.01%{ transform:translateX(110vw); }
  44%,82%{ transform:translateX(0); }
  88%{ transform:translateX(110vw); } 88.01%{ transform:translateX(-110%); }
  94%,100%{ transform:translateX(0); }
}
/* "Giralo 360°" vuelve a la primera animación (Gaby): una vuelta completa como el lente, cada 5 s */
.gir-tit{ overflow:visible !important; perspective:900px; }
.gir-tit > span{ animation:girTit 5s cubic-bezier(.45,0,.25,1) infinite !important; transform-origin:50% 50%; backface-visibility:visible; }

/* la etiqueta "Nº N más vendido" de Giralo se puede tocar (Gaby) */
.gir-cual{ pointer-events:auto !important; cursor:pointer; }
.gir-cual .nk-giro-nom{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* Lentes de sol y Armazones de receta: dos fotos de campaña de lado a lado, antes del mosaico (Gaby) */
.nk-dos{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:56px; }
.nk-dos a{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--nkg); }
.nk-dos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.nk-dos a:hover img{ transform:scale(1.03); }
.nk-dos .nk-btn{ position:absolute; left:14px; bottom:14px; z-index:2; }
.nk-dos + .nk-cats{ margin-top:4px !important; }
/* en el celu las dos entran juntas en una pantalla (Gaby) */
@media (max-width:820px){ .nk-dos{ grid-template-columns:1fr; } .nk-dos a{ aspect-ratio:auto; height:calc(50vh - 2px); height:calc(50svh - 2px); } }
/* el mosaico queda con 4: Clip on alto, Polarizados, Deportivo y Lente amarillo grande */
.nk-cats.nk-mosaico{ grid-template-rows:23vw 23vw !important; grid-template-areas:"clip pol amar amar" "clip dep amar amar" !important; }
@media (max-width:820px){
  .nk-cats.nk-mosaico{ grid-template-rows:46vw 46vw 56vw !important; grid-template-areas:"clip pol" "clip dep" "amar amar" !important; }
}
/* Giralo: manito con flechitas al lado de "Arrastrá de lado a lado" (Gaby) */
.gir-mano-paso{ flex:none; width:26px; height:26px; margin-left:2px; fill:#fff; stroke:#000; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; animation:girManoPaso 1.8s ease-in-out infinite; }
@keyframes girManoPaso{ 0%,100%{ transform:translateX(-3px); } 50%{ transform:translateX(3px); } }
@media (max-width:420px){ .gir-mano-paso{ width:22px; height:22px; } }
@media (prefers-reduced-motion:reduce){ .gir-mano-paso{ animation:none; } }
/* cada entrada: 4 fotos que se funden una tras otra y después el título grande (Gaby) */
.nk-dos img.nk-sec{ opacity:0; transition:opacity 1.4s ease, transform 1.4s var(--ease); }
.nk-dos .nk-sec.on{ opacity:1; }
.nk-dos-tit{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; padding:0 7%; background:var(--nkg); color:#000;
  font-family:var(--nk); font-weight:400; font-size:clamp(46px,7vw,104px); line-height:.96; letter-spacing:-.045em; opacity:0; transition:opacity 1.4s ease; pointer-events:none; }
.nk-dos .nk-btn{ transition:opacity .6s ease; }
.nk-dos a.en-tit .nk-btn{ opacity:0; }
@media (max-width:820px){ .nk-dos-tit{ font-size:clamp(46px,14vw,64px); } }
/* el título va en blanco sobre la foto, más fino y más grande (Gaby) */
.nk-dos-tit{ background:rgba(0,0,0,.2) !important; color:#fff !important; font-weight:200 !important; font-size:clamp(64px,8.6vw,136px) !important; letter-spacing:-.04em !important; line-height:.94 !important; padding:0 6% !important; }
@media (max-width:820px){ .nk-dos-tit{ font-size:clamp(52px,16vw,74px) !important; } }
/* el título ya no es un paso aparte: se prende sobre la foto que toca (Gaby) */
.nk-dos .nk-dos-tit.on{ opacity:1; }
/* Giralo: las flechitas de la manito del paso 2 quedan a la altura del renglón (Gaby) */
.gir-mano-paso{ position:relative; top:8px; }
@media (max-width:420px){ .gir-mano-paso{ top:6px; } }
/* paso 1: la misma manito aparece, se acerca, toca y desaparece (Gaby) */
.gir-mano-toca{ flex:none; width:26px; height:26px; margin-left:2px; position:relative; top:4px; fill:#fff; stroke:#000; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transform-origin:50% 30%; animation:girToca 2.2s ease-in-out infinite; }
.gir-mano-toca .toque{ fill:none; stroke-width:1.3; transform-origin:22px 7px; animation:girToque 2.2s ease-out infinite; }
@keyframes girToca{ 0%{ opacity:0; transform:translateY(-5px) scale(1.12); } 25%{ opacity:1; transform:translateY(0) scale(1); } 40%{ transform:translateY(1px) scale(.9); } 55%{ opacity:1; transform:translateY(0) scale(1); } 80%,100%{ opacity:0; transform:translateY(-3px) scale(1.05); } }
@keyframes girToque{ 0%,38%{ opacity:0; transform:scale(.4); } 45%{ opacity:1; transform:scale(1); } 70%,100%{ opacity:0; transform:scale(1.8); } }
@media (max-width:420px){ .gir-mano-toca{ width:22px; height:22px; top:3px; } }
@media (prefers-reduced-motion:reduce){ .gir-mano-toca, .gir-mano-toca .toque{ animation:none; } }
/* palabras de sol/receta: aparecen y desaparecen fundiéndose, más suave (Gaby) */
.nk-dos-tit{ transition:opacity 1.1s ease-in-out !important; }
/* manito que toca: quieta en su lugar, solo aparece, da un toque (achica apenas) y desaparece (Gaby) */
@keyframes girToca{ 0%{ opacity:0; transform:scale(1); } 22%{ opacity:1; transform:scale(1); } 36%{ transform:scale(.9); } 48%{ transform:scale(1); } 70%{ opacity:1; transform:scale(1); } 88%,100%{ opacity:0; transform:scale(1); } }
.gir-mano-toca{ transform-origin:46% 25%; }
/* manito que toca: siempre del mismo tamaño, solo aparece y desaparece (Gaby) */
@keyframes girToca{ 0%{ opacity:0; } 25%,70%{ opacity:1; } 90%,100%{ opacity:0; } }
.gir-mano-toca{ transform:none !important; }
/* campañas: sin el botón "Ver marca" y el texto más abajo, justo arriba de las rayitas (Gaby) */
.nk-camp-txt{ bottom:34px !important; }
.nk-camp-txt .nk-tit{ margin:0 !important; }
/* circulito del toque: aparece a la vez que la manito, se agranda y desaparece junto con ella (Gaby) */
@keyframes girToque{ 0%{ opacity:0; transform:scale(.6); } 25%{ opacity:1; } 70%{ opacity:1; } 90%{ opacity:0; transform:scale(1.7); } 100%{ opacity:0; transform:scale(1.7); } }
/* sol/receta más rápido (Gaby): fundidos más cortos */
.nk-dos img.nk-sec{ transition:opacity .9s ease, transform 1.4s var(--ease) !important; }
.nk-dos-tit{ transition:opacity .7s ease-in-out !important; }
.nk-dos-tit{ transition:opacity .9s ease-in-out !important; }
/* sol/receta: el texto blanco abajo, con margen (Gaby) */
.nk-dos-tit{ align-items:flex-end !important; padding:0 6% 7% !important; }
@media (max-width:820px){ .nk-dos-tit{ padding:0 24px 26px !important; } }
/* Filtros, colores (armazón y cristal): recuadros todos del mismo ancho, de a dos (COLOR A, Gaby) */
.f-acc:is([data-acc=color_armazon],[data-acc=color_cristal]) .f-ops{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.f-acc:is([data-acc=color_armazon],[data-acc=color_cristal]) .f-ops .chip{ width:100%; justify-content:flex-start; overflow:hidden; }
.f-acc:is([data-acc=color_armazon],[data-acc=color_cristal]) .f-ops .chip .c{ margin-left:auto; }
/* Filtros: Forma, Género y Material también en recuadros parejos de a dos, como los colores (Gaby) */
.f-acc:is([data-acc=forma],[data-acc=genero],[data-acc=material]) .f-ops{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.f-acc:is([data-acc=forma],[data-acc=genero],[data-acc=material]) .f-ops .chip{ width:100%; justify-content:flex-start; overflow:hidden; }
.f-acc:is([data-acc=forma],[data-acc=genero],[data-acc=material]) .f-ops .chip .c{ margin-left:auto; }
/* nombres largos (ej. "Acetato forrado tela jean"): pasan a dos renglones dentro del recuadro; el de al lado toma la misma altura */
.f-acc:is([data-acc=forma],[data-acc=genero],[data-acc=material],[data-acc=color_armazon],[data-acc=color_cristal]) .f-ops .chip{ height:auto; min-height:34px; white-space:normal; line-height:1.2; padding-top:7px; padding-bottom:7px; text-align:left; }
.f-acc:is([data-acc=forma],[data-acc=genero],[data-acc=material],[data-acc=color_armazon],[data-acc=color_cristal]) .f-ops .chip .c{ position:relative; top:.5px; }
/* buscador: "Búsqueda con filtros" arriba de "Búsquedas frecuentes", misma letra (Gaby) */
.busca-filtros{ display:inline-flex; align-items:center; gap:8px; color:var(--tinta); margin:0 0 26px; padding:0; background:none; border:0; cursor:pointer; }
.busca-filtros svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
/* buscador: "Lo más elegido" con el mismo margen que los otros títulos (Gaby) */
.busca-res-tit{ grid-column:1/-1; padding:4px 0 14px; }
@media (max-width:820px){ .busca-res-tit{ padding:4px var(--pad) 14px; } }
/* criterio para todos los recuadros de opciones (Gaby): mismo ancho, de a dos por renglón, cantidad a la derecha.
   Búsquedas frecuentes, todos los grupos de Filtros (incluye Ordenar por) y los talles de la ficha */
.busca-sug, .f-ops, .fi-talles{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
.busca-sug .chip, .f-ops .chip, .fi-talles .chip{ width:100%; justify-content:flex-start; overflow:hidden; height:auto; min-height:34px; white-space:normal; line-height:1.2; padding-top:7px; padding-bottom:7px; text-align:left; }
.f-ops .chip .c{ margin-left:auto; position:relative; top:.5px; }
/* mismo criterio de recuadros parejos (Gaby): los rápidos del catálogo todos del mismo ancho (la tira sigue deslizando) */
.rapidos .chip{ flex:0 0 112px; justify-content:center; }
/* filtros elegidos: de a dos, mismo ancho, la crucecita a la derecha; "Borrar todo" en su propio renglón */
.activos{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.activos .chip{ width:100%; justify-content:space-between; overflow:hidden; height:auto; min-height:30px; white-space:normal; line-height:1.2; padding-top:6px; padding-bottom:6px; text-align:left; }
.activos .chip svg{ flex:none; }
.activos .borrar{ grid-column:1 / -1; justify-self:start; padding:0; }
/* Giralo: frase con el loguito 360 en línea con el texto (Gaby) */
.gir-txt .gir-cuerpo + .gir-cuerpo{ margin-top:-10px; }
.gir-logo360 .i360{ display:inline-block; width:2.4em; height:auto; vertical-align:-.45em; margin:0 .15em; }
/* Giralo: "PROBALO" al final de la frase y sin el recuadro "Probalo acá" sobre la foto (Gaby) */
.gir-probalo-txt{ font-weight:600; letter-spacing:.06em; opacity:1; }
.gir-demo .gir-probalo{ display:none !important; }
.gir-txt .gir-logo360{ margin-top:0 !important; }
/* apertura de Polarizados: foto del cuadro + texto largo en negro sobre blanco (mitad y mitad en compu, foto arriba y texto abajo en el celu) */
.apertura.ap-pol{ display:grid !important; grid-template-columns:1fr 1fr; height:auto !important; aspect-ratio:auto !important; min-height:min(78svh,760px) !important; background:#fff !important; }
.ap-pol .ap-foto{ position:relative !important; inset:auto; min-height:100%; }
.ap-pol .ap-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ap-pol .ap-foto::after{ display:none; }
.ap-pol .ap-texto{ position:static !important; color:#000; display:flex; flex-direction:column; justify-content:center; gap:14px !important; padding:56px clamp(24px,6vw,96px) !important; }
.ap-pol .ap-tit{ font-family:var(--nk); font-weight:400; font-size:clamp(34px,3.4vw,52px); line-height:1; letter-spacing:-.035em; margin:0 0 6px; }
.ap-pol .ap-texto p{ color:#222 !important; font-size:15px !important; line-height:1.55; max-width:46ch; margin:0; }
@media (max-width:820px){
  .apertura.ap-pol{ grid-template-columns:1fr; min-height:0 !important; }
  .ap-pol .ap-foto{ aspect-ratio:4/5 !important; min-height:0 !important; }
  .ap-pol .ap-texto{ padding:28px var(--pad) 8px !important; }
  .ap-pol .ap-texto p{ font-size:14px !important; }
}
/* Gaby (22/10, aprobado): en la ficha, los colores en una sola fila que se desliza de costado */
.colfila .fi-panel .fi-colores{ display:flex !important; flex-wrap:nowrap; overflow-x:auto; overflow-y:visible; max-width:none !important; gap:0 !important; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px 1px; margin-right:calc(-1 * var(--pad)); padding-right:var(--pad); }
.colfila .fi-panel .fi-colores::-webkit-scrollbar{ display:none; }
.colfila .fi-panel .fi-color{ flex:0 0 64px; scroll-snap-align:start; }
/* cuadros: Polarizados pasa al lugar grande y Lente amarillo al chico (Gaby) */
.nk-mosaico .c-pol{ grid-area:amar !important; }
.nk-mosaico .c-amar{ grid-area:pol !important; }
/* ficha: sin los botones "Comprar en Mercado Libre" / "Consultar por WhatsApp" del medio: ya están en la barra fija de abajo (Gaby) */
#fi-compra{ display:none !important; }
/* Detalles del producto: los títulos (Marca, Modelo, Código…) en mayúscula, misma letra y tamaño que Armazón / Cristales (Gaby) */
.fi-acc .f-cuerpo .tabla th, .tabla th{ font-size:10px !important; letter-spacing:.03em !important; text-transform:uppercase; color:var(--gris) !important; font-weight:400 !important; }
/* aprobado (Gaby, 22/10): los colores miden lo justo para que el último visible quede cortado a la mitad */
.colcorte .fi-panel .fi-colores .fi-color{ flex:0 0 calc((100% + var(--pad)) / 5.5); }
/* Marcas: el logo de Jellvet sobre la barra negra, un poco más grueso (Gaby): el original es de línea muy fina */
.nk-marcas .nk-marca .nk-placa img.nk-logo[src*="jellvet"], .nk-marca .nk-logo[src*="jellvet"]{ filter:brightness(0) invert(1) drop-shadow(.3px 0 0 #fff) drop-shadow(-.3px 0 0 #fff) !important; }
/* Marcas: "Ver catálogo completo" en un recuadro gris de todo el ancho, con la barra negra centrada del ancho de dos barras de marca (Gaby) */
.nk-marca.todo{ grid-column:1 / -1; display:flex !important; align-items:center; justify-content:center; background:var(--nkg) !important; }
.nk-marca.todo .nk-btn{ position:static !important; transform:none !important; width:calc(100% - 74px); max-width:none; height:auto; min-height:42px; justify-content:center; font-size:12px; letter-spacing:.08em; }
@media (min-width:821px){ .nk-marca.todo .nk-btn{ width:320px; } }
.nk-marca.todo{ aspect-ratio:auto !important; height:50vw !important; min-height:0 !important; padding:0 !important; }
.nk-marca.todo .nk-btn{ width:calc(100% - 74px) !important; }
@media (min-width:821px){ .nk-marca.todo{ height:240px !important; } .nk-marca.todo .nk-btn{ width:320px !important; } }
/* logo de Jellvet en la barra de Marcas un poco más chico (Gaby) */
.nk-marcas .nk-marca .nk-placa img.nk-logo[src*="jellvet"]{ max-height:11px !important; }
/* Lente amarillo: la foto se funde a un fondo amarillo y vuelve, en loop; el botón queda siempre arriba (Gaby) */
.nk-mosaico .c-amar::after{ content:""; position:absolute; inset:0; z-index:1; background:#efc53a; opacity:0; animation:amarFunde 7s ease-in-out infinite; pointer-events:none; }
.nk-mosaico .c-amar .nk-btn{ z-index:2; }
@keyframes amarFunde{ 0%,40%{ opacity:0; } 55%,80%{ opacity:1; } 95%,100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .nk-mosaico .c-amar::after{ animation:none; } }
/* apertura de Lente amarillo: misma fundida a amarillo que el cuadro de la portada */
.ap-amar .ap-foto::after{ display:block !important; content:""; position:absolute; inset:0; z-index:1; background:#efc53a !important; opacity:0; animation:amarFunde 7s ease-in-out infinite; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .ap-amar .ap-foto::after{ animation:none; } }
/* el amarillo casi no se queda: entra y sale en poco más de un segundo cada 7 s (Gaby) */
@keyframes amarFunde{ 0%,72%{ opacity:0; } 79%,81%{ opacity:1; } 90%,100%{ opacity:0; } }
/* Clip on: la foto se funde a blanco con "2 EN 1" grande en negro, y vuelve (Gaby) */
.nk-mosaico .c-clip::after{ content:"2 EN 1"; position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; background:#fff; color:#000;
  font-family:var(--nk); font-weight:400; font-size:clamp(52px,8vw,112px); letter-spacing:-.03em; line-height:1; text-align:center; opacity:0; animation:clipFunde 8s ease-in-out infinite; pointer-events:none; }
.nk-mosaico .c-clip .nk-btn{ z-index:2; }
@keyframes clipFunde{ 0%,50%{ opacity:0; } 58%,82%{ opacity:1; } 90%,100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .nk-mosaico .c-clip::after{ animation:none; } }
/* apertura de Lente amarillo: arranca toda amarilla y se funde una sola vez a la foto (Gaby) */
.ap-amar .ap-foto::after{ opacity:1; animation:amarAbre 1.8s ease-in-out .5s 1 forwards !important; }
@keyframes amarAbre{ from{ opacity:1; } to{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .ap-amar .ap-foto::after{ animation:none !important; opacity:0; } }
/* Clip on: el "2 EN 1" del cuadro dura lo mismo que el amarillo (Gaby) */
.nk-mosaico .c-clip::after{ animation:amarFunde 7s ease-in-out infinite !important; }
/* apertura de Clip on: arranca en blanco con "2 EN 1" y se funde una sola vez a la foto */
.ap-clip .ap-foto::after{ display:flex !important; content:"2 EN 1"; position:absolute; inset:0; z-index:1; align-items:center; justify-content:center; background:#fff !important; color:#000;
  font-family:var(--nk); font-weight:400; font-size:clamp(64px,9vw,140px); letter-spacing:-.03em; line-height:1; opacity:1; animation:amarAbre 1.8s ease-in-out .9s 1 forwards; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .ap-clip .ap-foto::after{ animation:none; opacity:0; } }
/* el blanco de Clip on y el amarillo de Lente amarillo se encienden alternados: medio ciclo de diferencia (Gaby) */
.nk-mosaico .c-clip::after{ animation-delay:-3.5s !important; }
/* cuadros de la portada: los planos de color se turnan (Gaby): amarillo, blanco "2 EN 1" y negro con el sello de polarizado en blanco.
   Mismo ritmo para los tres (7 s, cada plano ~1 s), corridos un tercio de vuelta para que nunca coincidan */
.nk-mosaico .c-amar::after{ animation:amarFunde 7s ease-in-out 0s infinite !important; }
.nk-mosaico .c-clip::after{ animation:amarFunde 7s ease-in-out -4.667s infinite !important; }
.nk-mosaico .c-pol::after{ content:""; position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none;
  background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23fff'/%3E%3Cpath d='M41.5%2070V31.5H53a10%2010%200%200%201%200%2020H41.5' fill='none' stroke='%23000' stroke-width='6.5'/%3E%3C/svg%3E") center / clamp(60px,9vw,120px) no-repeat;
  animation:amarFunde 7s ease-in-out -2.333s infinite; }
.nk-mosaico .c-pol .nk-btn{ z-index:2; }
@media (prefers-reduced-motion:reduce){ .nk-mosaico .c-pol::after{ animation:none; } }
/* apertura de Polarizados: mismo criterio que amarillo y clip on: arranca en negro con el sello y se funde a la foto */
.ap-pol:not(.ap-amar):not(.ap-clip) .ap-foto::after{ display:block !important; content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:1;
  background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23fff'/%3E%3Cpath d='M41.5%2070V31.5H53a10%2010%200%200%201%200%2020H41.5' fill='none' stroke='%23000' stroke-width='6.5'/%3E%3C/svg%3E") center / clamp(90px,12vw,160px) no-repeat !important;
  animation:amarAbre 1.8s ease-in-out .9s 1 forwards; }
@media (prefers-reduced-motion:reduce){ .ap-pol:not(.ap-amar):not(.ap-clip) .ap-foto::after{ animation:none; opacity:0; } }
/* planos que se turnan más rápido (Gaby): cuando uno se apaga se enciende el siguiente.
   Orden: amarillo → negro polarizado → blanco 2 EN 1 → video deportivo de Rusty; 1,25 s cada uno, vuelta de 5 s */
@keyframes planoTurno{ 0%{ opacity:0; } 9%,12%{ opacity:1; } 24%,100%{ opacity:0; } }
.nk-mosaico .c-amar::after{ animation:planoTurno 5s ease-in-out 0s infinite !important; }
.nk-mosaico .c-pol::after{ animation:planoTurno 5s ease-in-out -3.75s infinite !important; }
.nk-mosaico .c-clip::after{ animation:planoTurno 5s ease-in-out -2.5s infinite !important; }
.nk-mosaico .c-dep .dep-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:0; pointer-events:none; animation:planoTurno 5s ease-in-out -1.25s infinite; }
.nk-mosaico .c-dep .nk-btn{ z-index:2; }
@media (prefers-reduced-motion:reduce){ .nk-mosaico .c-dep .dep-vid{ display:none; } }
/* cuadros: al acercar el mouse o apoyar el dedo, se funde a su plano de color y se queda (Gaby) */
.nk-mosaico :is(.c-amar,.c-clip,.c-pol)::after, .nk-mosaico .c-dep .dep-vid{ transition:opacity .45s ease; }
@media (hover:hover){
  .nk-mosaico :is(.c-amar,.c-clip,.c-pol):hover::after{ animation:none !important; opacity:1; }
  .nk-mosaico .c-dep:hover .dep-vid{ animation:none !important; opacity:1; }
}
.nk-mosaico :is(.c-amar,.c-clip,.c-pol).toca::after{ animation:none !important; opacity:1; }
.nk-mosaico .c-dep.toca .dep-vid{ animation:none !important; opacity:1; }
/* aperturas de Lente amarillo, Clip on y Polarizados: el plano de color se funde a la foto más rápido (Gaby) */
.ap-amar .ap-foto::after, .ap-clip .ap-foto::after, .ap-pol:not(.ap-amar):not(.ap-clip) .ap-foto::after{ animation:amarAbre .8s ease-in-out .25s 1 forwards !important; }
/* apertura de Polarizados: el sello queda en el centro de la foto después del fundido (Gaby) */
.ap-pol:not(.ap-amar):not(.ap-clip) .ap-foto::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23fff'/%3E%3Cpath d='M41.5%2070V31.5H53a10%2010%200%200%201%200%2020H41.5' fill='none' stroke='%23000' stroke-width='6.5'/%3E%3C/svg%3E") center / clamp(90px,12vw,160px) no-repeat; }
/* el sello que queda sobre la foto, igual que en el catálogo: círculo negro con rayitas blancas (Gaby) */
.ap-pol:not(.ap-amar):not(.ap-clip) .ap-foto::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23000'/%3E%3Cpath d='M41.5%2070V31.5H53a10%2010%200%200%201%200%2020H41.5' fill='none' stroke='%23fff' stroke-width='6.5'/%3E%3C/svg%3E") center / clamp(90px,12vw,160px) no-repeat; }
/* sello de polarizado: P dentro del círculo (PLOGO A, Gaby 22/10) */
/* apertura de Polarizados: el sello queda centrado en el recuadro y la foto se corre para que el eje del puente (55,5 % del ancho)
   caiga justo en el centro, debajo de la P (Gaby). Se agranda un 13 % para que no quede borde vacío al correrla */
.ap-pol:not(.ap-amar):not(.ap-clip) .ap-foto img{ transform:translateX(-2.65%) scale(1.06) !important; }   /* el puente está en el 52,5 % del ancho (medido) */
/* alternancia fluida (Gaby): en cuanto un cuadro vuelve a su foto, el siguiente ya se está fundiendo a su plano o video.
   Vuelta de 5 s, 4 cuadros corridos 1,25 s: cada uno sube 0,5 s, queda 0,5 s y baja 0,5 s, y el siguiente arranca mientras baja */
@keyframes planoTurno{ 0%{ opacity:0; } 10%,20%{ opacity:1; } 30%,100%{ opacity:0; } }
/* apertura de Polarizados: después del fundido, la P baja y se ubica abajo a la derecha, del tamaño y con el margen
   de la ficha del catálogo (42 px a 12 px del borde en celu, 48 px a 14 px en compu) (Gaby) */
.ap-pol:not(.ap-amar):not(.ap-clip) .ap-foto::before{ animation:selloBaja .9s cubic-bezier(.65,0,.35,1) 1.35s 1 forwards; }
@keyframes selloBaja{ to{ background-position:calc(100% - 12px) calc(100% - 12px); background-size:42px 42px; } }
@media (min-width:821px){ @keyframes selloBaja{ to{ background-position:calc(100% - 14px) calc(100% - 14px); background-size:48px 48px; } } }
@media (prefers-reduced-motion:reduce){ .ap-pol:not(.ap-amar):not(.ap-clip) .ap-foto::before{ animation-duration:.01s; animation-delay:0s; } }
/* apertura de Deportivo: el video de surf arriba de la foto; al terminar (≈3 s) se funde a la foto (Gaby) */
.ap-dep .ap-foto::after{ display:none !important; }
.ap-dep .ap-dep-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:1; transition:opacity .8s ease-in-out; pointer-events:none; }
.ap-dep .ap-dep-vid.fin{ opacity:0; }
.ap-dep .ap-foto::before{ display:none !important; }
.ap-dep .ap-foto img{ transform:none !important; }
.apertura.ap-pol.ap-dep:not(.ap-amar):not(.ap-clip) .ap-foto::after, .apertura.ap-pol.ap-dep:not(.ap-amar):not(.ap-clip) .ap-foto::before{ display:none !important; }
/* ventanita de Polarizado que abre la P de la ficha (Gaby) */
.fi-sello{ pointer-events:auto !important; cursor:pointer; z-index:4; }
.pol-info{ position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.45); display:grid; place-items:center; padding:var(--pad); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.pol-info.on{ opacity:1; visibility:visible; }
.pol-info-caja{ position:relative; background:#fff; color:#000; max-width:440px; width:100%; padding:34px 28px 30px; transform:translateY(12px); transition:transform .35s var(--ease); }
.pol-info.on .pol-info-caja{ transform:none; }
.pol-info-sello{ width:42px; height:42px; display:block; margin:0 0 16px; }
.pol-info h3{ font-family:var(--nk); font-weight:400; font-size:28px; letter-spacing:-.03em; margin:0 0 10px; }
.pol-info p{ font-size:14.5px; line-height:1.55; color:#222; margin:0; }
.pol-info-x{ position:absolute; top:10px; right:10px; width:40px; height:40px; display:grid; place-items:center; background:none; border:0; cursor:pointer; }
.pol-info-x svg{ width:18px; height:18px; stroke:#000; fill:none; stroke-width:1.5; }
/* Deportivo: el video tapa la foto desde el primer instante (con su primer cuadro de póster) y se funde igual que los planos de color */
.ap-dep .ap-dep-vid{ transition:opacity .8s ease-in-out !important; background:#0b3a4a; }
/* catálogo con apertura (CATREP C, Gaby): sin repetir el nombre. Queda la miga "Inicio / …" y la cuenta;
   se ocultan el título grande del catálogo y la etiqueta del modo (Clip on, etc.), que ya están en la apertura */
#v-catalogo:has(#apertura-marca.apertura) #cat-titulo{ display:none !important; }
#v-catalogo:has(#apertura-marca.apertura) .activos .chip[data-quitar="modo"]{ display:none !important; }
/* con apertura y un solo filtro (el mismo de la apertura: Polarizados, Vulk, Lente amarillo…), tampoco se repite su etiqueta;
   si se suman más filtros, vuelven a verse todas */
#v-catalogo:has(#apertura-marca.apertura) .activos:not(:has(.chip ~ .chip)){ display:none !important; }
/* Deportivo: las etiquetas "Deportiva" y "Máscara" son el mismo cuadro de la apertura: no se repiten (Gaby) */
#v-catalogo:has(#apertura-marca.ap-dep) .activos{ display:none !important; }
/* ficha: las migas arriba de todo, con "Inicio" siempre a la vista (Gaby) */
.fi-migas{ padding:12px var(--pad) 10px !important; font-size:10.5px !important; text-transform:uppercase; letter-spacing:.03em; color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fi-migas a{ color:inherit; }
/* P de polarizado en la ficha: la explicación en una burbuja al pasar el mouse o apoyar el dedo (Gaby) */
.fi-sello{ overflow:visible !important; }
.pol-tip-txt{ position:absolute; right:0; bottom:calc(100% + 10px); width:min(270px,72vw); background:#fff; color:#222; box-shadow:0 0 0 1px rgba(0,0,0,.08); padding:12px 14px; font-size:12.5px; line-height:1.45; text-align:left; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .2s, transform .2s, visibility .2s; pointer-events:none; z-index:5; }
.pol-tip-txt b{ display:block; font-family:var(--nk); font-weight:500; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; color:#000; }
.fi-sello.ver .pol-tip-txt{ opacity:1; visibility:visible; transform:none; }
@media (hover:hover){ .fi-sello:hover .pol-tip-txt{ opacity:1; visibility:visible; transform:none; } }
/* ficha: sin el renglón "Lentes de sol · Polarizado" arriba de marca y modelo; ya está en Detalles y en la P (Gaby: "muy repetido") */
.fi-panel .fc-tipo{ display:none !important; }
.fi-panel .fc-linea.fc-mn{ margin-top:10px !important; }
/* celu: las rayitas de cantidad de fotos salen de la foto y van abajo, sobre blanco, antes de la marca (Gaby) */
@media (max-width:820px){
  .fi-izq.rayas-en-foto .fi-movil-medios{ position:static !important; padding:14px var(--pad) 0 !important; justify-content:center !important; }
  .fi-panel .fc-linea.fc-mn{ margin-top:4px !important; }
}
/* tarjetas: la P y el circulito amarillo siempre en la esquina de abajo a la derecha de la foto (Gaby) */
.tj-foto{ position:relative; }
.tj-inf{ position:absolute; right:10px; bottom:10px; z-index:3; display:flex; gap:6px; align-items:center; pointer-events:none; }
.tj-inf .insig.nk-sello-ch{ display:inline-flex !important; background:none !important; box-shadow:none !important; padding:0 !important; height:auto !important; }
.tj-inf .insig.nk-sello-ch svg, .tj-inf .nk-amar{ width:20px !important; height:20px !important; display:block; }
.nk-amar{ border-radius:50%; background:#efc53a; }
/* ficha: circulito amarillo liso del mismo tamaño que la P, a su izquierda (o en la esquina si no hay P) */
.fi-amar{ position:absolute; right:12px; bottom:12px; width:42px; height:42px; border-radius:50%; background:#efc53a; z-index:4; cursor:default; }
.fi-gal-caja:has(.fi-sello) .fi-amar{ right:62px; }
@media (min-width:821px){ .fi-amar{ right:14px; bottom:14px; width:48px; height:48px; } .fi-gal-caja:has(.fi-sello) .fi-amar{ right:72px; } }
.fi-amar .pol-tip-txt{ right:0; }
.fi-amar.ver .pol-tip-txt{ opacity:1; visibility:visible; transform:none; }
@media (hover:hover){ .fi-amar:hover .pol-tip-txt{ opacity:1; visibility:visible; transform:none; } }
/* P y circulito amarillo más chicos (Gaby): ficha 32/36 px, tarjetas 16 px */
.fi-sello, .fi-amar{ width:32px !important; height:32px !important; }
.fi-gal-caja:has(.fi-sello) .fi-amar{ right:52px !important; }
@media (min-width:821px){ .fi-sello, .fi-amar{ width:36px !important; height:36px !important; } .fi-gal-caja:has(.fi-sello) .fi-amar{ right:58px !important; } }
.tj-inf .insig.nk-sello-ch svg, .tj-inf .nk-amar{ width:16px !important; height:16px !important; }
.tj-inf{ gap:5px; }
/* todavía más chicos (Gaby): ficha 24/28 px, tarjetas 13 px */
.fi-sello, .fi-amar{ width:24px !important; height:24px !important; }
.fi-gal-caja:has(.fi-sello) .fi-amar{ right:42px !important; }
@media (min-width:821px){ .fi-sello, .fi-amar{ width:28px !important; height:28px !important; } .fi-gal-caja:has(.fi-sello) .fi-amar{ right:48px !important; } }
.tj-inf .insig.nk-sello-ch svg, .tj-inf .nk-amar{ width:16px !important; height:16px !important; }   /* catálogo: queda en 16 px (Gaby) */
.tj-inf{ gap:5px; }
/* sin el círculo negro "Ver" que seguía al mouse o al dedo sobre las fotos, nunca (Gaby) */
.cursor-ver{ display:none !important; }
/* PRUEBA ?disp=1: la disponibilidad a la derecha del renglón de Colores */
.sobre.con-disp{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sobre.con-disp #fi-estado{ margin:0 !important; padding:0 !important; font-size:inherit !important; letter-spacing:inherit !important; color:var(--tinta) !important; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.sobre.con-disp #fi-estado svg{ width:13px; height:13px; }
.sobre.con-disp{ margin-top:22px !important; }
/* STOCK A (Gaby): colores sin stock en gris muy claro, sin raya; el texto "Sin stock" en gris */
.fi-panel .fi-color.sin img{ filter:grayscale(1) !important; opacity:.25 !important; }
.fi-panel .fi-color.sin::after{ display:none !important; }
.fi-panel .fi-color.sin{ background:#f8f8f7 !important; }
#fi-estado.no{ color:#9a9a9a !important; }
.fi-estado:empty{ display:none !important; }
/* aire entre marca/modelo y el renglón de Colores, haya o no aviso de stock */
.fi-panel .sobre:has(+ .fi-colores){ margin-top:22px !important; }
.sobre.con-disp #fi-estado.no{ color:#9a9a9a !important; }
/* barra fija sin precio: toda negra, "Consultá precio y stock" en blanco y "Te respondemos por WhatsApp" en gris; se toca entera (Gaby) */
.fi-fija:has(.ff-consulta){ background:#000 !important; border-top-color:#000 !important; padding:0 !important; }
.ff-consulta{ display:flex; align-items:center; justify-content:space-between; width:100%; height:100%; min-height:inherit; padding:14px var(--pad); color:#fff !important; text-decoration:none; gap:16px; }
.ff-consulta .ff-precio b{ color:#fff !important; }
.ff-consulta .ff-precio span{ color:#9a9a9a !important; }
@media (max-width:820px){ .ff-consulta{ padding:14px 16px !important; } .ff-consulta .ff-precio{ padding:0 !important; margin:0 !important; } }
/* PRUEBA (Reporter): la rayita del 360 se oculta mientras gira solo y aparece junto con "Arrastrá · girá 360°" */
.prueba-esc .giro-escala{ transition:opacity .4s ease; }
.prueba-esc .giro.girando .giro-escala{ opacity:0; }
/* PRUEBA (Reporter): en lugar de la tercera rayita va el logo 360; sin el logo 360 de arriba de la foto */
.prueba-r360 .fi-gal-caja .fi-360{ display:none !important; }
.prueba-r360 #fi-puntos .chip[aria-label="360°"]::after{ display:none !important; }
.prueba-r360 #fi-puntos .chip[aria-label="360°"] .r360{ display:block; width:30px; height:auto; opacity:.45; transition:opacity .3s; }
.prueba-r360 #fi-puntos .chip.on[aria-label="360°"] .r360{ opacity:1; }

/* PRUEBA BARRA en Vulk Reporter (Gaby, 22/10): flechita con "Inicio" y el menú en la barra de la ficha */
.fb-izq{ justify-self:start; display:flex; align-items:center; }
.fi-barra .fi-menu, .fi-barra .fi-inicio{ display:none; }
.barra-a .fi-barra .fb-izq .fi-menu, .barra-b .fi-barra .fi-menu-der{ display:flex; }
:is(.barra-a,.barra-b) .fi-barra .volver:not(.fi-inicio){ display:none; }
:is(.barra-a,.barra-b) .fi-barra .fi-inicio{ display:flex; }
.barra-a .fi-barra .fi-inicio{ padding-left:2px; }
.barra-b .fi-barra .x{ display:none; }
@media (max-width:820px){ :is(.barra-a,.barra-b) .fi-barra .logo span{ display:none; } }
/* Gaby (22/10): sin la palabra "Inicio": solo la flechita (vuelve a donde estabas) y el menú */
.barra-a .fi-barra .fi-inicio{ display:none !important; }
.barra-a .fi-barra .volver:not(.fi-inicio){ display:flex !important; padding:0 8px 0 4px; }
.barra-a .fi-barra .volver span{ display:none; }
/* PRUEBA en Vulk Reporter (Gaby, 22/10): sin la raya de arriba de "Arrastrá" en el 360 */
.prueba-r360 .giro-escala{ display:none !important; }
/* PRUEBA en Vulk Reporter (Gaby, 22/10): "Arrastrá" en el mismo renglón que la P (centrado a su altura) */
@media (max-width:820px){ .prueba-r360 .giro-ayuda.ay-texto{ bottom:18px !important; } }
/* … y centrado con las tres rayitas de abajo (el logo 360 es más angosto que su lugar, por eso se corre un poco) */
@media (max-width:820px){ .prueba-r360 .giro-ayuda.ay-texto{ left:calc(50% - 3.5px) !important; } }
/* Gaby (22/10): "Arrastrá" no se asoma al lado mientras se pasa al 360; solo se ve con el 360 a la vista */
@media (max-width:1024px){ #fi-galeria:not(.en360) .giro-ayuda{ opacity:0 !important; transition:none !important; } }
/* en la compu no hay rayitas: ahí sigue el logo 360 arriba de la foto */
@media (min-width:1025px){ .prueba-r360 .fi-gal-caja .fi-360.fi-360{ display:inline-flex !important; } }
/* Gaby (22/10): lupa y corazón siempre en la barra de arriba de la ficha (en el celu, íconos un poco más angostos para que entre todo) */
@media (max-width:820px){ .fi-barra .fi-der .ico, .fi-barra .fi-der .x, .fi-barra .fb-izq .ico{ width:36px; } .fi-barra .fb-izq .volver{ padding:0 4px 0 2px !important; } }
/* Gaby (22/10, aprobado): WhatsApp en círculo flotante en las fichas, abajo a la derecha, siempre arriba de la barra de comprar */
.fi-wa{ display:none; position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:76; width:52px; height:52px; border-radius:50%;
  background:#000; place-items:center; box-shadow:0 6px 18px -8px rgba(0,0,0,.45); transition:bottom .5s var(--ease), transform .3s var(--ease); }
.fi-wa svg{ width:26px; height:26px; fill:#fff; }
.fi-wa:active{ transform:scale(.94); }
.ficha.on.prueba-wa ~ .fi-wa{ display:grid; }
.ficha.on.prueba-wa ~ #fi-fija.on ~ .fi-wa{ bottom:calc(72px + 14px + env(safe-area-inset-bottom, 0px)); }
/* Gaby (22/10): en "Arrastrá · Girá 360°" las flechitas quedan quietas */
.ay-texto .ay-fl, .ay-texto .ay-fl2{ animation:none !important; transform:none !important; }
/* apertura de Giralo 360°: el lente girando sobre el fondo neutro de las fotos, sin efectos encima */
.apertura.ap-pol.ap-360 .ap-foto.ap-foto::after{ display:none !important; animation:none !important; }
.ap-360 .ap-foto{ background:var(--calido); }
.ap-360 .ap-giro{ position:absolute; inset:0; }
.ap-360 .ap-foto .giro img{ object-fit:cover; animation:none; }
.ap-360 .giro-escala{ display:none !important; }
.ap-360 .ap-texto .i360{ display:inline-block; width:34px; height:auto; vertical-align:middle; margin:0 2px; position:relative; top:-2px; }
.apertura.ap-pol.ap-360:not(.ap-amar):not(.ap-clip) .ap-foto::before, .apertura.ap-pol.ap-360:not(.ap-amar):not(.ap-clip) .ap-foto::after{ display:none !important; }   /* sin la P de Polarizados */
.ap-360 .giro-sello{ display:none !important; }   /* sin la pastilla "360°" vieja */
/* WhatsApp flotante del pie (Gaby, 22/10): aparece cuando se ve el pie, abajo a la derecha como en las fichas, arriba de la banda negra */
.fi-wa.pie-wa{ display:grid; z-index:45; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .4s, visibility .4s, transform .5s var(--ease); }
.fi-wa.pie-wa.on{ opacity:1; visibility:visible; transform:none; }
html.trabado .fi-wa.pie-wa{ opacity:0; visibility:hidden; }
/* Gaby (22/10): en el menú, el círculo de WhatsApp abajo a la derecha, en el mismo lugar que en las fichas y el pie.
   El menú es negro: el círculo va blanco con el ícono negro para que se vea */
.mm-wa{ position:absolute; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:2; width:52px; height:52px; border-radius:50%;
  background:#fff; display:grid; place-items:center; transition:transform .3s var(--ease); }
.mm-wa svg{ width:26px; height:26px; fill:var(--tinta); }
.mm-wa:active{ transform:scale(.94); }
#menu-movil .cajon-cuerpo{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }   /* que no tape nada al final del menú */
/* FILETE C (Gaby, 22/10): en el menú negro, el círculo de WhatsApp negro con filete blanco marcado e ícono blanco */
.mm-wa{ background:var(--tinta); box-shadow:inset 0 0 0 1.5px #fff; }
.mm-wa svg{ fill:#fff; }
/* Gaby (22/10): en la barra de la ficha el logo OC va a la izquierda (después del menú y la flechita), como en la cabecera */
.fi-barra{ grid-template-columns:auto auto 1fr !important; }
.fi-barra > .logo{ justify-self:start; margin-left:12px; }
/* Gaby (22/10): el talle elegido va con recuadro de línea negra (como el color elegido), no negro lleno */
.fi-talles .chip.on{ background:none !important; color:var(--tinta) !important; box-shadow:inset 0 0 0 1px var(--tinta) !important; }
/* WhatsApp en el buscador y los filtros (Gaby, 22/10): aparece al llegar al final, abajo a la derecha como en todos lados */
.capa-wa{ position:absolute; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:3; width:52px; height:52px; border-radius:50%;
  background:var(--tinta); display:grid; place-items:center; box-shadow:0 6px 18px -8px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .4s, visibility .4s, transform .5s var(--ease); }
.capa-wa.on{ opacity:1; visibility:visible; transform:none; }
.capa-wa svg{ width:26px; height:26px; fill:#fff; }
.busca-cuerpo{ padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px)) !important; }
#filtros-cuerpo{ padding-bottom:84px; }
/* BENEFICIOS del final: no en la portada, que ya lo tiene en su lugar (Gaby, 22/10) */
body:has(#v-inicio.on) .benef-final{ display:none; }
/* PRUEBA BOT D en Reporter (Gaby, 22/10): círculo negro del asistente, mismo tamaño que el de WhatsApp, a su izquierda */
.fi-bot{ display:none; position:fixed; right:calc(16px + 52px + 12px); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:76; width:52px; height:52px; border-radius:50%;
  background:#000; place-items:center; box-shadow:0 6px 18px -8px rgba(0,0,0,.45); transition:bottom .5s var(--ease), transform .3s var(--ease); }
.fi-bot svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.fi-bot:active{ transform:scale(.94); }
.ficha.on.prueba-bot ~ .fi-bot{ display:grid; }
.ficha.on.prueba-bot ~ #fi-fija.on ~ .fi-bot{ bottom:calc(72px + 14px + env(safe-area-inset-bottom, 0px)); }
/* WhatsApp y asistente en la ficha: escondidos arriba, aparecen al bajar (Gaby, 22/10) */
.ficha.on ~ .fi-wa, .ficha.on ~ .fi-bot{ opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .4s, visibility .4s, transform .5s var(--ease), bottom .5s var(--ease); }
.ficha.on.bajo ~ .fi-wa, .ficha.on.bajo ~ .fi-bot{ opacity:1; visibility:visible; transform:none; }
/* Gaby (22/10): el círculo del asistente (BOT D) acompaña siempre al de WhatsApp, a su izquierda, mismo tamaño, y aparece igual que él (al bajar / al llegar al final) */
.pie-bot, .mm-bot, .capa-bot{ position:fixed; right:calc(16px + 52px + 12px); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:52px; height:52px; border-radius:50%;
  background:var(--tinta); display:grid; place-items:center; box-shadow:0 6px 18px -8px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .4s, visibility .4s, transform .5s var(--ease); }
.pie-bot{ z-index:45; } .mm-bot, .capa-bot{ position:absolute; z-index:3; }
:is(.pie-bot,.mm-bot,.capa-bot).on{ opacity:1; visibility:visible; transform:none; }
:is(.pie-bot,.mm-bot,.capa-bot) svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
html.trabado .pie-bot{ opacity:0; visibility:hidden; }
.mm-bot{ box-shadow:inset 0 0 0 1.5px #fff; }   /* en el menú negro, con filete blanco como el WhatsApp (FILETE C) */
/* el WhatsApp del menú también aparece al llegar al final (si el menú entra entero, aparece enseguida) */
.mm-wa{ opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .4s, visibility .4s, transform .5s var(--ease); }
.mm-wa.on{ opacity:1; visibility:visible; transform:none; }
/* PRESENTA C: la burbuja del asistente, con el estilo de las explicaciones de la P y del lente amarillo, arriba de los círculos */
.pol-tip-txt.bot-tip{ position:fixed; z-index:100; right:16px; left:auto; width:min(300px,calc(100vw - 32px)); bottom:96px; pointer-events:auto; }
.pol-tip-txt.bot-tip.ver{ opacity:1; visibility:visible; transform:none; }
/* Flecha de volver en la cabecera (Gaby, 22/10): a la izquierda del logo, en todas las páginas menos la portada */
.cab-izq{ display:flex; align-items:center; min-width:0; justify-self:start; }
.cab-volver{ display:grid; place-items:center; width:36px; height:44px; margin-right:6px; flex:none; }
.cab-volver svg{ width:18px; height:18px; stroke:var(--tinta); fill:none; stroke-width:1.3; }
body:has(#v-inicio.on) .cab-volver{ display:none; }
@media (max-width:420px){ .cab-volver{ width:30px; margin-right:2px; } }
/* Campañas (Gaby, 23/10): se puede deslizar de costado para cambiar de campaña; sin la muestra de lentes abajo */
.nk-camp-medios{ touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.nk-camp-medios img, .nk-camp-medios video{ -webkit-user-drag:none; pointer-events:none; }
.nk-camp-lentes{ display:none !important; }
.nk-camp-slide{ -webkit-user-drag:none; }
/* "Catálogo completo" antes de Sol / Receta (Gaby, 23/10): recuadro gris de todo el ancho con la barra negra centrada, como era en Marcas */
.nk-catcomp{ display:flex; align-items:center; justify-content:center; background:var(--nkg); height:50vw; margin-top:0; }
.nk-catcomp .nk-btn{ position:static !important; transform:none !important; width:calc(100% - 74px); max-width:none; min-height:42px; justify-content:center; font-size:12px; letter-spacing:.08em; }
@media (min-width:821px){ .nk-catcomp{ height:240px; } .nk-catcomp .nk-btn{ width:320px; } }
.nk-catcomp + .nk-dos{ margin-top:0 !important; }
/* RECUADRO A (Gaby, 23/10, "siempre poner ese"): los links de los títulos de sección ("Catálogo completo", "Ver todo") van en recuadro de línea negra */
.sec-cab .link{ border:1px solid var(--tinta) !important; padding:9px 14px !important; text-decoration:none !important; background:none !important; line-height:1 !important; white-space:nowrap; }
.sec-cab .link::after, .sec-cab .link::before{ display:none !important; }
/* Gaby (23/10, "respetar ese criterio siempre"): las rayitas van afuera de la imagen, abajo, en gris y negro (como en la ficha) */
.nk-camp-rayas{ position:static !important; padding:14px var(--pad) 18px; }
.nk-camp-rayas button::before{ background:#d9d9d9 !important; }
.nk-camp-rayas i{ background:var(--tinta) !important; }
/* LOCAL A (Gaby, 23/10): primero el logo, después el título con "desde 1964", el texto y "Catálogo completo" en recuadro de línea negra */
.local-logo{ display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.local-logo img{ width:44px; height:44px; }
.local-logo span{ font-family:var(--nk); letter-spacing:.14em; text-transform:uppercase; font-size:15px; }
.local-texto h2.t-l{ margin:0 0 12px !important; }
.local-cat{ border:1px solid var(--tinta) !important; background:none !important; color:var(--tinta) !important; }
.local-desde{ margin:0 0 12px; }
/* CATCOMP B (Gaby, 23/10): después de cada sección de la portada, "Catálogo completo" en recuadro de línea negra */
.catcomp-b{ display:flex; justify-content:center; padding:28px var(--pad) 8px; }
.catcomp-b .pastilla{ min-width:220px; justify-content:center; }
/* Pie sin el bloque del logo (Gaby, 23/10): tres columnas en la compu; en el celu sin raya arriba de la primera */
.pie-cols{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .pie-cols{ grid-template-columns:1fr; } .pie-cols > div:first-of-type{ border-top:0 !important; padding-top:0 !important; } }
/* CATCOMP B + MARGEN B (Gaby, 23/10): pegado al margen derecho, no centrado */
.catcomp-b{ justify-content:flex-end !important; }
/* Gaby (23/10): en el celu, los recuadros "Catálogo completo" / "Ver todo" ocupan media pantalla, del borde de la columna derecha
   (como el ancho de la foto de Rusty en Marcas) hasta el margen */
@media (max-width:820px){
  .sec-cab .link, .catcomp-b .pastilla, .local-cat{ box-sizing:border-box; width:calc(50% - var(--pad)) !important; min-width:0 !important; display:inline-flex !important; justify-content:center !important; text-align:center; padding-left:6px !important; padding-right:6px !important; }
  .sec-cab{ align-items:center; }
  .sec-cab > div:first-child{ flex:1; }
  .sec-cab .link{ width:calc(50vw - var(--pad)) !important; flex:none; }
  .catcomp-b .pastilla{ width:calc(50vw - var(--pad)) !important; }
  .local-cat{ width:calc(50vw - var(--pad)) !important; }
}
/* Campañas (Gaby, 23/10): el 01 / 07 al lado de "Campañas" y "Catálogo completo" a la derecha, como en las otras secciones */
.nk-camp-izq{ display:flex; align-items:baseline; gap:12px; }
.nk-camp-cab.sec-cab{ padding:0 var(--pad) !important; }
/* UNIFICADO (Gaby, 23/10 "revisar y unificar"): todos los "Catálogo completo" iguales — mismo recuadro, letra, alto y ancho.
   Celu: media pantalla contra el margen derecho. Compu: 220 px. */
.sec-cab .link, .catcomp-b .pastilla, .local-cat{
  box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  height:32px !important; min-height:0 !important; padding:0 8px !important; border:1px solid var(--tinta) !important; border-radius:0 !important;
  background:none !important; color:var(--tinta) !important; font-size:11px !important; font-weight:500 !important; letter-spacing:.03em !important;
  text-transform:uppercase !important; text-decoration:none !important; line-height:1 !important; white-space:nowrap !important; }
@media (min-width:821px){ .sec-cab .link, .catcomp-b .pastilla, .local-cat{ width:220px !important; min-width:0 !important; } }
@media (max-width:820px){ .local-texto .acc{ display:flex; justify-content:flex-end; } }
/* Gaby (23/10): la línea de los recuadros siempre igual, la finita (1 px): sin la sombra interna que la duplicaba en algunos */
.sec-cab .link, .catcomp-b .pastilla, .local-cat{ box-shadow:none !important; }
.sec-cab .link, .catcomp-b .pastilla, .local-cat{ border-width:1px !important; }
/* DESLIZA A (Gaby, 23/10): flechitas finas blancas a los costados de la foto de la campaña, para pasar a la anterior / siguiente */
.nk-camp-fl{ position:absolute; top:50%; z-index:4; width:44px; height:64px; margin-top:-32px; display:grid; place-items:center; background:none; border:0; padding:0; cursor:pointer; }
.nk-camp-fl.ant{ left:2px; } .nk-camp-fl.sig{ right:2px; }
.nk-camp-fl svg{ width:30px; height:30px; fill:none; stroke:#fff; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px rgba(0,0,0,.35)); }
@media (min-width:821px){ .nk-camp-fl{ width:64px; } .nk-camp-fl svg{ width:40px; height:40px; } }
/* Giralo (Gaby, 23/10): rayitas de los 4 más vendidos debajo del lente, afuera de la imagen (gris y negro, como en Campañas); se tocan para pasar */
.gir-rayas{ display:flex; gap:6px; padding:12px 0 0; }
.gir-rayas button{ flex:1; height:22px; position:relative; background:none; border:0; padding:0; cursor:pointer; }
.gir-rayas button::before, .gir-rayas i{ content:""; position:absolute; left:0; right:0; top:10px; height:2px; }
.gir-rayas button::before{ background:#d9d9d9; }
.gir-rayas i{ background:var(--tinta); transform:scaleX(0); transform-origin:left; transition:transform .09s linear; }
@media (max-width:820px){ .gir-rayas{ padding:12px var(--pad) 0; } }
/* Gaby (23/10, unificar espacios): de Campañas a Lentes de sol el mismo blanco que en los otros cortes (28 px hasta el "Catálogo completo") */
.nk-camp-rayas{ padding-bottom:0 !important; }
.nk-camp + .catcomp-b{ padding-top:21px !important; }
/* CARRUSEL de más vendidos (Gaby, 23/10): 2 tarjetas a lo ancho del celu, 4 en la compu; se desliza de a pares; rayitas abajo, afuera de las fotos */
.mv-car{ margin-top:56px; }
.mv-pista{ display:grid; grid-auto-flow:column; grid-auto-columns:50%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; gap:0; }
.mv-pista::-webkit-scrollbar{ display:none; }
.mv-pista > .tj:nth-child(2n+1){ scroll-snap-align:start; scroll-snap-stop:always; }
@media (min-width:821px){ .mv-pista{ grid-auto-columns:25%; } .mv-pista > .tj{ scroll-snap-align:none; } .mv-pista > .tj:nth-child(4n+1){ scroll-snap-align:start; } }
.mv-rayas{ display:flex; gap:6px; padding:14px var(--pad) 0; }
.mv-rayas button{ flex:1; height:22px; position:relative; background:none; border:0; padding:0; cursor:pointer; }
.mv-rayas button::before{ content:""; position:absolute; left:0; right:0; top:10px; height:2px; background:#d9d9d9; }
.mv-rayas button.on::before{ background:var(--tinta); }
.mv-car + .catcomp-b{ padding-top:23px; }
/* Título "Categorías" antes de Sol / Receta / mosaico (Gaby, 23/10), con el mismo espacio que el de Marcas */
.nk-cat-cab{ padding:56px var(--pad) 0 !important; margin-bottom:12px !important; }
.nk-cat-cab + .nk-dos{ margin-top:0 !important; }
/* BLANCO (Gaby, 23/10): medida fija para las rayitas — 20 px del contenido a la rayita y 28 px de la rayita a lo que sigue */
.mv-pista .tj-datos{ padding-bottom:8px !important; }
.mv-rayas{ padding-top:0 !important; }
.mv-rayas button{ height:12px !important; }
.mv-rayas button::before{ top:5px !important; }
.mv-car + section{ padding-top:0 !important; margin-top:-5px !important; }
/* BLANCO igualado en todas las rayitas (Gaby, 23/10): 20 px contenido→rayita, 28 px rayita→lo que sigue */
.gir-rayas{ padding-top:0 !important; }
.gir-rayas button{ height:12px !important; }
.gir-rayas button::before, .gir-rayas i{ top:5px !important; }
.nk-camp-rayas button{ height:12px !important; }
.nk-camp-rayas button::before, .nk-camp-rayas i{ top:5px !important; }
/* Carrusel pegado a la foto de la portada, con una línea blanca mínima (como entre las fotos del mosaico) */
.mv-car{ margin-top:4px !important; }
.gir-rayas{ margin:0 !important; padding:15px 0 0 !important; }
@media (max-width:820px){ .gir-rayas{ padding:15px var(--pad) 0 !important; } }
#giro-sec + .sec, #giro-sec ~ .sec:has(#estilos){ padding-top:0 !important; margin-top:-5px !important; }
.nk-cat-cab{ padding-top:23px !important; }
@media (max-width:820px){ .giro-sec .gir-media{ grid-template-rows:auto !important; align-content:start; } }
@media (max-width:820px){ .giro-sec .gir-media{ min-height:0 !important; height:auto !important; } }   /* sin alto fijo: termina en las rayitas (BLANCO igual) */
/* Giralo en la compu: el lente a la izquierda con sus rayitas abajo, el video a la derecha (las rayitas habían corrido el orden) */
@media (min-width:821px){
  .giro-sec.gir-b .gir-media{ grid-template-rows:minmax(460px,1fr) auto; min-height:0; }
  .giro-sec.gir-b .gir-demo{ grid-column:1; grid-row:1; }
  .giro-sec.gir-b .gir-rayas{ grid-column:1; grid-row:2; }
  .giro-sec.gir-b .gir-media > .gir-vid{ grid-column:2; grid-row:1; }
}
@media (min-width:821px){ #giro-sec + .sec, #giro-sec ~ .sec:has(#estilos){ padding-top:28px !important; margin-top:0 !important; } }
/* (corrección: los títulos con animación de entrada suben 28 px al aparecer; se compensa para que quede el BLANCO de 28) */
.mv-car + section{ margin-top:23px !important; }
#giro-sec + .sec, #giro-sec ~ .sec:has(#estilos){ margin-top:23px !important; }
@media (min-width:821px){ #giro-sec + .sec, #giro-sec ~ .sec:has(#estilos){ padding-top:28px !important; margin-top:28px !important; } }
@media (min-width:821px){ #giro-sec + .sec, #giro-sec ~ .sec:has(#estilos){ margin-top:-5px !important; } }
/* Gaby (23/10): menos blanco antes de TIENDA — del texto del local a la línea del pie 28 px, y de la línea a TIENDA 28 px */
.local-texto{ padding-bottom:0 !important; }
.pie{ margin-top:0 !important; }
.pie-cols{ padding-top:28px !important; }
/* Giralo (Gaby, 23/10): título de sección "Top 4 girando" + Catálogo completo; Giralo más arriba y "Giralo 360°" de lado a lado del celu */
.nk-giro-cab2{ padding:23px var(--pad) 0 !important; margin:0 !important; }
#giro-sec{ padding-top:0 !important; }
#giro-sec .gir-txt{ padding-top:28px !important; }
@media (max-width:820px){ #giro-sec .gir-tit{ font-size:calc((100vw - 2 * var(--pad)) * .2123) !important; line-height:.95 !important; letter-spacing:-.045em !important; white-space:nowrap; } }
/* BENEFICIOS (Gaby, 23/10): mismo blanco arriba y abajo, y menos: 28 px */
#v-inicio .benef, .benef.benef-final{ margin-top:28px !important; margin-bottom:28px !important; }
/* Nº grande del Giralo (Gaby, 23/10): mismo ancho que la barra negra "MÁS VENDIDO" (el tamaño lo ajusta el código) */
.gir-n1{ display:inline-block; font-family:var(--nk); font-weight:300; line-height:.82; letter-spacing:-.05em; color:var(--tinta); white-space:nowrap; margin-bottom:4px; }
/* Pie (Gaby, 23/10): Menú, Marcas, Beneficios y Ayuda — cuatro columnas en la compu */
.pie-cols{ grid-template-columns:repeat(4,1fr) !important; }
@media (max-width:820px){ .pie-cols{ grid-template-columns:1fr !important; } }
/* Campañas (Gaby, 23/10): sin flechitas; al deslizar, un fundido corto a negro marca el cambio de campaña */
.nk-camp-fl{ display:none !important; }
.nk-camp-medios::after{ content:""; position:absolute; inset:0; z-index:5; background:#000; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.nk-camp-medios.negro::after{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .nk-camp-medios::after{ transition:none; } }
/* "Tocá y arrastrá de lado a lado" (Gaby, 23/10): el texto es más largo, el dibujo más ancho */
.giro-ayuda.ay-texto svg{ width:204px !important; }
.giro.girando.ayuda-ya .giro-ayuda{ opacity:1 !important; transform:translate(-50%,0) !important; }
/* pasos de Giralo con "sin soltar" (Gaby, 23/10): en el celu uno debajo del otro, así no se pasan del ancho */
@media (max-width:820px){ .gir-pasos{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:10px !important; flex-wrap:nowrap !important; } }
/* Giralo (Gaby, 23/10): las manitos en el lugar del 1 y el 2, a la izquierda de cada paso */
.gir-pasos .gir-mano-toca, .gir-pasos .gir-mano-paso{ order:-1; margin:0 4px 0 0 !important; top:0 !important; width:26px !important; height:26px !important; }
.giro-ayuda.ay-texto.ay-largo svg{ width:280px !important; }
/* Gaby (23/10): los dos pasos en un solo renglón también en el celu (letra un poco más chica para que entren) */
@media (max-width:820px){
  .gir-pasos{ flex-direction:row !important; align-items:center !important; gap:0 10px !important; flex-wrap:nowrap !important; white-space:nowrap; }
  .gir-pasos li{ font-size:9.5px !important; letter-spacing:.02em !important; gap:4px !important; }
  .gir-pasos .gir-mano-toca, .gir-pasos .gir-mano-paso{ width:22px !important; height:22px !important; margin-right:2px !important; }
}
@media (max-width:380px){ .gir-pasos{ gap:0 7px !important; } .gir-pasos li{ letter-spacing:0 !important; } }
/* Gaby (23/10): el dedito que toca siempre a la vista (no se desvanece); solo late el circulito del toque */
/* (reemplazado: ahora el dedito aparece y desaparece con el circulito, ver girToqueJunto) */
/* Giralo (Gaby, 23/10): "Sin soltar" antes de la manito que se mueve, y después "arrastrá de lado a lado" */
.gir-pasos li:nth-child(2) .gir-mano-paso{ order:0 !important; margin:0 2px !important; }
/* el dedito que toca: siempre a la vista; el circulito aparece (toca) y desaparece (levanta), sin agrandarse */
.gir-pasos .gir-mano-toca .toque{ animation:girToqueSimple 1.6s steps(1, end) infinite !important; transform:none !important; }
@keyframes girToqueSimple{ 0%{ opacity:1; } 50%{ opacity:0; } 100%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .gir-pasos .gir-mano-toca .toque{ animation:none !important; opacity:1; } }
/* una sola frase: [dedito] TOCÁ EL LENTE Y SIN SOLTAR [manito] ARRASTRÁ DE LADO A LADO */
.gir-pasos li:nth-child(2) .gir-mano-paso{ order:-1 !important; margin:0 2px 0 0 !important; }
@media (max-width:820px){ .gir-pasos{ gap:0 6px !important; } .gir-pasos li{ font-size:9.2px !important; letter-spacing:0 !important; gap:3px !important; } }
/* Gaby (23/10): el dedito aparece junto con el circulito y después desaparecen los dos, como un toque */
.gir-pasos .gir-mano-toca{ animation:girToqueJunto 1.6s steps(1, end) infinite !important; transform:none !important; }
.gir-pasos .gir-mano-toca .toque{ animation:none !important; opacity:1 !important; transform:none !important; }
@keyframes girToqueJunto{ 0%{ opacity:1; } 55%{ opacity:0; } 100%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .gir-pasos .gir-mano-toca{ animation:none !important; opacity:1 !important; } }
/* NOMBRE A (Gaby, 26/10): en la ficha también va "Óptica Centenera" siempre; sin la X (la flechita ya cierra), igual a la barra de la portada */
@media (max-width:820px){ .barra-a .fi-barra .logo span{ display:inline !important; } }
.fi-barra .x{ display:none !important; }
@media (max-width:370px){ .barra-a .fi-barra .logo span{ font-size:13px !important; letter-spacing:.1em !important; } .fi-barra > .logo{ margin-left:6px !important; gap:6px !important; } }
@media (max-width:370px){
  .ficha .fi-barra > .logo span{ font-size:12px !important; letter-spacing:.06em !important; }
  .ficha .fi-barra > .logo img{ width:28px !important; height:28px !important; }
  .ficha .fi-barra .fi-der .ico{ width:32px !important; }
}
/* LISTAS DE FAVORITOS (Gaby, 26/10) */
#fav-listas{ padding:4px var(--pad) 18px; }
#fav-listas .f-ops{ padding:0 !important; }
#fav-listas .chip{ height:auto; min-height:38px; justify-content:space-between !important; }
#fav-listas .chip.on{ background:none !important; color:var(--tinta) !important; box-shadow:inset 0 0 0 1px var(--tinta) !important; }   /* elegida: línea negra, como el color elegido */
#fav-listas .chip .c{ color:var(--gris); }
#fav-listas .lst-mas{ justify-content:center !important; color:var(--gris); }
.lst-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:14px; }
.lst-link{ background:none; border:0; padding:0; font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; color:var(--tinta); cursor:pointer; }
.lst-comp{ border:1px solid var(--tinta); padding:16px; }
.lst-comp-n{ font-size:18px; margin:6px 0 2px; }
.lst-fila{ display:flex; align-items:center; gap:12px; padding:14px 24px; border-bottom:1px solid var(--linea); cursor:pointer; font-size:15px; }
.lst-fila input{ width:20px; height:20px; accent-color:var(--tinta); flex:none; }
.lst-fila .lst-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lst-fila .lst-c{ color:var(--gris); font-size:12px; }
.lst-nueva{ display:flex; gap:10px; padding:18px 24px; }
.lst-nueva input{ flex:1; min-width:0; height:40px; border:1px solid var(--tinta); border-radius:0; padding:0 12px; font:inherit; font-size:16px; background:#fff; color:var(--tinta); }
.lst-nueva .pastilla{ width:auto !important; flex:none; padding:0 16px !important; height:40px !important; }
.tostada.con-acc{ pointer-events:auto; }
.tostada .tos-acc{ background:none; border:0; color:#fff; font:inherit; text-decoration:underline; text-underline-offset:3px; padding:0; cursor:pointer; }
.tostada.con-acc{ white-space:nowrap; }
/* Filtrar y ordenar, marcas (Gaby, 26/10): logos del mismo tamaño a la vista (como en la portada) */
.f-marca img{ height:20px; max-height:none !important; width:auto; max-width:78%; object-fit:contain; }
.f-marca img[data-m="Vulk"], .f-marca img[data-m="Prune"], .f-marca img[data-m="Prüne"]{ height:15px; }
.f-marca img[data-m="Ray-Ban"]{ height:26px; }
.f-marca img[data-m="Jellvet"]{ height:17px; }
/* (FILTRO A elegido por Gaby, 26/10: queda el gris claro) */
/* Gaby (26/10): el logo de Vulk en Marcas un poco más grande (quedaba chico al lado de los otros) */
#marcas img.nk-logo[data-m="Vulk"]{ height:16px !important; max-height:none !important; width:auto !important; max-width:none !important; }
@media (min-width:821px){ #marcas img.nk-logo[data-m="Vulk"]{ height:17px !important; } }
/* Gaby (26/10): Mistral más chico, Jellvet un poquito más chico, Ray-Ban más grande y con su recuadro negro (no gris) */
.f-marca img[data-m="Mistral"]{ height:16px !important; }
.f-marca img[data-m="Jellvet"]{ height:15px !important; }
.f-marca img[data-m="Ray-Ban"]{ height:31px !important; filter:grayscale(1) contrast(6) !important; }


/* PRUEBA Estilos con íconos de línea sobre negro (Gaby, 27/10): ?est=a sección negra | ?est=b recuadros negros */
.estilos.est-ico{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.estilo-i{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:34px 12px 24px; background:var(--tinta); color:#fff; }
.estilo-i svg{ width:72%; max-width:150px; height:auto; fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:22px; transition:transform .8s var(--ease); }
.estilo-i:hover svg{ transform:translateY(-4px); }
.estilo-i .est-n{ font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.estilo-i .est-c{ font-size:11px; color:rgba(255,255,255,.55); margin-top:4px; letter-spacing:.04em; }
.sec.est-negra{ background:var(--tinta); color:#fff; }
.sec.est-negra .sec-cab .t-l{ color:#fff; }
.sec.est-negra .sec-cab .link{ color:#fff !important; border-color:#fff !important; }
.est-a.est-ico{ gap:0; border-top:1px solid rgba(255,255,255,.18); border-left:1px solid rgba(255,255,255,.18); }
.est-a .estilo-i{ border-right:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
@media (max-width:820px){ .estilos.est-ico{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; } .est-a.est-ico{ gap:0; } .estilo-i{ padding:28px 10px 20px; } .estilo-i svg{ margin-bottom:18px; } .estilo-i .est-n{ font-size:13px; } }
.estilos.est-b.est-ico{ gap:4px !important; padding:0 var(--pad); }
@media (min-width:821px){ .estilos.est-b.est-ico{ gap:6px !important; } }
/* Formas que se prenden (aprobado 27/10): el recuadro prendido pasa a fondo neutro claro con la foto del lente (nunca color detrás del lente) */
.estilo-i{ position:relative; overflow:hidden; transition:background-color .45s ease, color .45s ease; }
.estilo-i .est-foto{ position:absolute; left:8%; right:8%; top:6%; height:58%; width:84%; object-fit:contain; mix-blend-mode:multiply; opacity:0; transform:scale(.96); transition:opacity .45s ease, transform .8s var(--ease); pointer-events:none; }
.estilo-i svg{ transition:opacity .35s ease, transform .8s var(--ease); }
.estilo-i.prendido{ background:var(--tile); color:var(--tinta); }
.estilo-i.prendido svg{ opacity:0; }
.estilo-i.prendido .est-foto{ opacity:1; transform:none; }
.estilo-i.prendido .est-c{ color:var(--gris); }
.bot-tip .bot-tip-sub{ display:block; color:var(--gris); margin:-2px 0 8px; }   /* texto del BOT al pasar (Gaby, 27/10) */