/* =========================================================
   SIMAGE CORE — portada (tarjetas VENDER/COMPRAR), chat,
   catálogo, modal y panel. Usa los tokens del tema SIMAGE
   (--navy, --green, --blue, --orange, --radius, --shadow…).
   Mobile-first.
   ========================================================= */

/* Blindaje: [hidden] SIEMPRE gana, aunque otra regla ponga display:flex/grid
   con la misma especificidad (esto es lo que hacía que el modal de
   "Contactar" se viera siempre encima de todo). */
.sc-home [hidden]{ display:none !important; }

.sc-home{ width:100%; max-width:680px; margin:0 auto; box-sizing:border-box; }

/* Red de seguridad anti-desbordamiento: nada dentro de estos bloques puede
   ser más ancho que su contenedor, pase lo que pase (inputs, selects,
   botones con texto largo, imágenes, etc). Imprescindible en dispositivos
   pequeños donde un solo elemento desbordado empuja toda la página. */
.sc-home, .sc-home *{ box-sizing:border-box; }
.sc-chat, .sc-chat *,
.sc-catalogo, .sc-catalogo *,
.sc-modal__box, .sc-modal__box *,
.sc-panel, .sc-panel *{
  max-width:100%;
}

/* ---------- Tarjetas VENDER / COMPRAR ---------- */
.sc-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
@media (min-width:640px){
  .sc-cards{ grid-template-columns:1fr 1fr; gap:24px; }
}

.sc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding:44px 28px 36px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%), var(--navy-deep,#12271b);
  color:#fff;
  cursor:pointer;
  font-family:inherit;
  width:100%;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sc-card::before{
  content:"";
  position:absolute; inset:0 auto auto 0; width:100%; height:4px;
}
.sc-card:hover,
.sc-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 22px 40px -18px rgba(10,26,61,.6);
}
.sc-card:active{ transform:translateY(-2px); }

.sc-card__icon{
  width:64px; height:64px; border-radius:18px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:1.85rem;
  box-shadow:0 10px 20px -8px rgba(0,0,0,.45);
}
.sc-card__title{
  font-family:var(--font-display,inherit);
  font-weight:700; font-size:1.35rem; letter-spacing:.03em;
  color:#fff;
  margin-top:4px;
}
.sc-card__desc{ color:#cfe0cf; font-size:.92rem; line-height:1.5; margin:0; max-width:280px; }
.sc-card__go{
  margin-top:10px; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono,monospace); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 16px; border-radius:999px; background:rgba(255,255,255,.06);
}

