:root {
  --primary-bg: #fff;
  --card-bg-odd: #bfbfbf;
  --card-bg-even: #f2f2f2;

  --scale-level-1: 1.2;
  --scale-level-2: 1;
  --scale-level-3: 0.8;

  --rotate-level-1: 0deg;
  --rotate-level-2: 15deg;
  --rotate-level-3: 30deg;

  --position-x-level-1: 0;
  --position-x-level-2: 2rem;
  --position-x-level-3: 4rem;

  --position-y-level-1: 0;
  --position-y-level-2: 2rem;
  --position-y-level-3: 10rem;

  --active-scale: 1.35;
  --active-position-y: -2rem;

  --not-active-scale-offset: 0.15;

  /* Avante — Directorio */
  --blue-900:#000850;
  --blue-700:#0015E0;
  --blue-600:#041cff;
  --blue-500:#3E50FF;
  --blue-300:#8992FF;
  --blue-100:#EAEFFF;
  --blue-50:#F5F7FF;
  --ink:#0A0E38;
  --grey:#6670A6;
  --line:#DDE3FA;
  --white:#FFFFFF;
  --serif:'Fraunces', serif;
  --sans:'Public Sans', sans-serif;
  --ease:cubic-bezier(.16,.84,.44,1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
input { font-family: inherit; }

a {
  color: inherit;
  text-decoration: none;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

.cards-wrapper {
  margin-top: 3vw;
}

.cards-wrapper {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  place-content: center;
}

.card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7vw;
  padding: max(1.2vw, 0.75rem);
  border-radius: 1.6vw;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  height: 10vw;
  min-height: 125px;
  transition: transform 0.3s, background-color 0.3s;
}

.card .header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5vw;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.card .header .header-text .text-main {
  display: block;
  font-size: max(0.95vw, 0.45rem);
}

.card .header .header-text .text-sub {
  display: block;
  font-size: 0.6vw;
  margin-top: 0.1rem;
  color: #606060;
}

.card .header .header-icon-btn {
  border: none;
  padding: 0;
  background-color: #a6a6a6;
  width: 1.7vw;
  height: 1.7vw;
  border-radius: 50%;
  outline: 1px dashed transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.3s, outline 0.3s;
}

.card .header .header-icon-btn:before {
  content: "";
  position: absolute;
  background-color: #ffb6c1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s;
}

.card .header .header-icon-btn i {
  position: relative;
  font-size: 0.8vw;
  transition: color 0.3s;
}

.card .header .header-icon-btn:hover:before {
  transform: scale(1);
}

.card .header .header-icon-btn:hover i {
  color: #ff1493;
}

.card .header .header-icon-btn:active {
  transform: translateY(2px);
  outline-color: #ff69b4;
}

.card .avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}

.card:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  left: 0;
  top: 0;
  border-radius: 2vw;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 1;
}

.card:nth-child(odd) {
  background-color: var(--card-bg-odd);
}
.card:nth-child(even) {
  background-color: var(--card-bg-even);
}

.card:nth-child(3) {
  transform: scale(var(--scale-level-1)) rotate(var(--rotate-level-1))
    translateX(var(--position-x-level-1))
    translateY(var(--position-y-level-1));
  z-index: 10;
}
.card:nth-child(3).active {
  transform: scale(var(--active-scale)) rotate(0)
    translateX(var(--position-x-level-1))
    translateY(var(--active-position-y));
  z-index: 20;
}
.card:nth-child(3).not-active {
  transform: scale(calc(var(--scale-level-1) - var(--not-active-scale-offset)))
    rotate(var(--rotate-level-1)) translateX(var(--position-x-level-1))
    translateY(var(--position-y-level-1));
}

.card:nth-child(2) {
  transform: scale(var(--scale-level-2))
    rotate(calc(-1 * var(--rotate-level-2)))
    translateX(var(--position-x-level-2))
    translateY(var(--position-y-level-2));
  z-index: 5;
}
.card:nth-child(2).active {
  transform: scale(var(--active-scale)) rotate(0)
    translateX(var(--position-x-level-2))
    translateY(var(--active-position-y));
  z-index: 20;
}
.card:nth-child(2).not-active {
  transform: scale(calc(var(--scale-level-2) - var(--not-active-scale-offset)))
    rotate(calc(-1 * var(--rotate-level-2)))
    translateX(var(--position-x-level-2))
    translateY(var(--position-y-level-2));
}

