:root {
  --lienzo: #070b14;
  --papel: #101826;
  --tinta: #e7eef8;
  --suave: #8ea0b8;
  --linea: rgba(120, 176, 220, 0.2);
  --acento: #3ddcff;
  --crema: #0c1422;
  --acento-2: #3b6cff;
  --icono: #071018;
  --tarjeta: #0c1422;
  --tinta-boton: #041018;
  --fuente-titulo: "Space Grotesk", "Segoe UI", "Yu Gothic", sans-serif;
  --fuente-texto: "Outfit", "Segoe UI", "Yu Gothic", sans-serif;
  --fuente-etiqueta: "Outfit", "Segoe UI", "Yu Gothic", sans-serif;
  --sombra: 0 18px 40px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--tinta);
  font-family: var(--fuente-texto);
  background:
    linear-gradient(#3ddcff, #3b6cff) top / 100% 3px no-repeat,
    radial-gradient(ellipse at 100% -10%, rgba(59, 108, 255, 0.28), transparent 46%),
    var(--lienzo);
}

::selection { background: #16485a; color: #e7eef8; }

.pagina {
  width: min(980px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 40px;
}

.cabecera {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.perfil {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.avatar {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(145deg, #16324a, #0e7490 55%, #2563eb);
  color: #f4fbff;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  box-shadow: 0 10px 24px rgba(14, 116, 144, 0.35);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kicker {
  margin: 0 0 4px;
  color: var(--acento);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.perfil h1 {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.usuario {
  margin: 6px 0 0;
  font-weight: 650;
}

.bio {
  margin: 6px 0 0;
  max-width: 42ch;
  color: var(--suave);
  line-height: 1.45;
}

.indice {
  display: grid;
  overflow: hidden;
  background: var(--papel);
  border-radius: 18px;
  box-shadow: var(--sombra);
}

.indice a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  font-weight: 650;
  border-bottom: 1px solid var(--linea);
}

.indice a:last-child { border-bottom: 0; }

.indice a span {
  width: 1.7rem;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.indice a::after {
  content: "→";
  margin-left: auto;
  color: var(--suave);
}

.seccion {
  scroll-margin-top: 16px;
  margin-top: 14px;
  padding: 20px 18px 18px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 24px;
  box-shadow: var(--sombra);
}

.encabezado {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}

.numero {
  margin: 0;
  min-width: 2ch;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  font-weight: 560;
  color: var(--acento);
  line-height: 1;
}

.encabezado h2 {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1;
}

.resumen {
  margin: 6px 0 0;
  color: var(--suave);
  line-height: 1.4;
}

.rejilla-redes,
.rejilla-referidos,
.lista-articulos {
  display: grid;
  gap: 10px;
}

.rejilla-redes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.red,
.referido {
  color: inherit;
  text-decoration: none;
}

.red {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 132px;
  padding: 14px 12px;
  border-radius: 18px;
  background: #0c1422;
  color: var(--tinta);
}

.red-icono,
.marca {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.red-icono {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(61, 220, 255, 0.12);
}

.red-icono svg { width: 22px; height: 22px; display: block; }

.red-texto { display: grid; gap: 2px; min-width: 0; }

.red strong,
.referido strong,
.producto h3 { font-weight: 650; }

.red-texto span { color: var(--suave); font-size: 0.86rem; }

.producto {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px 14px;
  padding: 12px;
  background: var(--crema);
  border-radius: 18px;
}

.foto {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--icono);
  color: var(--acento);
  font-family: var(--fuente-titulo);
  font-size: 1.7rem;
  font-weight: 700;
}

.foto::before {
  content: attr(data-letra);
  grid-area: 1 / 1;
}

.foto img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.etiqueta {
  margin: 0 0 4px;
  color: var(--acento);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.producto.agotado { opacity: 0.66; }
.producto.agotado .etiqueta { color: var(--suave); }

.producto h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.descripcion {
  margin: 4px 0 0;
  color: var(--suave);
  font-size: 0.92rem;
  line-height: 1.45;
}

.producto-compra {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.precio {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 1.45rem;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.btn,
.cta,
.estado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.btn {
  background: var(--acento);
  color: var(--tinta-boton);
  text-decoration: none;
}

.estado {
  background: #152033;
  color: var(--suave);
}

.referido {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "marca nombre cta"
    "marca detalle cta";
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 14px;
  background: var(--crema);
  border-radius: 18px;
  border-top: 3px solid var(--marca, var(--acento));
}

.referido[data-marca="bybit"] { --marca: #c47d00; }
.referido[data-marca="binance"] { --marca: #b28900; }
.referido[data-marca="stake"] { --marca: #0f6b4c; }

.marca {
  grid-area: marca;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--marca, var(--acento)) 22%, #071018);
  color: var(--marca);
  font-size: 0.78rem;
  font-weight: 800;
}

.referido strong { grid-area: nombre; }

.detalle {
  grid-area: detalle;
  color: var(--suave);
  font-size: 0.86rem;
  line-height: 1.35;
}

.cta {
  grid-area: cta;
  border: 1px solid rgba(61, 220, 255, 0.28);
  background: var(--papel);
}

.vacio {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--linea);
  border-radius: 16px;
  color: var(--suave);
  text-align: center;
  line-height: 1.45;
}

#pie {
  margin: 18px 0 0;
  color: var(--suave);
  font-size: 0.82rem;
  text-align: center;
}

a:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
}

@media (hover: hover) {
  .red,
  .referido,
  .indice a,
  .btn {
    transition: transform 0.16s ease;
  }

  .red:hover,
  .referido:hover,
  .indice a:hover {
    transform: translateY(-2px);
  }
}

@media (min-width: 760px) {
  .pagina { padding-top: 40px; }

  .cabecera {
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.7fr);
    gap: 28px;
    align-items: stretch;
    margin-bottom: 8px;
  }

  .perfil { align-items: center; }

  .indice a { padding: 16px 18px; }

  .seccion { padding: 26px 24px 22px; }

  .rejilla-referidos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .rejilla-redes { gap: 12px; }

  .red {
    min-height: 172px;
    padding: 18px;
  }

  .producto {
    grid-template-columns: 112px minmax(0, 1fr) auto;
    align-items: center;
  }

  .foto { width: 112px; height: 112px; }

  .producto-compra {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
  }

  .referido {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 214px;
    padding: 18px;
  }

  .referido .cta { margin-top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .red,
  .referido,
  .indice a,
  .btn { transition: none; }
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.logotipo {
  color: inherit;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.4rem;
  font-weight: 560;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.enlace-suave {
  color: var(--acento);
  font-weight: 700;
  text-decoration: none;
}

.portada {
  display: grid;
  gap: 22px;
  margin-bottom: 22px;
}

.presentacion h1,
.formulario h2,
.paso h2,
.encabezado-editor h2,
#sin-acceso h1,
#mias h2 {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.presentacion h1,
#sin-acceso h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  line-height: 0.98;
}

.formulario,
.paso,
#mias,
#sin-acceso {
  display: grid;
  gap: 12px;
}

#sin-acceso[hidden],
#mias[hidden],
#editor[hidden] { display: none; }
}

.campo {
  display: grid;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 650;
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--crema);
  color: var(--tinta);
  font: inherit;
  font-weight: 450;
}

.campo textarea { resize: vertical; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--acento);
  color: var(--tinta-boton);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.boton.secundario {
  background: transparent;
  color: var(--tinta);
  border: 1px solid rgba(61, 220, 255, 0.28);
}

.boton:disabled { opacity: 0.6; cursor: wait; }

.aviso { margin: 0; color: var(--acento); font-weight: 650; }

.pasos {
  display: grid;
  gap: 12px;
}

.paso p:last-child { margin: 0; color: var(--suave); }

.encabezado-editor,
.enlace-publico,
.acciones,
.lista-mias,
.check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.encabezado-editor,
.acciones { justify-content: space-between; }

.enlace-publico { flex-wrap: wrap; margin: 8px 0 0; }

.enlace-publico a {
  color: var(--acento);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lista-editor,
.tarjeta-editor { display: grid; gap: 10px; }

.tarjeta-editor {
  padding: 14px;
  background: var(--crema);
  border-radius: 18px;
}

.lista-mias { flex-wrap: wrap; }

.lista-mias a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

#pie a { color: inherit; }

@media (min-width: 860px) {
  .portada {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }

  .pasos { grid-template-columns: repeat(4, 1fr); }
}

.vista {
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--acento) 24%, transparent) 0%, transparent 58%),
    var(--lienzo);
  color: var(--tinta);
}

.hoja {
  width: min(430px, calc(100% - 24px));
  margin: 20px auto 36px;
  padding: 28px 16px 18px;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  border: 1px solid var(--linea);
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.perfil-publico {
  display: grid;
  justify-items: center;
  text-align: center;
}

.marca-mini {
  margin: 0 0 12px;
  color: var(--acento);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.logotipo span { color: var(--acento); }

.perfil-publico .avatar { margin-bottom: 12px; }

.perfil-publico h1 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1;
}

.perfil-publico .bio {
  margin: 8px 0 0;
  max-width: 30ch;
}

.fila-iconos {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.icono-red {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--icono);
  color: var(--acento);
  border: 1px solid color-mix(in srgb, var(--acento) 50%, transparent);
}

.icono-red svg { width: 20px; height: 20px; }

.bloque-publico { margin-top: 22px; }

.bloque-publico h2 {
  margin: 0 0 10px;
  font-family: var(--fuente-etiqueta);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}

.hoja .producto {
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
}

.hoja .producto-compra {
  grid-column: auto;
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
}

.lista-enlaces { display: grid; gap: 8px; }

.enlace-lista {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--tarjeta);
  color: inherit;
  text-decoration: none;
}

.enlace-lista-texto { display: grid; min-width: 0; }

.enlace-lista-texto span {
  color: var(--suave);
  font-size: 0.84rem;
}

.enlace-lista[data-marca="bybit"] { box-shadow: inset 3px 0 0 #c47d00; }
.enlace-lista[data-marca="binance"] { box-shadow: inset 3px 0 0 #b28900; }
.enlace-lista[data-marca="stake"] { box-shadow: inset 3px 0 0 #0f6b4c; }

.pie-publico,
.aviso-pagina p {
  margin: 18px 0 0;
  color: var(--suave);
  font-size: 0.8rem;
  text-align: center;
}

.pie-publico a { color: inherit; }

.aviso-pagina {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.aviso-pagina h1 {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.8rem;
  font-weight: 560;
}

.escena {
  display: grid;
  gap: 22px;
  margin-bottom: 22px;
}

.promesas {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.promesas li {
  position: relative;
  padding-left: 18px;
}

.promesas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento);
}

.marco {
  width: min(300px, 100%);
  margin: 0 auto;
  padding: 12px;
  border-radius: 36px;
  background: #05080f;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.demo {
  padding: 22px 14px 16px;
  border-radius: 26px;
  background: #101826;
  text-align: center;
}

.demo-avatar {
  width: 58px;
  height: 58px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #16324a, #0e7490 55%, #2563eb);
  color: #f4fbff;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.demo strong {
  display: block;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.3rem;
  font-weight: 560;
}

.demo > span {
  color: var(--acento);
  font-size: 0.86rem;
  font-weight: 700;
}

.demo > p {
  margin: 6px 0 0;
  color: var(--suave);
  font-size: 0.82rem;
}

.demo-iconos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 4px;
}

.demo-iconos span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #071018;
  box-shadow: 0 0 0 1px rgba(61, 220, 255, 0.35);
}

.demo-titulo {
  margin: 12px 0 6px;
  color: var(--acento);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}

.demo-producto,
.demo-enlace {
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #0c1422;
  font-size: 0.86rem;
  text-align: left;
}

.demo-producto {
  display: flex;
  justify-content: space-between;
}

.demo-enlace { font-weight: 700; }
.demo-enlace:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .escena {
    grid-template-columns: minmax(0, 1.15fr) 320px;
    grid-template-areas:
      "texto telefono"
      "form telefono";
    align-items: center;
  }

  .presentacion { grid-area: texto; }
  .marco { grid-area: telefono; }
  #crear { grid-area: form; }
}

.apartados {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  display: grid;
  gap: 8px;
}

.apartados legend { padding: 0 6px; }

.seccion.apagada .campo,
.seccion.apagada .lista-editor,
.seccion.apagada .resumen { opacity: 0.45; }

.menu-idioma { position: relative; }

.boton-idioma,
.lista-idiomas button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.boton-idioma {
  border: 1px solid rgba(61, 220, 255, 0.35);
  background: #0c1422;
  border-radius: 999px;
  padding: 6px 12px;
}

.lista-idiomas {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 6;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 180px;
  background: #101826;
  border: 1px solid rgba(61, 220, 255, 0.35);
  border-radius: 14px;
}

.lista-idiomas button {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: left;
}

.lista-idiomas button:hover { background: #0c1422; }

.barra-idioma {
  display: flex;
  justify-content: flex-end;
  width: min(720px, calc(100% - 24px));
  margin: 16px auto 0;
}

.vista .boton-idioma,
.vista .lista-idiomas,
.vista .lista-idiomas button { color: #e7eef8; }

.vista[data-diseno="plano"] .barra-idioma,
.vista[data-diseno="banda"] .barra-idioma {
  width: min(520px, calc(100% - 24px));
}

[data-color="cian"] {
  --lienzo: #070b14; --papel: #101826; --tarjeta: #0c1422; --tinta: #e7eef8; --suave: #8ea0b8;
  --linea: rgba(120, 176, 220, 0.28); --acento: #3ddcff; --acento-2: #3b6cff; --icono: #071018; --tinta-boton: #041018;
}
[data-color="ambar"] {
  --lienzo: #110e0a; --papel: #1c1812; --tarjeta: #14110c; --tinta: #f6f0e6; --suave: #b5a892;
  --linea: rgba(232, 176, 74, 0.32); --acento: #e8b04a; --acento-2: #c47d00; --icono: #0c0a07; --tinta-boton: #1a1204;
}
[data-color="bosque"] {
  --lienzo: #07110e; --papel: #10201a; --tarjeta: #0c1814; --tinta: #e7f6ee; --suave: #8eae9c;
  --linea: rgba(61, 204, 138, 0.3); --acento: #3dcc8a; --acento-2: #147a4a; --icono: #07140f; --tinta-boton: #04140c;
}
[data-color="cobalto"] {
  --lienzo: #080a16; --papel: #14182c; --tarjeta: #101426; --tinta: #e8ecff; --suave: #9aa3c7;
  --linea: rgba(122, 162, 255, 0.32); --acento: #7aa2ff; --acento-2: #3b6cff; --icono: #0a0e1c; --tinta-boton: #07101f;
}
[data-color="cobre"] {
  --lienzo: #120c0a; --papel: #241812; --tarjeta: #1a120e; --tinta: #f8eee8; --suave: #c4a898;
  --linea: rgba(224, 122, 76, 0.34); --acento: #e07a4c; --acento-2: #a34b28; --icono: #140e0b; --tinta-boton: #1a0c06;
}
[data-color="hielo"] {
  --lienzo: #e7eef6; --papel: #f7fafc; --tarjeta: #ffffff; --tinta: #122033; --suave: #5c7088;
  --linea: rgba(18, 32, 51, 0.14); --acento: #0e7490; --acento-2: #2563eb; --icono: #e4edf5; --tinta-boton: #f4fbff;
}

[data-tipo="grotesk"] {
  --fuente-titulo: "Space Grotesk", "Segoe UI", "Yu Gothic", sans-serif;
  --fuente-texto: "Outfit", "Segoe UI", "Yu Gothic", sans-serif;
  --fuente-etiqueta: "Outfit", "Segoe UI", "Yu Gothic", sans-serif;
}
[data-tipo="editorial"] {
  --fuente-titulo: "Fraunces", Georgia, "Yu Mincho", serif;
  --fuente-texto: "Source Sans 3", "Segoe UI", "Yu Gothic", sans-serif;
  --fuente-etiqueta: "Source Sans 3", "Segoe UI", "Yu Gothic", sans-serif;
}
[data-tipo="mono"] {
  --fuente-titulo: "IBM Plex Sans", "Segoe UI", "Yu Gothic", sans-serif;
  --fuente-texto: "IBM Plex Sans", "Segoe UI", "Yu Gothic", sans-serif;
  --fuente-etiqueta: "IBM Plex Mono", ui-monospace, monospace;
}
[data-tipo="geometrica"] {
  --fuente-titulo: "Syne", "Segoe UI", "Yu Gothic", sans-serif;
  --fuente-texto: "Manrope", "Segoe UI", "Yu Gothic", sans-serif;
  --fuente-etiqueta: "Manrope", "Segoe UI", "Yu Gothic", sans-serif;
}

.hoja .avatar {
  background: linear-gradient(145deg, var(--icono), var(--acento) 55%, var(--acento-2));
  color: var(--tinta-boton);
  font-family: var(--fuente-titulo);
}
.hoja .producto { background: var(--tarjeta); }
.hoja .etiqueta,
.hoja .marca-mini,
.hoja .bloque-publico h2 { color: var(--acento); }
.hoja .estado { background: var(--icono); color: var(--suave); }
.hoja .precio,
.hoja .perfil-publico h1,
.hoja .aviso-pagina h1 { font-family: var(--fuente-titulo); color: var(--tinta); }

.hoja[data-diseno="plano"] {
  width: min(520px, calc(100% - 20px));
  padding: 8px 0 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hoja[data-diseno="plano"] .perfil-publico { padding: 12px 4px 0; }
.hoja[data-diseno="plano"] .bloque-publico {
  margin-top: 14px;
  padding: 14px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 18px;
}

.hoja[data-diseno="marco"] {
  border-radius: 4px;
  border: 2px solid var(--acento);
  box-shadow: none;
}
.hoja[data-diseno="marco"] .enlace-lista,
.hoja[data-diseno="marco"] .producto,
.hoja[data-diseno="marco"] .avatar,
.hoja[data-diseno="marco"] .icono-red { border-radius: 4px; }

.hoja[data-diseno="banda"] {
  width: min(460px, calc(100% - 24px));
  padding: 0 0 16px;
  overflow: hidden;
}
.hoja[data-diseno="banda"] .perfil-publico {
  justify-items: start;
  text-align: left;
  width: 100%;
  padding: 26px 18px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acento) 28%, transparent), transparent 78%),
    var(--papel);
}
.hoja[data-diseno="banda"] .fila-iconos { justify-content: flex-start; }
.hoja[data-diseno="banda"] .bloque-publico { margin-left: 16px; margin-right: 16px; }
.hoja[data-diseno="banda"] .perfil-publico .bio { max-width: 34ch; }

.aspecto-elegir { display: grid; gap: 12px; }
#crear .aspecto-elegir { margin-top: 6px; }

.grupo-aspecto {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: 16px;
}
.grupo-aspecto legend {
  padding: 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rejilla-opciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 720px) {
  .rejilla-opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.opcion-aspecto {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 8px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--crema);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 650;
  text-align: center;
}
.opcion-aspecto input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.opcion-aspecto:has(input:checked) {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
}
.opcion-aspecto:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }

.chip,
.dibujo,
.muestra-letra {
  width: 100%;
  height: 28px;
  border-radius: 8px;
}
.chip { background: linear-gradient(135deg, var(--chip) 58%, var(--chip-2)); }
.muestra-letra {
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
}
.muestra-letra[data-tipo="grotesk"] { font-family: "Space Grotesk", sans-serif; }
.muestra-letra[data-tipo="editorial"] { font-family: "Fraunces", Georgia, serif; }
.muestra-letra[data-tipo="mono"] { font-family: "IBM Plex Mono", monospace; font-size: 0.95rem; }
.muestra-letra[data-tipo="geometrica"] { font-family: "Syne", sans-serif; }

.dibujo {
  position: relative;
  border: 1px solid var(--linea);
  background: #0c1422;
}
.dibujo-tarjeta::before {
  content: "";
  position: absolute;
  inset: 6px 16px;
  border-radius: 5px;
  background: var(--acento);
}
.dibujo-plano::before,
.dibujo-plano::after {
  content: "";
  position: absolute;
  left: 7px;
  height: 3px;
  border-radius: 2px;
  background: var(--suave);
}
.dibujo-plano::before { top: 8px; right: 7px; }
.dibujo-plano::after { top: 16px; width: 55%; }
.dibujo-marco { border-radius: 2px; border: 2px solid var(--acento); }
.dibujo-banda::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: var(--acento);
}

.muestra-pagina {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px 12px 12px;
  border: 1px solid var(--linea);
  border-radius: 22px;
  background: var(--papel);
  color: var(--tinta);
  text-align: center;
}
.muestra-pagina strong {
  font-family: var(--fuente-titulo);
  font-size: 1.35rem;
  font-weight: 560;
  letter-spacing: -0.04em;
}
.muestra-pagina span {
  color: var(--suave);
  font-family: var(--fuente-texto);
  font-size: 0.82rem;
}
.muestra-pagina i {
  width: 42%;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--acento);
}
.muestra-pagina b {
  width: 100%;
  height: 28px;
  border-radius: 10px;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
}
.muestra-pagina[data-diseno="marco"] { border-radius: 4px; border: 2px solid var(--acento); }
.muestra-pagina[data-diseno="plano"] { background: transparent; border-style: dashed; }
.muestra-pagina[data-diseno="banda"] {
  justify-items: start;
  text-align: left;
  padding: 0 0 10px;
  overflow: hidden;
}
.muestra-pagina[data-diseno="banda"] strong {
  width: 100%;
  padding: 12px 12px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 32%, transparent), transparent);
}
.muestra-pagina[data-diseno="banda"] span,
.muestra-pagina[data-diseno="banda"] i,
.muestra-pagina[data-diseno="banda"] b { margin-left: 12px; margin-right: 12px; }

