/* ==========================================================================
   Maquetas HTML/CSS en vivo — reemplazan los screenshots .webp de los tabs
   del hero y de las tarjetas del parallax. Reproducen el lenguaje visual
   real de la app (superficies claras, tinta zinc, acento azul, chips
   semánticos) pero son maquetado puro: cero funcionalidad, cero datos
   reales. Contenido ficticio "Trattoria Demo" (mismo dataset que los
   screenshots que reemplazan).
   ========================================================================== */

.mockup {
  --m-ink: #0A0A0A;
  --m-dim: #52525B;
  --m-mute: #71717A;
  --m-accent: #2563EB;
  --m-green: #059669;
  --m-indigo: #4F46E5;
  --m-amber: #B45309;
  --m-border: rgba(9, 9, 11, .08);
  font-family: var(--font);
  background: #FAFAFA;
  color: var(--m-ink);
  text-align: left;
  height: 100%;
  padding: clamp(.9rem, 2.2%, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .6em;
  overflow: hidden;
}

.mockup__kicker {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--m-accent);
}

.mockup__kicker::before {
  content: "";
  width: 1.4em;
  height: 2px;
  background: var(--m-accent);
  display: inline-block;
}

.mockup__title {
  font-size: clamp(1.1rem, 3.4%, 1.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--m-ink);
}

.mockup__brand {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: .78rem;
  color: var(--m-dim);
}

.mockup__avatar {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: linear-gradient(160deg, #60a5fa, #2563EB);
  color: #fff;
  font-weight: 700;
  font-size: .72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mockup__card {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 14px;
  padding: .85em 1em;
  box-shadow: 0 1px 2px rgba(9, 9, 11, .04);
}

.mockup__row {
  display: flex;
  align-items: center;
  gap: .75em;
  padding-block: .55em;
}

.mockup__row + .mockup__row { border-top: 1px solid var(--m-border); }

.mockup__row-text {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--m-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup__link {
  font-size: .78rem;
  font-weight: 700;
  color: var(--m-accent);
  flex-shrink: 0;
}

.mockup__chip {
  display: inline-flex;
  align-items: center;
  /* min 10px rendered a 1440 (piso de legibilidad, ver QA): .62rem con la
     base de 16px quedaba en 9.92px */
  font-size: max(.66rem, 10px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3em .7em;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}

.mockup__chip--blue   { color: var(--m-accent); background: rgba(37, 99, 235, .1); border: 1px solid rgba(37, 99, 235, .3); }
.mockup__chip--green  { color: var(--m-green);  background: rgba(5, 150, 105, .1); border: 1px solid rgba(5, 150, 105, .3); }
.mockup__chip--indigo { color: var(--m-indigo); background: rgba(79, 70, 229, .1); border: 1px solid rgba(79, 70, 229, .3); }
.mockup__chip--amber  { color: var(--m-amber);  background: rgba(180, 83, 9, .1); border: 1px solid rgba(180, 83, 9, .35); }

.mockup__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6em;
}

.mockup__stat {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 12px;
  padding: .7em .85em;
}

.mockup__stat-label {
  /* min 10px rendered a 1440 (piso de legibilidad, ver QA): .6rem quedaba en 9.6px */
  font-size: max(.65rem, 10px);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--m-mute);
}

.mockup__stat-value {
  margin-top: .2em;
  font-size: clamp(1rem, 3%, 1.5rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--m-ink);
}

.mockup__stat-value--accent { color: var(--m-accent); }

.mockup__meta {
  font-size: .72rem;
  color: var(--m-mute);
}

/* overflow:hidden es el compañero obligado de min-height:0 en un hijo flex:
   sin él, el contenido que no cabe se derrama sobre el hermano siguiente
   (el .mockup__status), que era el solape del chat en móvil. */
.mockup__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6em; overflow: hidden; }

/* Conversaciones: burbujas de chat --------------------------------------- */

.mockup__bubble {
  align-self: flex-start;
  max-width: 88%;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 12px;
  padding: .6em .8em;
  font-size: .78rem;
  color: var(--m-ink);
}

.mockup__bubble--me {
  align-self: flex-end;
  background: var(--m-accent);
  color: #fff;
  border-color: transparent;
}

.mockup__bubble--reserva {
  align-self: stretch;
  max-width: none;
  background: rgba(5, 150, 105, .07);
  border-color: rgba(5, 150, 105, .3);
}

.mockup__status {
  display: flex;
  align-items: center;
  gap: .4em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--m-green);
}

.mockup__status::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--m-green);
}

/* Campañas: mini chart SVG ------------------------------------------------ */

.mockup__chart {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: block;
}

/* Chips extra para contenido/redes ---------------------------------------- */
.mockup__chip--violet { color: #7C3AED; background: rgba(124, 58, 237, .1); border: 1px solid rgba(124, 58, 237, .3); }
.mockup__chip--pink   { color: #DB2777; background: rgba(219, 39, 127, .1); border: 1px solid rgba(219, 39, 127, .3); }

/* Kicker "en tiempo real": la barra del ::before pasa a punto verde que late */
.mockup__kicker--live { color: var(--m-green); }
.mockup__kicker--live::before {
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--m-green);
  animation: mockPulse 1.6s ease-in-out infinite;
}

@keyframes mockPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.6); }
}

/* Chat más denso (tarjeta Conversaciones: 5 burbujas) --------------------- */
.mockup__body--chat { gap: .45em; }
.mockup__body--chat .mockup__bubble { font-size: .76rem; max-width: 90%; }

/* Parrilla de contenido (tarjeta Contenido) ------------------------------- */
.mockup__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55em;
}

.mockup__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4em;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 12px;
  padding: .65em .75em;
}

.mockup__cell-day { font-size: .72rem; font-weight: 600; color: var(--m-dim); }

.mockup__note { font-size: .74rem; font-weight: 600; color: var(--m-indigo); }

/* Pie con contador + acción (Gestiones) ----------------------------------- */
.mockup__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--m-mute);
}

/* Tags de plataforma (Redes / Campañas) ----------------------------------- */
.mockup__platforms { display: flex; flex-wrap: wrap; gap: .4em; }

.mockup__pf {
  font-size: .68rem;
  font-weight: 700;
  color: var(--m-dim);
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 999px;
  padding: .3em .75em;
}

/* Lista multi-marca (Inicio) ---------------------------------------------- */
.mockup__brands { display: flex; flex-direction: column; gap: .5em; }

.mockup__brand-row {
  display: flex;
  align-items: center;
  gap: .65em;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 12px;
  padding: .55em .7em;
}

.mockup__brand-stat { flex-shrink: 0; font-size: .72rem; font-weight: 700; color: var(--m-accent); }

.mockup__avatar--2 { background: linear-gradient(160deg, #f4b76b, #d97706); }
.mockup__avatar--3 { background: linear-gradient(160deg, #a78bfa, #7C3AED); }
.mockup__avatar--4 { background: linear-gradient(160deg, #5eead4, #0d9488); }

/* Grid de 3 stats (Campañas) ---------------------------------------------- */
.mockup__stats--3 { grid-template-columns: repeat(3, 1fr); }
.mockup__stats--3 .mockup__stat { padding: .55em .6em; }
.mockup__stats--3 .mockup__stat-value { font-size: clamp(.9rem, 2.4%, 1.2rem); }

@media (max-width: 640px) {
  .mockup { padding: .8rem; gap: .5em; }
}