/* === Fuente personalizada (ajusta las rutas a tus archivos) === */
@font-face{
  font-family:"Link Sans Product";
  src:url("fonts/LinkSansProduct-Regular.woff2") format("woff2"),
      url("fonts/LinkSansProduct-Regular.woff")  format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Link Sans Product";
  src:url("fonts/LinkSansProduct-Semibold.woff2") format("woff2"),
      url("fonts/LinkSansProduct-Semibold.woff")  format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ===== Reset / base ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--page-bg);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;
  color:var(--text);overflow-x:hidden;
}

.wrap{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px 32px}

.card{
  width:100%;max-width:580px;background:var(--card);
  border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:visible;position:relative;z-index:80;
  margin-bottom:calc(24px + var(--promo-bottom));
}

/* ===== Top mini ===== */
.top-mini{
  position:absolute;
  top:var(--icons-top);
  left:var(--icons-side);
  right:var(--icons-side);
  display:flex;align-items:center;justify-content:space-between;
  height:28px;padding:0;
  color:#000;font-size:var(--icons-size);
  line-height:1;z-index:6;
}
.top-mini .right i{ margin-left:18px; }
.top-mini i{ display:inline-block; vertical-align:middle; transition:transform .15s ease; }
.top-mini i:hover{ transform:translateY(-1px); }

/* Botón SVG superior */
.top-mini button[data-testid="LinktreeTreetop"]{
  width:40px;height:40px;
  display:grid;place-items:center;
  padding:0;margin:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:9999px;
  appearance:none;-webkit-appearance:none;
  cursor:pointer;
}
.top-mini button[data-testid="LinktreeTreetop"]:focus,
.top-mini button[data-testid="LinktreeTreetop"]:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
.top-mini button[data-testid="LinktreeTreetop"]:active{
  transform:scale(.96);
}

/* ===== Perfil ===== */
.profile{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(var(--profile-pad-top) + (var(--avatar-pop) * -1)) 18px 6px;
}

/* ✅ Avatar (círculo) - CORREGIDO para que el logo no se corte */
.avatar{
  width:114px;height:114px;border-radius:999px;
  box-shadow:var(--shadow-soft), 0 0 0 6px #fff;
  position:relative;top:var(--avatar-pop);z-index:2;
  overflow:hidden;         /* siempre dentro del círculo */
  background:#fff;
  display:grid;
  place-items:center;
}

/* ✅ Logo completo dentro del círculo (SIN zoom) */
.avatar img{
  width:100%;
  height:100%;
  object-fit:contain;      /* no recorta */
  padding:14px;            /* aire para que no pegue al borde */
  border-radius:0;         /* importante: evita “recorte circular” extra */
  transform:none !important;
  display:block;
}

/* ===== Título ===== */
.name{
  margin:6px 0 2px 0;
  font-family:"Link Sans Product", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  font-weight:600;
  font-size:24px;
  line-height:1.1;
  color:#000;
  display:flex;align-items:center;gap:8px;
  transform:translateY(var(--name-nudge));
}
.verified-badge{
  width:var(--badge-size);height:var(--badge-size);
  display:inline-block;margin-left:2px;vertical-align:middle;
  transform:translateY(1px);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));
}

/* ===== Bio ===== */
.bio{
  margin:2px 0 8px 0;
  font-family:"Link Sans Product", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.35;
  color:#000;
}

/* ===== Redes ===== */
.socials{display:flex;gap:22px;justify-content:center;margin:6px 0 14px}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;color:#000;font-size:28px;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  transition:color .15s ease, transform .15s ease;
}
.socials a:hover{color:var(--brand);transform:translateY(-1px)}
.socials a i{line-height:1;display:block}