.demo[data-color] {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
}
.demo[data-color] strong { font-family: var(--fuente-titulo); }
.demo[data-color] .demo-avatar {
  background: linear-gradient(145deg, var(--icono), var(--acento) 55%, var(--acento-2));
  color: var(--tinta-boton);
  font-family: var(--fuente-titulo);
}
.demo[data-color] .demo-enlace,
.demo[data-color] .demo-producto { background: var(--tarjeta); color: var(--tinta); }
.demo[data-color] .demo-iconos span {
  background: var(--icono);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 45%, transparent);
}
.demo[data-diseno="marco"] { border-radius: 8px; box-shadow: inset 0 0 0 2px var(--acento); }
.demo[data-diseno="plano"] { background: transparent; }
.demo[data-diseno="banda"] { text-align: left; padding: 0 0 12px; }
.demo[data-diseno="banda"] .demo-avatar { margin-left: 14px; }
.demo[data-diseno="banda"] strong,
.demo[data-diseno="banda"] > span,
.demo[data-diseno="banda"] > p { padding-left: 14px; }
.demo[data-diseno="banda"] .demo-titulo,
.demo[data-diseno="banda"] .demo-enlace,
.demo[data-diseno="banda"] .demo-producto,
.demo[data-diseno="banda"] .demo-iconos { margin-left: 10px; margin-right: 10px; }
.demo[data-diseno="banda"] .demo-iconos { justify-content: flex-start; }

