/* ============================================================
   SOCIOS ECOM — Consultor Marco
   Estilos de la sección, construidos sobre los tokens de la casa.

   Las reglas de la portada, el chat y los resultados van bajo
   #marco-raiz: interior.css viste en oscuro .marco-portada,
   .marco-chat y .ficha con su vidrio genérico, y aquí manda el
   diseño propio de la sección.
   ============================================================ */

#marco-raiz {
  --mc-radio: 18px;
  --mc-borde: var(--se-linea);
  --mc-fondo: var(--se-papel);
  --mc-hundido: var(--se-papel-hundido);
  --mc-ancho-chat: 760px;
  --mc-entra: cubic-bezier(.22, 1, .36, 1);
  min-width: 0;
}

/* La foto de Marco, con su inicial de respaldo */
.marco-inicial {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: var(--se-verde);
  color: var(--se-sobre-verde);
  font-family: var(--se-fuente-display);
  font-weight: 700;
}

/* ============================================================
   Portada / bienvenida
   ============================================================ */

#marco-raiz .marco-portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: var(--se-sp-7);
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px) clamp(24px, 4vw, 40px);
  text-align: center;
  background: var(--mc-fondo);
  border: 1px solid var(--mc-borde);
  border-radius: var(--mc-radio);
  box-shadow: var(--se-sombra-papel);
}
/* Un halo verde, muy bajo, detrás del retrato: le da profundidad sin ruido. */
.marco-portada__halo {
  position: absolute;
  inset: -40% -20% auto;
  height: 520px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(var(--se-verde-rgb), .16), transparent 70%) 50% 40% / 640px 420px no-repeat,
    radial-gradient(closest-side, rgba(var(--se-dorado-rgb), .07), transparent 70%) 72% 30% / 420px 300px no-repeat;
}

.marco-portada__cabeza {
  display: grid;
  justify-items: center;
  gap: var(--se-sp-3);
  max-width: 640px;
}
.marco-portada__retrato { position: relative; margin-bottom: var(--se-sp-2); }
.marco-portada__foto {
  display: block;
  width: 84px; height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--se-verde);
  box-shadow:
    0 0 0 1px var(--se-borde-marcado),
    0 0 0 6px rgba(var(--se-verde-rgb), .10),
    0 18px 40px -18px rgba(var(--se-verde-rgb), .55);
}
.marco-portada__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marco-portada__foto .marco-inicial { font-size: 34px; }
.marco-portada__online {
  position: absolute;
  right: 3px; bottom: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--se-verde);
  border: 3px solid var(--mc-fondo);
}

.marco-portada__eyebrow {
  font-size: var(--se-fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--se-verde-tinta);
}
.marco-portada__titulo {
  margin: 0;
  font-family: var(--se-fuente-display);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: var(--se-peso-titulo);
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.marco-portada__texto {
  margin: 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--se-tinta-2);
  text-wrap: pretty;
}
.marco-portada__texto b { color: var(--se-tinta); font-weight: 600; }
.marco-portada__botones { margin-top: var(--se-sp-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--se-sp-2); }
/* Las búsquedas que le quedan, bajo «Hablar con Marco» (cupoBusquedas.ts). */
.marco-portada__cupo { margin: 10px 0 0; text-align: center; font-size: var(--se-fs-xs); color: var(--se-tinta-3); }
.marco-portada__cupo[hidden] { display: none; }
.marco-portada__cta { padding: 13px 24px; font-size: 15px; gap: 9px; }
.marco-portada__cta svg { width: 18px; height: 18px; }

/* ---------- Terrenos de ejemplo ---------- */

.marco-portada__ejemplos { width: 100%; max-width: 920px; display: grid; gap: var(--se-sp-3); }
.marco-portada__rotulo {
  margin: 0;
  font-size: var(--se-fs-xs);
  font-weight: 600;
  color: var(--se-tinta-3);
}
.marco-terrenos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.marco-terreno {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  text-align: left;
  color: var(--se-tinta);
  background: var(--mc-hundido);
  border: 1px solid var(--mc-borde);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .25s var(--mc-entra);
}
.marco-terreno__icono {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(var(--se-verde-rgb), .12);
  color: var(--se-verde-tinta);
}
.marco-terreno__icono svg { width: 17px; height: 17px; }
.marco-terreno__texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.marco-terreno__texto b { font-size: var(--se-fs-sm); font-weight: 600; }
.marco-terreno__texto small {
  font-size: var(--se-fs-xs);
  line-height: 1.4;
  color: var(--se-tinta-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.marco-terreno__flecha {
  flex: none;
  color: var(--se-tinta-3);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .25s var(--mc-entra), color .2s ease;
}
.marco-terreno__flecha svg { width: 15px; height: 15px; display: block; }
.marco-terreno:focus-visible { outline: none; box-shadow: var(--se-anillo-foco); }
@media (hover: hover) {
  .marco-terreno:hover {
    border-color: rgba(var(--se-verde-rgb), .45);
    background: rgba(var(--se-verde-rgb), .06);
    transform: translateY(-1px);
  }
  .marco-terreno:hover .marco-terreno__flecha { opacity: 1; transform: none; color: var(--se-verde-tinta); }
}
.marco-terreno:active { transform: scale(.985); }

/* ---------- Cómo funciona ---------- */

.marco-portada__pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 920px;
  margin: 0;
  padding: var(--se-sp-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--se-linea-suave);
}
.marco-portada__pasos li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 4px 14px;
  text-align: left;
}
.marco-portada__pasos li + li { border-left: 1px solid var(--se-linea-suave); }
.marco-portada__pasos span {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mc-hundido);
  border: 1px solid var(--mc-borde);
  font-family: var(--se-fuente-mono);
  font-size: 11px; font-weight: 600;
  color: var(--se-tinta-2);
}
.marco-portada__pasos div { display: grid; gap: 2px; min-width: 0; }
.marco-portada__pasos b { font-size: var(--se-fs-sm); font-weight: 600; }
.marco-portada__pasos small { font-size: var(--se-fs-xs); line-height: 1.45; color: var(--se-tinta-3); }

.marco-portada__extra { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--se-sp-2); }
.marco-portada__extra:not(:has(button:not([hidden]))) { display: none; }

/* Entrada escalonada de la portada */
@media (prefers-reduced-motion: no-preference) {
  .marco-portada__cabeza > *,
  .marco-portada__ejemplos,
  .marco-portada__pasos {
    animation: marco-sube .6s var(--mc-entra) both;
  }
  .marco-portada__cabeza > :nth-child(2) { animation-delay: 40ms; }
  .marco-portada__cabeza > :nth-child(3) { animation-delay: 80ms; }
  .marco-portada__cabeza > :nth-child(4) { animation-delay: 120ms; }
  .marco-portada__cabeza > :nth-child(5) { animation-delay: 160ms; }
  .marco-portada__ejemplos { animation-delay: 220ms; }
  .marco-portada__pasos { animation-delay: 300ms; }
}
@keyframes marco-sube {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Fallos al arrancar y cupo agotado ---------- */

.marco-error {
  display: flex; align-items: flex-start; gap: 10px;
  margin: var(--se-sp-4) 0 0;
  padding: 14px 16px;
  background: var(--se-error-tint);
  border: 1px solid color-mix(in srgb, var(--se-error) 45%, transparent);
  border-radius: 14px;
  color: var(--se-error);
  font-size: var(--se-fs-sm);
  line-height: 1.5;
}
.marco-error::before {
  content: "!";
  flex: none;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--se-error);
  color: var(--se-papel);
  font-size: 12px; font-weight: 800;
}
.marco-error--cupo::before { background: var(--se-warn); }
.marco-error--cupo {
  background: var(--se-warn-tint);
  border-color: color-mix(in srgb, var(--se-warn) 45%, transparent);
  color: var(--se-warn);
}
.marco-portada__cabeza .marco-error { margin: 4px 0 0; max-width: 560px; text-align: left; }
.marco-error code { font-family: var(--se-fuente-mono); font-size: 12px; }
.marco-error span { display: block; margin-top: 6px; opacity: .75; }

/* ============================================================
   Conversación
   ============================================================ */

#marco-raiz .marco-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(78vh, 760px);
  min-height: 460px;
  background: var(--mc-fondo);
  border: 1px solid var(--mc-borde);
  border-radius: var(--mc-radio);
  box-shadow: var(--se-sombra-papel);
  overflow: hidden;
}
@supports (height: 100dvh) {
  #marco-raiz .marco-chat { height: min(78dvh, 760px); }
}

/* ---------- El panel de la derecha (guiaDeLaBusqueda) ----------
   Solo en pantallas anchas: el hilo se queda en su columna de lectura y
   el ancho que sobraba lo ocupa en qué punto va la búsqueda. La tarjeta
   llega hasta abajo de la pantalla en vez de cortarse a 760 px. */
.marco-guia { display: none; }
@media (min-width: 1200px) {
  #marco-raiz .marco-chat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    /* 176 px: la barra de arriba (56) y los márgenes de la hoja y su contenido (120).
       Con 140 la página medía 36 px más que la pantalla y, al llegar los
       resultados, se movía todo el armazón, barra lateral incluida. */
    height: clamp(520px, calc(100vh - 176px), 1100px);
  }
  @supports (height: 100dvh) {
    #marco-raiz .marco-chat { height: clamp(520px, calc(100dvh - 176px), 1100px); }
  }
  .marco-chat__barra { grid-column: 1 / -1; }
  .marco-chat__hilo, .marco-chat__pie { grid-column: 1; }
  .marco-guia {
    grid-column: 2; grid-row: 2 / 4;
    display: flex; flex-direction: column; gap: 26px;
    padding: 24px 22px;
    overflow-y: auto;
    border-left: 1px solid var(--se-linea-suave);
    background: linear-gradient(180deg, rgba(var(--se-verde-rgb), .045), transparent 45%);
  }
}
.marco-guia__rotulo {
  margin: 0 0 12px;
  font: 600 10.5px/1 var(--se-fuente-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--se-tinta-3);
}
.marco-guia__pasos { position: relative; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.marco-guia__pasos li { position: relative; display: flex; gap: 12px; padding: 8px 0; color: var(--se-tinta-3); }
/* El hilo que une los pasos, en verde hasta donde se ha llegado */
.marco-guia__pasos li:not(:last-child)::after {
  content: ""; position: absolute; left: 11.25px; top: 34px; bottom: -6px;
  width: 1.5px; background: var(--se-linea);
}
.marco-guia__pasos li.es-hecho:not(:last-child)::after { background: rgba(var(--se-verde-rgb), .55); }
.marco-guia__num {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--se-linea-fuerte); background: var(--mc-fondo);
  font: 600 11px/1 var(--se-fuente); color: var(--se-tinta-3);
}
.marco-guia__num svg { width: 12px; height: 12px; stroke-width: 2.6; }
.marco-guia__pasos .es-actual .marco-guia__num {
  border-color: var(--se-verde); color: var(--se-verde-tinta);
  box-shadow: 0 0 0 4px rgba(var(--se-verde-rgb), .12);
}
.marco-guia__pasos .es-hecho .marco-guia__num { border-color: var(--se-verde); background: var(--se-verde); color: var(--se-sobre-verde, #04130e); }
.marco-guia__pasos li > span:last-child { display: grid; gap: 3px; min-width: 0; padding-top: 3px; }
.marco-guia__pasos b { font-size: var(--se-fs-sm); font-weight: 600; }
.marco-guia__pasos small { font-size: 12px; line-height: 1.45; color: var(--se-tinta-3); }
.marco-guia__pasos .es-hecho, .marco-guia__pasos .es-actual { color: var(--se-tinta); }
.marco-guia__consejos { padding-top: 22px; border-top: 1px solid var(--se-linea-suave); }
.marco-guia__consejos ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.marco-guia__consejos li {
  position: relative; padding-left: 16px;
  font-size: 13px; line-height: 1.55; color: var(--se-tinta-2);
}
.marco-guia__consejos li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--se-verde);
}

/* La barra de desplazamiento del hilo: fina y sin flechas, la del sistema
   se comía el borde de la tarjeta. */
.marco-chat__hilo { scrollbar-width: thin; scrollbar-color: var(--se-linea-fuerte) transparent; }
.marco-chat__hilo::-webkit-scrollbar { width: 8px; }
.marco-chat__hilo::-webkit-scrollbar-track { background: transparent; }
.marco-chat__hilo::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--se-linea-fuerte); border: 2px solid transparent; background-clip: padding-box; }

.marco-chat__barra {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-sp-3);
  padding: 12px 18px;
  border-bottom: 1px solid var(--se-linea-suave);
  background: color-mix(in srgb, var(--mc-fondo) 88%, transparent);
  backdrop-filter: blur(10px);
}
.marco-chat__quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marco-chat__retrato { position: relative; flex: none; }
.marco-chat__foto {
  display: block;
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--se-verde);
  box-shadow: 0 0 0 1px var(--se-borde-marcado);
}
.marco-chat__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marco-chat__foto .marco-inicial { font-size: 14px; }
.marco-chat__punto {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--se-verde);
  border: 2px solid var(--mc-fondo);
}
.marco-chat__nombre { display: grid; line-height: 1.25; min-width: 0; }
.marco-chat__nombre b { font-size: var(--se-fs-sm); font-weight: 600; }
.marco-chat__nombre small {
  font-size: var(--se-fs-xs);
  color: var(--se-tinta-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marco-chat__nombre small[data-tono="escribiendo"],
.marco-chat__nombre small[data-tono="buscando"] { color: var(--se-verde-tinta); }

.marco-voz__interruptor {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: var(--se-r-pill);
  border: 1px solid var(--mc-borde);
  background: transparent;
  color: var(--se-tinta-3);
  font-size: var(--se-fs-xs);
  font-weight: 600;
  transition: background var(--se-trans), color var(--se-trans), border-color var(--se-trans);
}
.marco-voz__interruptor svg { width: 14px; height: 14px; }
.marco-voz__interruptor:hover { color: var(--se-tinta); border-color: var(--se-linea-fuerte); }
.marco-voz__interruptor[aria-pressed="true"] {
  background: rgba(var(--se-verde-rgb), .12);
  border-color: rgba(var(--se-verde-rgb), .45);
  color: var(--se-verde-tinta);
}

/* ---------- El hilo ---------- */

.marco-chat__hilo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 24px 18px 12px;
}
.marco-chat__mensajes {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: var(--mc-ancho-chat);
  margin: 0 auto;
}

.marco-turno { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.marco-turno--yo { justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  .marco-turno:last-child { animation: marco-sube .35s var(--mc-entra) both; }
}

.marco-turno__avatar {
  flex: none;
  width: 30px; height: 30px;
  margin-top: 1px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--se-verde);
  box-shadow: 0 0 0 1px var(--se-borde-marcado);
}
.marco-turno__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marco-turno__avatar .marco-inicial { font-size: 12px; }
.marco-turno__nombre {
  display: block;
  margin-bottom: 3px;
  font-size: var(--se-fs-xs);
  font-weight: 600;
  color: var(--se-tinta);
}

/* Mientras habla, su avatar late al ritmo de la voz */
.marco-turno.esta-hablando .marco-turno__avatar {
  animation: marco-latido 1.1s ease-in-out infinite;
}
@keyframes marco-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--se-verde-rgb), .5); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--se-verde-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marco-turno.esta-hablando .marco-turno__avatar { animation: none; outline: 2px solid var(--se-verde); }
}