.card:nth-child(4) {
  transform: scale(var(--scale-level-2)) rotate(var(--rotate-level-2))
    translateX(calc(-1 * var(--position-x-level-2)))
    translateY(var(--position-y-level-2));
  z-index: 5;
}
.card:nth-child(4).active {
  transform: scale(var(--active-scale)) rotate(0)
    translateX(var(--position-x-level-2))
    translateY(var(--active-position-y));
  z-index: 20;
}
.card:nth-child(4).not-active {
  transform: scale(calc(var(--scale-level-2) - var(--not-active-scale-offset)))
    rotate(var(--rotate-level-2))
    translateX(calc(-1 * var(--position-x-level-2)))
    translateY(var(--position-y-level-2));
}

.card:nth-child(1) {
  transform: scale(var(--scale-level-3))
    rotate(calc(-1 * var(--rotate-level-3)))
    translateX(var(--position-x-level-3))
    translateY(var(--position-y-level-3));
  z-index: 1;
}
.card:nth-child(1).active {
  transform: scale(var(--active-scale)) rotate(0)
    translateX(var(--position-x-level-3))
    translateY(var(--active-position-y));
  z-index: 20;
}
.card:nth-child(1).not-active {
  transform: scale(calc(var(--scale-level-3) - var(--not-active-scale-offset)))
    rotate(calc(-1 * var(--rotate-level-3)))
    translateX(var(--position-x-level-3))
    translateY(var(--position-y-level-3));
}

.card:nth-child(5) {
  transform: scale(var(--scale-level-3)) rotate(var(--rotate-level-3))
    translateX(calc(-1 * var(--position-x-level-3)))
    translateY(var(--position-y-level-3));
  z-index: 1;
}
.card:nth-child(5).active {
  transform: scale(var(--active-scale)) rotate(0)
    translateX(calc(-1 * var(--position-x-level-3)))
    translateY(var(--active-position-y));
  z-index: 20;
}
.card:nth-child(5).not-active {
  transform: scale(calc(var(--scale-level-3) - var(--not-active-scale-offset)))
    rotate(var(--rotate-level-3))
    translateX(calc(-1 * var(--position-x-level-3)))
    translateY(var(--position-y-level-3));
}

.card.not-active:before {
  opacity: 0.5;
  visibility: visible;
}

.bottom-info {
  width: 100%;
  max-width: 1400px;
  margin-top: 36vw;
  padding: 0 2.5vw;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2vw;
}

.bottom-info .headline {
  margin: 0;
  font-size: 2vw;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
  max-width: 22ch;
}

.bottom-info .side-text {
  text-align: right;
  max-width: 26ch;
}

.bottom-info .side-text p {
  margin: 0 0 0.4vw;
  font-size: 0.75vw;
  line-height: 1.4;
  color: #444;
}