[data-color="vino"] {
  --lienzo: #14060c; --papel: #2a1018; --tarjeta: #1a0a10; --tinta: #ffe8ee; --suave: #e0a8b6;
  --linea: rgba(255, 77, 109, 0.35); --acento: #ff4d6d; --acento-2: #9f1239; --icono: #14060c; --tinta-boton: #2a0610;
}
[data-color="lima"] {
  --lienzo: #070807; --papel: #121612; --tarjeta: #0c100c; --tinta: #f3ffe4; --suave: #b7c9a4;
  --linea: rgba(198, 245, 78, 0.35); --acento: #c6f54e; --acento-2: #6b8f12; --icono: #070807; --tinta-boton: #121806;
}
[data-color="arena"] {
  --lienzo: #f3ead7; --papel: #fffaf2; --tarjeta: #f6efe2; --tinta: #2a2118; --suave: #6f6254;
  --linea: rgba(42, 33, 24, 0.16); --acento: #8a4b08; --acento-2: #c47d2a; --icono: #efe4d0; --tinta-boton: #fffaf2;
}
[data-color="violeta"] {
  --lienzo: #120818; --papel: #241433; --tarjeta: #1a0e28; --tinta: #f6eefe; --suave: #c4b0dc;
  --linea: rgba(192, 132, 252, 0.35); --acento: #c084fc; --acento-2: #7c3aed; --icono: #120818; --tinta-boton: #1a0a28;
}
[data-color="oceano"] {
  --lienzo: #041416; --papel: #0d2a2e; --tarjeta: #082024; --tinta: #e7fffb; --suave: #9ec9c4;
  --linea: rgba(242, 193, 78, 0.35); --acento: #f2c14e; --acento-2: #0f766e; --icono: #041416; --tinta-boton: #1a1406;
}
[data-color="grana"] {
  --lienzo: #f7f1f3; --papel: #fff; --tarjeta: #f8eef1; --tinta: #2a1218; --suave: #7a5962;
  --linea: rgba(159, 18, 57, 0.2); --acento: #9f1239; --acento-2: #be185d; --icono: #f3e4e8; --tinta-boton: #fff;
}