/* Lo que escribe la persona: una burbuja a la derecha. Lo de Marco: texto
   limpio junto a su retrato, como en los chats de IA, sin caja alrededor. */
.marco-globo {
  min-width: 0;
  max-width: min(78%, 560px);
  padding: 10px 15px;
  border-radius: 18px 18px 6px 18px;
  background: var(--mc-hundido);
  border: 1px solid var(--mc-borde);
  color: var(--se-tinta);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.marco-globo--marco {
  flex: 1;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  white-space: normal;
  overflow-wrap: break-word;
}
.marco-globo p { margin: 0 0 10px; }
.marco-globo p:last-child { margin-bottom: 0; }
.marco-globo ul { margin: 0 0 10px; padding-left: 20px; }
.marco-globo li { margin-bottom: 4px; }
.marco-globo li::marker { color: var(--se-verde-tinta); }
.marco-globo b { font-weight: 600; }

.marco-escuchar {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: var(--se-r-pill);
  border: 1px solid var(--mc-borde);
  background: transparent;
  color: var(--se-tinta-3);
  font-size: 11px;
  font-weight: 600;
  transition: color var(--se-trans), border-color var(--se-trans), background var(--se-trans);
}
.marco-escuchar svg { width: 12px; height: 12px; }
.marco-escuchar:hover { color: var(--se-verde-tinta); border-color: rgba(var(--se-verde-rgb), .5); }
.marco-escuchar[aria-pressed="true"] {
  background: rgba(var(--se-verde-rgb), .12);
  border-color: rgba(var(--se-verde-rgb), .5);
  color: var(--se-verde-tinta);
}

/* ---------- Marco está escribiendo ---------- */

.marco-globo--pensando {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--mc-hundido);
  border: 1px solid var(--mc-borde);
}
.marco-globo--pensando span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--se-tinta-3);
  animation: marco-puntos 1.2s ease-in-out infinite;
}
.marco-globo--pensando span:nth-child(2) { animation-delay: .18s; }
.marco-globo--pensando span:nth-child(3) { animation-delay: .36s; }
@keyframes marco-puntos {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .marco-globo--pensando span { animation: none; opacity: .5; }
}

/* ---------- Buscando: el rastreo por pasos ---------- */

.marco-busqueda {
  margin-left: 42px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(var(--se-verde-rgb), .28);
  background:
    linear-gradient(180deg, rgba(var(--se-verde-rgb), .08), transparent 70%),
    var(--mc-fondo);
}
@media (prefers-reduced-motion: no-preference) {
  .marco-busqueda:not(.sin-entrada) { animation: marco-sube .4s var(--mc-entra) both; }
}
.marco-busqueda__cabeza { display: flex; align-items: center; gap: 12px; }
.marco-busqueda__cabeza > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.marco-busqueda__cabeza b { font-size: var(--se-fs-sm); font-weight: 600; }
.marco-busqueda__cabeza small { font-size: var(--se-fs-xs); line-height: 1.45; color: var(--se-tinta-3); }
.marco-busqueda__radar {
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(var(--se-verde-rgb), .14);
  color: var(--se-verde-tinta);
}
.marco-busqueda__radar svg { width: 18px; height: 18px; }
.marco-busqueda__radar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--se-verde-rgb), .55);
  animation: marco-onda 1.8s ease-out infinite;
}
.marco-busqueda.es-listo .marco-busqueda__radar::after { display: none; }
@keyframes marco-onda {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(1.7); opacity: 0; }
}
.marco-busqueda__reloj {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--se-r-pill);
  background: var(--mc-hundido);
  border: 1px solid var(--mc-borde);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--se-tinta-2);
}

.marco-busqueda__pasos {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.marco-busqueda__pasos li {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 7px 0;
  color: var(--se-tinta-3);
  transition: color .3s ease;
}
/* El hilo que une los pasos */
.marco-busqueda__pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 10px; top: 29px; bottom: -7px;
  width: 1.5px;
  background: var(--se-linea);
}
.marco-busqueda__pasos li.es-hecho:not(:last-child)::after { background: rgba(var(--se-verde-rgb), .55); }
.marco-busqueda__marca {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid; place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1.5px solid var(--se-linea-fuerte);
  background: var(--mc-fondo);
  color: var(--se-sobre-verde);
  transition: background .3s ease, border-color .3s ease;
}
.marco-busqueda__marca svg { width: 12px; height: 12px; stroke-width: 2.4; }
.es-hecho .marco-busqueda__marca { background: var(--se-verde); border-color: var(--se-verde); }
.es-actual .marco-busqueda__marca { border-color: var(--se-verde); }
.es-actual .marco-busqueda__marca::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--se-verde);
  animation: marco-pulso 1.4s ease-in-out infinite;
}
.marco-busqueda__texto { display: grid; gap: 1px; min-width: 0; }
.marco-busqueda__texto b { font-size: var(--se-fs-sm); font-weight: 500; }
.marco-busqueda__texto small { font-size: var(--se-fs-xs); line-height: 1.4; color: var(--se-tinta-3); }
.es-hecho, .es-actual { color: var(--se-tinta); }
.es-actual .marco-busqueda__texto b { font-weight: 600; }
/* El paso en curso lleva un brillo que lo recorre: trabajo, sin cifra. */
.es-actual .marco-busqueda__texto b {
  background: linear-gradient(90deg, var(--se-tinta) 0%, var(--se-tinta) 40%, var(--se-verde-tinta) 50%, var(--se-tinta) 60%, var(--se-tinta) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: marco-brillo 2.4s linear infinite;
}
@keyframes marco-brillo {
  from { background-position: 100% 0; }
  to   { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .marco-busqueda, .marco-busqueda__radar::after,
  .es-actual .marco-busqueda__marca::after { animation: none; }
  .es-actual .marco-busqueda__texto b { animation: none; background: none; color: var(--se-tinta); }
}

/* ---------- Pie: avisos y compositor ---------- */

.marco-chat__pie {
  flex: none;
  padding: 0 18px 14px;
  background: linear-gradient(180deg, transparent, var(--mc-fondo) 28%);
}
.marco-chat__pie > * { max-width: var(--mc-ancho-chat); margin-left: auto; margin-right: auto; }

.marco-estado {
  margin-bottom: 8px;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: var(--se-fs-sm);
  line-height: 1.45;
  color: var(--se-verde-tinta);
  background: rgba(var(--se-verde-rgb), .10);
  border: 1px solid rgba(var(--se-verde-rgb), .25);
}
.marco-estado[hidden] { display: none; }
.marco-estado[data-tono="error"] {
  color: var(--se-error);
  background: var(--se-error-tint);
  border-color: color-mix(in srgb, var(--se-error) 35%, transparent);
}

.marco-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 7px;
  background: var(--mc-hundido);
  border: 1px solid var(--se-linea-fuerte);
  border-radius: 22px;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.marco-composer:focus-within {
  border-color: rgba(var(--se-verde-rgb), .6);
  box-shadow: 0 0 0 4px rgba(var(--se-verde-rgb), .12), 0 10px 30px -18px rgba(0, 0, 0, .5);
}
.marco-composer__campo {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  max-height: 168px;
  padding: 8px 8px 8px 10px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--se-tinta);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
}
.marco-composer__campo::placeholder { color: var(--se-tinta-3); }
.marco-composer__campo:disabled { opacity: .6; }

.marco-composer__enviar {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--se-verde);
  color: #04130e;
  cursor: pointer;
  transition: transform .2s var(--mc-entra), opacity .2s ease, background .2s ease;
}
.marco-composer__enviar svg { width: 17px; height: 17px; stroke-width: 2; }
.marco-composer__enviar:hover { background: var(--se-verde-claro); }
.marco-composer__enviar:active { transform: scale(.92); }
.marco-composer__enviar:focus-visible { outline: none; box-shadow: var(--se-anillo-foco); }
.marco-composer__enviar:disabled { opacity: .35; cursor: default; }
/* Sin texto, el botón se apaga un poco: invita a escribir, no a pulsar. */
.marco-composer:has(.marco-composer__campo:placeholder-shown) .marco-composer__enviar:not(:disabled) { opacity: .55; }

.marco-composer__ayuda {
  margin-top: 6px !important;
  text-align: center;
  font-size: 11px;
  color: var(--se-tinta-3);
}

/* ---------- Dictado ---------- */

.marco-micro {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--se-tinta-3);
  transition: background var(--se-trans), color var(--se-trans);
}
.marco-micro svg { width: 18px; height: 18px; }
.marco-micro:hover { color: var(--se-tinta); background: var(--se-linea-suave); }
.marco-micro:focus-visible { outline: none; box-shadow: var(--se-anillo-foco); }
.marco-micro[aria-pressed="true"] { background: var(--se-error); color: #fff; }

/* `display: flex` en la clase gana al display:none que trae [hidden]: hay
   que devolvérselo explícitamente o la barra se ve siempre. */
.marco-escucha[hidden] { display: none; }

.marco-escucha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: var(--se-fs-sm);
  color: var(--se-warn);
  background: var(--se-warn-tint);
}
.marco-escucha[data-tono="pensando"] {
  color: var(--se-verde-tinta);
  background: rgba(var(--se-verde-rgb), .10);
}
.marco-escucha::before {
  content: "";
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  animation: marco-pulso 1.4s ease-in-out infinite;
}
@keyframes marco-pulso {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .marco-escucha::before { animation: none; }
}

/* ============================================================
   Informe: cabecera, resumen y proveedores
   ============================================================ */

.marco-informe { margin-top: var(--se-sp-7); scroll-margin-top: calc(var(--se-topbar) + 12px); }
.marco-informe__cabecera { margin-bottom: var(--se-sp-5); }
.marco-informe__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--se-fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--se-dorado-tinta);
}
.marco-informe__eyebrow svg { width: 14px; height: 14px; }
.marco-informe__nicho {
  margin: 8px 0 4px;
  font-family: var(--se-fuente-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: var(--se-peso-titulo);
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.marco-informe__cuenta { margin: 0 0 var(--se-sp-3); font-size: var(--se-fs-sm); color: var(--se-tinta-3); }
.marco-informe__cuenta b { font-family: var(--se-fuente-mono); font-weight: 600; color: var(--se-tinta); }
.marco-informe__razon { margin: 0 0 var(--se-sp-3); color: var(--se-tinta-2); }
.marco-informe__claves { display: flex; flex-wrap: wrap; gap: 6px; }

.marco-informe__resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--se-sp-3);
  margin-bottom: var(--se-sp-5);
}
.marco-informe__resumen > div {
  padding: var(--se-sp-3) var(--se-sp-4);
  background: var(--se-papel-calido);
  border: 1px solid var(--se-linea);
  border-radius: 14px;
}
.marco-informe__resumen b {
  display: block;
  font-family: var(--se-fuente-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.marco-informe__resumen span {
  font-size: var(--se-fs-xs);
  color: var(--se-tinta-3);
  font-weight: 500;
}
.marco-informe__entrada b { font-family: var(--se-fuente); font-size: var(--se-fs-sm); }
.marco-informe__entrada span { text-transform: none; letter-spacing: 0; font-size: var(--se-fs-sm); }

.marco-proveedores { margin-top: var(--se-sp-6); }
.marco-proveedores h4 {
  margin: 0 0 var(--se-sp-2);
  font-size: var(--se-fs-h3);
  font-weight: 700;
}
.marco-proveedores div { display: flex; flex-wrap: wrap; gap: var(--se-sp-2); }

/* ============================================================
   Panel de resultados: pestañas, anuncios y gráficas
   ============================================================ */

.marco-informe.recien-llegado {
  animation: marco-aparece .6s var(--se-salida);
}
@keyframes marco-aparece {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marco-informe.recien-llegado { animation: none; }
}

.pestana__cuenta {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border-radius: var(--se-r-pill);
  background: var(--se-papel-hundido);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-label);
  color: var(--se-tinta-3);
}
.pestana.es-activa .pestana__cuenta {
  background: var(--se-verde-tint);
  color: var(--se-verde-tinta);
}

.marco-panel__intro {
  margin: 0 0 var(--se-sp-4);
  color: var(--se-tinta-2);
  font-size: var(--se-fs-sm);
}
.marco-panel__titulo {
  margin: var(--se-sp-6) 0 var(--se-sp-3);
  font-size: var(--se-fs-h3);
  font-weight: 700;
}
.marco-panel__vacio {
  margin: 0;
  padding: var(--se-sp-7);
  text-align: center;
  color: var(--se-tinta-3);
  background: var(--se-papel-calido);
  border: 1px dashed var(--se-linea-fuerte);
  border-radius: var(--se-r-card);
}

/* ---------- Gráficas: una serie, barras ordenadas ---------- */

.grafica { margin: 0 0 var(--se-sp-6); }
.grafica__titulo {
  margin-bottom: var(--se-sp-3);
  font-size: var(--se-fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-3);
}
.grafica__filas { display: flex; flex-direction: column; gap: 7px; }
.grafica__fila {
  display: grid;
  grid-template-columns: minmax(80px, 170px) 1fr auto;
  align-items: center;
  gap: 10px;
}
.grafica__etiqueta {
  font-size: 12px;
  color: var(--se-tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grafica__carril {
  height: 10px;
  border-radius: var(--se-r-pill);
  background: var(--se-papel-hundido);
  overflow: hidden;
}
.grafica__relleno {
  display: block;
  height: 100%;
  background: var(--se-verde);
  /* El extremo redondeado va donde termina el dato; el de la línea base, recto */
  border-radius: 0 4px 4px 0;
  transition: filter var(--se-trans);
}
.grafica__fila:hover .grafica__relleno { filter: brightness(1.08); }
.grafica__valor {
  font-family: var(--se-fuente-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--se-tinta);   /* el número en tinta, no en el color de la barra */
  white-space: nowrap;
}

/* ---------- Ángulos ---------- */

.marco-angulos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--se-sp-3); }
.marco-angulos li { padding-left: 4px; }
.marco-angulos__es { margin: 0; font-size: var(--se-fs-body); }
.marco-angulos__en {
  margin: 2px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--se-tinta-3);
}

