/* ============================================================
   mariaship.com — Estilo propio (sobre Bootstrap 5 + UIkit 3)
   Reconciliación: mi diseño tiene prioridad sobre los frameworks.
   ============================================================ */
.card{ display:block; }                 /* anula display:flex de Bootstrap .card */
.btn{ line-height:1.25; text-decoration:none; }
.container{ width:100%; }
h1,h2,h3{ margin-top:0; }
.alert{ border:0; }
:root{
  /* Paleta mexicana */
  --mx-green:  #006847;   /* verde bandera */
  --mx-green-d:#00543a;
  --mx-red:    #ce1126;   /* rojo bandera */
  --mx-rosa:   #e4007c;   /* rosa mexicano (acento) */
  --mx-gold:   #c8a14b;   /* dorado artesanal */

  /* Neutros estilo Apple */
  --ink:    #1d1d1f;
  --ink-2:  #5c5c61;
  --line:   #d2d2d7;
  --bg:     #ffffff;
  --bg-2:   #f5f5f7;
  --radius: 14px;
  --maxw:   1640px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:17px; line-height:1.47; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--mx-green); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ---------- Tipografía ---------- */
h1,h2,h3{ font-weight:600; letter-spacing:-0.02em; line-height:1.08; margin:0 0 .4em; }
h1{ font-size:clamp(34px,6vw,64px); }
h2{ font-size:clamp(26px,4vw,40px); }
h3{ font-size:22px; }
.lead{ font-size:clamp(18px,2.4vw,22px); color:var(--ink-2); font-weight:400; }
.muted{ color:var(--ink-2); }
.center{ text-align:center; }

/* ---------- Header / nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav .container{ display:flex; align-items:center; gap:18px; height:52px; }
.brand{ font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-0.02em; }
.brand b{ color:var(--mx-green); }
.nav a{ color:var(--ink); font-size:14px; }
.nav .spacer{ flex:1; }
.nav-links{ display:flex; gap:22px; align-items:center; }
.lang-select{
  font-family:var(--font); font-size:13px; color:var(--ink);
  border:1px solid var(--line); border-radius:980px; padding:5px 12px; background:#fff; cursor:pointer;
}

/* ============================================================
   Cabecera tipo portal de negocios (Amazon/Alibaba)
   ============================================================ */