[data-tipo="cartel"] {
  --fuente-titulo: "Bebas Neue", "Arial Narrow", sans-serif;
  --fuente-texto: "Archivo Narrow", "Segoe UI", sans-serif;
  --fuente-etiqueta: "Archivo Narrow", "Segoe UI", sans-serif;
}
[data-tipo="clasica"] {
  --fuente-titulo: "Libre Baskerville", Georgia, serif;
  --fuente-texto: "Source Sans 3", "Segoe UI", sans-serif;
  --fuente-etiqueta: "Source Sans 3", "Segoe UI", sans-serif;
}
[data-tipo="humana"] {
  --fuente-titulo: "Nunito", "Segoe UI", sans-serif;
  --fuente-texto: "Nunito", "Segoe UI", sans-serif;
  --fuente-etiqueta: "Nunito", "Segoe UI", sans-serif;
}
[data-tipo="tecnica"] {
  --fuente-titulo: "Rajdhani", "Segoe UI", sans-serif;
  --fuente-texto: "Exo 2", "Segoe UI", sans-serif;
  --fuente-etiqueta: "Rajdhani", "Segoe UI", sans-serif;
}
[data-tipo="periodico"] {
  --fuente-titulo: "Newsreader", Georgia, serif;
  --fuente-texto: "Public Sans", "Segoe UI", sans-serif;
  --fuente-etiqueta: "Public Sans", "Segoe UI", sans-serif;
}
[data-tipo="compacta"] {
  --fuente-titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fuente-texto: "Barlow", "Segoe UI", sans-serif;
  --fuente-etiqueta: "Barlow Condensed", "Arial Narrow", sans-serif;
}
[data-tipo="suave"] {
  --fuente-titulo: "Quicksand", "Segoe UI", sans-serif;
  --fuente-texto: "Quicksand", "Segoe UI", sans-serif;
  --fuente-etiqueta: "Quicksand", "Segoe UI", sans-serif;
}
[data-tipo="display"] {
  --fuente-titulo: "Playfair Display", Georgia, serif;
  --fuente-texto: "Work Sans", "Segoe UI", sans-serif;
  --fuente-etiqueta: "Work Sans", "Segoe UI", sans-serif;
}