.marco-proveedores__enlaces { display: flex; flex-wrap: wrap; gap: var(--se-sp-2); }

/* ============================================================
   Anuncios: una ficha por creativo, como la biblioteca de Meta
   ============================================================ */

.marco-anuncios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--se-sp-4);
  align-items: start;
}

.anuncio {
  display: flex;
  flex-direction: column;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-sombra-papel);
  overflow: hidden;
}

/* ---------- Ficha técnica ---------- */

.anuncio__ficha {
  padding: var(--se-sp-4);
  border-bottom: .8px solid var(--se-linea);
}
.anuncio__estado {
  display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 6px;
  margin-bottom: var(--se-sp-3);
}
.anuncio__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--se-r-pill);
  font-size: var(--se-fs-label);
  font-weight: 700;
  white-space: nowrap;
  background: var(--se-papel-hundido);
  color: var(--se-tinta-2);
}
.anuncio__chip svg { width: 12px; height: 12px; }
.anuncio__chip.es-activo { background: var(--se-ok-tint); color: var(--se-ok); }
.anuncio__chip.es-activo::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.anuncio__chip.es-parado { background: var(--se-papel-hundido); color: var(--se-tinta-3); }
.anuncio__chip--tiempo { background: var(--se-verde-tint); color: var(--se-verde-tinta); }

/* Los tres puntos, arriba a la derecha como en la biblioteca */
.anuncio__menu { position: relative; margin-left: auto; }
.anuncio__puntos {
  display: grid; place-items: center;
  width: 26px; height: 24px;
  border-radius: var(--se-r-campo);
  color: var(--se-tinta-3);
  font-size: 15px;
  line-height: 1;
  transition: background var(--se-trans), color var(--se-trans);
}
.anuncio__puntos:hover,
.anuncio__puntos[aria-expanded="true"] { background: var(--se-papel-hundido); color: var(--se-tinta); }
.anuncio__opciones {
  position: absolute;
  top: calc(100% + 4px); right: 0;
  z-index: 30;
  min-width: 186px;
  padding: 4px;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-campo);
  box-shadow: var(--se-sombra-suave);
}
.anuncio__opciones[hidden] { display: none; }
.anuncio__opciones a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px;
  border-radius: var(--se-r-sello);
  font-size: 12px;
  font-weight: 600;
  color: var(--se-tinta);
  white-space: nowrap;
}
.anuncio__opciones a:hover { background: var(--se-papel-hundido); text-decoration: none; }
.anuncio__opciones svg { width: 14px; height: 14px; flex: none; color: var(--se-tinta-3); }

.anuncio__datos { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.anuncio__datos > div {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  font-size: var(--se-fs-xs);
  line-height: 1.45;
}
.anuncio__datos dt { color: var(--se-tinta-3); }
.anuncio__datos dd {
  margin: 0;
  color: var(--se-tinta-2);
  font-family: var(--se-fuente-mono);
  font-size: 11px;
}

/* Las plataformas van como en Meta: el logo y nada más. */
.anuncio__plataformas { display: flex; align-items: center; gap: 7px; font-family: var(--se-fuente); }
.anuncio__plataformas span {
  display: grid; place-items: center;
  padding: 0;
  background: none;
  color: var(--se-tinta-2);
}
.anuncio__plataformas svg { width: 14px; height: 14px; display: block; }

/* ---------- La pieza tal y como se ve en Meta ---------- */

.anuncio__pieza { display: flex; flex-direction: column; flex: 1; padding: var(--se-sp-4); }
.anuncio__anunciante {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--se-sp-3);
}
.anuncio__avatar {
  width: 32px; height: 32px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--se-verde-tint);
  color: var(--se-verde-tinta);
  font-size: 13px; font-weight: 800;
}
.anuncio__quien { display: flex; flex-direction: column; min-width: 0; }
.anuncio__quien b {
  font-size: var(--se-fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.anuncio__quien small { font-size: var(--se-fs-label); color: var(--se-tinta-3); }

/* El texto del anuncio, entero: es el que se copia. */
.anuncio__copy {
  margin: 0 0 var(--se-sp-3);
  font-size: var(--se-fs-sm);
  line-height: 1.55;
  color: var(--se-tinta);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.anuncio__creativo {
  position: relative;
  border-radius: var(--se-r-campo) var(--se-r-campo) 0 0;
  overflow: hidden;
  background: var(--se-papel-hundido);
  display: grid; place-items: center;
  min-height: 170px;
}
.anuncio__creativo img { width: 100%; height: auto; display: block; }
.anuncio__sinfoto { color: var(--se-tinta-3); padding: var(--se-sp-7) 0; }
.anuncio__sinfoto svg { width: 28px; height: 28px; }
.anuncio__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--se-tinta);
  box-shadow: var(--se-sombra-suave);
  pointer-events: none;
}
.anuncio__play svg { width: 21px; height: 21px; }

/* ---------- El pie del creativo: dominio, titular y botón ---------- */

.anuncio__enlace {
  display: flex; align-items: center; gap: var(--se-sp-3);
  padding: var(--se-sp-3);
  background: var(--se-papel-calido);
  border: .8px solid var(--se-linea);
  border-top: 0;
  border-radius: 0 0 var(--se-r-campo) var(--se-r-campo);
}
.anuncio__enlace-texto { flex: 1; min-width: 0; }
.anuncio__enlace-dominio {
  display: block;
  font-size: var(--se-fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anuncio__enlace-titular {
  margin: 2px 0 0;
  font-size: var(--se-fs-sm);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.anuncio__enlace-original {
  margin: 2px 0 0;
  font-size: 11px;
  font-style: italic;
  line-height: 1.35;
  color: var(--se-tinta-3);
}
.anuncio__enlace-pie {
  margin: 2px 0 0;
  font-size: var(--se-fs-xs);
  line-height: 1.4;
  color: var(--se-tinta-2);
}
.anuncio__cta {
  flex: none;
  align-self: center;
  padding: 7px 12px;
  border-radius: var(--se-r-campo);
  background: var(--se-papel);
  border: .8px solid var(--se-linea-fuerte);
  font-size: var(--se-fs-xs);
  font-weight: 700;
  color: var(--se-tinta);
  white-space: nowrap;
  transition: background var(--se-trans), color var(--se-trans), border-color var(--se-trans);
}
a.anuncio__cta:hover {
  background: var(--se-accion);
  border-color: var(--se-borde-marcado);
  color: var(--se-sobre-accion);
  text-decoration: none;
}

.marco-portada__prueba {
  margin-top: var(--se-sp-2);
  padding: 6px 12px;
  border-radius: var(--se-r-pill);
  border: .8px dashed var(--se-linea-fuerte);
  background: transparent;
  color: var(--se-tinta-3);
  font-size: 12px;
  font-weight: 600;
}
.marco-portada__prueba:hover { color: var(--se-verde-tinta); border-color: var(--se-verde); }
.marco-portada__prueba[hidden] { display: none; }

/* ============================================================
   Referentes: una ficha por tienda, con lo suyo dentro
   ============================================================ */

/* ============================================================
   Fichas de referente: rejilla de tres
   ============================================================ */

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--se-sp-4);
  align-items: start;
}

.ficha {
  display: flex;
  flex-direction: column;
  padding: var(--se-sp-4);
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-sombra-papel);
}
/* Un referente con el cajón abierto ocupa toda la fila: los anuncios
   necesitan sitio, y verlos en una columna estrecha no sirve de nada. */
.ficha:has(.ficha__cajon) { grid-column: 1 / -1; }

.ficha.es-ganador {
  border: 1.6px solid var(--se-dorado);
  box-shadow: var(--se-sombra-papel), 0 0 0 4px var(--se-dorado-tint);
}

.ficha__cabecera { display: flex; gap: var(--se-sp-3); align-items: flex-start; }

.ficha__foto {
  position: relative;
  width: 132px; height: 132px;
  flex: none;
  border-radius: var(--se-r-campo);
  overflow: hidden;
  background: var(--se-papel-hundido);
  display: grid; place-items: center;
  color: var(--se-tinta-3);
}
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha__foto svg { width: 26px; height: 26px; }
.ficha__puesto {
  position: absolute;
  top: 0; left: 0;
  padding: 2px 7px;
  border-radius: 0 0 var(--se-r-sello) 0;
  background: var(--se-tinta);
  color: var(--se-papel);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-label);
  font-weight: 700;
}
.ficha__puesto.es-ganador { background: var(--se-dorado); color: var(--se-sobre-dorado); }

.ficha__titular { min-width: 0; flex: 1; }
.ficha__producto {
  margin: 0 0 var(--se-sp-2);
  font-size: var(--se-fs-body);
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Las métricas se reparten en rejilla: en fila se desbordaban de la tarjeta
   en cuanto una cifra crecía («$7.659.904» empujaba a «tendencia» fuera). */
.ficha__pareja, .ficha__metricas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--se-sp-2);
  margin: 0;
}
.ficha__pareja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ficha__pareja dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La cifra no se corta: si no cabe con su «×2,0», el multiplicador baja. */
.ficha__metricas dd { white-space: normal; }
.ficha__metricas dd .ficha__vs { white-space: nowrap; }
.ficha__pareja { padding-bottom: var(--se-sp-2); }
.ficha__pareja dt, .ficha__metricas dt {
  overflow: hidden;
  font-size: var(--se-fs-label);
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--se-tinta-3);
}
.ficha__pareja dd, .ficha__metricas dd { margin: 2px 0 0; font-size: var(--se-fs-sm); }
.ficha__precio { font-family: var(--se-fuente-mono); font-size: 15px; font-weight: 700; }
.ficha__tienda { color: var(--se-tinta-2); }

.ficha__enlaces {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: var(--se-sp-2) 0;
  padding: var(--se-sp-2) 0;
  border-top: .8px solid var(--se-linea-suave);
  border-bottom: .8px solid var(--se-linea-suave);
}
.ficha__dominio, .ficha__plan {
  padding: 2px 7px;
  border-radius: var(--se-r-sello);
  background: var(--se-papel-hundido);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-label);
  color: var(--se-tinta-2);
}

.ficha__metricas dd { font-family: var(--se-fuente-mono); font-weight: 600; }
.ficha__tendencia { display: flex; align-items: center; gap: 3px; }
.ficha__tendencia svg { width: 13px; height: 13px; }
.ficha__tendencia.es-sube { color: var(--se-ok); }
.ficha__tendencia.es-baja { color: var(--se-error); }
.ficha__tendencia.es-igual { color: var(--se-tinta-3); }

.ficha .grafico {
  margin: var(--se-sp-3) 0;
  padding: var(--se-sp-3);
  border-radius: var(--se-r-campo);
  background: var(--se-papel-calido);
}

.ficha__pie { margin-top: auto; }
.ficha__aguante {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--se-sp-2);
  padding: var(--se-sp-3);
  margin-bottom: var(--se-sp-3);
  border-radius: var(--se-r-campo);
  background: var(--se-verde-tint);
  color: var(--se-verde-tinta);
}
.ficha__aguante span { font-size: var(--se-fs-xs); font-weight: 700; letter-spacing: 0; text-transform: none;
}
.ficha__aguante b { font-family: var(--se-fuente-mono); font-size: 15px; }

.ficha__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ficha__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 10px;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea-fuerte);
  background: var(--se-papel);
  color: var(--se-tinta);
  font-size: var(--se-fs-xs);
  font-weight: 600;
  text-align: center;
  transition: background var(--se-trans), color var(--se-trans), border-color var(--se-trans);
}
.ficha__btn svg { width: 13px; height: 13px; flex: none; }
.ficha__btn:hover { background: var(--se-papel-hundido); text-decoration: none; }
.ficha__btn[disabled] { opacity: .45; pointer-events: none; }
.ficha__btn.es-abierto,
.ficha__btn[aria-expanded="true"] {
  background: var(--se-accion);
  border-color: var(--se-borde-marcado);
  color: var(--se-sobre-accion);
  box-shadow: var(--se-sombra-sello-sm);
}
/* Los cuatro botones, mismo tamaño: rejilla de dos por dos y ninguno más
   ancho que los demás. */
.ficha__acciones { grid-template-columns: repeat(2, 1fr); }
.ficha__btn { min-height: 38px; }
.ficha__cuenta {
  padding: 0 5px;
  border-radius: var(--se-r-pill);
  background: var(--se-papel-hundido);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-label);
  color: var(--se-tinta-3);
}
.ficha__btn.es-abierto .ficha__cuenta { background: var(--se-sobre-verde); color: var(--se-verde); }

/* Ver sus anuncios ganadores y elegirla como referente (referenteUI.js):
   encima del resto, porque es lo que pide el paso 1 del camino. */
.ficha__referente { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 6px; }
.ficha__referente .ficha__btn { min-height: 40px; white-space: normal; line-height: 1.2; }
.ficha__btn--referente {
  border-color: rgba(var(--se-verde-rgb), .55);
  background: var(--se-verde-tint);
  color: var(--se-verde-tinta);
}
.ficha__btn--referente:hover { background: rgba(var(--se-verde-rgb), .2); }
.ficha__btn--referente.es-elegida { border-style: dashed; }
.ficha__btn:focus-visible { outline: none; box-shadow: var(--se-anillo-foco); }

.ficha__porque {
  margin: var(--se-sp-3) 0 0;
  padding: var(--se-sp-3);
  border-radius: var(--se-r-campo);
  background: var(--se-dorado-tint);
  color: var(--se-sobre-dorado);
  font-size: var(--se-fs-xs);
  line-height: 1.5;
}
.ficha__porque svg { width: 13px; height: 13px; vertical-align: -2px; }