.bottom-info .side-text a {
  font-size: 0.75vw;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===========================================================
   Línea de escaneo — recorre la vitrina de lado a lado; donde
   cruza una tarjeta o los lentes, revela una capa de texto tipo
   código encima de la imagen (todo lo demás queda igual).
   =========================================================== */
.scan-line-canvas {
  position: absolute;
  top: -8vw;
  left: 0;
  width: 100%;
  height: 34vw;
  min-height: 320px;
  pointer-events: none;
  z-index: 40;
}

.hero-socials {
  position: absolute;
  left: 50%;
  top: calc(100% + 5vw);
  transform: translate(-50%, -50%);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.hero-socials a {
  width: 3.2vw;
  height: 3.2vw;
  min-width: 40px;
  min-height: 40px;
  max-width: 54px;
  max-height: 54px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.hero-socials svg {
  width: 46%;
  height: 46%;
}

.hero-socials a:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
  background-color: #041cff;
}

@media (max-width: 700px) {
  .hero-socials {
    top: calc(100% + 5vw);
    gap: 3vw;
  }
  .hero-socials a {
    width: 9vw;
    height: 9vw;
  }
}

.glasses-wrap {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -12%);
  width: 58vw;
  min-width: 340px;
  max-width: 920px;
  z-index: 30;
  filter: drop-shadow(0 1.5vw 1.5vw rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.glasses-wrap .glasses-img {
  position: relative;
  display: block;
  width: 100%;
  pointer-events: none;
}

/* ===========================================================
   Texto a través del cristal — interior nítido (dentro de los
   aros reales de sc-lent.png) + exterior ondulado/encogido,
   igual que la demo aprobada. El canvas ahora cubre todo el
   ancho de la vitrina (hasta las flechas), no solo la foto;
   el interior se calcula midiendo en vivo dónde cae la foto
   real dentro de ese lienzo más ancho.
   =========================================================== */
.lens-fx {
  position: absolute;
  top: -8vw;
  left: 0;
  width: 100%;
  height: 34vw;
  min-height: 320px;
  pointer-events: none;
  z-index: 32;
}
.lens-fx-source {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 700px) {
  .lens-fx { height: 22vw; top: -4vw; }
}


@media (max-width: 700px) {
  .bottom-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .bottom-info .headline {
    font-size: 6vw;
  }
  .bottom-info .side-text {
    text-align: left;
  }
  .bottom-info .side-text p,
  .bottom-info .side-text a {
    font-size: 3vw;
  }
  .scan-line-canvas { height: 22vw; top: -4vw; }
}
/* =========================================================
   DIRECTORIO — toolbar, filtros y shop grid
   ========================================================= */
@property --dir-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.reveal-rise{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-rise.is-visible{ opacity:1; transform:translateY(0); }

.dir-section{ width:100%; padding:34vw 40px 0; box-sizing:border-box; }
@media (max-width:720px){ .dir-section{ padding:38vw 18px 0; } }
.dir-wrap{ max-width:1240px; margin:0 auto; font-family:var(--sans); }

/* toolbar */
.dir-toolbar{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:28px; }
.dir-toolbar-side{ flex:1; min-width:0; }
.dir-toolbar-side.right{ display:flex; justify-content:flex-end; }
.dir-toolbar-actions{ display:flex; align-items:center; gap:14px; margin-left:auto; }

/* búsqueda con borde azul animado */
.dir-search{ position:relative; width:100%; max-width:460px; margin:0 auto; border-radius:16px; }
.dir-search-glow{
  position:absolute; inset:0; border-radius:16px;
  background:conic-gradient(from var(--dir-angle), var(--blue-600), var(--blue-300), #ffffff, var(--blue-500), var(--blue-600));
  animation:dirBorderSpin 3.2s linear infinite;
}
@keyframes dirBorderSpin{ to{ --dir-angle:360deg; } }
.dir-search-inner{
  position:relative; z-index:1; margin:2px; display:flex; align-items:center; gap:10px;
  background:var(--white); border-radius:14px; padding:11px 16px;
  box-shadow:0 10px 24px -14px rgba(20,40,120,.22);
}
.dir-search-inner svg{ width:17px; height:17px; color:var(--blue-600); flex-shrink:0; }
.dir-search-inner input{
  border:none; outline:none; flex:1; min-width:0; font-family:var(--sans); font-size:13.5px; color:var(--ink); background:none;
}
.dir-search-inner input::placeholder{ color:var(--grey); }

/* ocultar filtros */
.dir-toggle-btn{
  display:flex; align-items:center; gap:9px; padding:10px 16px; border-radius:10px;
  border:1.5px solid var(--ink); background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:13px; font-weight:600; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.dir-toggle-btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.dir-toggle-btn:hover{ background:var(--ink); color:var(--white); transform:translateY(-2px); }
.dir-toggle-btn.is-off svg{ transform:rotate(180deg); }

/* ordenar por */
.dir-sort{ position:relative; }
.dir-sort-btn{
  display:flex; align-items:center; gap:8px; padding:10px 4px; border:none; background:none;
  font-family:var(--sans); font-size:13px; color:var(--ink); white-space:nowrap;
}
.dir-sort-btn strong{ font-weight:700; }
.dir-sort-btn svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.dir-sort.is-open .dir-sort-btn svg{ transform:rotate(180deg); }
.dir-sort-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:20; min-width:220px;
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:8px;
  box-shadow:0 20px 40px -18px rgba(20,40,120,.28);
  opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.dir-sort.is-open .dir-sort-menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.dir-sort-menu button{
  display:block; width:100%; text-align:left; padding:10px 12px; border-radius:9px; border:none; background:none;
  font-family:var(--sans); font-size:13px; color:var(--ink); transition:background .2s var(--ease);
}
.dir-sort-menu button:hover{ background:var(--blue-50); }
.dir-sort-menu button.active{ color:var(--blue-600); font-weight:700; }

/* layout filtros + grid */
.dir-layout{ display:flex; align-items:flex-start; gap:40px; transition:gap .4s var(--ease); }
.dir-layout.filters-hidden{ gap:0; }
.dir-filters{
  width:230px; flex-shrink:0; display:flex; flex-direction:column; gap:22px;
  overflow:hidden; transition:width .4s var(--ease), opacity .3s var(--ease);
  background:var(--white); border:1.5px solid var(--blue-100); border-radius:20px;
  padding:22px 20px; box-shadow:0 14px 30px -18px rgba(20,40,120,.16);
  position:sticky; top:110px;
}
.dir-layout.filters-hidden .dir-filters{ width:0; opacity:0; padding:22px 0; border-color:transparent; box-shadow:none; }
.dir-filter-group + .dir-filter-group{ padding-top:20px; border-top:1px solid var(--line); }
.dir-filter-group h4{
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--blue-600); margin-bottom:14px;
}
.dir-check{
  display:flex; align-items:center; gap:10px; padding:8px 10px; margin:0 -10px;
  border-radius:10px; font-size:13.5px; color:var(--grey); cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.dir-check input{ width:16px; height:16px; accent-color:var(--blue-600); flex-shrink:0; }
.dir-check:hover{ background:var(--blue-50); color:var(--ink); }
.dir-check:has(input:checked){ color:var(--ink); font-weight:600; }

.dir-products{ flex:1; min-width:0; }

/* =========================================================
   SHOP GRID (idéntico a index.html)
   ========================================================= */
.shop-grid{
  flex:1; min-width:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:34px 26px;
}
@media (max-width:900px){ .shop-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .shop-grid{ grid-template-columns:1fr; gap:24px 16px; } }

.shop-card{
  position:relative; background:var(--white); border-radius:26px;
  border:1.5px solid var(--blue-100); padding:14px 14px 16px;
  display:flex; flex-direction:column;
  will-change:transform;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
  box-shadow:0 14px 30px -18px rgba(20,40,120,.20);
}
.shop-card:hover{ box-shadow:0 26px 48px -18px rgba(20,40,120,.30); transform:translateY(-4px); border-color:var(--blue-300); }

.shop-top{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:10px; position:relative; z-index:5; }
.shop-icon-btn{
  width:34px; height:34px; border-radius:50%; background:var(--white); border:1px solid var(--blue-100);
  display:flex; align-items:center; justify-content:center; color:var(--ink); flex-shrink:0;
  box-shadow:0 4px 10px -2px rgba(20,40,120,.16);
  transition:background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), border-color .25s var(--ease);
}
.shop-icon-btn svg{ width:15px; height:15px; }
.shop-icon-btn:hover{ background:var(--blue-600); border-color:var(--blue-600); color:var(--white); transform:translateY(-1px); }
.shop-icon-btn.is-active{ background:var(--blue-600); border-color:var(--blue-600); color:var(--white); }

.shop-fav svg{ transition:fill .2s var(--ease), stroke .2s var(--ease); }
.shop-fav.is-active{ background:var(--white); border-color:#ff4d6a; color:#ff4d6a; }
.shop-fav.is-active svg{ fill:#ff4d6a; stroke:#ff4d6a; animation:favPop .45s var(--ease); }
@keyframes favPop{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.4); }
  55%{ transform:scale(0.85); }
  100%{ transform:scale(1); }
}

.shop-share-wrap{ position:relative; }
.shop-share.is-active{ background:var(--blue-600); border-color:var(--blue-600); color:var(--white); animation:sharePop .45s var(--ease); }
@keyframes sharePop{
  0%{ transform:scale(1) rotate(0deg); }
  30%{ transform:scale(1.25) rotate(-14deg); }
  60%{ transform:scale(0.92) rotate(6deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
.shop-share-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:10;
  display:flex; gap:6px; background:var(--white); border:1px solid var(--blue-100); border-radius:16px; padding:6px;
  box-shadow:0 14px 28px -12px rgba(20,40,120,.28);
  opacity:0; transform:translateY(-6px) scale(.92); pointer-events:none; transform-origin:top right;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.shop-share-menu.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.shop-share-menu a{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--white); flex-shrink:0; transition:transform .2s var(--ease), filter .2s var(--ease);
}
.shop-share-menu a svg{ width:14px; height:14px; }
.shop-share-menu a:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.shop-share-menu a.fb{ background:#1877F2; }
.shop-share-menu a.ig{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.shop-share-menu a.wa{ background:#25D366; }
.shop-share-menu a.link{ background:var(--ink); }
.shop-share-menu a{ position:relative; }
.shop-share-toast{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--ink); color:var(--white); font-size:11px; font-weight:600; white-space:nowrap;
  padding:5px 9px; border-radius:8px; opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease); z-index:20;
}
.shop-share-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

.shop-photo-wrap{ position:relative; width:100%; aspect-ratio:1/1; margin-bottom:8px; }
.shop-ellipse{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:110%; height:14%; border:1.5px solid var(--blue-100); border-radius:50%; z-index:0;
}
.shop-photo{ position:absolute; inset:0; z-index:1; border-radius:20px; overflow:hidden; background:var(--blue-50); }
.shop-photo-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.shop-photo-svg image{ width:100%; height:100%; }
.shop-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--blue-500); background:var(--blue-50); }

.shop-scan{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:2; border-radius:20px; }

.shop-dots{
  position:absolute; left:0; right:0; top:10px; z-index:3;
  display:flex; justify-content:center; gap:5px; pointer-events:none;
}
.shop-dots span{
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(8,24,72,.15);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.shop-dots span.active{ background:var(--white); transform:scale(1.4); }

.shop-carousel-pill{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:3;
  background:var(--white); border-radius:20px; padding:3px;
  display:flex; align-items:center; gap:2px;
  box-shadow:0 6px 14px -4px rgba(20,40,120,.20);
}
.shop-nav-btn{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--ink); cursor:pointer; flex-shrink:0;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.shop-nav-btn svg{ width:10px; height:10px; pointer-events:none; }
.shop-nav-btn:hover{ background:var(--blue-50); color:var(--blue-600); }

.shop-tag-row{ display:flex; align-items:center; justify-content:space-between; min-height:22px; margin:0 2px 8px; }
.shop-badge-pill{ display:inline-block; background:var(--ink); color:var(--white); font-size:11px; font-weight:700; padding:4px 11px; border-radius:12px; letter-spacing:.02em; }
.shop-tag-icon{ width:16px; height:16px; color:var(--blue-300); flex-shrink:0; margin-left:auto; }

.shop-name{ font-family:var(--serif); font-weight:500; font-size:17px; color:var(--ink); letter-spacing:-.01em; margin:0 2px 8px; }

.shop-brand-row{ display:flex; justify-content:space-between; align-items:center; margin:0 2px 14px; }
.shop-brand{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--grey); }
.shop-brand-badge{
  width:19px; height:19px; border-radius:50%; background:var(--blue-600); color:var(--white);
  font-family:var(--sans); font-size:10px; font-weight:700; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.shop-brand-badge img{ width:100%; height:100%; object-fit:contain; padding:2px; box-sizing:border-box; background:var(--white); border-radius:50%; }
.shop-price-block{ text-align:right; }
.shop-old-price{ display:block; font-size:11.5px; color:var(--grey); text-decoration:line-through; }
.shop-new-price{ font-family:var(--sans); font-size:15px; font-weight:700; color:var(--ink); }

.shop-bottom-row{ display:flex; align-items:stretch; gap:8px; margin:auto 2px 0; }
.shop-size-select{
  flex:1.1; background:var(--blue-50); border:none; border-radius:18px; padding:8px 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-size:11px; font-weight:600; line-height:1.15; color:var(--ink); text-align:center;
  transition:background .25s var(--ease);
}
.shop-size-select:hover{ background:var(--blue-100); }
.shop-ruler-btn{
  width:36px; flex-shrink:0; border-radius:50%; background:var(--blue-50); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:background .25s var(--ease);
}
.shop-ruler-btn svg{ width:15px; height:15px; }
.shop-ruler-btn:hover{ background:var(--blue-100); }

.shop-buy{
  flex:1.6; background:var(--blue-600); color:var(--white); border:none; border-radius:18px;
  padding:9px 8px; display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12px; font-weight:700; white-space:nowrap; text-decoration:none;
  box-shadow:0 10px 20px -8px rgba(8,10,40,.45);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.shop-buy svg{ width:12px; height:12px; flex-shrink:0; transition:transform .3s var(--ease); }
.shop-buy:hover{ background:var(--blue-700); transform:translateY(-2px); }
.shop-buy.is-added{ background:var(--ink); animation:buyPop .5s var(--ease); }
@keyframes buyPop{
  0%{ transform:translateY(0) scale(1); }
  30%{ transform:translateY(-3px) scale(1.05); }
  55%{ transform:translateY(0) scale(0.97); }
  100%{ transform:translateY(0) scale(1); }
}
.shop-buy.is-added svg{ transform:scale(0) rotate(-90deg); }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0; }

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.whatsapp-float{
  position:fixed; right:26px; bottom:26px; z-index:150;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 32px -12px rgba(37,211,102,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-float:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 20px 38px -12px rgba(37,211,102,.7); }
.whatsapp-float:active{ transform:translateY(-1px) scale(0.97); }
.whatsapp-float svg{ width:29px; height:29px; position:relative; z-index:2; }
.whatsapp-float-ring{
  position:absolute; inset:0; border-radius:50%;
  background:#25D366;
  animation:whatsappPulse 2.2s ease-out infinite;
}
.whatsapp-float-ring.delay{ animation-delay:1.1s; }
@keyframes whatsappPulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(2.1); opacity:0; }
}
.whatsapp-float-tip{
  position:absolute; right:72px; top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap;
  padding:8px 14px; border-radius:8px; opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.whatsapp-float:hover .whatsapp-float-tip{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:720px){
  .whatsapp-float{ right:16px; bottom:16px; width:54px; height:54px; }
  .whatsapp-float-tip{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .whatsapp-float-ring{ animation:none; opacity:0; } }
/* =========================================================
   PAGE BLINK — transición de página tipo parpadeo:
   dos "párpados" se cierran al salir y se abren al llegar.
   El overlay lo crea page-blink.js, aquí solo se estila.
   ========================================================= */
.page-blink{
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  overflow:hidden;
}
/* Párpados con curva invertida (forma de ojo/almendra): a cada
   párpado se le "muerde" una elipse transparente en el borde donde
   se encuentran, así la abertura es amplia al centro y se cierra en
   punta hacia los lados, como un ojo real. La elipse mide 50vw de
   radio para que la punta caiga justo en los bordes de la pantalla.
   Los párpados miden 75% de alto para que, cerrados, se traslapen y
   el mordisco de uno quede cubierto por el otro (sin huecos). */
.page-blink::before,
.page-blink::after{
  content:''; position:absolute; left:0; width:100%; height:75%;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.page-blink::before{
  top:0;
  background:radial-gradient(ellipse 50vw 25vh at 50% 100%, transparent 99%, var(--ink) 100%);
}
.page-blink::after{
  bottom:0;
  background:radial-gradient(ellipse 50vw 25vh at 50% 0%, transparent 99%, var(--ink) 100%);
}
/* Estado inicial: cerrado (párpados traslapados cubriendo todo) */
.page-blink::before{ transform:translateY(0); }
.page-blink::after{ transform:translateY(0); }
/* Abierto: cada párpado se retrae fuera de la pantalla */
.page-blink.open::before{ transform:translateY(-110%); }
.page-blink.open::after{ transform:translateY(110%); }