.muestra-letra[data-tipo="cartel"] { font-family: "Bebas Neue", sans-serif; letter-spacing: 0.04em; }
.muestra-letra[data-tipo="clasica"] { font-family: "Libre Baskerville", serif; font-size: 1rem; }
.muestra-letra[data-tipo="humana"] { font-family: "Nunito", sans-serif; }
.muestra-letra[data-tipo="tecnica"] { font-family: "Rajdhani", sans-serif; }
.muestra-letra[data-tipo="periodico"] { font-family: "Newsreader", serif; }
.muestra-letra[data-tipo="compacta"] { font-family: "Barlow Condensed", sans-serif; letter-spacing: 0.06em; }
.muestra-letra[data-tipo="suave"] { font-family: "Quicksand", sans-serif; }
.muestra-letra[data-tipo="display"] { font-family: "Playfair Display", serif; font-size: 1.05rem; }

.hoja[data-diseno="revista"] { width: min(680px, calc(100% - 20px)); border-radius: 0; padding: 28px 22px; }
.hoja[data-diseno="revista"] .perfil-publico { display: grid; grid-template-columns: 86px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 16px; }
.hoja[data-diseno="revista"] .marca-mini,
.hoja[data-diseno="revista"] .fila-iconos { grid-column: 1 / -1; }
.hoja[data-diseno="revista"] .fila-iconos { justify-content: flex-start; }
.hoja[data-diseno="revista"] .avatar { grid-row: 2 / span 3; }
.hoja[data-diseno="revista"] h1 { font-size: clamp(2.4rem, 6vw, 3.5rem); }
.hoja[data-diseno="revista"] .bloque-publico { border-left: 4px solid var(--acento); padding-left: 14px; }