.ficha__cajon {
  margin-top: var(--se-sp-4);
  padding-top: var(--se-sp-4);
  border-top: .8px dashed var(--se-linea-fuerte);
  animation: marco-aparece .3s var(--se-salida);
}



/* «Ver sus anuncios ganadores»: lo primero que se mira, a todo el ancho y en verde. */
html[data-tema] .ficha .ficha__referente .ficha__btn.ficha__btn--ganadores {
  grid-column: 1 / -1;
  min-height: 42px;
  border-color: transparent !important;
  background: var(--se-verde);
  box-shadow: 0 8px 22px -14px rgba(var(--se-verde-rgb), .7);
  color: var(--se-sobre-verde, #04130e);
  font-weight: 650;
}
html[data-tema] .ficha .ficha__referente .ficha__btn.ficha__btn--ganadores:hover { background: var(--se-verde-claro, var(--se-verde)); color: var(--se-sobre-verde, #04130e); box-shadow: 0 10px 26px -14px rgba(var(--se-verde-rgb), .8); }
.ficha__referente .ficha__btn--ganadores svg { width: 14px; height: 14px; }
/* Debajo, «Elegir» y «Favorito» lado a lado; si solo queda uno, a todo el ancho. */
html .ficha__referente .ficha__btn--favorito { grid-column: auto; }
html .ficha__referente > :last-child:nth-child(even) { grid-column: 1 / -1; }
/* Un botón suelto al final de la rejilla de acciones ocupa la fila entera. */
.ficha__acciones > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.ficha__aviso--nivel { background: var(--se-warn-tint, rgba(214, 160, 40, .12)); color: var(--se-tinta-2); }
.ficha__aviso--nivel svg { color: var(--se-warn, #c9962b); }

/* Cierra la rejilla cuando los referentes no llenan la última fila: arriba,
   con su altura, no estirada como un hueco vacío del alto de la fila. */
.ficha--cierre {
  align-self: start;
  justify-content: flex-start;
  gap: var(--se-sp-3);
  background: var(--se-papel-calido);
  border-style: dashed;
  box-shadow: none;
}
.ficha--cierre h4 {
  display: flex; align-items: center; gap: 6px;
  margin: 0;
  font-size: var(--se-fs-sm);
  font-weight: 700;
  color: var(--se-tinta-2);
}
.ficha--cierre h4 svg { width: 15px; height: 15px; color: var(--se-verde-tinta); }
.ficha--cierre dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--se-sp-3); margin: 0; }
.ficha--cierre dt {
  font-size: var(--se-fs-label); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--se-tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ficha--cierre dd {
  margin: 2px 0 0;
  font-family: var(--se-fuente-mono);
  font-size: 15px;
  font-weight: 600;
}
.ficha--cierre p { margin: 0; font-size: var(--se-fs-xs); line-height: 1.5; color: var(--se-tinta-3); }

.ficha__sinproducto {
  margin: -4px 0 var(--se-sp-2);
  font-size: var(--se-fs-label);
  color: var(--se-tinta-3);
  font-style: italic;
}

/* La tienda vive de otra cosa: se dice junto a las cifras que confunden. */
.ficha__aviso {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 var(--se-sp-3);
  padding: 8px 10px;
  border-radius: var(--se-r-campo);
  background: var(--se-warn-tint);
  color: var(--se-warn);
  font-size: var(--se-fs-label);
  line-height: 1.45;
}
.ficha__aviso svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
/* No es un aviso: dice de dónde sale el referente. Verde, no ámbar. */
.ficha__aviso--biblioteca { background: rgba(var(--se-verde-rgb), .1); color: var(--se-tinta-2); }
.ficha__aviso--biblioteca svg { color: var(--se-verde); }

.cajon__nota { margin: -6px 0 var(--se-sp-3); font-size: var(--se-fs-label); color: var(--se-tinta-2); }
.marco-anuncios--otros { opacity: .85; }

/* ============================================================
   Gráficos (ApexCharts)
   ============================================================ */

.grafico { margin: var(--se-sp-3) 0 0; }
.grafico__titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--se-sp-3);
  margin-bottom: 2px;
  font-size: var(--se-fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-3);
}
.grafico__titulo b {
  font-family: var(--se-fuente-mono);
  font-size: 14px;
  white-space: nowrap;
  letter-spacing: 0;
  color: var(--se-tinta);   /* la cifra en tinta, nunca en el color de la línea */
}
.grafico__lienzo { min-height: 150px; }
/* De dónde sale la cifra: quien decide con ella tiene que saber si es dato o estimación. */
.grafico__nota {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--se-tinta-3);
}

/* ApexCharts trae su propia tipografía y sus sombras: se alinean con la casa */
.apexcharts-canvas { font-family: var(--se-fuente) !important; }
.apexcharts-tooltip {
  border: .8px solid var(--se-linea) !important;
  border-radius: var(--se-r-campo) !important;
  box-shadow: var(--se-sombra-suave) !important;
  background: var(--se-papel) !important;
  color: var(--se-tinta) !important;
  font-family: var(--se-fuente) !important;
}
.apexcharts-tooltip-title {
  background: var(--se-papel-hundido) !important;
  border-bottom: .8px solid var(--se-linea) !important;
  font-family: var(--se-fuente) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.apexcharts-datalabel { font-family: var(--se-fuente-mono) !important; }

.cajon__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--se-sp-3);
  margin-bottom: var(--se-sp-4);
}
.cajon__cabecera h5 {
  margin: 0;
  font-size: var(--se-fs-sm);
  font-weight: 700;
}
.cajon__cabecera .btn { padding: 7px 12px; font-size: 12px; }
.cajon__cabecera .btn svg { width: 13px; height: 13px; }

.anuncio__accion {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea-fuerte);
  background: var(--se-papel-calido);
  color: var(--se-tinta);
  font-weight: 600;
}
.anuncio__accion svg { width: 12px; height: 12px; }
.anuncio__accion:hover { background: var(--se-papel-hundido); text-decoration: none; }

/* Botón de una función que aún no está */
.ficha__btn--pronto { opacity: 1; color: var(--se-tinta-3); }
.ficha__btn--pronto[disabled] { opacity: .7; }
.ficha__pronto {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: var(--se-r-pill);
  background: var(--se-dorado-tint);
  color: var(--se-dorado-tinta);
  font-size: var(--se-fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.cajon__subtitulo {
  margin: var(--se-sp-5) 0 var(--se-sp-3);
  font-size: var(--se-fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-3);
}
.marco-angulos--suyos .marco-angulos__es { color: var(--se-tinta-2); }
.cajon__cabecera .btn--fantasma { border: .8px solid var(--se-linea); }

/* ============================================================
   El ganador
   ============================================================ */

/*
 * Lo que hace que se vea cuál es sin leer nada: el papel cambia de color, la
 * tarjeta se levanta sobre las demás y lleva un sello encima. Lo que antes
 * era una banda con la palabra «El mejor» ahora lo dicen la forma y el color.
 */
.ficha { position: relative; }

.ficha.es-ganador {
  border-color: var(--se-dorado);
  background:
    linear-gradient(180deg, var(--se-dorado-tint) 0%, transparent 42%),
    var(--se-papel);
  box-shadow:
    0 0 0 1px var(--se-dorado),
    0 0 0 6px var(--se-dorado-tint),
    0 14px 28px -18px rgba(0, 0, 0, .45);
}

/* El filo de arriba: lo primero que separa esta tarjeta de las otras cinco. */
.ficha.es-ganador::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--se-r-card) var(--se-r-card) 0 0;
  background: linear-gradient(90deg, var(--se-dorado), var(--se-dorado-claro), var(--se-dorado));
}

/* El sello, colgado de la esquina y fuera de la caja: es la medalla. */
.ficha__sello {
  position: absolute;
  top: -14px; right: -10px;
  z-index: 3;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--se-dorado);
  color: var(--se-sobre-dorado);
  border: 3px solid var(--se-papel);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5);
  animation: se-sello-entra .45s var(--se-salida) both;
}
.ficha__sello svg { width: 22px; height: 22px; }

@keyframes se-sello-entra {
  from { transform: scale(.4) rotate(-18deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ficha__sello { animation: none; }
}

/* Su foto, enmarcada; el resto de fichas la llevan a hueso. */
.ficha.es-ganador .ficha__foto {
  box-shadow: inset 0 0 0 2px var(--se-dorado);
}
.ficha__puesto.es-ganador {
  padding: 3px 9px;
  font-size: var(--se-fs-xs);
  background: var(--se-dorado);
  color: var(--se-sobre-dorado);
}

/* Su gráfico y su aguante, sobre papel dorado en vez de papel cálido. */
.ficha.es-ganador .grafico { background: transparent; }
.ficha.es-ganador .ficha__aguante {
  background: var(--se-dorado-tint);
  color: var(--se-dorado-tinta);
}

/*
 * Cuánto le saca al resto.
 *
 * Una cifra sola no dice si es mucho; al lado de la media de los otros cinco,
 * sí. Va pegada al dato, pequeña: acompaña al número, no compite con él.
 */
.ficha__vs {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: var(--se-r-pill);
  background: var(--se-dorado-tint);
  color: var(--se-dorado-tinta);
  font-family: var(--se-fuente);
  font-size: var(--se-fs-label);
  font-weight: 800;
  letter-spacing: .02em;
  vertical-align: 1px;
}
.ficha__aguante .ficha__vs { vertical-align: 3px; }

/* ---------- Botón de proveedor: una línea, como los demás ---------- */

/* La etiqueta «pronto» en la misma fila empujaba el texto y partía el botón
   en dos alturas. Va encima, en su esquina, y el botón mide lo que los otros. */
.ficha__btn { white-space: nowrap; }
.ficha__btn--pronto { position: relative; }
.ficha__pronto {
  /* Sobre el borde superior del botón: dentro de la esquina tapaba el texto */
  position: absolute;
  top: -8px; right: 8px;
  margin: 0;
  padding: 1px 6px;
  border-radius: var(--se-r-pill);
  background: var(--se-dorado);
  color: #2b1d02;
  font-size: var(--se-fs-label);
  font-weight: 700;
  line-height: 1.4;
  pointer-events: none;
}

/* ============================================================
   Guardados: lo que dio cada búsqueda, por cuenta
   ============================================================ */

.guardados { display: flex; flex-direction: column; gap: var(--se-sp-5); }

.guardado {
  padding: var(--se-sp-4);
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-sombra-papel);
}

.guardado__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--se-sp-3);
  padding-bottom: var(--se-sp-3);
  margin-bottom: var(--se-sp-4);
  border-bottom: .8px solid var(--se-linea-suave);
}
.guardado__titular { min-width: 0; flex: 1; }
.guardado__titular h5 {
  margin: 0;
  font-size: var(--se-fs-body);
  font-weight: 700;
  line-height: 1.3;
}
.guardado__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin: 4px 0 0;
  font-size: var(--se-fs-xs);
  color: var(--se-tinta-3);
}
.guardado__meta svg { width: 13px; height: 13px; }
.guardado__titular .marco-informe__claves { margin-top: var(--se-sp-2); }

.guardado__acciones { display: flex; align-items: center; gap: 6px; flex: none; }
.guardado__acciones .btn { padding: 7px 12px; font-size: 12px; }
.guardado__acciones .btn svg { width: 13px; height: 13px; }
.guardado__borrar {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea);
  background: var(--se-papel);
  color: var(--se-tinta-3);
  transition: background var(--se-trans), color var(--se-trans), border-color var(--se-trans);
}
.guardado__borrar svg { width: 15px; height: 15px; }
.guardado__borrar:hover {
  background: var(--se-error-tint);
  border-color: var(--se-error);
  color: var(--se-error);
}

/* Los referentes de esa búsqueda: tres por fila, como en el panel. */
.guardado__refs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--se-sp-3);
}

.guardado__ref {
  display: flex; gap: var(--se-sp-3);
  padding: var(--se-sp-3);
  background: var(--se-papel-calido);
  border: .8px solid var(--se-linea-suave);
  border-radius: var(--se-r-campo);
}
/* El primero fue el ganador de esa búsqueda: se sigue notando. */
.guardado__ref.es-primero {
  border-color: var(--se-dorado);
  background: linear-gradient(180deg, var(--se-dorado-tint) 0%, transparent 70%), var(--se-papel-calido);
}

.guardado__foto {
  position: relative;
  width: 62px; height: 62px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--se-r-campo);
  overflow: hidden;
  background: var(--se-papel-hundido);
  color: var(--se-tinta-3);
}
.guardado__foto img { width: 100%; height: 100%; object-fit: cover; }
.guardado__foto svg { width: 20px; height: 20px; }
.guardado__puesto {
  position: absolute;
  top: 0; left: 0;
  padding: 1px 5px;
  border-radius: 0 0 var(--se-r-sello) 0;
  background: var(--se-tinta);
  color: var(--se-papel);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-label);
  font-weight: 700;
}
.es-primero .guardado__puesto { background: var(--se-dorado); color: var(--se-sobre-dorado); }