.sc-card--vender::before{ background:var(--green,#1f8f4e); }
.sc-card--vender .sc-card__icon{ background:var(--green,#1f8f4e); color:#fff; }
.sc-card--vender .sc-card__go{ color:var(--green,#3fd07f); }
.sc-card--vender:hover{ border-color:rgba(31,143,78,.55); }

.sc-card--comprar::before{ background:var(--blue,#c2811f); }
.sc-card--comprar .sc-card__icon{ background:var(--blue,#c2811f); color:#fff; }
.sc-card--comprar .sc-card__go{ color:#e8b45a; }
.sc-card--comprar:hover{ border-color:rgba(28,111,212,.55); }

.sc-card__go::after{ content:"→"; transition:transform .15s ease; }
.sc-card:hover .sc-card__go::after{ transform:translateX(3px); }

/* ---------- Chat de VENDER (dentro de .sc-modal / .sc-chat-modal) ---------- */
.sc-chat-modal{ align-items:center; padding:14px; }
.sc-chat-modal .sc-modal__box{
  padding:0; width:100%; max-width:360px;
  border-radius:18px;
  display:flex; flex-direction:column;
  max-height:min(560px, 80dvh);
  overflow:hidden;
}
.sc-chat__header{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:var(--navy,#1d3b2c); color:#fff;
}
.sc-chat__avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--green,#1f8f4e),var(--blue,#c2811f));
  font-family:var(--font-display,inherit); font-weight:700; font-size:.95rem;
}
.sc-chat__headtext{ display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
.sc-chat__headtext strong{ font-size:.92rem; font-weight:700; }
.sc-chat__headtext em{ font-style:normal; font-size:.72rem; color:#b7c9b6; display:flex; align-items:center; gap:5px; }
.sc-chat__dot{ width:6px; height:6px; border-radius:50%; background:#3fd07f; display:inline-block; }
.sc-chat__close{
  border:0; background:rgba(255,255,255,.1); color:#fff; width:26px; height:26px; border-radius:50%;
  font-size:1.15rem; line-height:1; cursor:pointer; flex:none; padding:0;
}
.sc-chat{ display:flex; flex-direction:column; flex:1; min-height:0; color:var(--ink,#10182b); background:#fafbfc; }
.sc-chat__log{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
  padding:14px; -webkit-overflow-scrolling:touch;
}
.sc-chat__msg{ padding:.5rem .75rem; border-radius:14px; max-width:82%; font-size:.87rem; line-height:1.38; word-break:break-word; }
.sc-chat__msg--simage{ background:#eef0f3; color:#1c2333; align-self:flex-start; border-bottom-left-radius:4px; }
.sc-chat__msg--usuario{ background:var(--green,#1f8f4e); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.sc-chat__form{ display:flex; align-items:center; gap:6px; padding:10px; border-top:1px solid rgba(0,0,0,.07); flex:none; background:#fff; }
.sc-chat__input{
  flex:1 1 auto; min-width:0; padding:9px 14px; border:1px solid rgba(0,0,0,.13);
  border-radius:999px; font-size:16px; color:var(--ink,#10182b); background:#f4f5f7;
}
.sc-chat__file-btn, .sc-chat__send{
  border:0; cursor:pointer; flex:none;
  width:38px; height:38px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.sc-chat__send{ background:var(--green,#1f8f4e); color:#fff; font-size:1rem; transform:translateX(1px); }
.sc-chat__file-btn{ background:#eef0f3; }
.sc-chat__ver-catalogo{
  align-self:flex-start; margin-top:2px; border:0; background:var(--blue,#c2811f); color:#fff;
  border-radius:999px; padding:.5rem .95rem; cursor:pointer; font-weight:600; font-size:.82rem;
}
.sc-chat__skip{
  flex:none; border:1px solid rgba(0,0,0,.15); background:#fff; color:var(--ink,#10182b);
  border-radius:999px; padding:0 12px; height:38px; font-size:.8rem; cursor:pointer;
}

/* ---------- Catálogo ---------- */
.sc-catalogo{ max-width:960px; margin:0 auto; }
.sc-back{
  border:0; background:none; padding:10px 4px; cursor:pointer;
  font-size:.9rem; opacity:.7; display:inline-flex; align-items:center; gap:6px;
  margin-bottom:12px;
}
.sc-back:hover{ opacity:1; }
.sc-catalogo__filtros{
  display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 20px;
}
@media (min-width:560px){
  .sc-catalogo__filtros{ grid-template-columns:1fr 1fr; }
}
@media (min-width:860px){
  .sc-catalogo__filtros{ grid-template-columns:2fr 1.3fr 1fr 1fr auto; align-items:center; }
}
.sc-catalogo__filtros input, .sc-catalogo__filtros select{
  padding:.7rem .8rem; border:1px solid rgba(0,0,0,.15); border-radius:10px; width:100%; font-size:.95rem;
}
.sc-catalogo__filtros button{
  border:0; background:var(--blue,#c2811f); color:#fff; border-radius:10px; padding:.7rem 1.2rem; cursor:pointer; font-weight:600;
}
.sc-catalogo__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
@media (min-width:560px){
  .sc-catalogo__grid{ grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); }
}
.sc-catalogo__cargando, .sc-catalogo__vacio{ grid-column:1/-1; text-align:center; opacity:.6; padding:2rem 0; }
.sc-catalogo__mas{
  display:block; margin:1.5rem auto 0; border:1px solid rgba(0,0,0,.15); background:#fff;
  border-radius:10px; padding:.7rem 1.5rem; cursor:pointer; font-weight:600;
}

.sc-producto{
  border:1px solid rgba(0,0,0,.08); border-radius:14px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm,0 6px 16px -10px rgba(10,26,61,.3));
}
.sc-producto__foto{ height:120px; background:#f1f3f5 center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:2rem; }
@media (min-width:560px){ .sc-producto__foto{ height:140px; } }
.sc-producto__body{ padding:.85rem; display:flex; flex-direction:column; gap:.25rem; }
.sc-producto__body h4{ margin:0; font-size:.95rem; }
.sc-producto__meta{ font-size:.78rem; opacity:.65; margin:0; }
.sc-producto__precio{ font-weight:700; margin:.25rem 0; color:var(--navy,#1d3b2c); }
.sc-producto__contactar{
  margin-top:.5rem; border:0; background:var(--green,#1f8f4e); color:#fff; border-radius:8px;
  padding:.65rem; cursor:pointer; font-weight:600; font-size:.9rem;
}

/* ---------- Modal contactar ---------- */
.sc-modal{
  position:fixed; inset:0; background:rgba(7,18,41,.6);
  display:flex; align-items:flex-end; justify-content:center; z-index:1000; padding:0;
}
@media (min-width:560px){
  .sc-modal{ align-items:center; padding:1rem; }
}
.sc-modal__box{
  background:#fff; border-radius:18px 18px 0 0; padding:1.5rem; max-width:420px; width:100%;
  position:relative; max-height:90dvh; overflow-y:auto;
  color:var(--ink,#10182b); /* si no, hereda el blanco del fondo del hero y el texto queda invisible */
}
@media (min-width:560px){
  .sc-modal__box{ border-radius:16px; }
}
.sc-modal__box p{ color:var(--ink-soft,#4b5468); font-size:.92rem; }
.sc-modal__cerrar{ position:absolute; top:.6rem; right:.75rem; border:0; background:none; font-size:1.6rem; cursor:pointer; line-height:1; padding:6px; color:var(--ink,#10182b); }
.sc-modal__box h3{ padding-right:24px; color:var(--navy,#1d3b2c); }
.sc-modal__box form{ display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; }
.sc-modal__box input, .sc-modal__box textarea{ padding:.7rem .8rem; border:1px solid rgba(0,0,0,.15); border-radius:10px; font-family:inherit; font-size:1rem; color:var(--ink,#10182b); background:#fff; }
.sc-modal__box button[type="submit"]{ border:0; background:var(--green,#1f8f4e); color:#fff; border-radius:10px; padding:.75rem; cursor:pointer; font-weight:600; }
.sc-modal__estado{ margin-top:.75rem; font-size:.9rem; }

/* ---------- Panel del comerciante (cuenta) ---------- */
.sc-panel{ max-width:440px; margin:0 auto; }
.sc-panel__tabs{ display:flex; gap:.5rem; margin-bottom:1rem; }
.sc-panel__tabs button{ flex:1; padding:.7rem; border:1px solid rgba(0,0,0,.15); background:#fff; border-radius:10px; cursor:pointer; font-weight:600; }
.sc-panel__tabs button.is-active{ background:var(--green,#1f8f4e); color:#fff; border-color:var(--green,#1f8f4e); }
.sc-panel__form, #sc-panel-publicar{ display:flex; flex-direction:column; gap:.7rem; }
.sc-panel__form input, #sc-panel-publicar input{ padding:.7rem .8rem; border:1px solid rgba(0,0,0,.15); border-radius:10px; font-size:1rem; }
.sc-panel__form button, #sc-panel-publicar button{ border:0; background:var(--green,#1f8f4e); color:#fff; border-radius:10px; padding:.75rem; cursor:pointer; font-weight:600; }
.sc-panel__producto{ display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; border-bottom:1px solid rgba(0,0,0,.06); gap:10px; }