.hoja[data-diseno="lista"] { width: min(460px, calc(100% - 16px)); background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.hoja[data-diseno="lista"] .perfil-publico h1 { font-size: 1.5rem; }
.hoja[data-diseno="lista"] .enlace-lista { min-height: 58px; border-radius: 999px; background: var(--papel); }

.hoja[data-diseno="mosaico"] { width: min(680px, calc(100% - 20px)); }
.hoja[data-diseno="mosaico"] .cuerpo-publico { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hoja[data-diseno="mosaico"] .perfil-publico,
.hoja[data-diseno="mosaico"] .bloque-tienda,
.hoja[data-diseno="mosaico"] .entrada-tienda,
.hoja[data-diseno="mosaico"] .pie-publico { grid-column: 1 / -1; }
.hoja[data-diseno="mosaico"] .bloque-publico { margin-top: 0; padding: 12px; background: var(--tarjeta); border-radius: 16px; }

.hoja[data-diseno="lateral"] { width: min(500px, calc(100% - 16px)); border-radius: 0 28px 28px 0; border-left: 12px solid var(--acento); }
.hoja[data-diseno="lateral"] .perfil-publico,
.hoja[data-diseno="lateral"] .bloque-publico { text-align: left; }
.hoja[data-diseno="lateral"] .perfil-publico { justify-items: start; }
.hoja[data-diseno="lateral"] .fila-iconos { justify-content: flex-start; }

.hoja[data-diseno="cartel"] { width: min(520px, calc(100% - 16px)); border-radius: 0; }
.hoja[data-diseno="cartel"] .perfil-publico h1 { font-size: clamp(3rem, 12vw, 4.6rem); text-transform: uppercase; letter-spacing: -0.06em; line-height: 0.82; }
.hoja[data-diseno="cartel"] .bloque-publico { border-top: 4px solid var(--acento); padding-top: 12px; }
.hoja[data-diseno="cartel"] .marca-mini { letter-spacing: 0.38em; }

.hoja[data-diseno="ficha"] { width: min(480px, calc(100% - 16px)); border-radius: 8px; }
.hoja[data-diseno="ficha"] .perfil-publico { display: grid; grid-template-columns: 74px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 12px; }
.hoja[data-diseno="ficha"] .marca-mini,
.hoja[data-diseno="ficha"] .fila-iconos { grid-column: 1 / -1; }
.hoja[data-diseno="ficha"] .fila-iconos { justify-content: flex-start; }
.hoja[data-diseno="ficha"] .avatar { width: 74px; height: 74px; border-radius: 50%; }
.hoja[data-diseno="ficha"] .enlace-lista { border-radius: 0; background: transparent; }

.hoja[data-diseno="escaparate"] .cuerpo-publico { display: flex; flex-direction: column; }
.hoja[data-diseno="escaparate"] .bloque-tienda,
.hoja[data-diseno="escaparate"] .entrada-tienda { order: -1; }
.hoja[data-diseno="escaparate"] .producto { grid-template-columns: 1fr; }
.hoja[data-diseno="escaparate"] .foto { width: 100%; height: 190px; border-radius: 16px; }

.hoja[data-diseno="minimal"] { width: min(560px, calc(100% - 28px)); background: transparent; border: 0; box-shadow: none; }
.hoja[data-diseno="minimal"] .enlace-lista,
.hoja[data-diseno="minimal"] .producto { background: transparent; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; }
.hoja[data-diseno="minimal"] .avatar { border-radius: 0; box-shadow: none; }

.dibujo-revista::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 8px; background: var(--acento); }
.dibujo-revista::after { content: ""; position: absolute; left: 20px; right: 8px; top: 10px; height: 3px; background: var(--suave); }
.dibujo-lista::before { content: ""; position: absolute; left: 8px; right: 8px; top: 6px; height: 5px; border-radius: 99px; background: var(--acento); }
.dibujo-lista::after { content: ""; position: absolute; left: 8px; right: 8px; top: 15px; height: 5px; border-radius: 99px; background: var(--suave); }
.dibujo-mosaico::before, .dibujo-mosaico::after { content: ""; position: absolute; width: 38%; height: 14px; background: var(--acento); }
.dibujo-mosaico::before { left: 8%; top: 6px; }
.dibujo-mosaico::after { right: 8%; top: 6px; background: var(--suave); }
.dibujo-lateral { border-left: 5px solid var(--acento); }
.dibujo-cartel::before { content: "A"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--acento); font-weight: 800; }
.dibujo-ficha { border-radius: 99px 6px 6px 99px; }
.dibujo-escaparate::before { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 16px; background: var(--acento); }
.dibujo-minimal { background: transparent; }
.dibujo-minimal::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 1px; background: var(--suave); }