.guardado__texto { min-width: 0; flex: 1; }
.guardado__texto b {
  display: block;
  font-size: var(--se-fs-sm);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.guardado__texto small {
  display: block;
  margin-top: 1px;
  font-size: var(--se-fs-label);
  color: var(--se-tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.guardado__cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
  margin: var(--se-sp-2) 0 0;
}
.guardado__cifras dt {
  font-size: var(--se-fs-label);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guardado__cifras dd {
  margin: 1px 0 0;
  font-family: var(--se-fuente-mono);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.guardado__vacio {
  display: flex; flex-direction: column; align-items: center; gap: var(--se-sp-2);
  padding: var(--se-sp-7) var(--se-sp-4);
  text-align: center;
  color: var(--se-tinta-3);
}
.guardado__vacio svg { width: 30px; height: 30px; }
.guardado__vacio h5 { margin: 0; font-size: var(--se-fs-sm); color: var(--se-tinta-2); }
.guardado__vacio p { margin: 0; max-width: 46ch; font-size: var(--se-fs-sm); line-height: 1.55; }

/* Volver a lo guardado sin pasar por una búsqueda nueva */
.marco-portada__guardados {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--se-sp-2);
  padding: 7px 14px;
  border-radius: var(--se-r-pill);
  border: .8px solid var(--se-linea-fuerte);
  background: var(--se-papel);
  color: var(--se-tinta-2);
  font-size: 12px;
  font-weight: 600;
  transition: background var(--se-trans), color var(--se-trans), border-color var(--se-trans);
}
.marco-portada__guardados svg { width: 14px; height: 14px; }
.marco-portada__guardados:hover {
  background: var(--se-verde-tint);
  border-color: var(--se-verde);
  color: var(--se-verde-tinta);
}
.marco-portada__guardados[hidden] { display: none; }

/* El icono que se queda cuando la foto no llega a cargar */
.ficha__foto-vacia,
.guardado__foto-vacia { display: none; color: var(--se-tinta-3); }
[data-foto]:not(:has(img)) .ficha__foto-vacia,
[data-foto].es-sinfoto .ficha__foto-vacia,
[data-foto]:not(:has(img)) .guardado__foto-vacia,
[data-foto].es-sinfoto .guardado__foto-vacia { display: grid; place-items: center; }
.ficha__foto-vacia svg { width: 26px; height: 26px; }
.guardado__foto-vacia svg { width: 20px; height: 20px; }

/* ---------- Clonar tienda ---------- */

/* El botón que cierra la búsqueda: ocupa la fila entera y va en verde. */
.ficha__btn--clonar {
  grid-column: 1 / -1;
  min-height: 42px;
  background: var(--se-accion);
  border-color: var(--se-borde-marcado);
  color: var(--se-sobre-accion);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--se-sombra-sello-sm);
}
.ficha__btn--clonar svg { width: 15px; height: 15px; }
.ficha__btn--clonar:hover { background: var(--se-accion-hover); }
.ficha__btn--clonar.es-elegida { outline: 2px solid var(--se-verde); outline-offset: 2px; }

.marco-informe__elige {
  display: flex; align-items: center; gap: 8px;
  margin: var(--se-sp-3) 0 0;
  padding: 10px 12px;
  border-radius: var(--se-r-campo);
  background: var(--se-verde-tint);
  color: var(--se-verde-tinta);
  font-size: var(--se-fs-sm);
}
.marco-informe__elige svg { width: 16px; height: 16px; flex: none; }

/* El plan se lee dentro del chat, con su propio scroll para no tapar la conversación. */
.marco-globo--plan,
.marco-globo--video { max-width: 92%; width: 100%; }

.marco-plan { margin-top: 10px; }
.marco-plan__texto {
  margin: 0;
  max-height: 240px;
  overflow: auto;
  padding: 12px;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea);
  background: var(--se-papel);
  color: var(--se-tinta);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-xs);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.marco-plan__copiar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  border-radius: var(--se-r-sello);
  border: .8px solid var(--se-borde-marcado);
  background: var(--se-accion);
  color: var(--se-sobre-accion);
  font-size: var(--se-fs-body);
  font-weight: 800;
  box-shadow: var(--se-sombra-sello);
  transition: transform .12s var(--se-salida), background var(--se-trans);
}
.marco-plan__copiar svg { width: 17px; height: 17px; }
.marco-plan__copiar:hover { background: var(--se-accion-hover); }
.marco-plan__copiar:active { transform: translate(1px, 1px); }
.marco-plan__copiar.es-copiado {
  background: var(--se-papel);
  color: var(--se-verde-tinta);
  border-color: var(--se-verde);
  box-shadow: none;
}

/* Titila hasta que lo pulse: es lo único que tiene que hacer ahora. */
.marco-plan__copiar.titila { animation: marco-titila 1.1s ease-in-out infinite; }
@keyframes marco-titila {
  0%, 100% { box-shadow: var(--se-sombra-sello), 0 0 0 0 rgba(var(--se-verde-rgb), .55); opacity: 1; }
  50%      { box-shadow: var(--se-sombra-sello), 0 0 0 8px rgba(var(--se-verde-rgb), 0); opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .marco-plan__copiar.titila { animation: none; outline: 2px solid var(--se-verde); outline-offset: 3px; }
}

.marco-pasos {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.marco-pasos .btn { flex: 1 1 200px; }

.marco-video {
  margin-top: 10px;
  overflow: hidden;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea);
  background: #000;
}
.marco-video video { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.marco-video__falta {
  margin: 0;
  padding: 14px;
  background: var(--se-papel);
  color: var(--se-tinta-3);
  font-size: var(--se-fs-sm);
}

@media (max-width: 720px) {
  .marco-globo--plan,
  .marco-globo--video { max-width: 100%; }
  .marco-pasos .btn { white-space: normal; }
}

/* ============================================================
   Rediseño de resultados (2026-10): rejilla limpia y fichas
   verticales. Todo bajo #marco-raiz para no tocar las otras
   vistas que comparten .ficha__btn o .guardado__*.
   ============================================================ */

/* ---------- Pestañas: control segmentado ---------- */

#marco-raiz .pestanas {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  margin: 0 0 var(--se-sp-5);
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--mc-hundido);
  border: 1px solid var(--mc-borde);
  border-radius: var(--se-r-pill);
}
#marco-raiz .pestanas::-webkit-scrollbar { display: none; }
#marco-raiz .pestana {
  flex: none;
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  margin: 0;
  border: 0;
  border-radius: var(--se-r-pill);
  background: transparent;
  color: var(--se-tinta-3);
  font-size: var(--se-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
#marco-raiz .pestana:hover { color: var(--se-tinta); }
#marco-raiz .pestana.es-activa {
  background: var(--mc-fondo);
  color: var(--se-tinta);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 1px var(--mc-borde);
}
#marco-raiz .pestana:focus-visible { outline: none; box-shadow: var(--se-anillo-foco); }

#marco-raiz .marco-informe__elige {
  border: 1px solid rgba(var(--se-verde-rgb), .25);
  background: rgba(var(--se-verde-rgb), .08);
  border-radius: 12px;
}

/* ---------- La rejilla: 3 en escritorio, 2 en tableta, 1 en móvil ---------- */

#marco-raiz .fichas {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1080px) {
  #marco-raiz .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  #marco-raiz .fichas { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ---------- La ficha, en vertical: foto arriba, cifras debajo ---------- */

#marco-raiz .ficha {
  min-width: 0;
  padding: 0;
  overflow: visible;
  background: var(--mc-fondo);
  border: 1px solid var(--mc-borde);
  border-radius: var(--mc-radio);
  box-shadow: var(--se-sombra-papel);
  transition: transform .35s var(--mc-entra), border-color .25s ease, box-shadow .35s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #marco-raiz .ficha:not(:has(.ficha__cajon)):hover {
    transform: translateY(-3px);
    border-color: rgba(var(--se-verde-rgb), .35);
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8), 0 14px 40px -28px rgba(var(--se-verde-rgb), .45);
  }
}
#marco-raiz .ficha:has(.ficha__cajon) { transform: none; }

/* Entrada escalonada de las fichas cuando llega el informe */
@media (prefers-reduced-motion: no-preference) {
  #marco-raiz .recien-llegado .ficha { animation: marco-sube .55s var(--mc-entra) both; }
  #marco-raiz .recien-llegado .ficha:nth-child(2) { animation-delay: 60ms; }
  #marco-raiz .recien-llegado .ficha:nth-child(3) { animation-delay: 120ms; }
  #marco-raiz .recien-llegado .ficha:nth-child(4) { animation-delay: 180ms; }
  #marco-raiz .recien-llegado .ficha:nth-child(5) { animation-delay: 240ms; }
  #marco-raiz .recien-llegado .ficha:nth-child(6) { animation-delay: 300ms; }
}

#marco-raiz .ficha__cabecera { flex-direction: column; gap: 0; align-items: stretch; }
#marco-raiz .ficha__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--mc-radio) - 1px) calc(var(--mc-radio) - 1px) 0 0;
  border-bottom: 1px solid var(--se-linea-suave);
  background: var(--mc-hundido);
}
#marco-raiz .ficha__foto img { transition: transform .8s var(--mc-entra); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #marco-raiz .ficha:hover .ficha__foto img { transform: scale(1.03); }
}
#marco-raiz .ficha__puesto {
  top: 12px; left: 12px;
  padding: 3px 9px;
  border-radius: var(--se-r-pill);
  background: rgba(10, 11, 13, .72);
  color: #fcfcfc;
  backdrop-filter: blur(6px);
  font-size: var(--se-fs-xs);
}
#marco-raiz .ficha__puesto.es-ganador { background: var(--se-dorado); color: #2b1d02; }

#marco-raiz .ficha__titular { padding: 16px 16px 0; }
#marco-raiz .ficha__producto {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
}
#marco-raiz .ficha__pareja {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--se-linea-suave);
}
#marco-raiz .ficha__metricas {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mc-hundido);
}
#marco-raiz .ficha__metricas dd { font-size: 14px; }

#marco-raiz .ficha .grafico { margin: 12px 16px 0; background: transparent; padding: 0; }
#marco-raiz .ficha__pie { padding: 12px 16px 16px; }
#marco-raiz .ficha__aguante { border-radius: 12px; background: rgba(var(--se-verde-rgb), .08); }
#marco-raiz .ficha__aguante b { white-space: nowrap; }
#marco-raiz .ficha.es-ganador .ficha__aguante { background: var(--se-dorado-tint); }

#marco-raiz .ficha__cajon { margin: 0 16px 16px; }
/* Ningún botón empuja la ficha: si la etiqueta no cabe, baja de línea. */
#marco-raiz .ficha__acciones > *,
#marco-raiz .ficha__referente > * { min-width: 0; }
#marco-raiz .ficha__btn { white-space: normal; line-height: 1.25; }
#marco-raiz .ficha__aviso { border-radius: 10px; }

/* El ganador: borde dorado fino y su sello; sin cajas dobles. */
#marco-raiz .ficha.es-ganador {
  border-color: rgba(var(--se-dorado-rgb), .7);
  background:
    linear-gradient(180deg, rgba(var(--se-dorado-rgb), .07), transparent 40%),
    var(--mc-fondo);
  box-shadow: 0 0 0 4px rgba(var(--se-dorado-rgb), .10), 0 20px 50px -34px rgba(var(--se-dorado-rgb), .6);
}
#marco-raiz .ficha.es-ganador::before { display: none; }
#marco-raiz .ficha.es-ganador .ficha__foto { box-shadow: none; }
#marco-raiz .ficha__sello { top: -12px; right: -8px; width: 40px; height: 40px; border-color: var(--mc-fondo); }

#marco-raiz .ficha--cierre { padding: 20px; background: transparent; border-style: dashed; }
#marco-raiz .ficha--cierre:hover { transform: none; box-shadow: none; }

/* ---------- Guardados, dentro de Marco ---------- */

#marco-raiz .guardado { border-radius: var(--mc-radio); background: var(--mc-fondo); }

#marco-raiz .marco-panel__vacio {
  border-radius: var(--mc-radio);
  background: transparent;
  border: 1px dashed var(--se-linea-fuerte);
}

/* ============================================================
   Móvil: 375px sin scroll horizontal y el compositor siempre a mano
   ============================================================ */

#marco-raiz, #marco-raiz * { box-sizing: border-box; }
#marco-raiz { overflow-wrap: anywhere; }
#marco-raiz img, #marco-raiz video, #marco-raiz pre { max-width: 100%; }

@media (max-width: 900px) {
  .marco-terrenos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  #marco-raiz .marco-portada { gap: var(--se-sp-6); }
  .marco-portada__texto { font-size: 14px; }
  .marco-portada__cta { width: 100%; justify-content: center; }
  .marco-portada__botones { width: 100%; }
  .marco-terrenos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .marco-terreno__flecha { opacity: 1; transform: none; }
  .marco-portada__pasos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .marco-portada__pasos li { padding: 0; }
  .marco-portada__pasos li + li { border-left: 0; }

  .marco-chat__barra { padding: 10px 12px; }
  .marco-chat__hilo { padding: 18px 12px 10px; }
  .marco-chat__mensajes { gap: 16px; }
  .marco-chat__pie { padding: 0 10px 10px; }
  .marco-composer__ayuda { display: none; }
  /* 16px: con menos, iOS hace zoom al tocar el campo. */
  .marco-composer__campo { font-size: 16px; }
  .marco-composer__enviar, .marco-micro { width: 40px; height: 40px; }
  .marco-voz__interruptor span { display: none; }
  .marco-voz__interruptor { padding: 8px; }

  .marco-turno { gap: 10px; }
  .marco-turno__avatar { width: 26px; height: 26px; }
  .marco-globo { max-width: 86%; font-size: 15px; }
  .marco-globo--marco { max-width: none; }
  .marco-busqueda { margin-left: 0; padding: 14px; }
  .marco-globo--plan,
  .marco-globo--video { max-width: 100%; }
  .marco-pasos .btn { white-space: normal; }

  #marco-raiz .pestanas { display: flex; width: 100%; }
  #marco-raiz .pestana { flex: 1; justify-content: center; padding: 8px 10px; }
  #marco-raiz .ficha__acciones,
  #marco-raiz .ficha__referente { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #marco-raiz .ficha__btn { white-space: normal; line-height: 1.2; }
  #marco-raiz .marco-anuncios { grid-template-columns: minmax(0, 1fr); }
  #marco-raiz .guardado__refs { grid-template-columns: minmax(0, 1fr); }
  #marco-raiz .grafica__fila { grid-template-columns: minmax(60px, 110px) 1fr auto; }
}

@media (max-width: 380px) {
  #marco-raiz .ficha__metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  #marco-raiz .ficha__metricas dd { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #marco-raiz *, #marco-raiz *::before, #marco-raiz *::after { scroll-behavior: auto !important; }
  .marco-terreno, #marco-raiz .ficha, #marco-raiz .ficha__foto img { transition: none; }
}

/* ---------- Favoritos y reservas (2026-10-26) ---------- */

/* La estrella va debajo de «Ver anuncios» y «Elegir», a todo lo ancho. */
.ficha__btn--favorito { grid-column: 1 / -1; color: var(--se-tinta-2); }
.ficha__btn--favorito svg { color: var(--se-dorado); }
.ficha__btn--favorito.es-favorito {
  border-color: var(--se-dorado);
  background: var(--se-dorado-tint);
  color: var(--se-dorado-tinta);
}
.ficha__btn--favorito.es-favorito svg { fill: currentColor; }
.ficha__btn--favorito[disabled] { opacity: .6; }