.site-header{ position:sticky; top:0; z-index:60; }
.topbar{ background:#fff; border-bottom:1px solid var(--line); }
.topbar-in{ display:flex; align-items:center; gap:20px; height:62px; }
.topbar .brand{ font-size:21px; font-weight:600; color:var(--ink); letter-spacing:-0.02em; flex:none; }
.topbar .brand b{ color:var(--mx-rosa); }

.hsearch{ flex:1; max-width:640px; display:flex; align-items:stretch;
  border:2px solid var(--mx-green); border-radius:980px; overflow:hidden; background:#fff; }
.hsearch input{ flex:1; border:0; outline:0; padding:10px 18px; font-family:var(--font); font-size:15px; background:transparent; }
.hsearch button{ border:0; cursor:pointer; padding:0 20px; font-size:17px;
  background:var(--mx-green); color:#fff; }
.hsearch button:hover{ background:var(--mx-green-d); }

.hnav{ display:flex; align-items:center; gap:16px; flex:none; }
.hnav-link{ color:var(--ink); font-size:14px; white-space:nowrap; }
.hnav-sell{ color:#fff; background:var(--mx-rosa); padding:7px 14px; border-radius:980px;
  font-size:14px; font-weight:500; white-space:nowrap; }
.hnav-sell:hover{ background:#b8005f; text-decoration:none; }

.deptbar{ background:var(--ink); }
.deptbar-in{ display:flex; align-items:center; gap:4px; overflow-x:auto; height:46px; -ms-overflow-style:none; scrollbar-width:none; }
.deptbar-in::-webkit-scrollbar{ display:none; }
.deptbar a{ color:#e6e6e6; font-size:13.5px; white-space:nowrap; padding:7px 12px; border-radius:8px; }
.deptbar a:hover{ background:rgba(255,255,255,.12); color:#fff; text-decoration:none; }
.dept-all{ font-weight:600; color:#fff !important; background:var(--mx-rosa); }
.dept-all:hover{ background:#b8005f !important; }

@media (max-width:760px){
  .topbar-in{ flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:10px; gap:10px; }
  .hsearch{ order:3; max-width:100%; width:100%; }
}

/* Mega-panel de categorías */
.deptbar{ position:relative; }
.dept-all{ display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer;
  font-family:var(--font); font-size:13.5px; font-weight:600; }
.dept-all .caret{ transition:transform .2s; }
.dept-all.open .caret{ transform:rotate(180deg); }
.megapanel{ position:absolute; left:0; right:0; top:100%; background:#fff;
  border-bottom:1px solid var(--line); box-shadow:0 20px 40px rgba(0,0,0,.16); z-index:70; }
.megapanel-in{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; padding:22px 0 26px; }
.megacol-head{ display:block; font-weight:600; color:var(--mx-green); padding:4px 0; border-bottom:2px solid var(--bg-2); margin-bottom:6px; }
.megacol-sub{ display:block; color:var(--ink-2); font-size:13.5px; padding:3px 0; }
.megacol-sub:hover{ color:var(--mx-rosa); text-decoration:none; }

/* Banda azteca (greca geométrica) */
.aztec-strip{ height:12px;
  background-color:var(--ink);
  background-image:
    linear-gradient(45deg, var(--mx-gold) 25%, transparent 25%),
    linear-gradient(-45deg, var(--mx-gold) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--mx-gold) 75%),
    linear-gradient(-45deg, transparent 75%, var(--mx-gold) 75%);
  background-size:14px 14px;
  background-position:0 0,0 7px,7px -7px,-7px 0;
  animation: aztec-pan 24s linear infinite; }
@keyframes aztec-pan{ from{ background-position:0 0,0 7px,7px -7px,-7px 0; } to{ background-position:56px 0,56px 7px,63px -7px,49px 0; } }

/* Fondo animado azteca (sutil) en secciones hero */
.hero, .sell-hero{ position:relative; overflow:hidden;
  background:linear-gradient(120deg,#ffffff,#f3f7f5,#fbf1f6,#ffffff);
  background-size:300% 300%; animation: ms-bg 22s ease infinite; }
@keyframes ms-bg{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hero::before, .sell-hero::before, .store-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23006847' stroke-width='2'%3E%3Cpath d='M36 6 L66 36 L36 66 L6 36 Z'/%3E%3Cpath d='M36 20 L52 36 L36 52 L20 36 Z'/%3E%3Cpath d='M36 0 v6 M36 66 v6 M0 36 h6 M66 36 h6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px; animation: aztec-float 60s linear infinite; }
@keyframes aztec-float{ from{ background-position:0 0; } to{ background-position:288px 216px; } }
.hero > .container, .sell-hero > .container{ position:relative; z-index:1; }
.store-hero{ position:relative; overflow:hidden; }
.store-hero > .container{ position:relative; z-index:1; }

/* Motivo azteca blanco para banners oscuros/de color */
.promo-slide::before, .source-box::before, .cta-band::before, .demand-band::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M36 6 L66 36 L36 66 L6 36 Z'/%3E%3Cpath d='M36 20 L52 36 L36 52 L20 36 Z'/%3E%3Cpath d='M36 0 v6 M36 66 v6 M0 36 h6 M66 36 h6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px; animation: aztec-float 70s linear infinite; }
.source-box, .cta-band, .demand-band{ position:relative; overflow:hidden; }
.promo-slide > div, .source-box > *, .cta-band > *, .demand-band > *{ position:relative; z-index:1; }

/* Estadísticas de producto */
.prod-stats{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; margin:6px 0 10px; }
.prod-stats .sep{ color:var(--line); }
.stars{ color:#e8a13a; letter-spacing:1px; }

/* Desglose de compra */
.feebox{ border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:18px; }
.fee-table{ width:100%; margin-top:10px; font-size:14px; }
.fee-table td{ padding:6px 0; border:0; }
.fee-table td:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.fee-table .fee-total td{ border-top:1px solid var(--line); padding-top:10px; font-weight:700; color:var(--mx-green-d); font-size:16px; }

/* Caja de pago 30/70 */
.paybox{ border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:18px; background:#faf7fb; }
.paysplit{ display:flex; align-items:center; gap:14px; margin-top:12px; text-align:center; font-size:13px; }
.paysplit .pct{ font-size:20px; font-weight:700; color:var(--mx-rosa); }
.paybar{ flex:1; height:10px; border-radius:980px; background:linear-gradient(90deg,var(--mx-green) 0 30%,var(--mx-rosa) 30% 100%); }
.paybar span{ display:none; }

/* Tarjeta de vendedor */
.vendor-card{ display:flex; align-items:center; gap:22px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:18px; padding:24px; flex-wrap:wrap; }
.vendor-logo{ width:72px; height:72px; border-radius:18px; flex:none; color:#fff; font-size:32px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--mx-rosa),var(--mx-green)); }
.vendor-main{ flex:1; min-width:240px; }
.vendor-main h3{ margin:0 0 2px; font-size:20px; }
.vendor-stats{ display:flex; gap:26px; margin-top:12px; font-size:14px; }
.vendor-cta{ flex:none; }

/* Chips con traducción */
.chip-tr{ display:inline-flex; flex-direction:column; line-height:1.15; padding-top:5px; padding-bottom:5px; }
.chip-es{ font-size:11px; opacity:.7; }

/* ---------- Botones ---------- */
.btn{
  display:inline-block; border:0; cursor:pointer; font-family:var(--font);
  font-size:16px; font-weight:400; padding:11px 22px; border-radius:980px;
  background:var(--mx-green); color:#fff; transition:.2s; text-decoration:none;
}
.btn:hover{ background:var(--mx-green-d); text-decoration:none; }
.btn.alt{ background:var(--ink); }
.btn.rosa{ background:var(--mx-rosa); }
.btn.ghost{ background:transparent; color:var(--mx-green); border:1px solid var(--mx-green); }
.btn.block{ display:block; width:100%; text-align:center; }
.btn.sm{ font-size:14px; padding:8px 16px; }

/* ---------- Hero ---------- */
.hero{ text-align:center; padding:84px 0 64px;
  background:linear-gradient(180deg,#fff 0%,var(--bg-2) 100%); }
.hero .flagbar{ height:5px; width:120px; margin:0 auto 26px; border-radius:4px;
  background:linear-gradient(90deg,var(--mx-green) 0 33%,#fff 33% 66%,var(--mx-red) 66% 100%);
  border:1px solid var(--line); }
.hero .actions{ margin-top:28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Buscador del hero */
.search{ margin:30px auto 0; max-width:600px; display:flex; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:980px; padding:7px 7px 7px 20px;
  box-shadow:0 8px 28px rgba(0,0,0,.06); }
.search-input{ flex:1; border:0; outline:0; font-family:var(--font); font-size:17px;
  background:transparent; color:var(--ink); }
.search-go{ white-space:nowrap; }

/* Bloque de sourcing de pago */
.source-box{ background:linear-gradient(135deg,var(--mx-green) 0%,var(--mx-green-d) 100%);
  color:#fff; border-radius:20px; padding:38px 32px; text-align:center; }
.source-box h2,.source-box h3{ color:#fff; }
.source-box .muted{ color:#cfe9df; }
.source-box .price{ font-size:15px; opacity:.92; margin-top:8px; }
.source-box .btn{ background:#fff; color:var(--mx-green-d); margin-top:18px; font-weight:500; }

/* ---------- Secciones ---------- */
section{ padding:64px 0; }
.section-head{ text-align:center; margin-bottom:40px; }

/* ---------- Grid de categorías ---------- */
.grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.card{
  background:var(--bg-2); border-radius:var(--radius); padding:28px 22px;
  transition:.2s; border:1px solid transparent;
}
.card:hover{ transform:translateY(-3px); border-color:var(--line); background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.06); }
.card .ico{ font-size:40px; line-height:1; margin-bottom:14px; }
.card h3{ font-size:19px; margin:0 0 4px; }
.card a{ color:var(--ink); }

/* ---------- Tira de confianza ---------- */
.trust{ background:var(--ink); color:#fff; }
.trust .grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.trust .card{ background:transparent; border:0; color:#fff; text-align:center; }
.trust h3{ color:#fff; }
.trust .muted{ color:#a1a1a6; }

/* ---------- Formularios / auth ---------- */
.auth-wrap{ max-width:400px; margin:56px auto; padding:0 22px; }
.auth-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:36px 30px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color:var(--ink-2); margin-bottom:6px; }
.input, select.input{
  width:100%; font-family:var(--font); font-size:16px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
}
.input:focus{ outline:2px solid var(--mx-green); border-color:transparent; }
.alert{ padding:12px 14px; border-radius:12px; font-size:14px; margin-bottom:16px; }
.alert.err{ background:#fdecee; color:#b3001b; }
.alert.ok{ background:#e7f5ef; color:var(--mx-green-d); }

/* Separador "o" y botón Google */
.or-sep{ display:flex; align-items:center; text-align:center; color:var(--ink-2); font-size:13px; margin:18px 0; }
.or-sep::before, .or-sep::after{ content:""; flex:1; height:1px; background:var(--line); }
.or-sep span{ padding:0 12px; }
.btn-google{ display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px; border:1px solid var(--line); border-radius:12px; background:#fff;
  color:var(--ink); font-size:15px; font-weight:500; cursor:pointer; }
.btn-google:hover{ background:var(--bg-2); text-decoration:none; }

/* ---------- Dashboard ---------- */
.dash{ display:flex; min-height:calc(100vh - 52px); }
.side{ width:230px; background:var(--bg-2); border-right:1px solid var(--line); padding:24px 0; }
.side a{ display:block; padding:10px 24px; color:var(--ink); font-size:15px; }
.side a:hover, .side a.active{ background:#fff; color:var(--mx-green); text-decoration:none; }
.main{ flex:1; padding:34px; }
.stat-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.stat{ background:var(--bg-2); border-radius:14px; padding:22px; }
.stat .n{ font-size:32px; font-weight:600; }
.badge{ display:inline-block; font-size:12px; padding:3px 10px; border-radius:980px; background:var(--bg-2); }
.badge.green{ background:#e7f5ef; color:var(--mx-green-d); }
.badge.red{ background:#fdecee; color:var(--mx-red); }
.badge.gold{ background:#f7f0dd; color:#8a6d1f; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); }
th{ color:var(--ink-2); font-weight:500; }

/* ---------- Landing de vendedores ---------- */
.kicker{ display:inline-block; font-size:13px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mx-green); background:#e7f5ef;
  padding:6px 14px; border-radius:980px; }
.sell-hero{ text-align:center; padding:76px 0 56px;
  background:linear-gradient(180deg,#fff 0%,var(--bg-2) 100%); }
.sell-hero .actions{ margin-top:26px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.regions{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.region{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; text-align:center; }
.region .flags{ font-size:26px; letter-spacing:2px; }
.region h3{ font-size:17px; margin:10px 0 2px; }

.demand-band{ background:var(--ink); color:#fff; border-radius:18px; padding:26px 28px;
  text-align:center; margin-top:26px; }
.demand-band .muted{ color:#a1a1a6; }
.demand-band strong{ font-size:18px; }

.steps{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); counter-reset:step; }
.step{ background:var(--bg-2); border-radius:16px; padding:26px; }
.step .num{ width:34px; height:34px; border-radius:50%; background:var(--mx-green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; margin-bottom:12px; }

.cta-band{ text-align:center; background:linear-gradient(135deg,var(--mx-green) 0%,var(--mx-green-d) 100%);
  color:#fff; border-radius:22px; padding:54px 30px; }
.cta-band h2{ color:#fff; }
.cta-band .btn{ background:#fff; color:var(--mx-green-d); font-weight:500; margin-top:18px; }

/* ---------- Footer ---------- */
.footer{ background:var(--bg-2); border-top:1px solid var(--line); padding:40px 0; font-size:13px; color:var(--ink-2); }
.footer .cols{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.footer a{ color:var(--ink-2); display:block; padding:4px 0; }
.footer .bottom{ margin-top:28px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ============================================================
   Catálogo estilo Alibaba, fotogalería, tiendas y chat
   ============================================================ */

/* Tiles de categoría coloridos (balanceados, con Rosa Mexicano) */
.cat-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.cat-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:26px 14px; border-radius:18px; color:#fff; text-align:center; min-height:130px;
  transition:.2s; text-decoration:none; }
.cat-tile:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.14); text-decoration:none; }
.cat-tile .cat-ico{ font-size:38px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.cat-tile .cat-name{ font-size:15px; font-weight:600; }
.cat-tile.tone1{ background:linear-gradient(135deg,#006847,#00543a); }   /* verde */
.cat-tile.tone2{ background:linear-gradient(135deg,#e4007c,#b8005f); }   /* rosa mexicano */
.cat-tile.tone3{ background:linear-gradient(135deg,#e8a13a,#c8772a); }   /* ámbar */
.cat-tile.tone4{ background:linear-gradient(135deg,#1f8fae,#136178); }   /* teal */
.cat-tile.tone5{ background:linear-gradient(135deg,#7a4bd0,#5a2fa6); }   /* morado */

/* Catálogo de productos (tarjetas con foto) */
.catalog{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:.2s; text-decoration:none; color:var(--ink); }
.pcard:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.10);
  border-color:transparent; text-decoration:none; }
.pcard-img{ position:relative; aspect-ratio:1; background:var(--bg-2); display:flex;
  align-items:center; justify-content:center; overflow:hidden; }
.pcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.pcard:hover .pcard-img img{ transform:scale(1.06); }
.pcard-emoji{ font-size:58px; }
.pcard-badge{ position:absolute; top:10px; left:10px; background:var(--mx-green); color:#fff;
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:980px; }
.pcard-promo{ position:absolute; top:10px; right:10px; background:var(--mx-rosa); color:#fff;
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:980px; display:inline-flex; gap:4px; align-items:center; box-shadow:0 4px 12px rgba(228,0,124,.35); }
.pcard.is-promoted{ border-color:transparent; box-shadow:0 0 0 2px var(--mx-rosa) inset, 0 10px 26px rgba(228,0,124,.10); }
.pcard-body{ padding:14px 14px 16px; }
.pcard-body h3{ font-size:15px; font-weight:500; margin:0 0 6px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard-price{ margin:0; font-size:18px; font-weight:700; color:var(--mx-rosa); }

/* Ficha de producto */
.product-grid{ display:grid; gap:40px; grid-template-columns:1fr 1fr; align-items:start; }
.price-big{ font-size:30px; font-weight:700; color:var(--mx-rosa); margin:6px 0; }
.specs{ margin-top:18px; }
.buy-box{ margin-top:24px; }

/* Fotogalería innovadora */
.gallery-main{ border-radius:18px; overflow:hidden; background:var(--bg-2); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; cursor:zoom-in; }
.gallery-main img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.gallery-main:hover img{ transform:scale(1.6); }
.gallery-main.empty span{ font-size:90px; }
.gallery-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.gallery-thumbs .thumb{ width:64px; height:64px; border-radius:12px; overflow:hidden; padding:0;
  border:2px solid transparent; background:var(--bg-2); cursor:pointer; transition:.15s; }
.gallery-thumbs .thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs .thumb.active{ border-color:var(--mx-rosa); }
.gallery-thumbs .thumb:hover{ border-color:var(--mx-green); }

/* Perfil de tienda */
.store-hero{ background:linear-gradient(135deg,#fff 0%,var(--bg-2) 100%); padding:48px 0 36px;
  border-bottom:1px solid var(--line); }
.store-head{ display:flex; gap:22px; align-items:center; }
.store-logo{ width:84px; height:84px; border-radius:22px; flex:none;
  background:linear-gradient(135deg,var(--mx-rosa),var(--mx-green)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:700; }
.store-hero h1{ font-size:30px; margin:0; }

/* Chat de soporte */
.ms-chat{ position:fixed; right:20px; bottom:20px; z-index:90; }
.ms-chat-toggle{ width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--mx-rosa),#b8005f); color:#fff; font-size:26px;
  box-shadow:0 10px 26px rgba(228,0,124,.4); transition:.2s; }
.ms-chat-toggle:hover{ transform:scale(1.06); }
.ms-chat-panel{ position:absolute; right:0; bottom:74px; width:340px; max-width:calc(100vw - 40px);
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.22); display:flex; flex-direction:column; height:460px; }
.ms-chat-head{ background:var(--ink); color:#fff; padding:14px 16px; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; }
.ms-chat-head button{ background:none; border:0; color:#fff; cursor:pointer; font-size:16px; }
.ms-chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;
  background:var(--bg-2); }
.ms-msg{ max-width:85%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.4; }
.ms-msg.bot{ background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; }
.ms-msg.me{ background:var(--mx-green); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.ms-msg.typing{ color:var(--ink-2); font-style:italic; }
.ms-chat-form{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:#fff; }
.ms-chat-form input{ flex:1; border:1px solid var(--line); border-radius:980px; padding:9px 14px;
  font-family:var(--font); font-size:14px; outline:none; }
.ms-chat-form input:focus{ border-color:var(--mx-rosa); }

/* Chips (Lo más buscado / subcategorías) */
.top-searches{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0 6px; }
.chip{ display:inline-block; padding:6px 14px; border-radius:980px; background:var(--bg-2);
  border:1px solid var(--line); font-size:14px; color:var(--ink); text-decoration:none; transition:.15s; }
.chip:hover{ background:var(--mx-rosa); color:#fff; border-color:transparent; text-decoration:none; }

@media (max-width:760px){ .product-grid{ grid-template-columns:1fr; } }
/* ============================================================
   Cabecera premium + mega-menú espectacular + país de origen
   ============================================================ */
.ribbon{ background:linear-gradient(90deg,var(--mx-green),var(--mx-green-d)); color:#eafff6; font-size:12.5px; }
.ribbon-in{ display:flex; align-items:center; justify-content:space-between; height:34px; }
.ribbon-right{ display:flex; align-items:center; gap:14px; }
.origin{ display:inline-flex; align-items:center; gap:6px; }
.origin-flag{ font-size:15px; }
.origin-select, .ribbon-lang{ background:transparent; border:0; color:#eafff6; font-family:var(--font);
  font-size:12.5px; cursor:pointer; max-width:150px; }
.origin-select option, .ribbon-lang option{ color:var(--ink); }

.topbar{ background:#fff; border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02); }
.topbar-in{ display:flex; align-items:center; gap:22px; height:72px; }
.brand{ display:inline-flex; align-items:center; gap:9px; font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; flex:none; }
.brand b{ color:var(--mx-rosa); }
.brand-mark{ width:34px; height:34px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:19px; background:var(--mx-green); box-shadow:none; }

.hsearch{ flex:1; max-width:680px; display:flex; align-items:stretch; height:46px;
  border:2px solid var(--mx-green); border-radius:980px; overflow:hidden; background:#fff; transition:box-shadow .2s; }
.hsearch:focus-within{ box-shadow:0 0 0 4px rgba(0,104,71,.14); }
.hsearch input{ flex:1; border:0; outline:0; padding:0 20px; font-family:var(--font); font-size:15.5px; background:transparent; }
.hsearch button{ border:0; cursor:pointer; padding:0 24px; font-size:18px; color:#fff;
  background:linear-gradient(135deg,var(--mx-green),var(--mx-green-d)); }
.hsearch button:hover{ filter:brightness(1.08); }

.hnav{ display:flex; align-items:center; gap:8px; flex:none; }
.hicon{ display:inline-flex; flex-direction:column; align-items:center; gap:1px; padding:6px 10px; border:0;
  background:transparent; cursor:pointer; color:var(--ink); border-radius:12px; font-family:var(--font); transition:.15s; }
.hicon:hover{ background:var(--bg-2); color:var(--mx-rosa); text-decoration:none; }
.hicon-emoji{ font-size:18px; line-height:1; }
.hicon-label{ font-size:11.5px; white-space:nowrap; }
.hnav-sell{ background:linear-gradient(135deg,var(--mx-rosa),#b8005f); color:#fff; padding:9px 16px; border-radius:980px;
  font-size:14px; font-weight:600; white-space:nowrap; box-shadow:0 6px 16px rgba(228,0,124,.3); }
.hnav-sell:hover{ filter:brightness(1.06); text-decoration:none; color:#fff; }

.deptbar{ position:relative; background:linear-gradient(90deg,#1d1d1f,#2a2a2c); }
.deptbar-in{ display:flex; align-items:center; gap:4px; overflow-x:auto; height:48px; scrollbar-width:none; }
.deptbar-in::-webkit-scrollbar{ display:none; }
.deptbar a{ color:#e6e6e6; font-size:13.5px; white-space:nowrap; padding:7px 12px; border-radius:8px; transition:.15s; }
.deptbar a:hover{ background:rgba(255,255,255,.12); color:#fff; text-decoration:none; }
.dept-all{ display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer; font-family:var(--font);
  font-size:13.5px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--mx-rosa),#b8005f);
  padding:8px 14px; border-radius:10px; margin-right:6px; }
.dept-all .caret{ transition:transform .25s; }
.dept-all.open .caret{ transform:rotate(180deg); }

/* Mega-menú con tarjetas de color */
.megapanel{ position:absolute; left:0; right:0; top:100%; background:#fff;
  border-bottom:1px solid var(--line); box-shadow:0 24px 50px rgba(0,0,0,.20); z-index:70;
  animation: mega-in .22s ease; }
@keyframes mega-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
.megapanel-in{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; padding:22px 0 26px; }
.megacard{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff; transition:.18s; }
.megacard:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.10); }
.megacard-head{ display:flex; align-items:center; gap:10px; padding:13px 14px; color:#fff; font-weight:700; font-size:15px; }
.megacard-head:hover{ text-decoration:none; color:#fff; }
.megacard-ico{ font-size:22px; }
.megacard.tone1 .megacard-head{ background:linear-gradient(135deg,#006847,#00543a); }
.megacard.tone2 .megacard-head{ background:linear-gradient(135deg,#e4007c,#b8005f); }
.megacard.tone3 .megacard-head{ background:linear-gradient(135deg,#e8a13a,#c8772a); }
.megacard.tone4 .megacard-head{ background:linear-gradient(135deg,#1f8fae,#136178); }
.megacard.tone5 .megacard-head{ background:linear-gradient(135deg,#7a4bd0,#5a2fa6); }
.megacard-subs{ display:flex; flex-direction:column; padding:8px 14px 12px; }
.megacard-subs a{ color:var(--ink-2); font-size:13px; padding:3px 0; }
.megacard-subs a:hover{ color:var(--mx-rosa); text-decoration:none; }

/* El soporte vive en el header: ocultamos el botón flotante (el panel sigue activo) */
.ms-chat-toggle{ display:none; }

@media (max-width:820px){
  .hicon-label{ display:none; }
  .topbar-in{ flex-wrap:wrap; height:auto; padding:10px 0; gap:12px; }
  .hsearch{ order:3; width:100%; max-width:100%; }
}

/* Registro dividido (ventajas + formulario simple) */
.auth-split{ max-width:1000px; margin:42px auto; display:grid; grid-template-columns:1fr 1fr;
  border-radius:22px; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.12); border:1px solid var(--line); }
.auth-aside{ color:#fff; padding:44px 38px; display:flex; align-items:center; position:relative; overflow:hidden; }
.auth-aside.aside-seller{ background:linear-gradient(150deg,#006847,#00543a); }
.auth-aside.aside-buyer{ background:linear-gradient(150deg,#e4007c,#b8005f); }
.auth-aside::before{ content:""; position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='M0 40 H22 V18 H44 V40 H66 V62 H80'/%3E%3C/g%3E%3C/svg%3E"); background-size:80px; }
.aside-in{ position:relative; z-index:1; }
.aside-kicker{ display:inline-flex; gap:7px; align-items:center; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; opacity:.95; }
.auth-aside h2{ color:#fff; font-size:30px; margin:12px 0 22px; line-height:1.1; }
.aside-benefits{ list-style:none; padding:0; margin:0; }
.aside-benefits li{ display:flex; gap:11px; align-items:flex-start; padding:8px 0; font-size:15px; }
.aside-benefits .bi{ font-size:19px; margin-top:1px; }
.aside-foot{ margin-top:26px; opacity:.9; font-size:13px; }
.auth-main{ background:#fff; padding:38px 34px; }
.auth-card2{ max-width:420px; margin:0 auto; }
.role-toggle{ display:flex; gap:6px; background:var(--bg-2); border-radius:14px; padding:5px; margin-bottom:22px; }
.role-toggle a{ flex:1; text-align:center; padding:10px; border-radius:10px; color:var(--ink-2); font-weight:600; font-size:14px; }
.role-toggle a.active{ background:#fff; color:var(--mx-green); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.role-toggle a:hover{ text-decoration:none; }
.field-row{ display:flex; gap:14px; }
.field-row .field{ flex:1; }
@media (max-width:820px){ .auth-split{ grid-template-columns:1fr; max-width:440px; } .auth-aside{ display:none; } }

/* Auth a pantalla completa (con top_min) */
body.auth-page{ background:var(--bg-2); }
.auth-page .auth-split{ margin:0; max-width:none; min-height:calc(100vh - 72px); border:0; border-radius:0; box-shadow:none; }
.auth-page .auth-wrap{ min-height:calc(100vh - 72px); display:flex; align-items:center; justify-content:center; margin:0; padding:24px; }
.auth-page .auth-main{ display:flex; align-items:center; }
.auth-page .auth-card2{ width:100%; }
@media (max-width:820px){ .auth-page .auth-split{ min-height:auto; } .auth-page .auth-aside{ display:none; } }

/* Compra directa (producto en stock) */
.buy-now{ border:1px solid var(--line); border-radius:16px; padding:18px; margin-top:18px; background:#fff; }
.buy-now .qty-row{ display:flex; align-items:center; gap:12px; margin:12px 0; }
.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:980px; overflow:hidden; }
.qty-stepper button{ width:38px; height:38px; border:0; background:var(--bg-2); cursor:pointer; font-size:18px; }
.qty-stepper input{ width:64px; text-align:center; border:0; outline:0; font-size:16px; font-family:var(--font); }
.buy-total{ font-weight:700; color:var(--mx-green-d); }

/* Carrusel de ofertas */
.promo{ padding:20px 0 0; }
.promo-carousel{ position:relative; border-radius:20px; overflow:hidden; min-height:220px; box-shadow:0 16px 40px rgba(0,0,0,.10); }
.promo-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; display:flex; align-items:center; padding:34px 44px; color:#fff; }
.promo-slide.active{ opacity:1; position:relative; }
.promo-slide h2{ color:#fff; max-width:700px; font-size:clamp(23px,3.4vw,38px); margin:10px 0 18px; line-height:1.1; }
.promo-slide .btn{ background:#fff; color:var(--ink); }
.promo-kicker{ display:inline-flex; gap:7px; align-items:center; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; }
.promo-slide.ps1{ background:linear-gradient(120deg,#006847,#00543a); }
.promo-slide.ps2{ background:linear-gradient(120deg,#e4007c,#b8005f); }
.promo-slide.ps3{ background:linear-gradient(120deg,#1d1d1f,#3a3a3c); }
.promo-dots{ position:absolute; bottom:14px; right:20px; display:flex; gap:8px; z-index:2; }
.promo-dots button{ width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.5); cursor:pointer; padding:0; }
.promo-dots button.active{ background:#fff; }

/* Píldoras de la landing de vendedores */
.sell-pills{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:18px auto 0; max-width:760px; }
.sell-pill{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line);
  border-radius:980px; padding:8px 16px; font-size:13.5px; font-weight:600; color:var(--mx-green-d); }
.sell-pill .bi{ color:var(--mx-rosa); }

/* Beneficios en registro */
.reg-benefits{ list-style:none; padding:0; margin:0 0 18px; }
.reg-benefits li{ display:flex; gap:8px; align-items:flex-start; font-size:14px; padding:4px 0; }
.reg-benefits .bi{ color:var(--mx-green); margin-top:2px; }

/* Footer minimizado */
.footer-min{ border-top:1px solid var(--line); background:#fff; padding:14px 0; font-size:13px; color:var(--ink-2); }
.footer-min-in{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.footer-min-links{ display:flex; gap:16px; }
.footer-min-links a{ color:var(--ink-2); }
.footer-min-links a:hover{ color:var(--mx-rosa); }

/* Franja de confianza (portada) */
.trust-strip{ background:#fff; border-bottom:1px solid var(--line); }
.trust-strip-in{ display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; padding:16px 0; }
.ts-item{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink);
  flex:1 1 200px; justify-content:center; }
.ts-item .bi{ font-size:20px; color:var(--mx-green); }
@media (max-width:680px){ .ts-item{ flex:1 1 45%; font-size:12.5px; justify-content:flex-start; } }

/* Encabezado de sección con "Ver todo" */
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.sec-head h2{ font-size:24px; margin:0; display:flex; align-items:center; gap:8px; }
.sec-head h2 .bi{ color:var(--mx-rosa); }
.see-all{ font-size:14px; font-weight:600; color:var(--mx-green); white-space:nowrap; }
.see-all:hover{ color:var(--mx-rosa); }

/* Top: pulido del buscador */
.hsearch input::placeholder{ color:#9a9aa0; }

/* Marca: junta (top) y solo logo (top_min) */
.brand{ gap:9px; }
.brand-word{ font-weight:700; letter-spacing:-0.02em; color:var(--ink); }
.brand-word b{ color:var(--mx-rosa); font-weight:700; }
.brand-only{ gap:0; }
.brand-only .brand-mark{ margin:0; }
.brand-mark{ display:inline-flex; align-items:center; justify-content:center; }
.brand-glyph{ width:66%; height:66%; display:block; }

/* Idioma: bandera desplegable */
.lang-dd{ position:relative; display:inline-flex; }
.lang-btn{ background:transparent; border:0; cursor:pointer; font-size:19px; line-height:1; padding:3px 6px; border-radius:8px; display:inline-flex; align-items:center; gap:2px; }
.lang-btn::after{ content:"▾"; font-size:9px; opacity:.55; }
.lang-btn:hover{ background:rgba(0,0,0,.06); }
.lang-menu{ animation: mega-in .18s ease; }
.lang-menu{ position:absolute; right:0; top:135%; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 38px rgba(0,0,0,.18); min-width:168px; padding:6px; z-index:90; }
.lang-menu a{ display:flex; gap:9px; align-items:center; padding:8px 10px; border-radius:8px; color:var(--ink); font-size:14px; }
.lang-menu a:hover{ background:var(--bg-2); text-decoration:none; }
.lang-menu a.active{ color:var(--mx-green); font-weight:600; }

/* top_min mejorado */
.is-min .topbar{ background:#fff; }
.is-min .topbar-in{ gap:14px; height:64px; }
.is-min .brand-only .brand-mark{ width:38px; height:38px; border-radius:12px; font-size:20px; }
.top-div{ width:1px; height:26px; background:var(--line); flex:none; }
.is-min .hnav{ gap:4px; }
.is-min .hicon-label{ display:none; }
.is-min .hicon{ width:42px; height:42px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; }
.is-min .hicon:hover{ background:var(--bg-2); }
.is-min .hicon.open{ background:#e7f5ef; color:var(--mx-green); }
.is-min .hicon .hicon-emoji{ font-size:21px; }
.is-min .lang-btn{ width:42px; height:42px; border-radius:12px; }
.is-min .lang-btn:hover{ background:var(--bg-2); }
.is-min .hsearch{ flex:1; max-width:none; height:44px; }
.hnav-right{ gap:8px; margin-left:auto; }
@media (max-width:680px){
  .hide-sm{ display:none; }
  .is-min .topbar-in{ flex-wrap:wrap; height:auto; padding:10px 0; gap:10px; }
  .is-min .hsearch{ order:5; flex-basis:100%; }
}

/* Galería sin foto: placeholder de marca */
.gallery-main.no-photo{ background:var(--bg-2); cursor:default; }
.gallery-main.no-photo img{ object-fit:contain; }

/* Pulido de los tops */
.is-min .topbar{ box-shadow:0 2px 14px rgba(0,0,0,.06); }
.is-full .topbar-in{ height:74px; }
.deptbar a.dept{ position:relative; }
.deptbar a.dept::after{ content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px;
  background:var(--mx-rosa); transform:scaleX(0); transform-origin:left; transition:transform .2s; border-radius:2px; }
.deptbar a.dept:hover::after{ transform:scaleX(1); }
.hsearch{ box-shadow:0 1px 0 rgba(0,0,0,.02); }
.brand-mark{ transition:transform .2s; }
.brand:hover .brand-mark{ transform:rotate(-6deg) scale(1.05); }

/* ===== TOP completo: más amplio (vertical) ===== */
.is-full .ribbon-in{ height:38px; }
.is-full .topbar-in{ height:90px; }
.is-full .brand{ font-size:24px; }
.is-full .brand-mark{ width:42px; height:42px; border-radius:13px; font-size:22px; }
.is-full .hsearch{ height:54px; max-width:780px; border-radius:980px; }
.is-full .hsearch input{ font-size:16px; padding:0 24px; }
.is-full .hsearch button{ padding:0 28px; font-size:20px; }
.is-full .deptbar-in{ height:54px; }
.is-full .hnav-sell{ padding:11px 18px; }

/* ===== Mega-menú flotante (sin colores de fondo) ===== */
.megapanel{ background:transparent; border:0; box-shadow:none; }
.megapanel-in{ background:#fff; border:1px solid var(--line); border-radius:22px;
  box-shadow:0 34px 80px rgba(0,0,0,.22); padding:26px; margin-top:14px; }
.megacard{ background:#fff !important; border:0; border-radius:0; }
.megacard:hover{ transform:none; box-shadow:none; }
.megacard-head{ background:none !important; color:var(--ink) !important; padding:4px 4px 10px;
  border-bottom:2px solid var(--bg-2); font-weight:700; }
.megacard-head:hover{ color:var(--mx-rosa) !important; }
.megacard-ico{ color:var(--mx-rosa); font-size:20px; }
.megacard-subs{ padding:10px 4px 2px; }
.megacard-subs a:hover{ color:var(--mx-rosa); padding-left:3px; transition:.15s; }

/* ===== Categorías de portada sin color de fondo ===== */
.cat-tile, .cat-tile.tone1, .cat-tile.tone2, .cat-tile.tone3, .cat-tile.tone4, .cat-tile.tone5{
  background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.cat-tile:hover{ border-color:var(--mx-rosa); box-shadow:0 14px 30px rgba(0,0,0,.08); transform:translateY(-3px); }
.cat-tile .cat-ico{ color:var(--mx-green); filter:none; }
.cat-tile .cat-name{ color:var(--ink); }

/* ===== top_min: íconos a la derecha ===== */
.is-min .hnav-right{ margin-left:0; }

/* ===== Nueva barra limpia (top) ===== */
.top-clean .topbar{ background:#fff; }
.top-clean .topbar-in{ height:76px; gap:16px; }
.cat-pill{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fff;
  border-radius:12px; padding:11px 15px; font-family:var(--font); font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; flex:none; }
.cat-pill:hover{ border-color:var(--mx-rosa); color:var(--mx-rosa); }
.cat-pill .caret{ font-size:12px; transition:transform .2s; }
.cat-pill.open{ background:#e7f5ef; border-color:var(--mx-green); color:var(--mx-green); }
.cat-pill.open .caret{ transform:rotate(180deg); }
.top-clean .hsearch{ flex:1; max-width:none; height:48px; }
.top-clean .hnav{ gap:6px; flex:none; }
.top-clean .hicon{ width:42px; height:42px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; }
.top-clean .hicon:hover{ background:var(--bg-2); }
.lang-menu-scroll{ max-height:330px; overflow-y:auto; }
@media (max-width:900px){ .cat-pill-txt{ display:none; } }
@media (max-width:680px){ .top-clean .topbar-in{ flex-wrap:wrap; height:auto; padding:10px 0; } .top-clean .hsearch{ order:5; flex-basis:100%; } }

/* ===== Migas de pan ===== */
.crumbs{ font-size:13px; color:var(--ink-2); margin:6px 0 14px; display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.crumbs a{ color:var(--ink-2); }
.crumbs a:hover{ color:var(--mx-rosa); }
.crumbs .sep{ opacity:.5; }
.crumbs .cur{ color:var(--ink); font-weight:600; }

/* ===== Encabezado de catálogo + orden ===== */
.cat-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.cat-head h1{ font-size:30px; margin:0; }
.sort-dd{ font-size:13px; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; }
.sort-dd select{ font-family:var(--font); font-size:14px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }

/* ===== Foco de teclado visible (a11y) ===== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--mx-rosa); outline-offset:2px; border-radius:6px; }

/* ===== Heroes/banners a la misma altura, fondo completo ===== */
:root{ --hero-h: 360px; }
.promo-carousel, .promo-slide{ min-height:var(--hero-h); }
.sell-hero{ min-height:var(--hero-h); display:flex; align-items:center; padding-top:0; padding-bottom:0; }
.store-hero{ min-height:230px; display:flex; align-items:center; }
.sell-hero > .container, .store-hero > .container{ width:100%; }
@media (max-width:680px){ :root{ --hero-h:280px; } }

/* ===== Catálogo con filtros a la derecha ===== */
.cat-layout{ display:grid; grid-template-columns:1fr 272px; gap:28px; align-items:start; }
.cat-main{ min-width:0; }
.cat-filters{ position:sticky; top:88px; }
.filters-body{ display:flex; flex-direction:column; gap:16px; }
.filter-block{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:#fff; }
.filter-block h4{ margin:0 0 10px; font-size:14px; }
.filter-link{ display:block; padding:5px 0; font-size:14px; color:var(--ink); }
.filter-link:hover{ color:var(--mx-rosa); text-decoration:none; }
.filter-link.active{ color:var(--mx-green); font-weight:600; }
.price-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.price-row .input{ padding:8px 10px; }
.filters-toggle{ display:none; }
@media (max-width:880px){
  .cat-layout{ grid-template-columns:1fr; }
  .cat-filters{ position:static; }
  .filters-toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fff;
    border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer; margin-bottom:12px; font-family:var(--font); }
  .cat-filters .filters-body{ display:none; }
  .cat-filters.open .filters-body{ display:flex; }
}

/* Header compacto al hacer scroll (solo íconos + buscador) */
.ribbon{ overflow:hidden; transition:height .25s ease, opacity .2s ease; }
.deptbar{ transition:max-height .28s ease, opacity .2s ease; }
.topbar-in{ transition:height .25s ease; }
.hdr-min .ribbon{ height:0 !important; opacity:0; }
.hdr-min .deptbar{ max-height:0; opacity:0; overflow:hidden; pointer-events:none; }
.hdr-min .topbar{ box-shadow:0 4px 16px rgba(0,0,0,.08); }
.hdr-min .topbar-in{ height:56px; }
.hdr-min .brand{ font-size:19px; }
.hdr-min .hsearch{ height:40px; }
.hdr-min .hicon-label{ display:none; }
.deptbar{ max-height:80px; }

/* Visor de imagen (lightbox) con zoom */
.ms-lightbox{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.93);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ms-lightbox[hidden]{ display:none; }
.ms-lightbox img{ max-width:92vw; max-height:92vh; transition:transform .12s ease; user-select:none; -webkit-user-drag:none; }
.ms-lightbox-close, .ms-lightbox-zoom{ position:fixed; top:18px; width:46px; height:46px; border-radius:50%;
  border:0; background:rgba(255,255,255,.16); color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ms-lightbox-close{ right:18px; } .ms-lightbox-zoom{ right:74px; }
.ms-lightbox-close:hover, .ms-lightbox-zoom:hover{ background:rgba(255,255,255,.3); }
.zoom-hint{ position:absolute; right:12px; bottom:12px; width:38px; height:38px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; pointer-events:none; }
.gallery-main{ cursor:zoom-in; }
.gallery-main:hover img{ transform:none; }   /* el zoom ahora es al hacer clic */

/* Asistente: panel fijo y cerrado por defecto */
.ms-chat-panel{ position:fixed; right:20px; bottom:20px; }

/* Iconografía monocroma de alto contraste */
.bi{ vertical-align:-0.125em; }
.cat-ico .bi{ font-size:1em; }

/* ---------- Responsive móvil ---------- */
@media (max-width:760px){
  .product-grid{ grid-template-columns:1fr; }
  .vendor-card{ flex-direction:column; align-items:flex-start; }
  .vendor-stats{ gap:18px; flex-wrap:wrap; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  h1{ font-size:clamp(28px,8vw,40px); }
  .cat-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
  .cat-tile{ min-height:104px; padding:18px 10px; }
  .cat-tile .cat-ico{ font-size:30px; }
  .catalog{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .pcard-body h3{ font-size:14px; }
  .paysplit{ flex-wrap:wrap; gap:8px; }
  .megapanel-in{ grid-template-columns:1fr 1fr; }
  table.specs, .main table{ display:block; overflow-x:auto; }
  .auth-card{ padding:26px 20px; }
  .ms-chat-panel{ right:10px; left:10px; bottom:10px; width:auto; max-width:none; }
}

@media (max-width:680px){
  .dash{ flex-direction:column; }
  .side{ width:100%; display:flex; flex-wrap:wrap; }
}

/* ===== Buscador móvil: solo ícono; al pulsar se despliega el formulario ===== */
.search-toggle{ display:none; }
@media (max-width:760px){
  .search-toggle{ display:inline-flex !important; }
  .top-clean .topbar-in, .is-min .topbar-in{ flex-wrap:nowrap !important; height:62px !important; padding:0 !important; gap:8px; }
  .top-clean .cat-pill-txt{ display:none; }
  .hide-sm{ display:none !important; }
  .hnav{ margin-left:auto; gap:2px; }
  .top-div{ display:none; }
  .hsearch{ display:none !important; position:absolute; left:10px; right:10px; top:calc(100% + 8px);
    margin:0; height:48px; max-width:none; z-index:66; box-shadow:0 16px 36px rgba(0,0,0,.2); animation:mega-in .18s ease; }
  .site-header.search-open .hsearch{ display:flex !important; }
}

/* ===== Fase 1: contraseña ver/ocultar, Encontrado para ti, RFQ ===== */
.pw-wrap{ position:relative; }
.pw-wrap .input{ padding-right:74px; width:100%; }
.pw-toggle{ position:absolute; top:50%; right:8px; transform:translateY(-50%);
  background:transparent; border:0; color:var(--mx-green); font-size:13px; font-weight:600;
  cursor:pointer; padding:4px 8px; border-radius:8px; }
.pw-toggle:hover{ background:var(--bg-2); }

.foryou{ margin-top:30px; padding:20px 22px; border:1px solid var(--line);
  border-left:4px solid var(--mx-green); border-radius:14px; background:#f7fbf9; }
.foryou h3{ font-size:17px; margin:0 0 8px; color:var(--mx-green-d); display:flex; align-items:center; gap:8px; }
.foryou-text{ margin:0; font-size:15px; line-height:1.6; color:#33403b; }

.rfq-box{ margin-top:22px; padding:22px 24px; border:1px solid var(--line);
  border-radius:16px; background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.05); }
.rfq-box h3{ font-size:18px; margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.rfq-form{ margin-top:14px; }
.rfq-form .field{ margin-bottom:12px; }
.rfq-form .field-row{ display:flex; gap:14px; }
.rfq-form .field-row .field{ flex:1; }
.rfq-form label{ display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:#444; }
@media(max-width:560px){ .rfq-form .field-row{ flex-direction:column; gap:0; } }

/* ===== Slogan de marca ===== */
.brand-text{ display:flex; flex-direction:column; line-height:1.04; }
.brand-slogan{ font-size:10.5px; font-weight:600; color:var(--ink-2);
  letter-spacing:.005em; margin-top:2px; max-width:240px; }
@media (max-width:1100px){ .brand-slogan{ display:none; } }
.is-min .brand-slogan{ display:none; }

/* ===== Insignia de demanda (precio dinámico) ===== */
.demand{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  padding:3px 10px; border-radius:980px; vertical-align:middle; }
.demand .bi{ font-size:13px; }
.demand-high{ background:#fdecef; color:#b8005f; }
.demand-mid{ background:#fff4e0; color:#a86b00; }
.demand-low{ background:#eef1f0; color:#5a6a63; }

/* ===== Mejora visual de registro / login ===== */
.auth-page{ background:linear-gradient(180deg,#faf7f3,#f3eee8); }
.auth-page .auth-card{ box-shadow:0 20px 60px rgba(0,0,0,.12); border:0; border-radius:22px; }
.auth-page .auth-split{ box-shadow:0 24px 70px rgba(0,0,0,.14); border-radius:0; overflow:hidden; }
@media (min-width:821px){ .auth-page .auth-split{ min-height:auto; margin:38px auto; max-width:1000px; border-radius:24px; } }
.auth-brand{ display:flex; justify-content:center; margin-bottom:18px; }
.auth-brand img{ width:46px; height:46px; }
.auth-card h2, .auth-card2 .auth-h{ text-align:center; }
.auth-aside h2{ font-size:32px; }
.aside-benefits li .bi{ color:#fff; opacity:.95; }
.auth-aside::after{ content:""; position:absolute; right:-40px; bottom:-40px; width:180px; height:180px;
  border-radius:50%; background:rgba(255,255,255,.10); }
.input{ transition:border-color .15s, box-shadow .15s; }
.input:focus{ box-shadow:0 0 0 3px rgba(0,104,71,.12); }
.auth-card2 .field label, .auth-card .field label{ font-size:13px; font-weight:600; color:#444; }
.btn.block{ padding:13px; font-size:15.5px; }

/* ============================================================
   Header estático: sin línea inferior, sin fixed, sin sombra
   ============================================================ */
.nav, .site-header{ position:relative !important; z-index:60; }
.nav{ border-bottom:0 !important; background:#fff; backdrop-filter:none; }
.topbar{ border-bottom:0 !important; box-shadow:none !important; }
.is-min .topbar, .hdr-min .topbar, .top-clean .topbar{ box-shadow:none !important; border-bottom:0 !important; }
.trust-strip{ border-bottom:0; }

/* ============================================================
   Nueva propuesta de diseño: Registro / Login (auth2)
   ============================================================ */
body.auth-page{ background:#fff; }
.auth2{ display:grid; grid-template-columns:1.04fr 1fr; min-height:calc(100vh - 74px); }
.auth2-side{ position:relative; overflow:hidden; color:#fff; display:flex; align-items:center; padding:56px 50px; }
.side-green{ background:linear-gradient(155deg,#0a7d57 0%,#00543a 72%); }
.side-rosa{  background:linear-gradient(155deg,#ec1184 0%,#a8005a 72%); }
.auth2-aztec{ position:absolute; inset:-2px; opacity:.13; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 2 L42 22 L22 42 L2 22 Z M22 13 L31 22 L22 31 L13 22 Z' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size:44px 44px; }
.auth2-side::after{ content:""; position:absolute; right:-70px; bottom:-70px; width:240px; height:240px;
  border-radius:50%; background:rgba(255,255,255,.08); }
.auth2-side-in{ position:relative; z-index:1; max-width:440px; margin:0 auto; width:100%; }
.auth2-logo{ display:inline-flex; align-items:center; gap:11px; margin-bottom:30px; }
.auth2-logo:hover{ text-decoration:none; }
.auth2-logo .brand-mark{ width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center; }
.auth2-logo .brand-glyph{ width:25px; height:25px; }
.auth2-logo .brand-word{ color:#fff; font-size:22px; font-weight:700; letter-spacing:-.02em; }
.auth2-logo .brand-word b{ color:#fff; }
.auth2-kicker{ display:inline-flex; gap:7px; align-items:center; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; background:rgba(255,255,255,.16); padding:6px 13px; border-radius:980px; }
.auth2-side h2{ color:#fff; font-size:clamp(26px,2.4vw,34px); line-height:1.12; margin:18px 0 24px; font-weight:700; }
.auth2-points{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.auth2-points li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.4; }
.auth2-points li .bi{ font-size:20px; margin-top:1px; opacity:.95; }
.auth2-foot{ margin-top:30px; font-size:13px; opacity:.85; }

.auth2-main{ display:flex; align-items:center; justify-content:center; padding:46px 30px; background:#fff; }
.auth2-card{ width:100%; max-width:414px; }
.auth2-mark-sm{ display:none; justify-content:center; margin-bottom:14px; }
.auth2-mark-sm img{ width:50px; height:50px; }
.auth2-h{ font-size:27px; font-weight:700; margin:0 0 6px; letter-spacing:-.01em; }
.auth2-sub{ color:var(--ink-2); font-size:14.5px; margin:0 0 22px; }
.auth2-links{ margin-top:18px; font-size:14px; }
.auth2-card .field{ margin-bottom:15px; }
.auth2-card .field > label{ display:block; font-size:13px; font-weight:600; color:#3a3a3a; margin-bottom:6px; }
.auth2-card .input{ height:48px; border-radius:12px; font-size:15px; }
.auth2-card select.input{ height:48px; }
.auth2-card .field-row{ display:flex; gap:14px; }
.auth2-card .field-row .field{ flex:1; min-width:0; }
.auth2-card .btn.block{ height:50px; border-radius:12px; font-size:16px; margin-top:4px; }
.auth2-card .role-toggle{ margin-bottom:20px; }
.auth2-card .pw-wrap .input{ padding-right:76px; }

@media (max-width:860px){
  .auth2{ grid-template-columns:1fr; min-height:0; }
  .auth2-side{ display:none; }
  .auth2-main{ padding:28px 20px 54px; min-height:calc(100vh - 70px); align-items:flex-start; }
  .auth2-card{ margin-top:8px; }
  .auth2-mark-sm{ display:flex; }
  .auth2-h, .auth2-sub{ text-align:center; }
}

/* ============================================================
   Landing de vendedor — refinamiento visual
   ============================================================ */
.sell-hero{ background:linear-gradient(165deg,#f3faf7 0%,#fdeef5 100%); }
.sell-hero h1{ font-size:clamp(28px,4vw,46px); letter-spacing:-.02em; line-height:1.08; }
.sell-pill{ box-shadow:0 4px 14px rgba(0,0,0,.05); }
.adv-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); }
.adv-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 24px;
  transition:transform .2s, box-shadow .2s; }
.adv-card:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.08); }
.adv-ico{ width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  background:#e7f5ef; color:var(--mx-green); font-size:25px; margin-bottom:15px; }
.adv-card h3{ font-size:18px; margin:0 0 6px; }
.region{ transition:transform .2s, box-shadow .2s; }
.region:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.07); }
.step{ transition:transform .2s, box-shadow .2s; }
.step:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.06); }

/* ============================================================
   Iteración: footers, teléfono/WhatsApp, filtros, legal, header
   ============================================================ */

/* --- Header: pulido --- */
.top-clean .hicon, .is-min .hicon{ transition:background .15s, color .15s; }
.top-clean .hicon:hover, .is-min .hicon:hover{ background:#e7f5ef; color:var(--mx-green); }
.cat-pill{ transition:border-color .15s, color .15s, background .15s; }
.hnav-sell{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:12px;
  background:var(--mx-rosa); color:#fff; font-weight:600; font-size:14px; margin-left:4px; }
.hnav-sell:hover{ background:#c40d72; color:#fff; text-decoration:none; }
.is-min .top-div{ display:none; }

/* --- Footer completo (rediseño) --- */
.footer{ background:#0e1512; color:#cfd8d4; margin-top:60px; padding:48px 0 26px; }
.footer a{ color:#cfd8d4; }
.footer a:hover{ color:#fff; text-decoration:none; }
.footer-top{ display:grid; grid-template-columns:1.3fr 2.7fr; gap:36px; }
.footer-brand .footer-logo{ display:inline-flex; align-items:center; gap:10px; }
.footer-brand .brand-mark{ width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.12); display:inline-flex; align-items:center; justify-content:center; }
.footer-brand .brand-glyph{ width:22px; height:22px; }
.footer-brand .brand-word{ color:#fff; font-weight:700; font-size:20px; }
.footer-brand .brand-word b{ color:#fff; }
.footer-slogan{ color:#9fb0aa; font-size:13.5px; margin:12px 0 12px; max-width:280px; }
.footer-free{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#bff0d8;
  background:rgba(0,104,71,.28); border:1px solid rgba(120,220,180,.25); padding:8px 12px; border-radius:12px; }
.footer-langs{ display:flex; gap:8px; margin-top:16px; font-size:18px; }
.footer-langs a{ opacity:.6; } .footer-langs a:hover, .footer-langs a.active{ opacity:1; }
.footer .cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.footer .cols strong{ display:block; color:#fff; font-size:14px; margin-bottom:12px; }
.footer .cols a{ display:block; font-size:13.5px; padding:5px 0; color:#aebbb6; }
.footer .bottom{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.10); font-size:13px; }
.footer .bottom .muted{ color:#8fa39d; }
@media (max-width:760px){ .footer-top{ grid-template-columns:1fr; gap:26px; } .footer .cols{ grid-template-columns:1fr 1fr; }
  .footer .bottom{ flex-direction:column; align-items:flex-start; } }

/* --- Footer min (rediseño) --- */
.footer-min{ border-top:0; padding:20px 0; margin-top:40px; background:var(--bg-2); }
.footer-min-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-min-brand{ display:inline-flex; align-items:center; gap:8px; }
.footer-min-brand .brand-mark{ width:30px; height:30px; border-radius:9px; background:var(--mx-green); display:inline-flex; align-items:center; justify-content:center; }
.footer-min-brand .brand-glyph{ width:18px; height:18px; }
.footer-min-brand .brand-word{ font-weight:700; font-size:16px; color:var(--ink); }
.footer-min-brand .brand-word b{ color:var(--mx-rosa); }
.footer-min-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-min-links a{ font-size:13.5px; color:var(--ink-2); }
.footer-min-links a:hover{ color:var(--mx-green); text-decoration:none; }
@media (max-width:560px){ .footer-min-in{ justify-content:center; text-align:center; } }

/* --- Teléfono + WhatsApp --- */
.phone-row{ display:flex; gap:8px; }
.phone-row .phone-cc{ flex:0 0 118px; width:118px; }
.phone-row input[type=tel]{ flex:1; min-width:0; }
.wa-check{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#3a3a3a; margin-top:8px; cursor:pointer; }
.wa-check input{ width:auto; }
.wa-check .bi{ color:#25D366; font-size:16px; }

/* --- Filtros rápidos (catálogo) --- */
.filter-chk{ display:flex; align-items:center; gap:8px; padding:7px 6px; border-radius:8px;
  color:var(--ink); font-size:14px; }
.filter-chk:hover{ background:var(--bg-2); text-decoration:none; }
.filter-chk.on{ color:var(--mx-green); font-weight:600; }
.filter-chk .bi{ font-size:16px; }

/* --- Cuenta gratis (badges) --- */
.sell-free{ display:inline-flex; align-items:center; gap:8px; margin:16px auto 0; font-weight:600; color:var(--mx-green-d);
  background:#e7f5ef; border:1px solid #bfe6d4; padding:9px 16px; border-radius:980px; font-size:14px; }
.auth2-free{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:13.5px;
  background:rgba(255,255,255,.16); padding:9px 13px; border-radius:12px; }

/* --- Páginas legales --- */
.legal-doc{ max-width:780px; padding:54px 22px 70px; }
.legal-doc h1{ font-size:34px; letter-spacing:-.02em; }
.legal-doc h2{ font-size:19px; margin:30px 0 8px; }
.legal-doc p{ line-height:1.7; color:#2c3531; }
.legal-note{ margin-top:30px; background:#fff8e6; border:1px solid #f0e2b8; border-radius:12px; padding:14px 16px; font-size:14px; color:#7a5b00; }
.legal-note .bi{ margin-right:6px; }

/* ============================================================
   Carrito de compras
   ============================================================ */
.hicon-cart{ position:relative; }
.cart-badge{ position:absolute; top:1px; right:1px; background:var(--mx-rosa); color:#fff; font-size:10px; font-weight:700;
  min-width:16px; height:16px; line-height:16px; text-align:center; border-radius:980px; padding:0 4px; }
.cart-layout{ display:grid; grid-template-columns:1fr 320px; gap:24px; margin-top:20px; align-items:start; }
@media (max-width:780px){ .cart-layout{ grid-template-columns:1fr; } }
.cart-line{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); align-items:center; }
.cart-thumb img{ width:78px; height:78px; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:#fff; }
.cart-info{ flex:1; min-width:0; }
.cart-name{ font-weight:600; color:var(--ink); display:block; }
.cart-name:hover{ color:var(--mx-green); text-decoration:none; }
.cart-qty{ margin-top:8px; display:flex; align-items:center; gap:8px; }
.cart-line-right{ text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; white-space:nowrap; }
.link-btn{ background:none; border:0; color:var(--ink-2); cursor:pointer; font-size:13px; display:inline-flex; gap:5px; align-items:center; padding:0; }
.link-btn:hover{ color:var(--mx-rosa); }
.cart-summary{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 8px 26px rgba(0,0,0,.05); position:sticky; top:20px; }
.cart-summary h3{ margin:0 0 12px; }
.cart-row{ display:flex; justify-content:space-between; font-size:14px; padding:6px 0; }
.cart-grand{ border-top:1px solid var(--line); margin-top:6px; padding-top:12px; font-weight:700; font-size:17px; color:var(--mx-green-d); }

/* Alta de producto: opciones avanzadas plegables */
.more-opts{ margin:14px 0; border:1px solid var(--line); border-radius:12px; padding:0 14px; }
.more-opts summary{ cursor:pointer; padding:13px 0; font-weight:600; color:var(--mx-green); list-style:none; display:flex; gap:8px; align-items:center; }
.more-opts summary::-webkit-details-marker{ display:none; }
.more-opts[open]{ padding-bottom:14px; }

/* ============================================================
   Botones uniformes (sin forma de pastilla / pill)
   ============================================================ */
.btn{ border-radius:12px; padding:12px 22px; font-size:15px; font-weight:500; }
.btn.sm{ border-radius:10px; padding:9px 15px; font-size:14px; }
.btn.block{ padding:13px 22px; }
.btn-google{ border-radius:12px; padding:12px 20px; }
.hnav-sell{ border-radius:12px; }
.cat-pill{ border-radius:12px; }
.qty-stepper{ border-radius:12px; }
.pw-toggle{ border-radius:8px; }
.filters-toggle{ border-radius:10px; }
.lang-select{ border-radius:10px; }
.role-toggle{ border-radius:12px; }
.role-toggle a{ border-radius:9px; }

/* ===== Panel de prospectos (CRM superadmin) ===== */
.pr-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px; align-items:center; }
.pr-filters .input{ width:auto; min-width:150px; padding:8px 10px; font-size:13.5px; }
.pr-filters input[type=search]{ flex:1 1 260px; min-width:200px; }
.pr-table-wrap{ overflow-x:auto; }
.pr-table{ width:100%; min-width:760px; }
.pr-table th, .pr-table td{ vertical-align:top; }
.pr-table .badge{ font-size:11px; margin-top:4px; display:inline-block; }
.pr-table .btn.sm{ color:#fff; }
.pr-table .btn.sm.ghost{ color:var(--mx-green); }
.pr-pager{ display:flex; gap:14px; align-items:center; justify-content:center; margin-top:18px; }

/* ============================================================
   Iteración: encabezado rosa, confianza blanca, móvil, carrito flotante
   ============================================================ */
.rosa-title{ color:var(--mx-rosa); }

/* Confianza: fondo blanco + tarjetas con ícono */
.trust{ background:#fff; color:var(--ink); }
.trust .grid{ gap:18px; }
.trust .card.trust-card{ background:#fff; border:1px solid var(--line); color:var(--ink);
  border-radius:18px; padding:30px 24px; text-align:center; transition:transform .2s, box-shadow .2s; }
.trust .card.trust-card:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.08); }
.trust h3{ color:var(--ink); }
.trust .muted{ color:var(--ink-2); }
.trust-ico{ width:58px; height:58px; margin:0 auto 14px; border-radius:16px; display:flex; align-items:center;
  justify-content:center; background:#e7f5ef; color:var(--mx-green); font-size:27px; }
.trust-card:nth-child(2) .trust-ico{ background:#fff4e0; color:#a86b00; }
.trust-card:nth-child(3) .trust-ico{ background:#fdecef; color:var(--mx-rosa); }

/* Móvil: más aire en los bordes */
@media (max-width:600px){
  .container{ padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); }
  section{ padding:46px 0; }
  .auth2-main{ padding:30px 18px 56px; }
}

/* Pulido registro/login */
.auth2-card .input:focus{ border-color:var(--mx-green); }
.auth2-card .pw-wrap .input{ padding-right:78px; }

/* ===== Carrito flotante (drawer) ===== */
.ms-cart[hidden]{ display:none; }
.ms-cart{ position:fixed; inset:0; z-index:120; }
.ms-cart-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.42); opacity:0; transition:opacity .22s; }
.ms-cart.open .ms-cart-overlay{ opacity:1; }
.ms-cart-panel{ position:absolute; top:0; right:0; height:100%; width:382px; max-width:92vw; background:#fff;
  box-shadow:-16px 0 50px rgba(0,0,0,.22); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .24s ease; }
.ms-cart.open .ms-cart-panel{ transform:translateX(0); }
.ms-cart-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }
.ms-cart-head strong{ font-size:17px; display:inline-flex; align-items:center; gap:8px; }
.ms-cart-head button{ background:none; border:0; cursor:pointer; font-size:17px; color:var(--ink-2); }
.ms-cart-body{ flex:1; overflow-y:auto; padding:6px 16px; }
.ms-cart-load{ text-align:center; padding:44px; color:var(--ink-2); }
.ms-cart-empty{ text-align:center; padding:50px 20px; color:var(--ink-2); }
.ms-citem{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.ms-cthumb img{ width:62px; height:62px; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:#fff; }
.ms-cinfo{ flex:1; min-width:0; }
.ms-cname{ font-weight:600; font-size:14px; color:var(--ink); display:block; line-height:1.25; }
.ms-cname:hover{ color:var(--mx-green); text-decoration:none; }
.ms-cunit{ font-size:12px; margin:2px 0 8px; }
.ms-cqty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.ms-cqty button{ width:30px; height:30px; border:0; background:#fff; cursor:pointer; font-size:16px; color:var(--ink); }
.ms-cqty button:hover{ background:var(--bg-2); }
.ms-cqty span{ min-width:34px; text-align:center; font-size:14px; font-weight:600; }
.ms-cright{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:10px; white-space:nowrap; }
.ms-crem{ background:none; border:0; cursor:pointer; color:var(--ink-2); font-size:15px; }
.ms-crem:hover{ color:var(--mx-rosa); }
.ms-cart-foot{ border-top:1px solid var(--line); padding:16px 18px; background:#fafafa; }
.ms-cart-foot[hidden]{ display:none; }
.ms-crow{ display:flex; justify-content:space-between; font-size:14px; padding:4px 0; }
.ms-ctotal{ font-weight:700; font-size:17px; color:var(--mx-green-d); border-top:1px solid var(--line); margin-top:6px; padding-top:10px; }
.ms-cart-foot .btn{ margin-top:12px; }

/* ===== Footer min en blanco + Auth full-screen (sin top/footer) ===== */
.footer-min{ background:#fff; }
.auth-page .auth2{ min-height:100vh; }
@media (max-width:860px){ .auth-page .auth2-main{ min-height:100vh; } }

/* Fix: botones-enlace dentro de .card deben conservar su color (no heredar texto oscuro) */
a.btn{ color:#fff; }
a.btn.ghost{ color:var(--mx-green); }

/* Fix: chips de "Lo más buscado" — traducción DEBAJO del término (no al lado) */
.chip.chip-tr{ display:inline-flex !important; flex-direction:column; align-items:center; line-height:1.2; padding-top:6px; padding-bottom:6px; }
.chip.chip-tr .chip-term{ display:block; }
.chip.chip-tr .chip-es{ display:block; font-size:11px; opacity:.7; margin-top:1px; }

/* Hover unificado de botones de color: fondo gris medio-claro + texto negro */
.btn:hover, a.btn:hover, .hnav-sell:hover, .btn.rosa:hover, .btn.alt:hover, .btn.ghost:hover{
  background:#e6e7e3 !important; color:#161616 !important; border-color:#d6d8d2 !important;
}
.btn:hover .bi, a.btn:hover .bi{ color:#161616 !important; }

/* ===== Modal "Contactar al vendedor" ===== */
.ms-modal[hidden]{ display:none; }
.ms-modal{ position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:18px; }
.ms-modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .2s; }
.ms-modal.open .ms-modal-overlay{ opacity:1; }
.ms-modal-card{ position:relative; width:100%; max-width:460px; background:#fff; border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.28); transform:translateY(12px) scale(.98); opacity:0;
  transition:transform .2s, opacity .2s; max-height:92vh; overflow:auto; }
.ms-modal.open .ms-modal-card{ transform:none; opacity:1; }
.ms-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.ms-modal-head strong{ font-size:16px; display:inline-flex; gap:8px; align-items:center; }
.ms-modal-head button{ background:none; border:0; cursor:pointer; font-size:16px; color:var(--ink-2); }
.ms-modal-body{ padding:18px 20px; }
.ms-modal-body .field{ margin-bottom:12px; }
.ms-contact-prod{ background:var(--bg-2); border-radius:10px; padding:9px 12px; font-size:13.5px; margin:0 0 14px; }

/* ===== Bandeja de mensajes del vendedor ===== */
.msg-card{ border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; background:#fff; }
.msg-card.is-new{ border-color:var(--mx-green); box-shadow:0 0 0 2px rgba(0,104,71,.08); }
.msg-top{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:flex-start; margin-bottom:10px; }
.msg-top .badge{ margin-left:6px; }
.msg-tr{ background:#f4faf7; border-left:3px solid var(--mx-green); border-radius:8px; padding:10px 12px; }
.msg-tr p{ margin:4px 0 0; }
.msg-tag{ font-size:11.5px; font-weight:700; color:var(--mx-green-d); display:inline-flex; gap:5px; align-items:center; }
.msg-orig{ margin-top:8px; font-size:13.5px; }
.msg-orig summary{ cursor:pointer; color:var(--mx-green); }
.msg-orig p{ margin:6px 0 0; color:var(--ink-2); }
.msg-actions{ display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }

/* Hero de vendedor: padding superior e inferior */
.sell-hero{ padding-top:64px !important; padding-bottom:64px !important; }
@media (max-width:600px){ .sell-hero{ padding-top:40px !important; padding-bottom:40px !important; } }

/* Botón asistente IA en alta de producto */
.ai-assist{ margin-top:8px; display:inline-flex; align-items:center; gap:6px; }
.ai-assist .bi{ color:#fff; }

/* ===== Alta de producto: toggle "Nuevo producto" + layout horizontal + loader ===== */
.new-prod-box{ margin:14px 0 24px; }
.new-prod-box > summary{ list-style:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.new-prod-box > summary::-webkit-details-marker{ display:none; }
.prod-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; align-items:start; max-width:880px; }
.prod-form > .field{ grid-column:1 / -1; margin:0; }
.prod-form > .field.half{ grid-column:auto; }
.prod-form > details, .prod-form > button[type=submit]{ grid-column:1 / -1; }
@media (max-width:680px){ .prod-form{ grid-template-columns:1fr; } }

.prod-saving[hidden]{ display:none; }
.prod-saving{ position:fixed; inset:0; z-index:200; background:rgba(255,255,255,.9); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; }
.prod-saving-card{ text-align:center; width:320px; max-width:86vw; }
.ps-spinner{ width:48px; height:48px; border:4px solid var(--bg-2); border-top-color:var(--mx-green);
  border-radius:50%; margin:0 auto 16px; animation:ps-spin .8s linear infinite; }
@keyframes ps-spin{ to{ transform:rotate(360deg); } }
.ps-msg{ font-weight:600; margin:0 0 14px; }
.ps-bar{ height:9px; background:var(--bg-2); border-radius:980px; overflow:hidden; }
.ps-bar span{ display:block; height:100%; width:8%; background:linear-gradient(90deg,var(--mx-green),var(--mx-rosa)); transition:width .6s ease; border-radius:980px; }
.hicon-msg{ position:relative; }

/* Anti-spam: honeypot invisible (no debe verse ni recibir foco) */
.as-hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ===== Header redesign: buscador cuadrado · barra de utilidades · "Enviar a" ===== */
/* Buscador cuadrado (no pill) */
.hsearch{ border-radius:12px !important; }
.is-full .hsearch{ border-radius:12px !important; }
.hsearch input{ border-radius:11px 0 0 11px; }
.hsearch button{ border-radius:0 11px 11px 0; }

/* Barra de utilidades superior (top_min): soporte + idioma a la DERECHA */
.toputil{ background:var(--bg-2); border-bottom:1px solid var(--line); }
.toputil-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; }
.util-link{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:600; font-size:13.5px; }
.util-link .bi{ color:var(--mx-rosa); }
.util-link:hover{ color:var(--mx-rosa); text-decoration:none; }
.util-right{ display:flex; align-items:center; gap:6px; }
.util-right .hicon{ width:34px; height:34px; }
.util-right .lang-dd{ position:relative; }
.util-right .lang-btn{ width:34px; height:34px; }

/* Promociones link en top.php */
.hnav-promos{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; color:var(--ink); font-weight:600; font-size:14px; }
.hnav-promos:hover{ background:var(--bg-2); color:var(--mx-rosa); text-decoration:none; }
.hnav-promos .bi{ color:var(--mx-rosa); }

/* "Enviar a [bandera]" centrado bajo el buscador */
.shipbar{ background:#fff; }
.shipbar-in{ display:flex; justify-content:center; padding:10px 0 6px; }
.shipto-dd{ position:relative; }
.shipto-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fff;
  border-radius:10px; padding:7px 16px; font-size:13.5px; color:var(--ink); cursor:pointer; font-family:var(--font); }
.shipto-btn .bi{ color:var(--mx-green); }
.shipto-btn .flag{ font-size:18px; line-height:1; }
.shipto-btn .caret{ font-size:11px; color:var(--ink-2); display:inline-flex; }
.shipto-btn:hover{ border-color:var(--mx-green); }
.shipto-dd .lang-menu{ left:50%; right:auto; transform:translateX(-50%); }

/* Móvil: logo con margen mínimo (no pegado a la izquierda) */
@media (max-width:680px){
  .topbar-in .brand{ margin-left:10px; }
  .toputil-in{ min-height:36px; }
  .util-link{ font-size:12.5px; }
}

/* ===== Checkout (datos de envío) ===== */
.checkout-grid{ display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; margin-top:18px; }
.checkout-main{ display:flex; flex-direction:column; gap:18px; }
.checkout-grid .card{ padding:20px; }
.checkout-grid .card h3{ margin:0 0 14px; font-size:17px; display:flex; align-items:center; gap:8px; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.field-grid .field{ display:flex; flex-direction:column; gap:5px; }
.field-grid .field.full{ grid-column:1 / -1; }
.field-grid label{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
.co-tax summary{ cursor:pointer; font-weight:600; font-size:16px; display:flex; align-items:center; gap:8px; }
.co-sep{ border:0; border-top:1px solid var(--line); margin:10px 0; }
.ship-addr{ font-size:13px; line-height:1.5; color:var(--ink); }
.ship-addr b{ display:block; font-size:13.5px; }
@media (max-width:780px){
  .checkout-grid{ grid-template-columns:1fr; }
  .field-grid{ grid-template-columns:1fr; }
}