.pasillo { margin-top: 16px; }
.pasillo > h3,
.pasillo-editor > h3 {
  margin: 0 0 8px;
  color: var(--acento);
  font-family: var(--fuente-etiqueta);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pasillo-editor { display: grid; gap: 8px; margin-top: 14px; }
.pasillo-lista,
.lista-editor { display: grid; gap: 10px; }
.filtros-tienda { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.filtro {
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--tinta);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.filtro.activo { background: var(--acento); color: var(--tinta-boton); border-color: transparent; }
.lista-articulos { display: grid; gap: 12px; }
.hoja .foto { width: 112px; height: 112px; }

.foto-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.art-vista { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; }
.art-estado { margin: 0; }
.asesora-chat { display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.burbuja { margin: 0; padding: 10px 12px; border-radius: 14px; line-height: 1.4; }
.burbuja.cliente { background: var(--crema); }
.burbuja.asesora { border: 1px solid var(--linea); }
.campo select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--crema);
  color: var(--tinta);
  font: inherit;
}

.controles-barra { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lista-tonos { display: grid; grid-template-columns: 1fr 1fr; width: min(340px, 88vw); }
.chip-mini { width: 22px; height: 14px; border-radius: 4px; display: inline-block; background: linear-gradient(135deg, var(--chip, #070b14), var(--chip-2, #3ddcff)); }
.chip-pagina { background: conic-gradient(#3ddcff, #ffb020, #3ddc8c, #b388ff, #3ddcff); }
body[data-color] {
  background:
    linear-gradient(var(--acento), var(--acento-2)) top / 100% 3px no-repeat,
    radial-gradient(ellipse at 100% -10%, color-mix(in srgb, var(--acento) 28%, transparent), transparent 46%),
    var(--lienzo);
  color: var(--tinta);
}
.logo-red { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: #1c2838; color: #fff; }
.logo-red svg { width: 22px; height: 22px; }
.enlace-lista .ir { margin-left: auto; color: var(--suave); display: grid; }
.enlace-lista .ir svg { width: 16px; height: 16px; }
[data-logo="whatsapp"] .logo-red { background: #25d366; }
[data-logo="correo"] .logo-red { background: #3b6cff; }
[data-logo="web"] .logo-red { background: #14807a; }
[data-logo="youtube"] .logo-red { background: #ff0033; }
[data-logo="tiktok"] .logo-red, [data-logo="x"] .logo-red { background: #111; }
[data-logo="instagram"] .logo-red { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
[data-logo="discord"] .logo-red { background: #5865f2; }
[data-logo="telegram"] .logo-red { background: #2aabee; }
[data-logo="bybit"] .logo-red, [data-marca="bybit"] .logo-red { background: #f7a600; color: #1a1200; }
[data-logo="binance"] .logo-red, [data-marca="binance"] .logo-red { background: #f3ba2f; color: #1a1200; }
[data-logo="stake"] .logo-red, [data-marca="stake"] .logo-red { background: #1475e1; }
.entrada-tienda { text-align: center; }
.entrada-tienda h2 { margin: 4px 0 12px; }
.vitrina-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.vitrina-mini img, .vitrina-mini span { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--papel); display: grid; place-items: center; font-weight: 700; }
.sala-tienda { width: min(980px, calc(100% - 20px)); margin: 12px auto 40px; }
.sala-tienda[hidden], .panel-carrito[hidden], .ficha-tienda[hidden] { display: none; }
.sala-marco {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 14%, var(--papel)), var(--papel));
  border: 1px solid var(--linea);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.sala-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sala-barra h2 { margin: 0; font-size: 1.6rem; }
.boton-secundario { border: 1px solid var(--linea); background: transparent; color: inherit; border-radius: 999px; padding: 10px 14px; }
.rejilla-tienda { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ficha-tienda { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; padding: 10px; display: grid; gap: 6px; align-content: start; }
.foto-tienda { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--papel); display: grid; place-items: center; font-size: 2rem; }
.foto-tienda img { width: 100%; height: 100%; object-fit: cover; }
.categoria-mini { margin: 0; color: var(--acento); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ficha-tienda h3, .ficha-tienda .descripcion { margin: 0; }
.boton-carrito { width: 100%; }
.panel-carrito { margin-top: 16px; padding: 14px; border-radius: 18px; background: var(--tarjeta); border: 1px solid var(--linea); }
.linea-carrito { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.linea-carrito span { display: block; color: var(--suave); }
.cantidad { display: flex; align-items: center; gap: 8px; }
.cantidad button { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--linea); background: var(--papel); color: inherit; }
.aviso-pedido { color: var(--suave); min-height: 1.2em; }
#cuenta-carrito { margin-left: 6px; }

@media (max-width: 640px) {
  .hoja[data-diseno="mosaico"] .cuerpo-publico,
  .hoja[data-diseno="revista"] .perfil-publico,
  .hoja[data-diseno="ficha"] .perfil-publico { grid-template-columns: 1fr; }
  .hoja[data-diseno="revista"] .avatar,
  .hoja[data-diseno="ficha"] .avatar { grid-row: auto; }
}