/* Otro socio la tiene reservada: se ve, pero ya no se puede coger. */
.ficha__aviso--ocupada { background: var(--se-dorado-tint); color: var(--se-dorado-tinta); }
.ficha:has(.ficha__aviso--ocupada) .ficha__foto { filter: grayscale(.7); opacity: .75; }

/* La lista de favoritos de la pestaña. */
.marco-favoritos { display: grid; gap: var(--se-sp-3); }
.marco-favoritos .ref-mini__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.marco-favoritos__hasta { font-size: var(--se-fs-xs); font-weight: 700; color: var(--se-dorado-tinta); margin-right: auto; }

/* ============================================================
   La sección de Marco, sin cabecera repetida ni marco (2026-10-28)
   ============================================================ */

/* La cabecera genérica (rótulo, título, frase y tres marcas) decía lo mismo
   que la portada justo debajo. Dónde estás ya lo dice la barra de arriba. */
html body .hoja .banner.banner--buscador-marco { display: none !important; }

/* La portada es la página, no una tarjeta dentro de otra. */
#marco-raiz .marco-portada {
  background: none;
  border: 0;
  box-shadow: none;
  padding-top: clamp(8px, 2.5vw, 28px);
}

/* El retrato entero: la foto es un primer plano y el círculo le cortaba
   el pelo y los hombros. Cuadrado redondeado y algo más grande. */
.marco-portada__foto { width: 104px; height: 104px; border-radius: 30px; }
.marco-portada__online { right: -4px; bottom: -4px; }
.marco-portada__eyebrow { letter-spacing: .04em; text-transform: none; font-size: var(--se-fs-sm); }

/* ---------- Marco es una mascota (2026-10-28) ----------
   El dot verde con sombrero de explorador y lupa (consola.js, MASCOTA('marco')).
   En la portada, en grande y con sus ojos que miran al ratón; junto a cada
   mensaje, la imagen fija con su sonrisa. */
.marco-portada__dot.mascota-3d { width: 132px; height: 132px; }
.marco-portada__retrato:has(.marco-portada__dot) .marco-portada__online { right: 10px; bottom: 10px; }
:is(.marco-turno__avatar, .marco-chat__foto, .marco-portada__foto) { background: #0b0e0e; }
:is(.marco-turno__avatar, .marco-chat__foto, .marco-portada__foto) img { object-fit: cover; transform: scale(1.55); transform-origin: 50% 46%; }

/* ============================================================
   La portada de Marco, con su dot (2026-10-28)
   Dos columnas: Marco grande a la izquierda, sobre su escenario, y a la
   derecha el saludo, un cuadro para contarle qué quiere vender y los
   terrenos como atajos. Fuera las tarjetas con descripción, el «cómo
   funciona» y los botones sueltos: lo de después ya lo cuenta él.
   ============================================================ */
#marco-raiz .marco-portada--dot {
  display: block;
  padding: clamp(12px, 3vw, 40px) 0 clamp(16px, 3vw, 32px);
  text-align: left;
}
.marco-hero {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 620px);
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  min-height: min(62vh, 520px);
}

/* El escenario: un foco verde detrás y una sombra en el suelo. */
.marco-hero__escena { position: relative; display: grid; justify-items: center; gap: 14px; }
.marco-hero__escena::before {
  content: ""; position: absolute; inset: -18% -22% 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--se-verde-rgb), .28), rgba(var(--se-verde-rgb), .08) 55%, transparent 75%);
  filter: blur(6px);
}
#marco-raiz .marco-hero__dot.mascota-3d {
  width: clamp(190px, 22vw, 260px); height: clamp(190px, 22vw, 260px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 0 10px rgba(var(--se-verde-rgb), .07),
    0 40px 90px -30px rgba(var(--se-verde-rgb), .75);
  animation: marco-flota 6s ease-in-out infinite;
}
@keyframes marco-flota { 50% { transform: translateY(-8px); } }
.marco-hero__estado {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--se-verde-tinta);
  background: rgba(var(--se-verde-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--se-verde-rgb), .28);
}
.marco-hero__estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--se-verde); box-shadow: 0 0 0 3px rgba(var(--se-verde-rgb), .25); animation: marco-pulso 1.8s ease-in-out infinite; }

.marco-hero__texto { display: grid; gap: 14px; }
.marco-hero__quien { margin: 0; font-size: 13px; font-weight: 600; color: var(--se-verde-tinta); }
.marco-portada--dot .marco-portada__titulo { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; text-align: left; }
.marco-hero__sub { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.55; color: var(--se-tinta-2); }
.marco-hero__pista { margin: -6px 0 0; max-width: 60ch; font-size: 13px; line-height: 1.5; color: var(--se-tinta-3); }
.marco-hero__sub b { color: var(--se-tinta); font-weight: 600; }

/* El cuadro para contarle: como el del chat, pero de bienvenida. */
.marco-hero__caja {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px;
  margin-top: 6px; padding: 10px 10px 10px 16px; border-radius: 20px;
  background: var(--mc-fondo); border: 1px solid var(--se-linea-fuerte);
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .55);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.marco-hero__caja:focus-within { border-color: rgba(var(--se-verde-rgb), .6); box-shadow: 0 0 0 4px rgba(var(--se-verde-rgb), .12), 0 18px 50px -30px rgba(0, 0, 0, .55); }
.marco-hero__caja textarea {
  min-height: 52px; max-height: 160px; padding: 6px 0; border: 0; outline: none; resize: none;
  background: transparent; color: var(--se-tinta); font: inherit; font-size: 15px; line-height: 1.5;
}
.marco-hero__caja textarea::placeholder { color: var(--se-tinta-3); }
/*
 * El tema oscuro pinta todos los campos con fondo negro, hilo y anillo al
 * enfocar (terciopelo.css). Aquí el campo vive dentro de una caja que ya hace
 * todo eso: sin esto salía un recuadro cuadrado dentro de la caja redonda.
 */
[data-tema] #marco-raiz .marco-hero__caja textarea,
[data-tema] #marco-raiz .marco-hero__caja textarea:focus,
[data-tema] #marco-raiz .marco-composer__campo,
[data-tema] #marco-raiz .marco-composer__campo:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  outline: none;
}
.marco-hero__enviar { white-space: nowrap; padding: 12px 18px; gap: 8px; }
.marco-hero__enviar svg { width: 16px; height: 16px; }

/* Los terrenos, como atajos: solo el nombre; la descripción va en el título. */
.marco-hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.marco-hero__chips-rotulo { font-size: 13px; color: var(--se-tinta-3); margin-right: 2px; }
.marco-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--se-linea); background: transparent; color: var(--se-tinta-2);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.marco-chip svg { width: 15px; height: 15px; color: var(--se-verde-tinta); }
.marco-chip:hover { color: var(--se-tinta); border-color: rgba(var(--se-verde-rgb), .5); background: rgba(var(--se-verde-rgb), .07); transform: translateY(-1px); }
.marco-chip:focus-visible { outline: none; box-shadow: var(--se-anillo-foco); }
.marco-portada--dot .marco-portada__cupo { text-align: left; margin: 0; }

@media (max-width: 900px) {
  .marco-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; min-height: 0; gap: 22px; }
  .marco-hero__texto { justify-items: center; width: 100%; }
  .marco-hero__caja { justify-self: stretch; width: 100%; text-align: left; }
  .marco-portada--dot .marco-portada__titulo, .marco-portada--dot .marco-portada__cupo { text-align: center; }
  .marco-hero__chips { justify-content: center; }
  #marco-raiz .marco-hero__dot.mascota-3d { width: 170px; height: 170px; }
}
@media (max-width: 560px) {
  .marco-hero__caja { grid-template-columns: minmax(0, 1fr); }
  .marco-hero__enviar { width: 100%; justify-content: center; }
  .marco-hero__caja textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .marco-hero__dot.mascota-3d, .marco-hero__estado i { animation: none; } }

/* ============================================================
   Chat y resultados más limpios (2026-10-28)
   ============================================================ */

/* El dot, solo en la cabecera del chat y bien visible: entero, sin recortar el sombrero. */
#marco-raiz .marco-chat__foto { width: 58px; height: 58px; border-radius: 16px; background: #0b0e0e; }
#marco-raiz .marco-chat__foto img { transform: scale(1.22); transform-origin: 50% 56%; }
#marco-raiz .marco-chat__barra { padding: 12px 20px; }
.marco-chat__nombre b { font-size: 15px; }

/* Los mensajes de Marco, como texto limpio a todo lo ancho de la columna;
   los tuyos, en burbuja a la derecha. Sin avatar ni nombre repetidos. */
.marco-turno:not(.marco-turno--yo) .marco-globo--marco { font-size: 15.5px; line-height: 1.65; }
.marco-turno + .marco-turno:not(.marco-turno--yo) { margin-top: 4px; }
.marco-turno--yo .marco-globo { background: rgba(var(--se-verde-rgb), .1); border-color: rgba(var(--se-verde-rgb), .25); }
.marco-escuchar { opacity: .7; }
.marco-turno:hover .marco-escuchar, .marco-escuchar[aria-pressed="true"] { opacity: 1; }
.marco-busqueda { margin-left: 0; }

/* ---------- Las tarjetas de resultados ---------- */
.ficha__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.ficha__etiqueta {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  color: var(--se-warn, #b7791f); background: var(--se-warn-tint, rgba(214, 160, 40, .12));
}
.ficha__etiqueta svg { width: 12px; height: 12px; }
.ficha__etiqueta--otro { color: var(--se-tinta-2); background: var(--se-papel-hundido); }
.ficha__sub { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--se-tinta-3); min-width: 0; }
.ficha__sub .ficha__precio { font-weight: 700; font-size: 15px; color: var(--se-tinta); }
.ficha__sub .ficha__tienda { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha__sub .ficha__precio + .ficha__tienda::before { content: "·"; margin-right: 8px; }
.ficha__metricas--claras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ficha__metricas--claras dt { font-size: 11px; }
.ficha__metricas--claras dd { font-size: 18px; font-weight: 700; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.ficha__metricas--claras dd small { font-size: 11px; font-weight: 600; color: var(--se-tinta-3); }
.ficha__metricas--claras .ficha__tendencia { display: inline-flex; align-items: center; gap: 2px; }
.ficha__metricas--claras .ficha__tendencia.es-sube { color: var(--se-verde-tinta); }
.ficha__metricas--claras .ficha__tendencia.es-baja { color: var(--se-error, #d64545); }
.ficha__metricas--claras .ficha__tendencia svg { width: 11px; height: 11px; }
/* Las acciones secundarias, como enlaces: lo importante son los dos botones de arriba. */
html .ficha__acciones--enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 4px; }
html .ficha__acciones--enlaces .ficha__btn {
  min-height: 0; padding: 4px 2px; border: 0 !important; border-radius: 6px; background: none !important; box-shadow: none !important;
  font-size: 12.5px; font-weight: 600; color: var(--se-tinta-3); grid-column: auto;
}
html .ficha__acciones--enlaces .ficha__btn:hover { color: var(--se-verde-tinta); transform: none; }
html .ficha__acciones--enlaces .ficha__btn.es-abierto { color: var(--se-verde-tinta); }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  #marco-raiz .marco-chat__barra { padding: 10px 14px; }
  #marco-raiz .marco-chat__foto { width: 48px; height: 48px; border-radius: 13px; }
  .marco-turno:not(.marco-turno--yo) .marco-globo--marco { font-size: 15px; }
  .marco-globo { max-width: 88%; }
  /* Las tarjetas, una por fila y más compactas. */
  .fichas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ficha { padding: 14px; }
  .ficha__metricas--claras dd { font-size: 16px; }
}
/* El precio nunca se parte, y las etiquetas de las cifras pueden ir en dos líneas antes que cortarse. */
.ficha__sub .ficha__precio { flex: none; white-space: nowrap; }
.ficha__metricas--claras dt { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }

/* =====================================================================
   LOS REFERENTES, DENTRO DEL CHAT (2026-10-29)
   Filas compactas en el hilo de Marco y, al pulsar una, su hoja a la
   derecha. Sustituye a las fichas grandes (.fichas / .ficha).
   ===================================================================== */

#marco-raiz .marco-chat__resultados { min-width: 0; max-width: 100%; }
#marco-raiz .marco-chat__resultados:empty { display: none; }

/* ---------- Marco como app en el móvil y la tableta (2026-11-10) ----------
   El chat ocupa la pantalla entre la barra de arriba y la de abajo, sin
   tarjeta ni márgenes: el hilo hace scroll y el campo de escribir queda
   abajo, pegado al pulgar. Con resultados, la charla y la lista de
   referentes son dos pantallas (marco.js, verEnMovil): en la charla queda
   el aviso para ir a la lista y en la lista, el botón para volver. */
.marco-aviso-res, .mres__volver { display: none; }
/* El aviso de error se lleva a la vista (ponerNota): que no se quede bajo la barra de abajo. */
.marco-error { scroll-margin-bottom: calc(var(--se-barra-app) + var(--se-zona-abajo) + 16px); }
/* «Intro para enviar» solo tiene sentido con teclado físico. */
@media (pointer: coarse) { .marco-composer__ayuda { display: none; } }
@media (max-width: 1024px) {
  .hoja:has(#marco-raiz > .marco-chat) { padding: 0; }
  html .app .hoja:has(#marco-raiz > .marco-chat) .hoja__contenido { padding: 0; }
  #marco-raiz .marco-chat {
    height: calc(100dvh - var(--se-topbar) - var(--se-zona-arriba) - var(--se-barra-app) - var(--se-zona-abajo));
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .marco-chat[data-movil="chat"] .marco-chat__resultados { display: none; }
  .marco-chat[data-movil="chat"] .marco-aviso-res { display: flex; }
  .marco-chat[data-movil="resultados"] :is(.marco-chat__barra, .marco-turno, .marco-busqueda, .marco-chat__pie) { display: none; }
  .marco-chat[data-movil="resultados"] .mres { margin-top: 0; padding-top: 0; border-top: 0; }
  .marco-chat[data-movil="resultados"] .mres__volver { display: inline-flex; }
}
.marco-aviso-res {
  align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px;
  border: 1px solid rgba(var(--se-verde-rgb), .35); border-radius: 16px;
  background: var(--se-verde-tint); color: var(--se-tinta); text-align: left;
  transition: var(--se-pulsar);
}
.marco-aviso-res:active { transform: scale(.98); }
.marco-aviso-res__icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--se-verde); color: var(--se-sobre-verde); }
.marco-aviso-res__icono svg { width: 20px; height: 20px; }
.marco-aviso-res__texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.marco-aviso-res__texto b { font-size: 15px; font-weight: 650; line-height: 1.3; }
.marco-aviso-res__texto small { font-size: 13px; font-weight: 600; color: var(--se-verde-tinta); }
.marco-aviso-res__ir svg { width: 18px; height: 18px; color: var(--se-tinta-3); }
.mres__volver {
  align-items: center; gap: 8px; justify-self: start; min-height: var(--se-tactil); margin: -4px 0 0 -8px; padding: 0 12px 0 8px;
  border-radius: 12px; color: var(--se-tinta-2); font-size: 15px; font-weight: 600;
}
.mres__volver svg { width: 20px; height: 20px; }
.mres__volver:active { background: var(--se-papel-hundido); }

/* Sin marco propio: los resultados son parte del hilo, no una caja dentro de la caja del chat. */
.mres {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 14px;
  padding: 18px 0 0;
  border-top: 1px solid var(--se-linea);
}
.mres.recien-llegado { animation: mres-llega .7s var(--se-salida) both; }
@keyframes mres-llega { from { transform: translateY(8px); opacity: .4; } }

.mres__cabeza { min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; }
.mres__titular { min-width: 0; flex: 1 1 100%; }
.mres__titulo {
  margin: 0;
  font-family: var(--se-fuente-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--se-tinta);
  text-wrap: balance;
}
.mres__titulo span { color: var(--se-verde-tinta, var(--se-verde)); }
.mres__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--se-tinta-3); }