/* ===== Tabs ===== */
.segmented-wrap{display:flex;justify-content:center}
.segmented{
  --h:56px;
  width:200px;height:var(--h);
  display:grid;grid-template-columns:1fr 1fr;
  position:relative;
  background:#9e9e9e;
  border-radius:9999px;
  padding:4px;margin:2px 0 16px;
}
.seg-indicator{
  position:absolute;inset:4px;
  width:calc(50% - 4px);
  height:calc(100% - 8px);
  background:#fff;border-radius:9999px;
  transform:translateX(0%);
  transition:transform .22s ease;
}
.seg-btn{
  position:relative;z-index:1;
  appearance:none;border:0;background:transparent;
  cursor:pointer;
  font-weight:800;font-size:13.5px;
  line-height:1;letter-spacing:.1px;
  color:#fff;border-radius:9999px;
  padding:0;
}
.seg-btn[aria-selected="true"]{color:#111827}

/* ===== Lista de links ===== */
.list{padding:6px 18px 18px}
.item{
  display:grid;grid-template-columns:56px 1fr 24px;align-items:center;
  background:#fff;border:1px solid #eef0f4;border-radius:24px;
  padding:12px 16px;margin:16px 0;
  box-shadow:var(--item-shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s, background .15s;
  position:relative
}
.item:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(0,0,0,.08);
  border-color:#ffffff;
  background:#E6E6E6;
}
.logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center}
.logo>i{
  color:var(--brand);
  font-size:28px;
  line-height:1;
  text-shadow:0 0 .6px currentColor,0 0 .6px currentColor,0 0 .6px currentColor
}
.txt{display:flex;flex-direction:column;align-items:center}
.title{color:var(--brand);font-weight:700;letter-spacing:.1px}
.sub{
  margin-top:4px;
  font-size:15px;font-weight:800;
  color:var(--brand);
  letter-spacing:.2px;
  line-height:1.1;
}
.dots{justify-self:end;color:#9aa1aa;cursor:pointer;padding:4px 6px;border-radius:8px}
.dots:hover{background:#eef2ff;color:#445}
.item a{position:absolute;inset:0;border-radius:inherit}

/* ===== UBICACIÓN (MAPA INTERACTIVO) ===== */
.map-card{
  overflow:hidden;
  border-radius:26px;
  border:1px solid #e5e7eb;
  box-shadow:var(--item-shadow);
  margin:16px 0 18px;
  background:#fff;
}
.map-frame{
  width:100%;
  height:260px;
  background:#fff;
}
.map-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  filter:none !important;
}
.map-bar{
  height:72px;
  background:#fff;
  border-top:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
}
.map-title{
  color:var(--brand);
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.6px;
}

/* ===== Tienda ===== */
.shop{display:none}
.shop-grid{
  padding:8px 18px 24px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}

.product-card{
  position:relative;
  background:#fff;
  border:1px solid #eef0f4;
  border-radius:20px;
  box-shadow:var(--item-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:320px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.product-card:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(0,0,0,.08);
  border-color:#e3e6ee;
}

.product-top{
  padding:24px 18px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:210px;
}

/* ✅ ZOOM MÁS FUERTE */
.product-img{
  width:130px;height:130px;
  object-fit:contain;
  display:block;

  transform:scale(1);
  transition:transform .25s ease;
  will-change:transform;
}
.product-card:hover .product-img{
  transform:scale(1.82);
}

.product-meta{
  margin-top:auto;
  background:#f3f4f6;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.product-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.product-title{
  color:var(--brand);
  font-weight:800;
  font-size:15px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.product-price{
  color:var(--brand);
  opacity:.85;
  font-weight:700;
  font-size:12.5px;
  margin-top:4px;
}
.product-dots{color:#9aa1aa;padding:6px 8px;border-radius:10px}
.product-card:hover .product-meta{background:#eceff3}
.product-dots:hover{background:#e6eaf0;color:#445}
.product-link{position:absolute;inset:0;border-radius:inherit}

/* ===== QR + piso + promo bar ===== */
.qr-panel{
  position:fixed; right:var(--qr-right); bottom:var(--qr-bottom);
  z-index:160;
  background:transparent;border:0;box-shadow:none;padding:0;width:auto;text-align:center
}
.qr-title{font-size:14px;color:#000;margin: var(--qr-title-shift) 0 6px 0;text-align:right}
.qr-box{display:inline-grid;place-items:center}
.qr-url{display:none}

.white-floor{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:40;
  background:#ffffff; width:min(580px, calc(100% - 32px)); height:0;
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
  pointer-events:none
}

.promo-bar{position:fixed; left:0; right:0; bottom:0; z-index:90; background:transparent; display:flex; justify-content:center; align-items:flex-end; padding:0; pointer-events:none}
.promo-inner{position:relative; z-index:1; pointer-events:auto; width:min(580px,100%); display:flex; flex-direction:column; align-items:center; text-align:center; color:#6b7280; font-size:13px; overflow:visible; padding-top:22px; padding-bottom:env(safe-area-inset-bottom)}
.promo-inner::before{content:""; position:absolute; left:0; right:0; bottom:0; height:var(--promo-grad-h); background:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,0) 100%); z-index:1}
.promo-pill{position:relative; z-index:3; display:inline-flex; align-items:center; gap:10px; background:#fff; border-radius:9999px; padding:10px 14px 10px 16px; box-shadow:0 8px 18px rgba(0,0,0,.18)}
.promo-pill a{color:#111827;text-decoration:none;font-weight:700}
.promo-close{border:0;background:transparent;cursor:pointer;font-size:18px;line-height:1;padding:0 4px 0 6px;color:#374151}
.promo-caption{position:relative; z-index:2; margin-top:var(--caption-gap); margin-bottom:var(--caption-bottom); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); font-size:14px; transform:translateY(calc(-1 * var(--caption-up)))}

.footer{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
  text-align:center;font-size:12.5px;border-top:0;padding:14px 12px;background:#fafafa;
  color:#000;
}
.footer a{color:#000;text-decoration:none}
.footer a:hover{color:#000;text-decoration:underline}
.footer .sep{opacity:1;color:#000}
.hidden{display:none !important}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  body { background: var(--card) !important; }
  .wrap { padding: 0; }
  .card { border-radius: 0; max-width: 100%; box-shadow: none; }
  .white-floor { display: none !important; }

  .shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }

  .product-card { min-height: 260px; }
  .product-top { min-height: 160px; padding: 16px 12px 12px; }
  .product-img { width: 95px; height: 95px; }
  .product-title { font-size: 13.5px; }
  .product-price { font-size: 12px; }

  .map-frame{ height:230px; }
  .map-bar{ height:68px; }

  .avatar{ width:114px; height:114px; }
  .avatar img{ padding:14px; }
}

/* ===== OML responsive refinement ===== */
@media (max-width: 1180px){
  .qr-panel{display:none!important}
  .wrap{padding-left:18px;padding-right:18px}
}
@media (max-width: 768px){
  html,body{overflow-x:hidden}
  body{background:var(--card)!important}
  .wrap{padding:0;width:100%;display:block}
  .card{width:100%;max-width:none;min-height:100dvh;border-radius:0;box-shadow:none;margin:0}
  .top-mini{padding-left:20px;padding-right:20px}
  .profile{padding-left:18px;padding-right:18px}
  .bio{max-width:520px;margin-left:auto;margin-right:auto}
  .socials{gap:18px;flex-wrap:wrap}
  .segmented-wrap{max-width:520px;margin-left:auto;margin-right:auto}
  .list,.shop{padding-left:14px;padding-right:14px}
  .item{min-height:78px}
  .item .logo{width:54px;height:54px}
  .item .title{font-size:14px}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
  .product-card{min-height:235px}
  .product-top{min-height:145px}
  .promo-inner{width:100%;padding-left:12px;padding-right:12px}
  .promo-pill{max-width:calc(100vw - 24px)}
  .promo-pill a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72vw}
}
@media (max-width: 480px){
  :root{--profile-pad-top:82px;--icons-side:18px;--icons-top:18px}
  .profile{padding-top:var(--profile-pad-top)}
  .avatar{width:96px!important;height:96px!important}
  .avatar img{padding:12px!important}
  .name{font-size:23px;line-height:1.15}
  .bio{font-size:13.5px;line-height:1.45}
  .socials{gap:15px}.socials a{font-size:19px}
  .segmented{height:44px}.seg-btn{font-size:13px}
  .list{gap:10px}
  .item{min-height:72px;padding:9px 12px;border-radius:16px}
  .item .logo{width:48px;height:48px;border-radius:12px}
  .item .sub{font-size:11.5px}
  .map-frame{height:190px!important}.map-bar{height:auto!important;min-height:58px;padding:10px 12px}
  .shop-grid{grid-template-columns:1fr!important;gap:12px!important}
  .product-card{min-height:0}.product-top{min-height:180px}.product-img{width:115px!important;height:115px!important}
  .product-meta{padding:12px}.product-title{font-size:14px!important}
  .footer{font-size:11.5px;padding-bottom:86px}
  .promo-caption{font-size:12px}.promo-pill{padding:9px 11px}.promo-pill a{font-size:12px;max-width:68vw}
}