.mres__pestanas { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 3px; background: var(--se-papel-hundido); border-radius: 999px; }
.mres__pestana {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--se-tinta-2);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.mres__pestana span { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--se-tinta-3); }
.mres__pestana:hover { color: var(--se-tinta); }
.mres__pestana.es-activa { background: var(--se-papel); color: var(--se-tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.mres__pestana:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 1px; }

.mres__ayuda {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--se-tinta-2);
}
.mres__ayuda svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; color: var(--se-dorado); }

/* ---------- La lista ---------- */
.mlista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.mfila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--se-linea);
  border-radius: 14px;
  background: var(--se-papel);
  transition: border-color .18s, background-color .18s;
}
.mfila:hover { border-color: color-mix(in srgb, var(--se-verde) 45%, var(--se-linea)); }
.mfila.es-abierta { border-color: var(--se-verde); background: color-mix(in srgb, var(--se-verde) 5%, var(--se-papel)); }
.mfila.es-ganador { border-color: color-mix(in srgb, var(--se-dorado) 55%, var(--se-linea)); }
.mfila.es-ocupada { opacity: .62; }

.mfila__abrir {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 10px 6px 10px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
}
.mfila__abrir:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 2px; }

.mfila__media { position: relative; }
.mfila__puesto {
  position: absolute; top: -6px; left: -6px;
  display: grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px;
  background: var(--se-tinta); color: var(--se-papel);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--se-papel);
}
.mfila.es-ganador .mfila__puesto { background: var(--se-dorado); color: #2a1f05; }

/* La foto del producto, entera, sobre blanco: como en una tienda. */
.mfoto {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.mfoto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mfoto__vacia { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa3a0; }
.mfoto__vacia svg { width: 26px; height: 26px; }
.mfoto img + .mfoto__vacia { display: none; }
.mfoto--fila { width: 76px; height: 76px; padding: 5px; }

.mfila__texto { display: grid; gap: 4px; min-width: 0; }
.mfila__titulo {
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--se-tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mfila__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--se-tinta-3); }
.mfila__sub b { color: var(--se-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.mfila__sello {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--se-dorado) 16%, transparent);
  color: color-mix(in srgb, var(--se-dorado) 70%, var(--se-tinta));
  font-size: 11.5px; font-weight: 600;
}
.mfila__sello svg { width: 12px; height: 12px; }
.mfila__sello--ocupada { background: var(--se-papel-hundido); color: var(--se-tinta-2); }
.mfila__datos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--se-tinta-2); }
.mfila__datos b { color: var(--se-tinta); font-weight: 600; font-variant-numeric: tabular-nums; }

.mfila__ir {
  align-self: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--se-linea);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--se-tinta);
  transition: background-color .18s, border-color .18s, color .18s;
}
.mfila__abrir:hover .mfila__ir, .mfila.es-abierta .mfila__ir { background: var(--se-verde); border-color: var(--se-verde); color: var(--se-sobre-verde); }

.mfila__estrella, .mfila__mio {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-right: 10px;
  border: 1px solid var(--se-linea); border-radius: 999px;
  background: var(--se-papel); color: var(--se-tinta-3);
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s, transform .15s var(--se-salida);
}
.mfila__estrella svg, .mfila__mio svg { width: 17px; height: 17px; }
.mfila__estrella:hover { color: var(--se-dorado); border-color: var(--se-dorado); }
.mfila__estrella:active { transform: scale(.92); }
.mfila__estrella.es-favorito { color: #2a1f05; background: var(--se-dorado); border-color: var(--se-dorado); }
.mfila__estrella.es-favorito svg { fill: currentColor; }
.mfila__estrella:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 2px; }
.mfila__mio { cursor: default; color: var(--se-sobre-verde); background: var(--se-verde); border-color: var(--se-verde); }

@media (max-width: 640px) {
  .mres { padding: 14px 0 0; }
  .mres__pestanas { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mres__pestanas::-webkit-scrollbar { display: none; }
  .mres__pestana { flex: 1 0 auto; justify-content: center; }
  .mfila { grid-template-columns: minmax(0, 1fr); }
  .mfila__abrir { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 10px 46px 10px 10px; }
  .mfoto--fila { width: 58px; height: 58px; padding: 4px; }
  .mfila__ir { display: none; }
  /* En el móvil, lo justo: precio, si destaca, lo que factura y sus anuncios de hoy. */
  .mfila__sub > span:not(.mfila__sello) { display: none; }
  .mfila__datos > span:nth-child(3) { display: none; }
  .mfila__estrella, .mfila__mio { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; margin: 0; }
}

/* ---------- La hoja de un referente ---------- */
.mhoja__fondo {
  position: fixed; inset: 0;
  z-index: calc(var(--se-z-drawer, 400) - 1);
  background: rgba(8, 10, 12, .38);
  animation: mhoja-fondo .25s ease-out both;
}
@keyframes mhoja-fondo { from { opacity: 0; } }

.mhoja {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--se-z-drawer, 400);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(780px, calc(100vw - 32px));
  background: var(--se-papel);
  border-left: 1px solid var(--se-linea);
  box-shadow: -18px 0 48px rgba(0, 0, 0, .22);
  animation: mhoja-entra .34s var(--se-salida) both;
}
@keyframes mhoja-entra { from { transform: translateX(32px); opacity: 0; } }
@keyframes mhoja-sube { from { transform: translateY(48px); opacity: 0; } }
body.con-hoja-marco { overflow: hidden; }

.mhoja__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid var(--se-linea);
}
.mhoja__navega { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--se-tinta-3); font-variant-numeric: tabular-nums; }
.mhoja__flecha, .mhoja__cerrar {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--se-linea); border-radius: 999px;
  background: var(--se-papel); color: var(--se-tinta);
  cursor: pointer; transition: background-color .15s, border-color .15s;
}
.mhoja__flecha svg, .mhoja__cerrar svg { width: 16px; height: 16px; }
.mhoja__flecha:hover:not(:disabled), .mhoja__cerrar:hover { background: var(--se-papel-hundido); }
.mhoja__flecha:disabled { opacity: .35; cursor: default; }
.mhoja__flecha:focus-visible, .mhoja__cerrar:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 2px; }

.mhoja__cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 40px; display: grid; gap: 30px; align-content: start; }

.mhoja__cabeza { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }

/* La página del producto, dentro de un móvil. */
.mmovil {
  padding: 10px;
  border-radius: 34px;
  background: #0d0f10;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .28);
}
.mmovil__pantalla {
  height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 25px;
  /* Mientras baja la captura (es larga), su hueco late en vez de quedarse en blanco. */
  background: linear-gradient(100deg, #eef0ef 30%, #f8f9f8 50%, #eef0ef 70%) 0 0 / 300% 100%;
  animation: esqueleto-late 1.4s ease-in-out infinite;
  scrollbar-width: thin;
}
.mmovil__pantalla--cargando, .mmovil__pantalla--sin { animation: none; background: #fff; }
.mmovil__pantalla img { display: block; width: 100%; height: auto; }
.mmovil__pantalla:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 3px; }
.mmovil__pantalla--cargando, .mmovil__pantalla--sin {
  display: grid; align-content: center; justify-items: center; gap: 14px;
  padding: 24px; text-align: center; color: #4c5552; font-size: 13px;
}
.mmovil__pantalla--cargando p, .mmovil__pantalla--sin p { margin: 0; display: inline-flex; align-items: center; gap: 8px; max-width: 220px; }
.mfoto--hoja { width: 190px; height: 190px; padding: 8px; box-shadow: none; }
.mmovil__giro {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #c9d0cd; border-top-color: var(--se-verde);
  animation: mmovil-gira .8s linear infinite;
}
@keyframes mmovil-gira { to { transform: rotate(360deg); } }

.mhoja__info { display: grid; gap: 14px; align-content: start; }
.mhoja__sello {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--se-dorado) 16%, transparent);
  color: color-mix(in srgb, var(--se-dorado) 70%, var(--se-tinta));
  font-size: 12px; font-weight: 600;
}
.mhoja__sello svg { width: 13px; height: 13px; }
.mhoja__titulo { margin: 0; font-family: var(--se-fuente-display); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--se-tinta); text-wrap: balance; }
.mhoja__tienda { margin: -6px 0 0; font-size: 14px; color: var(--se-tinta-2); }

.mhoja__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--se-linea); border-radius: 12px; overflow: hidden; }
.mhoja__datos > div { padding: 10px 12px; }
.mhoja__datos > div + div { border-left: 1px solid var(--se-linea); }
.mhoja__datos dt { font-size: 11.5px; color: var(--se-tinta-3); }
.mhoja__datos dd { margin: 3px 0 0; font-size: 18px; font-weight: 650; color: var(--se-tinta); font-variant-numeric: tabular-nums; }

.mhoja__botones, .mhoja__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.mhoja__botones .mboton--principal { flex: 1 1 100%; justify-content: center; }
.mhoja__nota { margin: 0; font-size: 13px; color: var(--se-tinta-2); }

.mboton {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--se-linea); border-radius: 999px;
  background: var(--se-papel); color: var(--se-tinta);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s var(--se-salida);
}
.mboton svg { width: 15px; height: 15px; flex: 0 0 15px; }
.mboton:hover { background: var(--se-papel-hundido); }
.mboton:active { transform: scale(.98); }
.mboton:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 2px; }
.mboton--principal { background: var(--se-verde); border-color: var(--se-verde); color: var(--se-sobre-verde); }
.mboton--principal:hover { background: color-mix(in srgb, var(--se-verde) 88%, #000); }
.mboton--enlace { border-color: transparent; color: var(--se-tinta-2); }
.mboton--hecho { background: var(--se-verde-tint); border-color: transparent; color: var(--se-verde-tinta, var(--se-verde)); cursor: default; flex: 1 1 100%; justify-content: center; }
.mboton.es-favorito { background: color-mix(in srgb, var(--se-dorado) 18%, var(--se-papel)); border-color: var(--se-dorado); }
.mboton.es-favorito svg { fill: var(--se-dorado); color: var(--se-dorado); }

.mhoja__seccion { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--se-linea); }
.mhoja__seccion-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 20px; }
.mhoja__seccion-cabeza > div:first-child { flex: 1 1 300px; min-width: 0; }
.mhoja__seccion h4 { margin: 0; font-family: var(--se-fuente-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--se-tinta); }
.mhoja__seccion-cabeza p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--se-tinta-2); max-width: 62ch; }

/* Los diez mejores anuncios. */
.manuncios { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.manuncio { display: grid; gap: 7px; align-content: start; min-width: 0; }
.manuncio__creativo {
  position: relative; display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: #0d0f10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.manuncio__creativo img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s var(--se-salida); }
.manuncio__creativo:hover img { transform: scale(1.03); }
.manuncio__creativo:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 2px; }
.manuncio__sin { position: absolute; inset: 0; display: grid; place-items: center; color: #7f8986; }
.manuncio__sin svg { width: 26px; height: 26px; }
.manuncio__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff;
}
.manuncio__play svg { width: 18px; height: 18px; }
.manuncio__tiempo {
  position: absolute; left: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .66); color: #fff;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.manuncio__tiempo svg { width: 11px; height: 11px; }
.manuncio__gancho {
  margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--se-tinta-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Los ángulos. */
.mangulos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: angulo; }
.mangulos li {
  counter-increment: angulo;
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--se-papel-hundido);
  font-size: 13.5px; line-height: 1.5; color: var(--se-tinta);
}
.mangulos li::before {
  content: counter(angulo);
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--se-papel); color: var(--se-tinta-2);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.mangulos li small { grid-column: 2; display: block; margin-top: 2px; font-size: 12px; color: var(--se-tinta-3); }
.mangulos__suyos summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--se-tinta-2); padding: 4px 0; }
.mangulos__suyos[open] summary { margin-bottom: 8px; }

@media (max-width: 720px) {
  .mhoja {
    top: calc(var(--se-zona-arriba) + 8px);
    width: 100vw; border-left: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, .3);
    animation-name: mhoja-sube;
  }
  .mhoja__barra { border-radius: 18px 18px 0 0; }
  .mhoja__cuerpo { padding: 18px 16px 32px; gap: 24px; }
  .mhoja__cabeza { grid-template-columns: minmax(0, 1fr); }
  .mmovil { max-width: 320px; justify-self: center; width: 100%; }
  .mmovil__pantalla { height: min(62vh, 540px); }
  .mhoja__datos dd { font-size: 16px; }
  .manuncios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mhoja, .mhoja__fondo, .mres.recien-llegado { animation: none; }
  .manuncio__creativo img, .mboton, .mfila__estrella { transition: none; }
}

/* ---------- La hoja: foto del producto, cifras y gráficas (2026-10-29) ---------- */
.mhoja__media { display: grid; gap: 12px; align-content: start; }
.mhoja__vistas { display: flex; gap: 2px; padding: 3px; background: var(--se-papel-hundido); border-radius: 999px; }
.mhoja__vista {
  flex: 1 1 0; padding: 7px 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--se-tinta-2);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.mhoja__vista:hover { color: var(--se-tinta); }
.mhoja__vista.es-activa { background: var(--se-papel); color: var(--se-tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.mhoja__vista:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 1px; }

.mhoja__foto { position: relative; }
.mfoto--grande { width: 100%; aspect-ratio: 1; padding: 18px; border-radius: 18px; }
.mfoto--grande .mfoto__vacia svg { width: 44px; height: 44px; }
.mhoja__precio {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(13, 15, 16, .86); color: #fff;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.mhoja__claves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--se-linea); border-radius: 14px; overflow: hidden; }
.mhoja__claves > div { display: grid; gap: 3px; align-content: start; padding: 12px 14px; }
.mhoja__claves > div + div { border-left: 1px solid var(--se-linea); }
.mhoja__claves dt { font-size: 11.5px; color: var(--se-tinta-3); }
.mhoja__claves dd { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.15; color: var(--se-tinta); font-variant-numeric: tabular-nums; }
.mhoja__claves small { font-size: 11.5px; color: var(--se-tinta-3); }
.mhoja__tend { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.mhoja__tend svg { width: 13px; height: 13px; }
.mhoja__tend.es-sube { color: var(--se-verde-tinta, var(--se-verde)); }
.mhoja__tend.es-baja { color: #d0603b; }
.mhoja__vs {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; vertical-align: 3px;
  background: var(--se-verde-tint); color: var(--se-verde-tinta, var(--se-verde));
  font-size: 11px; font-weight: 700;
}

.mhoja__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--se-linea); border: 1px solid var(--se-linea); border-radius: 14px; overflow: hidden; }
.mhoja__cifras > div { display: grid; gap: 4px; padding: 12px 14px; background: var(--se-papel); }
.mhoja__cifras dt { font-size: 11.5px; color: var(--se-tinta-3); }
.mhoja__cifras dd { margin: 0; font-size: 15px; font-weight: 650; color: var(--se-tinta); font-variant-numeric: tabular-nums; }
.mhoja__redes { display: flex; flex-wrap: wrap; gap: 4px; }
.mhoja__redes span { padding: 2px 8px; border-radius: 999px; background: var(--se-papel-hundido); font-size: 12px; font-weight: 600; }

.mhoja__graficas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.mhoja__graficas .grafico { margin: 0; padding: 12px 14px 6px; border: 1px solid var(--se-linea); border-radius: 14px; background: var(--se-papel); }
.mhoja__graficas .grafico__titulo { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--se-tinta-2); }
.mhoja__graficas .grafico__titulo b { color: var(--se-tinta); font-variant-numeric: tabular-nums; }
.mhoja__graficas .grafico__nota { margin: 2px 0 6px; font-size: 11.5px; color: var(--se-tinta-3); }

@media (max-width: 720px) {
  .mhoja__claves { grid-template-columns: minmax(0, 1fr); }
  .mhoja__claves > div + div { border-left: 0; border-top: 1px solid var(--se-linea); }
  .mhoja__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mfoto--grande { max-width: 320px; justify-self: center; }
}

/* ---------- La ficha como dossier (2026-10-29, segunda vuelta) ---------- */
.mhoja { grid-template-rows: auto minmax(0, 1fr) auto; }
.mhoja__cuerpo { gap: 22px; padding-top: 18px; }

/* Cabecera: el producto, quién lo vende y por qué es el ganador. */
.mhero {
  position: relative;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 18px;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--se-verde) 14%, transparent) 0%, transparent 55%),
    var(--se-papel-hundido);
  border: 1px solid var(--se-linea);
  overflow: hidden;
}
.mhero.es-ganador {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--se-dorado) 20%, transparent) 0%, transparent 55%),
    var(--se-papel-hundido);
}
.mhero__foto { position: relative; }
.mfoto--hero { width: 100%; aspect-ratio: 1; padding: 14px; border-radius: 16px; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .45); }
.mfoto--hero .mfoto__vacia svg { width: 40px; height: 40px; }
.mhero__texto { display: grid; gap: 10px; min-width: 0; }
.mhero__sellos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mhero__tienda { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--se-tinta-2); }
.mhero__tienda svg { width: 14px; height: 14px; }
.mhero__titulo { margin: 0; font-family: var(--se-fuente-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; color: var(--se-tinta); text-wrap: balance; }
.mhero__cifra { margin: 0; font-size: 14px; color: var(--se-tinta-2); }
.mhero__cifra b { font-size: 17px; color: var(--se-tinta); font-variant-numeric: tabular-nums; }
.mhero__veredicto {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 2px 0 0; padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--se-verde) 12%, var(--se-papel));
  color: var(--se-tinta); font-size: 13px; line-height: 1.45;
}
.mhero__veredicto svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--se-verde-tinta, var(--se-verde)); }

/* Pestañas de la ficha. */
.mhoja__pestanas {
  position: sticky; top: -18px; z-index: 2;
  display: flex; gap: 4px; padding: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--se-papel) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--se-linea);
}
.mhoja__pestana {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--se-tinta-2);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.mhoja__pestana-n { padding: 0 6px; border-radius: 999px; background: var(--se-papel-hundido); font-size: 11px; font-variant-numeric: tabular-nums; }
.mhoja__pestana:hover { color: var(--se-tinta); background: var(--se-papel-hundido); }
.mhoja__pestana.es-activa { background: var(--se-tinta); color: var(--se-papel); }
.mhoja__pestana.es-activa .mhoja__pestana-n { background: color-mix(in srgb, var(--se-papel) 22%, transparent); color: var(--se-papel); }
.mhoja__pestana:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 2px; }
.mhoja__panel { display: grid; gap: 18px; align-content: start; animation: mpanel-entra .28s var(--se-salida) both; }
@keyframes mpanel-entra { from { opacity: 0; transform: translateY(4px); } }

/* Los cuatro números. */
.mkpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mkpi {
  position: relative;
  display: grid; gap: 4px; align-content: start;
  padding: 14px 16px 14px 60px;
  min-height: 92px;
  border-radius: 16px;
  border: 1px solid var(--se-linea);
  background: var(--se-papel);
}
.mkpi__icono {
  position: absolute; left: 14px; top: 14px;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--se-papel-hundido); color: var(--se-tinta-2);
}
.mkpi__icono svg { width: 17px; height: 17px; }
.mkpi--verde .mkpi__icono { background: color-mix(in srgb, var(--se-verde) 16%, transparent); color: var(--se-verde-tinta, var(--se-verde)); }
.mkpi__etiqueta { font-size: 12px; color: var(--se-tinta-3); }
.mkpi__valor { font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--se-tinta); font-variant-numeric: tabular-nums; }
.mkpi__extra { font-size: 12px; color: var(--se-tinta-3); }

.mdatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--se-linea); border-radius: 16px; overflow: hidden; }
.mdatos > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--se-linea); }
.mdatos > div:nth-child(odd):not(.mdatos__ancho) { border-right: 1px solid var(--se-linea); }
.mdatos > div:nth-last-child(-n+1) { border-bottom: 0; }
.mdatos__ancho { grid-column: 1 / -1; }
.mdatos dt { font-size: 12.5px; color: var(--se-tinta-3); }
.mdatos dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--se-tinta); text-align: right; font-variant-numeric: tabular-nums; }
.mdatos .mhoja__redes { justify-content: flex-end; }

/* Su página: el móvil y qué mirar. */
.mhoja__pagina { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.mhoja__pagina-texto { display: grid; gap: 12px; align-content: start; }
.mhoja__pagina-texto h4 { margin: 0; font-family: var(--se-fuente-display); font-size: 18px; font-weight: 600; color: var(--se-tinta); }
.mhoja__pagina-texto p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--se-tinta-2); }
.mhoja__pagina-texto .mboton { justify-self: start; }

/* Los botones, siempre a mano. */
.mhoja__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--se-linea);
  background: var(--se-papel);
}
.mhoja__pie .mboton--principal { flex: 1 1 220px; justify-content: center; }
.mboton--grande { padding: 12px 18px; font-size: 14px; }

@media (max-width: 720px) {
  .mhero { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .mhero__titulo { font-size: 19px; }
  .mhero__veredicto { grid-column: 1 / -1; }
  .mkpi { padding-left: 54px; min-height: 84px; }
  .mkpi__valor { font-size: 20px; }
  .mdatos { grid-template-columns: minmax(0, 1fr); }
  .mdatos > div:nth-child(odd):not(.mdatos__ancho) { border-right: 0; }
  .mhoja__pagina { grid-template-columns: minmax(0, 1fr); }
  .mhoja__pagina .mmovil { justify-self: center; width: 100%; max-width: 320px; }
  .mhoja__pie { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .mhoja__pie .mboton--enlace { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mhoja__panel { animation: none; } }

/* ---------- Ficha: cabecera entera, botones iguales y anuncios con carátula (2026-10-30) ---------- */

/* La cabecera se aplastaba: el cuerpo es una rejilla que hace scroll y, con
   overflow:hidden, su fila podía encogerse a casi nada. Cada fila mide lo que su contenido. */
.mhoja__cuerpo { grid-auto-rows: max-content; }
.mhero, .mhoja__pestanas { flex-shrink: 0; }

/* Un solo sistema de botones: 40 px los normales, 48 px los de la barra de abajo. */
.mboton {
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 13.5px;
  white-space: nowrap;
}
.mboton--principal { box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--se-verde) 80%, transparent); }
.mboton--grande { min-height: 48px; padding: 0 20px; font-size: 14.5px; border-radius: 14px; }
.mboton--grande svg { width: 17px; height: 17px; flex-basis: 17px; }

/* Cabecera de «Anuncios»: el texto arriba y los dos botones debajo, del mismo tamaño. */
.mhoja__panel .mhoja__seccion-cabeza { display: grid; gap: 14px; }
.mhoja__panel .mhoja__seccion-cabeza h4 { margin: 0; font-family: var(--se-fuente-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--se-tinta); }
.mhoja__panel .mhoja__seccion-cabeza p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--se-tinta-2); max-width: 64ch; }
.mhoja__panel .mhoja__acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.mhoja__panel .mhoja__acciones .mboton { width: 100%; }

/* Barra de abajo: tres botones de la misma altura, el principal manda. */
.mhoja__pie { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.mhoja__pie > .mboton--hecho, .mhoja__pie > .mhoja__nota { grid-column: 1 / 2; }
.mhoja__pie .mboton--principal { flex: none; }
.mhoja__pie .mboton--enlace { border-color: var(--se-linea); color: var(--se-tinta); }
.mhoja__pie .mboton--enlace:hover { background: var(--se-papel-hundido); }

/* Tarjeta de cada anuncio. */
.manuncios { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 14px; }
.manuncio {
  gap: 0;
  border: 1px solid var(--se-linea);
  border-radius: 14px;
  background: var(--se-papel);
  overflow: hidden;
  transition: border-color .15s, box-shadow .2s;
}
.manuncio:hover { border-color: color-mix(in srgb, var(--se-verde) 45%, var(--se-linea)); box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .55); }
.manuncio__creativo { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; }
.manuncio__vista { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s var(--se-salida); }
.manuncio__creativo:hover .manuncio__vista { transform: scale(1.03); }
.manuncio__sin {
  display: none;
  flex-direction: column; gap: 8px; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  background:
    radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--se-verde) 16%, transparent) 0%, transparent 70%),
    #111416;
  color: #aab4b1; font-size: 12px; font-weight: 600; line-height: 1.35;
}
.manuncio__sin svg { width: 28px; height: 28px; color: #e9eeec; }
.manuncio__creativo.sin-vista .manuncio__sin { display: flex; }
.manuncio__creativo.sin-vista .manuncio__play { display: none; }
.manuncio__gancho {
  min-height: calc(2 * 1.4em);
  margin: 10px 12px 0;
  font-size: 12.5px; color: var(--se-tinta);
}
.manuncio__acciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px;
  padding: 10px 12px 12px;
}
.manuncio__boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 8px;
  border: 1px solid var(--se-linea); border-radius: 10px;
  background: var(--se-papel-hundido); color: var(--se-tinta);
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.manuncio__boton:hover { border-color: var(--se-verde); color: var(--se-verde-tinta, var(--se-verde)); }
.manuncio__boton:focus-visible { outline: 2px solid var(--se-verde); outline-offset: 2px; }
.manuncio__boton svg { width: 14px; height: 14px; flex: 0 0 14px; }

@media (max-width: 720px) {
  .mhoja__pie { grid-template-columns: minmax(0, 1fr) auto; }
  .mhoja__pie .mboton--enlace { display: none; }
  .manuncios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .manuncio__boton span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .manuncio__vista, .manuncio { transition: none; } }

/* ---------- Ficha: botón de la página del producto ganador del terreno (2026-11-02) ---------- */
.mhero__ganador { justify-self: start; }
@media (max-width: 720px) { .mhero__ganador { justify-self: stretch; justify-content: center; white-space: normal; text-align: center; min-width: 0; } }

/* Con «Producto ganador» las cuatro pestañas no caben en 375 px y ensanchaban la ficha entera:
   el cuerpo nunca pasa del ancho de la hoja y las pestañas se desplazan de lado si no caben. */
.mhoja__cuerpo { grid-template-columns: minmax(0, 1fr); }
.mhoja__pestanas { overflow-x: auto; scrollbar-width: none; }
.mhoja__pestanas::-webkit-scrollbar { display: none; }
.mhoja__pestana-corto { display: none; }
@media (max-width: 720px) {
  .mhoja__pestana { flex: 1 0 auto; min-height: var(--se-tactil); padding: 0 10px; font-size: 14px; }
  .mhoja__pestana-largo { display: none; }
  .mhoja__pestana-corto { display: inline; }
}
/* Hasta 420 px no caben también los números: las cuatro pestañas, a la vista. */
@media (max-width: 420px) {
  .mhoja__pestana { padding: 0 6px; }
  .mhoja__pestana-n { display: none; }
  /* El pie de la ficha a 360 px: el texto del botón no toca sus bordes */
  .mhoja__pie .mboton--grande { padding: 0 14px; font-size: 14px; }
}