:root {
  /* Brandbook v1, verde menta (13-oct-2026). Claro, tinta y un solo acento.
     El menta no se lee como texto sobre blanco: para texto y enlaces, «texto
     verde». Sobre un relleno del acento, el texto va en tinta (--sobre-acento).
     El acento lo puede cambiar cada agencia (RADAR_COLOR, marca blanca). */
  --fondo: #F2F4F3; --panel: #ffffff; --linea: #E1E4E2; --texto: #111318; --tenue: #5B6170;
  --acento: #2EF0A0; --acento-suave: #DCFCEC; --abajo: #DDE0E3; --mal: #B42318; --bien: #00784C;
  --acento-texto: #00784C; --sobre-acento: #111318;
  --t1: #2EF0A0; --t2: #111318; --t3: #00784C; --t4: #7C8494; --t5: #B8C0C8; --t6: #3E4451;
  --sombra: 0 1px 2px rgb(17 19 24 / 5%);
  --f-titulo: "Outfit", -apple-system, sans-serif;
  --f-dato: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
/* Siempre en claro: el modo oscuro automático se quitó el 8-oct a petición de Oriol.
   Sigue disponible solo si se pide a propósito con data-theme="dark". */
:root[data-theme="dark"] {
  --fondo: #0f1217; --panel: #171b22; --linea: #2a303a; --texto: #e7eaf0; --tenue: #8d96a5;
  --acento: #8b95ff; --acento-suave: #3b4380; --abajo: #39404c; --mal: #fb923c; --bien: #4ade80;
  --t1: #8b95ff; --t2: #4fc4be; --t3: #f0b65c; --t4: #e07aa9; --t5: #8d96a5; --t6: #a5b0ff;
  --sombra: none; color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.55 "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font: 700 28px/1.1 var(--f-titulo); margin: 24px 0 8px; letter-spacing: -.02em; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 14px 0 4px; }
code { background: var(--linea); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.envoltorio { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
main { padding-bottom: 64px; }
.tenue { color: var(--tenue); }
.mal { color: var(--mal); }
.bien { color: var(--bien); margin: 0; }
.nota { font-size: 13px; margin: 6px 0 14px; }
.vacio { color: var(--tenue); background: var(--panel); border: 1px dashed var(--linea); border-radius: 10px; padding: 18px; margin: 0; }
.aviso-linea { border-left: 3px solid var(--mal); padding: 6px 12px; background: var(--panel); border-radius: 4px; margin: 8px 0; font-size: 14px; }

/* cabecera */
.cabecera { background: var(--panel); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 2; }
.fila-cabecera { display: flex; align-items: center; gap: 14px; height: 52px; min-width: 0; }
.logo { font-weight: 700; color: var(--texto); letter-spacing: -.02em; }
.miga { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.pestanas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pestanas a { padding: 10px 12px; color: var(--tenue); border-bottom: 2px solid transparent; white-space: nowrap; font-size: 14px; }
.pestanas a:hover { color: var(--texto); text-decoration: none; }
.pestanas a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }

/* sesión */
.sesion { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; min-width: 0; }
.sesion span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sesion button, .entrar button { font: inherit; cursor: pointer; border-radius: 8px; }
.sesion button { font-size: 13px; padding: 4px 10px; border: 1px solid var(--linea); background: transparent; color: var(--texto); }
.entrar { max-width: 380px; margin: 56px auto; background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sombra); }
.entrar h1 { margin: 0; }
.entrar label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.entrar input { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); color: var(--texto); }
.entrar input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.entrar button { padding: 10px; border: 0; background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
@media (max-width: 520px) { .sesion span { display: none; } }

/* bloques */
.bloque { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 18px; margin: 16px 0; box-shadow: var(--sombra); }
.titulo-bloque { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.titulo-bloque h2 { margin: 0; }
.chip { display: inline-block; font-size: 12px; padding: 1px 8px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tenue); font-weight: 500; }
.chip-acento { border-color: var(--acento); color: var(--acento); }
.lista { margin: 0; padding-left: 18px; }
.lista li { margin: 4px 0; }

/* cifras */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0 6px; }
.cifra { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; color: var(--texto); box-shadow: var(--sombra); }
.cifra.enlace:hover { border-color: var(--acento); text-decoration: none; }
.cifra.aviso .valor { color: var(--mal); }
.cifra .valor { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cifra .nombre { font-weight: 600; font-size: 14px; }
.cifra .detalle { color: var(--tenue); font-size: 12px; margin-top: 2px; }

/* inicio */
.rejilla-marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tarjeta { border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; color: var(--texto); }
.tarjeta.enlace:hover { border-color: var(--acento); text-decoration: none; }

/* tablas */
.tabla-envoltorio { overflow-x: auto; margin: 0 -4px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 12px; color: var(--tenue); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr.propia td { background: color-mix(in srgb, var(--acento) 6%, transparent); }
.tabla tr.destacada-fila td { background: color-mix(in srgb, var(--acento) 8%, transparent); }
main > .tabla-envoltorio { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 4px 10px; margin: 0; }

/* piezas */
.rejilla-piezas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pieza { display: grid; grid-template-columns: 96px 1fr; gap: 12px; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; background: var(--panel); min-width: 0; }
.portada { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--linea); }
.portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sin-portada { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--tenue); }
.veces { position: absolute; left: 6px; bottom: 6px; z-index: 2; background: var(--acento); color: var(--sobre-acento); font-weight: 700; font-size: 12px; padding: 1px 7px; border-radius: 999px; }
.pieza-texto { min-width: 0; font-size: 13px; }
.pieza-texto p { margin: 4px 0; }
.pieza-meta { display: flex; flex-direction: column; }
.pieza-meta a { font-weight: 600; }
.cifra-pieza { font-size: 14px; }
.caption { color: var(--tenue); overflow-wrap: anywhere; }
.hook { font-style: italic; }
.pie-pieza { font-size: 12px; }

/* filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.filtros select { font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linea); background: var(--panel); color: var(--texto); max-width: 100%; }

/* ficha de cuenta */
.titulo-cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.titulo-cuenta h1 { margin: 0 6px 0 0; overflow-wrap: anywhere; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.barra-apilada { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--linea); }
.tramo { display: block; height: 100%; }
.t1 { background: var(--t1); } .t2 { background: var(--t2); } .t3 { background: var(--t3); }
.t4 { background: var(--t4); } .t5 { background: var(--t5); } .t6 { background: var(--t6); }
.leyenda { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.leyenda i, .leyenda-inline i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.leyenda-inline i.destacada { background: var(--acento); }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 120px; align-items: end; }
.dia { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font-size: 12px; }
.columna { width: 100%; max-width: 32px; background: var(--acento-suave); border-radius: 4px 4px 0 0; }
.grafica-envoltorio { overflow-x: auto; }
.grafica { width: 100%; min-width: 480px; height: auto; display: block; }
.grafica .eje { stroke: var(--tenue); stroke-width: 1; }
.grafica .guia { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 3 3; }
.grafica .etq { fill: var(--tenue); font-size: 10px; }
.grafica rect.destacada { fill: var(--acento); }
.grafica rect.arriba { fill: var(--acento-suave); }
.grafica rect.abajo { fill: var(--abajo); }
.grafica a:hover rect { opacity: .75; }
details { margin-top: 10px; }
summary { cursor: pointer; color: var(--acento); font-size: 14px; }

@media (max-width: 720px) {
  .dos-columnas { grid-template-columns: 1fr; gap: 20px; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifra .valor { font-size: 22px; }
  .rejilla-piezas { grid-template-columns: 1fr; }
  .bloque { padding: 14px; border-radius: 10px; }
  h1 { font-size: 20px; }
}

/* comparativa */
.celda-barra { min-width: 180px; }
.barra-apilada.fina { height: 8px; margin: 6px 0 4px; }
.mini { font-size: 12px; }
.comparar { display: flex; flex-direction: column; gap: 10px; }
.fila-comparar { display: grid; grid-template-columns: minmax(120px, 180px) 1fr auto; grid-template-areas: "quien barra cuanto" ". detalle detalle"; gap: 2px 12px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.fila-comparar.propia { background: color-mix(in srgb, var(--acento) 8%, transparent); }
.fila-comparar .quien { grid-area: quien; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-comparar .barra-sola { grid-area: barra; height: 10px; background: var(--linea); border-radius: 999px; overflow: hidden; }
.fila-comparar .barra-sola span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.fila-comparar.propia .barra-sola span { background: var(--t2); }
.fila-comparar .cuanto { grid-area: cuanto; font-variant-numeric: tabular-nums; text-align: right; }
.fila-comparar .detalle-comparar { grid-area: detalle; font-size: 12px; }
.fila-comparar .sin-base-comparar { grid-column: 2 / 4; font-size: 13px; }
@media (max-width: 520px) {
  .fila-comparar { grid-template-columns: 1fr auto; grid-template-areas: "quien cuanto" "barra barra" "detalle detalle"; }
  .fila-comparar .sin-base-comparar { grid-column: 1 / -1; }
}

/* página de pieza */
.ficha-pieza { display: grid; grid-template-columns: 180px 1fr; gap: 18px; margin: 16px 0; align-items: start; }
.portada.grande { width: 180px; }
.cifras.compactas { margin: 0 0 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.aviso-bien { border-left: 3px solid var(--acento); padding: 6px 12px; background: var(--panel); border-radius: 4px; font-size: 14px; margin: 8px 0; }
.guion { white-space: pre-wrap; font-size: 15px; line-height: 1.65; max-width: 72ch; overflow-wrap: anywhere; }
.caption-largo { font-size: 14px; color: var(--tenue); }
.hook-grande { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.boton-copiar { font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--acento-texto); background: transparent; color: var(--acento-texto); cursor: pointer; }
.lista-slides { margin: 0; padding-left: 20px; }
.lista-slides li { margin: 6px 0; }
@media (max-width: 620px) {
  .ficha-pieza { grid-template-columns: 1fr; }
  .portada.grande { width: 140px; }
}

/* directorio */
.enlace-cabecera { font-size: 14px; color: var(--tenue); }
.fondo-panel { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 4px 10px; }
.anadir { display: flex; gap: 4px; flex-wrap: wrap; }
.anadir select, .anadir button { font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--linea); background: var(--panel); color: var(--texto); }
.anadir button { border-color: var(--acento); color: var(--acento); cursor: pointer; }

/* onboarding */
.pasos { display: flex; gap: 8px; list-style: none; padding: 0; margin: 12px 0; flex-wrap: wrap; counter-reset: paso; }
.pasos li { counter-increment: paso; border: 1px solid var(--linea); border-radius: 999px; padding: 4px 14px 4px 8px; background: var(--panel); font-size: 14px; }
.pasos li::before { content: counter(paso); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--linea); margin-right: 6px; font-size: 12px; }
.pasos li.hecho::before { content: "✓"; background: var(--acento); color: var(--sobre-acento); }
.formulario { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
.formulario label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.formulario textarea, .formulario input, .formulario select, .anadir-cuentas input, .anadir-cuentas select { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); color: var(--texto); }
.formulario fieldset { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.formulario legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.formulario .opcion { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulario button, .anadir-cuentas button { font: inherit; font-weight: 600; padding: 9px 16px; border: 0; border-radius: 8px; background: var(--acento); color: var(--sobre-acento); cursor: pointer; align-self: flex-start; }
.anadir-cuentas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.anadir-cuentas input { flex: 1; min-width: 180px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
@media (max-width: 620px) { .dos-campos { grid-template-columns: 1fr; } }
.enlace-bloque { display: block; margin-top: 16px; }
.logo img { height: 28px; display: block; }

/* referentes por sector */
.rejilla-sectores { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sector { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 14px; color: var(--texto); box-shadow: var(--sombra); }
.sector:hover { border-color: var(--acento); text-decoration: none; }
.sector-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sector-plat { display: flex; flex-direction: column; gap: 2px; }
.sector-cuenta { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.sector-cuenta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miga-sector { margin: 20px 0 0; font-size: 14px; }

/* ------------------------------------------------------------------ disposición
   Menú lateral fijo a la izquierda y contenido a la derecha (estilo Holded).
   En el móvil el menú se esconde y se abre con el botón de la barra superior. */
.menu-interruptor { position: absolute; opacity: 0; pointer-events: none; }
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px;
  background: var(--panel); border-right: 1px solid var(--linea); padding: 16px 12px; overflow-y: auto; z-index: 5; }
.lateral-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 10px; }
.lateral .logo { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--texto); }
.lateral .logo:hover { text-decoration: none; }
.cerrar-menu { display: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--tenue); }
.selector-marca { display: flex; flex-direction: column; gap: 0; padding: 10px 12px; border: 1px solid var(--linea);
  border-radius: 10px; color: var(--texto); margin-bottom: 8px; }
.selector-marca:hover { border-color: var(--acento); text-decoration: none; }
.selector-marca b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--texto);
  font-size: 14px; font-weight: 500; }
.menu a:hover { background: var(--fondo); text-decoration: none; }
.menu a[aria-current="page"] { background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--acento); font-weight: 600; }
.menu-seccion { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue);
  padding: 14px 10px 4px; }
.icono { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.insignia { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--acento); color: var(--sobre-acento);
  border-radius: 999px; padding: 1px 7px; }
.lateral-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--linea); padding: 12px 8px 0; }
.lateral-pie span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-pie button { font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--linea); border-radius: 8px;
  background: transparent; color: var(--texto); cursor: pointer; }
.contenido { min-width: 0; }
.contenido main { padding-top: 8px; }
.barra-movil { display: none; }
.velo { display: none; }
main.solo { padding-top: 24px; }

@media (max-width: 860px) {
  .app { display: block; }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: 0 0 40px rgb(0 0 0 / 20%); }
  .menu-interruptor:checked ~ .app .lateral { transform: none; }
  .menu-interruptor:checked ~ .app .velo { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / 35%); z-index: 4; }
  .cerrar-menu { display: block; }
  .barra-movil { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 3; padding: 10px 16px;
    background: var(--panel); border-bottom: 1px solid var(--linea); }
  .barra-movil-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .abrir-menu { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 28px; height: 28px; cursor: pointer; }
  .abrir-menu span { display: block; height: 2px; background: var(--texto); border-radius: 2px; }
}

/* ------------------------------------------------------------- primeros pasos */
.asistente { max-width: 760px; margin: 0 auto; }
.progreso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; padding: 0; margin: 20px 0 8px; }
.progreso li a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--tenue);
  font-size: 13px; font-weight: 600; border: 1px solid var(--linea); background: var(--panel); }
.progreso li a:hover { text-decoration: none; border-color: var(--acento); }
.progreso .num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--linea);
  color: var(--texto); font-size: 12px; flex: none; }
.progreso li.hecho .num { background: var(--acento); color: var(--sobre-acento); }
.progreso li.actual a { color: var(--texto); border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.paso h1 { font-size: 28px; margin: 18px 0 4px; }
.entradilla { font-size: 16px; color: var(--tenue); margin: 0 0 18px; }
.paso .formulario { max-width: none; }
.tarjetas-opcion { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px !important; }
.tarjetas-opcion.compactas { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.tarjeta-opcion { position: relative; flex-direction: row !important; font-weight: 500 !important; }
.tarjeta-opcion input { position: absolute; opacity: 0; }
.tarjeta-opcion span { display: block; width: 100%; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: 10px;
  background: var(--panel); cursor: pointer; }
.tarjeta-opcion input:checked + span { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent);
  color: var(--acento); font-weight: 600; }
.tarjeta-opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.acciones { display: flex; justify-content: flex-end; margin-top: 18px; }
.boton, .acciones button { display: inline-block; font: inherit; font-weight: 600; padding: 10px 20px; border: 0; border-radius: 10px;
  background: var(--acento); color: var(--sobre-acento); cursor: pointer; }
.boton:hover { text-decoration: none; opacity: .92; }
.boton.secundario { background: transparent; color: var(--acento-texto); border: 1px solid var(--acento-texto); padding: 7px 14px; font-size: 14px; }
.ayuda-campo { font-size: 13px; font-weight: 400; color: var(--tenue); }
.redes { display: grid; gap: 10px; }
.red { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--linea);
  border-radius: 12px; background: var(--panel); }
.red b { width: 110px; }
.red form { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.red input { flex: 1; font: inherit; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); color: var(--texto); }
.red button { font: inherit; font-weight: 600; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--acento); color: var(--sobre-acento); cursor: pointer; }
.red.conectada { border-color: color-mix(in srgb, var(--acento) 40%, var(--linea)); }
.red.conectada b::after { content: " ✓"; color: var(--acento); }
.categoria { border: 1px solid var(--linea); border-radius: 12px; background: var(--panel); padding: 14px 16px; margin: 12px 0; }
.categoria.completa { border-color: color-mix(in srgb, var(--acento) 45%, var(--linea)); }
.categoria-cabeza { display: flex; justify-content: space-between; align-items: center; }
.categoria h2 { margin: 0; font-size: 17px; }
.categoria > p { margin: 2px 0 8px; font-size: 14px; }
.contador { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: var(--linea); }
.contador.ok { background: var(--acento); color: var(--sobre-acento); }
.sugerencias { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; border-top: 1px dashed var(--linea); padding-top: 8px; }
.sugerencia { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.sugerencia button { font: inherit; font-size: 12px; padding: 3px 10px; border: 1px solid var(--acento); border-radius: 999px;
  background: transparent; color: var(--acento); cursor: pointer; }
.ayuda summary { font-size: 14px; }
.objetivo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.objetivo select { flex: 2; min-width: 220px; }
.objetivo input[type=number] { width: 110px; }
.en-linea { flex-direction: row !important; align-items: center; gap: 6px !important; font-weight: 400 !important; }
.formulario fieldset input[name=pilares] { flex: 1 1 140px; }

/* --------------------------------------------------------------- estrategia */
.titulo-pagina { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.titulo-pagina h1 { margin: 0; }
.saludo { margin-top: 18px; }
.guia { border-left: 4px solid var(--acento); }
.lista-guia { margin: 0; padding-left: 20px; }
.lista-guia li { margin: 6px 0; font-size: 15px; }
.cifra .de { font-size: 16px; color: var(--tenue); font-weight: 600; }
.dos-columnas-plan { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.dos-columnas-plan .bloque { margin: 0; }
.plan { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; margin: 0; }
.plan dt { font-size: 13px; color: var(--tenue); font-weight: 600; padding-top: 2px; }
.plan dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia-plan { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border-radius: 10px;
  border: 1px solid var(--linea); font-size: 13px; }
.dia-plan.previsto { border-color: var(--acento); }
.dia-plan.hecho { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.dia-nombre { text-transform: capitalize; font-weight: 600; }
.dia-marca { height: 16px; font-weight: 700; }
.leyenda-semana { margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--acento); }
.muestra.hecho { background: var(--acento); margin-left: 8px; }
@media (max-width: 860px) {
  .dos-columnas-plan { grid-template-columns: 1fr; }
  .progreso { grid-template-columns: repeat(2, 1fr); }
}
.cabecera-sola { padding: 18px 16px 0; text-align: center; }
.cabecera-sola .logo { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.cabecera-sola .logo img { height: 32px; display: inline-block; }

.boton-pequeno { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linea);
  background: transparent; color: var(--texto); cursor: pointer; }
.boton-pequeno.peligro:hover { border-color: var(--mal); color: var(--mal); }
.lista-quitadas { list-style: none; padding: 0; margin: 0; }
.lista-quitadas li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linea); }

/* verificación en dos pasos */
.enlace-seguridad { margin-top: auto; padding: 8px 10px; color: var(--tenue); }
.enlace-seguridad + .lateral-pie { margin-top: 0; }
input.codigo { font-size: 22px !important; letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
.pasos-2fa { padding-left: 20px; display: flex; flex-direction: column; gap: 18px; }
.pasos-2fa li { line-height: 1.6; }
.qr { margin: 10px 0; }
.qr svg { width: 220px; height: 220px; max-width: 100%; display: block; border: 1px solid var(--linea); border-radius: 10px; }
.clave { font-size: 14px; letter-spacing: .05em; word-break: break-all; }
.fila-codigo { display: flex; gap: 8px; max-width: 360px; }
.fila-codigo input { flex: 1; }
.fila-codigo button { font: inherit; font-weight: 600; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--acento); color: var(--sobre-acento); cursor: pointer; }
.codigos-recuperacion { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 8px; margin: 12px 0; }
.codigos-recuperacion code { font-size: 16px; padding: 8px 12px; text-align: center; }
.bio { margin: 0 0 10px; font-size: 14px; }
.detalle.bien { color: var(--bien); }
.detalle.mal { color: var(--mal); }

/* biblioteca de hooks */
.pestanas-biblioteca { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linea); margin: 14px 0 12px; }
.pestanas-biblioteca a { padding: 8px 12px; color: var(--tenue); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.pestanas-biblioteca a[aria-current] { color: var(--acento); border-bottom-color: var(--acento); }
.pestanas-biblioteca a:hover { text-decoration: none; color: var(--texto); }
.pestanas-biblioteca .contador { font-size: 12px; color: var(--tenue); }
.filtros .buscar { font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linea); background: var(--panel); color: var(--texto); min-width: 180px; }
.lista-hooks { display: flex; flex-direction: column; gap: 12px; }
.hook-tarjeta { border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; background: var(--panel); scroll-margin-top: 16px; }
.hook-tarjeta.guardado { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento); }
.hook-tarjeta.descartado { opacity: .6; }
.hook-texto { font-size: 17px; font-weight: 600; line-height: 1.45; margin: 0 0 6px; overflow-wrap: anywhere; }
.hook-datos { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; margin: 6px 0; }
.hook-datos .bien { color: var(--acento); }
.hook-tarjeta .etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.hook-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.marcar-hook { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.marcar-hook input[name="nota"] { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); width: 200px; max-width: 100%; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 20px 0; }
@media (max-width: 620px) {
  .marcar-hook { margin-left: 0; width: 100%; }
  .marcar-hook input[name="nota"] { flex: 1; }
}

/* guía */
.indice-guia { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.indice-guia a { font-size: 13px; padding: 4px 10px; border: 1px solid var(--linea); border-radius: 999px; color: var(--texto); }
.indice-guia a:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.guia-seccion { scroll-margin-top: 16px; }
.guia-seccion h3 { font-size: 15px; margin: 18px 0 6px; }
.guia-seccion p, .guia-seccion li { max-width: 78ch; line-height: 1.6; }
.etiqueta-certeza { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin: 6px 0; vertical-align: middle; }
.etiqueta-certeza.medido { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); }
.etiqueta-certeza.no-medido { background: color-mix(in srgb, var(--mal) 12%, transparent); color: var(--mal); }
.etiqueta-certeza.metodo { background: var(--linea); color: var(--tenue); }
.plantillas code { white-space: normal; font-size: 14px; }
.lista-comprobar li { margin: 6px 0; }

/* cuenta conectada */
.conexion h3 { font-size: 15px; margin: 20px 0 8px; }
.conexion h4 { font-size: 13px; margin: 0 0 6px; color: var(--tenue); font-weight: 600; }
.acciones-conexion { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.serie { display: flex; align-items: flex-end; gap: 2px; height: 90px; border-bottom: 1px solid var(--linea); }
.barra-dia { flex: 1; background: var(--acento-suave); border-radius: 2px 2px 0 0; min-width: 3px; }
.barra-dia:hover { background: var(--acento); }
.horas { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 110px; align-items: end; }
.hora { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font-size: 10px; }
.hora .columna { width: 100%; max-width: 22px; }
.hora .columna.pico { background: var(--acento); }
.audiencia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.barras-audiencia { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.barras-audiencia li { display: grid; grid-template-columns: minmax(70px, 1.2fr) 2fr auto; gap: 8px; align-items: center; }
.etq-aud { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pista { height: 8px; background: var(--linea); border-radius: 999px; overflow: hidden; }
.pista span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.formulario textarea { font: inherit; font-family: ui-monospace, Menlo, monospace; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linea); background: var(--panel); color: var(--texto); width: 100%; box-sizing: border-box; }
@media (max-width: 520px) { .hora span.tenue { font-size: 8px; } }

/* calendario */
.cal-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 12px; }
.cal-mes { display: flex; align-items: center; gap: 10px; }
.cal-mes h2 { margin: 0; font-size: 18px; min-width: 150px; text-align: center; }
.cal-cuenta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.cal-cuenta i, .cal-pub i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; flex: none; }
.estado-idea i { background: #b8bfcc; }
.estado-borrador i { background: #e0a23a; }
.estado-lista i { background: var(--acento); }
.estado-publicada i { background: var(--bien); }
.suelta i { background: transparent; border: 1.5px solid var(--bien); }
.cal { border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; background: var(--panel); }
.cal-cabecera, .cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cabecera span { padding: 8px; font-size: 12px; color: var(--tenue); text-transform: capitalize; border-bottom: 1px solid var(--linea); }
.cal-dia { min-height: 108px; padding: 6px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-semana .cal-dia:nth-child(7) { border-right: 0; }
.cal-semana:last-child .cal-dia { border-bottom: 0; }
.cal-dia.fuera { background: var(--fondo); }
.cal-dia.fuera .cal-num { opacity: .45; }
.cal-dia.toca { background-image: linear-gradient(var(--acento-suave), var(--acento-suave)); background-size: 100% 3px; background-repeat: no-repeat; }
.cal-dia.hoy .cal-num a, .cal-dia.hoy .cal-num > span:last-child { background: var(--acento); color: var(--sobre-acento); border-radius: 999px; padding: 0 7px; }
.cal-num { display: flex; justify-content: flex-end; font-size: 13px; font-weight: 600; }
.cal-num a { color: var(--texto); }
.cal-num a:hover { color: var(--acento); text-decoration: none; }
.cal-num .mas { margin-left: 4px; color: var(--acento); opacity: 0; }
.cal-dia:hover .cal-num .mas { opacity: 1; }
.cal-nombre-dia { display: none; }
.cal-pub { display: flex; align-items: center; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; background: var(--fondo); color: var(--texto); min-width: 0; }
.cal-pub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-pub:hover { text-decoration: none; outline: 1px solid var(--acento); }
.cal-pub.estado-publicada, .cal-pub.suelta { color: var(--tenue); }
.cal-toca { font-size: 11px; color: var(--acento); margin-top: auto; }
.cal-dia.pasado .cal-toca { color: var(--mal); }
.cal-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-start; margin-top: 10px; }
.cal-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-marca-toca { display: inline-block; width: 16px; height: 3px; background: var(--acento-suave); vertical-align: middle; margin-right: 4px; }
@media (max-width: 760px) {
  .cal-cabecera { display: none; }
  .cal-semana { grid-template-columns: 1fr; }
  .cal-dia { min-height: 0; border-right: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cal-dia:not(.con-algo):not(.toca), .cal-dia.fuera { display: none; }
  .cal-num { justify-content: flex-start; width: 100%; }
  .cal-nombre-dia { display: inline; text-transform: capitalize; margin-right: 6px; font-weight: 500; color: var(--tenue); }
  .cal-pub { width: 100%; font-size: 13px; padding: 6px 8px; }
}

/* una publicación */
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.formulario-publicacion .bloque { display: flex; flex-direction: column; gap: 12px; }
.formulario-publicacion textarea { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linea); background: var(--panel); color: var(--texto); width: 100%; box-sizing: border-box; resize: vertical; }
.acciones-publicar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.estado-chip.estado-publicada { border-color: var(--bien); color: var(--bien); }
.estado-chip.estado-lista { border-color: var(--acento); color: var(--acento); }
.estado-chip.estado-borrador { border-color: #e0a23a; color: #b07613; }
.hooks-guardados ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.enlace-boton { font: inherit; font-size: 14px; background: none; border: 0; padding: 0; color: var(--acento); cursor: pointer; text-align: left; }
.borrar-publicacion { margin: 10px 0 30px; }

/* Esta semana (paso 2.1): la primera pregunta del resumen, «¿qué publico?». */
.esta-semana { border-left: 4px solid var(--acento); }
.esta-semana .semana-linea { font-size: 16px; margin: 0 0 8px; }
.esta-semana .semana-idea { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 10px; }
.esta-semana .semana-idea p { margin: 0; }
.pieza .hook-acciones { margin: 8px 0 4px; }

/* Cómo medimos (paso 2.2): el ejemplo de cuenta pequeña contra cuenta grande. */
.metodo-ejemplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 10px 0 12px; }
.metodo-ejemplo .cifra { gap: 6px; }
.metodo-ejemplo .detalle { font-size: 14px; color: var(--texto); }

/* Memoria de marca (paso 2.3). */
.lista-estado { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lista-estado li { color: var(--tenue); }
.lista-estado li.hecho { color: var(--texto); }
.lista-estado .marca-estado { display: inline-block; width: 18px; color: var(--acento); font-weight: 700; }
.formulario.bloque h2 { margin-top: 18px; }
.formulario.bloque h2:first-of-type { margin-top: 0; }
.para-ia { white-space: pre-wrap; background: var(--fondo); border: 1px solid var(--linea); border-radius: 8px; padding: 12px; font-size: 13px; }
.formulario.bloque textarea { font-family: inherit; font-size: 14px; resize: vertical; }

/* Encuesta de una pregunta (paso 2.7). */
.encuesta p { margin: 0 0 8px; }
.encuesta input[name="comentario"] { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); color: var(--texto); }

/* Patio de guiones (paso 2.4). */
.patio .parte-guion { display: block; padding: 10px 0; border-top: 1px solid var(--linea); line-height: 1.6; }
.patio .parte-guion input { margin-right: 6px; }
.patio .chip.fuente { font-size: 11px; cursor: help; margin-left: 4px; }

/* Prueba piloto apartada (12-oct): plegada debajo de las marcas propias. */
.demos summary { cursor: pointer; }
.demos .bloque { box-shadow: none; }

/* Identidad C: titulares en Archivo, los datos en mono y el logo del bote. */
h2 { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.01em; }
.cifra .valor, .veces, .cifra-pieza b, .semana-linea b, .grafica .etq, code { font-family: var(--f-dato); }
.veces { font-weight: 700; }
.lateral .logo, .cabecera-sola .logo { display: inline-flex; align-items: center; gap: 8px;
  font: 900 21px/1 var(--f-titulo); letter-spacing: -.04em; color: var(--texto); }
.logo-bote { width: 26px; height: 26px; flex: none; color: var(--texto); }
.boton, button[type="submit"]:not(.boton-pequeno):not(.peligro) { font-weight: 600; }

/* Panorama: rankings y barras horizontales */
.titulo-bloque { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.titulo-bloque h2 { margin: 0; }
.titulo-bloque .filtros { margin: 0; }
.ranking { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 12px; }
.ranking li { display: flex; gap: 12px; align-items: flex-start; }
.mini-portada { flex: 0 0 52px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--linea); }
.mini-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ranking-texto { flex: 1; min-width: 0; }
.ranking-texto p { margin: 2px 0; }
.ranking-texto .caption { font-size: 13px; color: var(--tenue); overflow-wrap: anywhere; }
.ranking-texto .caption a { color: inherit; }
.ranking-barra { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ranking-barra span { display: block; height: 12px; min-width: 4px; border-radius: 999px; background: var(--acento); }
.ranking-barra b { font-family: var(--f-dato, monospace); font-size: 14px; white-space: nowrap; }
.ranking-barra.fina span { height: 8px; max-width: 160px; }
.barras { display: grid; gap: 10px; }
.barras-fila { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; gap: 12px; align-items: center; }
.barras-nombre { font-weight: 600; font-size: 14px; }
@media (max-width: 640px) { .barras-fila { grid-template-columns: 1fr; gap: 2px; } }
.semanas { display: flex; flex-wrap: wrap; gap: 6px; }
.semana { width: 56px; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--linea); text-align: center; background: var(--panel); }
.semana b { display: block; font-family: var(--f-dato, monospace); font-size: 18px; }
.semana span { font-size: 11px; color: var(--tenue); }
.semana.cumple { background: var(--acento-suave); border-color: var(--acento); }
.red label.mini { display: block; margin-top: 6px; }
.red select, .red input { width: 100%; }
.plan-redes input[type=number] { width: 72px; }
form .redes .red { display: grid; grid-template-columns: 100px minmax(140px, 1fr) 1fr 1fr; gap: 10px 14px; align-items: end; }
form .redes .red > b { align-self: center; }
form .redes .red label.mini { margin: 0; }
@media (max-width: 760px) { form .redes .red { grid-template-columns: 1fr; } }
.presupuesto-barra { position: relative; height: 16px; border-radius: 999px; background: var(--linea); margin: 4px 0 12px; }
.presupuesto-barra .usado { display: block; height: 100%; border-radius: 999px; background: var(--acento); }
.presupuesto-barra .marca-limite { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--texto); }
.cifra-grande { font-family: var(--f-dato, monospace); font-size: 24px; }
.mapa-calor { border-collapse: separate; border-spacing: 3px; font-size: 12px; margin: 6px 0 14px; }
.mapa-calor th { font-weight: 600; color: var(--tenue); padding: 2px 6px; text-align: center; white-space: nowrap; }
.mapa-calor tbody th { text-align: right; }
.mapa-calor td { width: 54px; height: 32px; text-align: center; border-radius: 6px; font-family: var(--f-dato, monospace);
  background: color-mix(in srgb, var(--acento) var(--fuerza, 0%), var(--panel)); border: 1px solid var(--linea); }
.mapa-calor td.pocas { color: var(--tenue); }
.mapa-calor td.nada { background: transparent; border-style: dashed; }
.ritmo-red + .ritmo-red { margin-top: 14px; }
.tabla td.calor { background: color-mix(in srgb, var(--acento) calc(var(--fuerza, 0%) * 0.55), transparent); }
.grafica circle { fill: color-mix(in srgb, var(--acento) 70%, transparent); stroke: var(--panel); stroke-width: 1.5; }
.grafica circle.propia { fill: var(--texto); }
.grafica .nombre-punto { font-size: 9px; }

/* Logo del panel: el símbolo y el nombre del despliegue (marca blanca). */
.logo-simbolo { width: 26px; height: 26px; fill: var(--texto); flex: 0 0 auto; }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 700 21px/1 var(--f-titulo); letter-spacing: -.02em; color: var(--texto); }
.etiqueta-paso { font: 500 12px var(--f-dato); text-transform: uppercase; letter-spacing: .12em; color: var(--acento-texto); margin: 24px 0 -12px; }
/* Panel interno */
.columnas-semana { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.columnas-semana div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.columnas-semana i { width: 100%; background: var(--acento); border-radius: 5px 5px 0 0; }
.columnas-semana b { font: 600 12px var(--f-dato); } .columnas-semana span { font-size: 11px; color: var(--tenue); }
.fila-plan { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; font-size: 13px; }
.fila-plan label { display: flex; flex-direction: column; gap: 4px; color: var(--tenue); }
.fila-plan .crece { flex: 1; min-width: 200px; }
.fila-plan input, .fila-plan select { font: inherit; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; }
.rejilla-demo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rejilla-demo .ancha { grid-column: span 3; } .rejilla-demo .acciones { grid-column: 1 / -1; }
.enlace-invitacion { word-break: break-all; }
@media (max-width: 760px) { .rejilla-demo { grid-template-columns: 1fr; } .rejilla-demo .ancha { grid-column: auto; } }

/* Correos: vista previa del semanal y del aviso */
.dos-correos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.vista-correo { width: 100%; height: 560px; border: 1px solid var(--borde, #e3e6e4); border-radius: 12px; background: #F2F4F3; margin: 8px 0 12px; }

/* Duelo: tú contra un competidor */
.duelo-cabecera { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 16px; }
.duelo-cabecera .derecha { text-align: right; }
.marcador-duelo { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px; font: 700 34px/1 var(--f-titulo); }
.marcador-duelo small { flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--tenue); }
.marcador-duelo .gana { color: var(--bien); }
.marcador-duelo .pierde { color: var(--mal); }
.chip-gana { border-color: var(--acento); background: var(--acento-suave); color: var(--bien); }
.chip-pierde { border-color: #F3B8B2; background: #FEF1F0; color: var(--mal); }
.lista-copiar { display: grid; gap: 12px; }
.caja.copiar { display: grid; grid-template-columns: 72px 1fr; gap: 14px; text-decoration: none; color: inherit; align-items: start; }
.caja.copiar img { width: 72px; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 8px; background: #22252C; }
.caja.copiar p { margin: 4px 0; }
.caja.copiar .ratio { font-family: var(--f-dato); }
@media (max-width: 640px) { .duelo-cabecera { grid-template-columns: 1fr 1fr; } .marcador-duelo { grid-column: 1 / -1; order: 3; } }

/* Tarjeta 9:16 para compartir */
.tarjeta-compartir { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 28px; align-items: start; }
.tarjeta-compartir canvas { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 8px 30px rgb(17 19 24 / 18%); }
@media (max-width: 640px) { .tarjeta-compartir { grid-template-columns: 1fr; } .tarjeta-compartir canvas { max-width: 320px; } }

/* Prueba gratis */
.aviso-prueba { margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; background: var(--acento-suave); color: var(--acento-texto); font-weight: 600; }
.planes-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ejemplo-metodo { display: block; font-size: 12px; color: var(--tenue); font-weight: 400; max-width: 34ch; }

/* Inicio: lo que pasa en tu mercado y tus cuentas */
.semana-mercado { font-size: 16px; margin: 0 0 12px; }
.titulo-suelto { margin: 4px 0 10px; }
.tus-cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.caja.tu-cuenta { text-decoration: none; color: inherit; display: block; }
.caja.tu-cuenta p { margin: 2px 0; }
.tu-cifra { font: 700 26px/1.1 var(--f-titulo); }
/* Sin los primeros pasos hechos, el resto del menú se ve apagado (y lleva a acabarlos) */
.menu.sin-pasos a[data-bloq] { opacity: .45; }
.menu.sin-pasos a[data-bloq]::after { content: "🔒"; font-size: 11px; margin-left: auto; }

/* Ajustes */
.enlace-ajustes { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--texto); font-weight: 500; }
.enlace-ajustes:hover, .enlace-ajustes.activo { background: var(--acento-suave); text-decoration: none; }
.barra-uso { display: inline-block; width: 140px; height: 8px; border-radius: 999px; background: var(--abajo); overflow: hidden; vertical-align: middle; }
.barra-uso span { display: block; height: 100%; background: var(--acento); }
.barra-uso span.lleno { background: var(--mal); }
.casilla { display: flex; align-items: center; gap: 8px; }
.formulario label.casilla { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
.formulario label.casilla input { width: auto; margin: 0; }

/* Por qué ha funcionado */
.porque-linea { font-size: 13px; margin: 4px 0; color: var(--acento-texto); }
.porque-aviso { color: #9A5B00; }
.porque-info { color: var(--tenue); }
.porque { margin: 14px 0; padding: 14px 16px; border-radius: 12px; background: var(--acento-suave); }
.porque h2 { font-size: 16px; margin: 0 0 8px; }
.porque ul { margin: 0; padding-left: 18px; }
.porque li { margin: 4px 0; }

/* Comparativa por preguntas */
.pestanas-red { display: flex; gap: 8px; margin: 0 0 14px; }
.pestanas-red a { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--linea); background: var(--panel); color: var(--texto); font-weight: 600; }
.pestanas-red a[aria-current] { background: var(--texto); color: var(--panel); border-color: var(--texto); text-decoration: none; }
.barras-comparar { display: grid; gap: 8px; }
.barra-fila { display: grid; grid-template-columns: minmax(120px, 210px) 1fr minmax(70px, auto); gap: 12px; align-items: center; }
.barra-fila .quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-fila .barra-sola { height: 14px; }
.barra-fila.propia .barra-sola span { background: var(--texto); }
.barra-fila .cuanto { font-family: var(--f-dato); text-align: right; white-space: nowrap; }
.frase-grande { font: 600 19px/1.4 var(--f-titulo); margin: 0 0 16px; }
.grupos-ritmo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; }
.grupo-ritmo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.grupo-ritmo .columna { width: 70%; max-width: 120px; height: 180px; display: flex; align-items: flex-end; background: var(--fondo); border-radius: 10px; overflow: hidden; }
.grupo-ritmo .columna span { display: block; width: 100%; background: var(--acento); border-radius: 10px 10px 0 0; }
.grupo-ritmo b { font: 700 22px var(--f-dato); }
.todos-los-datos summary { cursor: pointer; font-weight: 600; }
@media (max-width: 640px) { .barra-fila { grid-template-columns: 110px 1fr auto; } .grupos-ritmo { gap: 8px; } }
.barra-fila .barra-sola { background: var(--linea); border-radius: 999px; overflow: hidden; }
.barra-fila .barra-sola span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }

/* Plan de acción */
.plan-fase.reunion { border-left: 4px solid var(--acento); }
.plan-avance { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tenue); }
.tabla.plan td { vertical-align: top; }
.plan-codigo { font-family: var(--f-dato); color: var(--tenue); white-space: nowrap; width: 46px; }
.plan-estado { width: 150px; }
.plan-estado select { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--linea); background: var(--panel); }
.estado-hecho .plan-estado select { background: var(--acento-suave); border-color: var(--acento); }
.estado-en_proceso .plan-estado select { background: #FFF6E0; border-color: #F1C76B; }
.estado-hecho b { color: var(--tenue); }
.plan-nota { display: flex; gap: 6px; margin: 6px 0 2px; }
.plan-nota input { flex: 1; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: var(--fondo); color: var(--texto); }
.plan-nota input:focus { border-color: var(--linea); background: var(--panel); }
.plan-acciones { display: flex; gap: 6px; margin-top: 6px; }
.plan-nueva { display: flex; gap: 8px; margin-top: 10px; }
.plan-nueva input { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; }
.plan-nueva .crece { flex: 1; }
.chip-propuesta { border-color: #B9A6F5; color: #5B3FC4; }
tr.propuesta { background: #FAF8FF; }
.tabla.plan { width: 100%; }
.plan-texto-nota { margin: 4px 0; font-size: 13px; color: var(--tenue); }
.plan-editar summary { cursor: pointer; font-size: 12px; color: var(--acento-texto); }
.plan-nota textarea { flex: 1; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; }
.plan-filas { display: grid; }
.plan-fila { display: grid; grid-template-columns: 48px 1fr 160px; gap: 12px; padding: 12px 8px; border-top: 1px solid var(--linea); align-items: start; }
.plan-fila:first-child { border-top: 0; }
@media (max-width: 640px) { .plan-fila { grid-template-columns: 40px 1fr; } .plan-fila .plan-estado { grid-column: 2; } }

/* Contactos */
.para-hoy { border-left: 4px solid var(--acento); }
.contacto { padding: 14px 0; border-top: 1px solid var(--linea); }
.contacto:first-child { border-top: 0; }
.contacto-cabeza { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.contacto-cabeza .mini { display: block; }
.contacto-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-top: 8px; }
.contacto-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--tenue); gap: 3px; }
.contacto-form label.crece { flex: 1; min-width: 220px; }
.contacto-form label.ancha { flex-basis: 100%; }
.contacto-form input, .contacto-form select { font: inherit; font-size: 13px; color: var(--texto); padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); }
.estado-contacto.estado-cliente { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-texto); }
.estado-contacto.estado-en_prueba { border-color: #F1C76B; background: #FFF6E0; color: #8A5A00; }
.estado-contacto.estado-perdido { color: var(--tenue); }

/* Ayuda */
.buscar-ayuda { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--panel); margin: 6px 0 14px; }
.ayuda-pregunta { border-top: 1px solid var(--linea); padding: 10px 0; }
.ayuda-pregunta:first-of-type { border-top: 0; }
.ayuda-pregunta summary { cursor: pointer; font-weight: 600; color: var(--texto); }
.ayuda-pregunta p { margin: 8px 0 2px; color: var(--texto); line-height: 1.55; }

/* ============================================================ escaparate vivo (14-oct, tarde)
   La misma dirección que la web, aprobada sobre la muestra 2: Inicio con tarjeta
   héroe oscura, KPIs con número grande, fichas con insignia, menú con el activo
   relleno del acento, botones píldora. El acento sigue siendo el de cada agencia
   (marca blanca): aquí no hay ningún color a fuego salvo el carbón de la tarjeta. */
h1 { font-size: 32px; letter-spacing: -.025em; }
h2 { font: 700 20px/1.2 var(--f-titulo); letter-spacing: -.02em; }
.lateral .logo { font-family: var(--f-titulo); font-size: 22px; }
.selector-marca { border-radius: 14px; }
.menu a { border-radius: 10px; padding: 9px 12px; }
.menu a[aria-current="page"] { background: var(--acento); color: var(--sobre-acento); font-weight: 700; }
.menu-seccion { font: 500 11px var(--f-dato); letter-spacing: .12em; }
.bloque { border-radius: 20px; padding: 22px; box-shadow: 0 6px 24px rgb(17 19 24 / 5%); }
.caja, .tarjeta, .sector, .categoria, .vacio { border-radius: 16px; }
.chip { border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.chip-acento { background: var(--acento-suave); color: var(--acento-texto); border-color: transparent; }
/* botones píldora */
.boton, .acciones button { border-radius: 999px; padding: 11px 22px; transition: transform .12s ease, box-shadow .12s ease; }
.boton:hover, .acciones button:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--acento) 35%, transparent); }
.boton-pequeno { padding: 7px 14px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--texto); color: var(--texto); background: var(--panel); transition: transform .12s ease, box-shadow .12s ease; }
.boton-pequeno:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgb(17 19 24 / 12%); }
.hook-acciones form:last-child .boton-pequeno { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
/* cifras con número grande */
.cifras { gap: 14px; }
.cifra { border-radius: 20px; padding: 18px 20px; box-shadow: 0 6px 24px rgb(17 19 24 / 5%); }
.cifra .valor { font: 700 40px/1 var(--f-titulo); letter-spacing: -.03em; margin: 2px 0 6px; }
.cifra .nombre { font: 500 11px var(--f-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); order: -1; }
.cifra .detalle { font-size: 13px; }
.cifra.enlace:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgb(17 19 24 / 10%); text-decoration: none; }
/* piezas: fichas con insignia arriba */
.rejilla-piezas { gap: 14px; }
.pieza { border-radius: 20px; padding: 12px; gap: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.pieza:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgb(17 19 24 / 10%); }
.portada { border-radius: 14px; }
.veces { top: 8px; left: 8px; bottom: auto; font: 700 14px/1 var(--f-titulo); padding: 6px 9px; box-shadow: 0 6px 16px rgb(0 0 0 / 18%); }
.cifra-pieza b { font-family: var(--f-titulo); font-size: 16px; }
.porque-linea { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; background: var(--acento-suave); color: var(--acento-texto); border-radius: 999px; padding: 4px 10px; margin: 6px 0; }
.porque-linea.porque-aviso { background: #FDECEA; color: var(--mal); }
/* Inicio: la tarjeta héroe */
.esta-semana { background: var(--texto); color: #fff; border: 0; border-left: 0; border-radius: 24px; padding: 28px 30px; box-shadow: 0 18px 50px rgb(17 19 24 / 18%); }
.esta-semana h2 { font: 500 11px var(--f-dato); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin-bottom: 12px; }
.esta-semana .semana-mercado { font: 700 28px/1.15 var(--f-titulo); letter-spacing: -.02em; margin: 0 0 14px; color: #fff; }
.esta-semana .semana-mercado b { color: var(--acento); }
.esta-semana .semana-mercado a, .esta-semana .semana-linea a, .esta-semana p > a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.esta-semana .semana-linea, .esta-semana > p { color: rgb(255 255 255 / 82%); }
.esta-semana .semana-linea b { color: #fff; }
.esta-semana .chip-acento { background: rgb(255 255 255 / 12%); color: var(--acento); }
.esta-semana .semana-idea { background: var(--panel); color: var(--texto); border: 0; border-radius: 18px; padding: 16px 18px; margin-top: 16px; }
.esta-semana .semana-idea a { color: var(--acento-texto); }
.esta-semana .semana-aprendido { color: rgb(255 255 255 / 70%); }
.esta-semana .semana-aprendido a { color: #fff; }
.esta-semana .tenue { color: rgb(255 255 255 / 70%); }
/* tus cuentas: KPI */
.tus-cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.caja.tu-cuenta { border-radius: 20px; padding: 18px 20px; transition: transform .2s ease, box-shadow .2s ease; }
.caja.tu-cuenta:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgb(17 19 24 / 10%); }
.tu-cifra { font-size: 36px; letter-spacing: -.03em; }
/* qué hacer ahora: pasos numerados con círculo */
.guia { border-left: 0; }
.lista-guia { list-style: none; padding: 0; counter-reset: paso; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.lista-guia li { counter-increment: paso; display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 16px; }
.lista-guia li::before { content: counter(paso); flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); display: grid; place-items: center; font: 700 14px var(--f-titulo); }
.lista-guia a { color: var(--texto); font-weight: 500; }
/* tablas, avisos, entrar */
.tabla th { font: 500 11px var(--f-dato); letter-spacing: .1em; text-transform: uppercase; }
.aviso-bien { border-radius: 14px; border-left-width: 4px; }
.entrar { border-radius: 24px; padding: 32px; box-shadow: 0 18px 50px rgb(17 19 24 / 10%); }
.entrar h1 { margin-top: 0; }
.pestanas a, .filtros select, .filtros input { border-radius: 999px; }
@media (max-width: 860px) {
  .esta-semana { padding: 20px; }
  .esta-semana .semana-mercado { font-size: 22px; }
  .cifra .valor { font-size: 32px; }
}

/* candados de la prueba gratis (14-oct) */
.candado-bloque { position: relative; }
.borroso { filter: blur(6px); pointer-events: none; user-select: none; opacity: .7; }
.candado-texto { position: absolute; left: 0; right: 0; bottom: 40%; text-align: center; margin: 0; }
.candado-pagina { text-align: center; padding: 48px 24px; max-width: 560px; margin: 24px auto; }
.candado-icono { font-size: 34px; margin: 0 0 6px; }
.candado-pagina .hook-acciones { justify-content: center; margin-top: 18px; }

/* plan propuesto con tres preguntas (14-oct) */
.proponer-plan { margin: 0 0 18px; }
.tres-preguntas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tres-preguntas label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.tres-preguntas select, .tres-preguntas input { font: inherit; font-weight: 400; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; }
@media (max-width: 860px) { .tres-preguntas { grid-template-columns: 1fr; } }

/* Inicio (14-oct): la tarjeta negra y los pasos, un solo rectángulo */
.cabecera-inicio { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: stretch; margin: 16px 0; }
.cabecera-inicio > .bloque { margin: 0; }
.cabecera-inicio > :only-child { grid-column: 1 / -1; }
.esta-semana .semana-mercado { font-size: 26px; }
.esta-semana .semana-linea b, .semana-linea b { font-family: var(--f-titulo); }
.pasos-carrusel { display: flex; flex-direction: column; }
.pasos-carrusel .titulo-bloque { margin-bottom: 6px; }
.pasos-contador { font: 500 12px var(--f-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.pasos-carrusel .lista-guia { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.pasos-carrusel .lista-guia li { display: none; border: 0; padding: 18px 0 8px; gap: 16px; align-items: flex-start; }
.pasos-carrusel .lista-guia li.actual { display: flex; }
.pasos-carrusel .lista-guia li::before { content: none; }
.paso-numero { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); display: grid; place-items: center; font: 700 18px var(--f-titulo); }
.pasos-carrusel .lista-guia a { font: 600 20px/1.3 var(--f-titulo); letter-spacing: -.01em; color: var(--texto); }
.pasos-carrusel .lista-guia a::after { content: " →"; color: var(--acento-texto); }
.pasos-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pasos-puntos { display: flex; gap: 6px; }
.pasos-puntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); cursor: pointer; }
.pasos-puntos i.actual { background: var(--acento); }
@media (max-width: 860px) { .cabecera-inicio { grid-template-columns: 1fr; } }

/* Inicio, segunda pasada (14-oct): menos texto en la tarjeta negra, pasos más pequeños */
.cabecera-inicio { grid-template-columns: 1.6fr 1fr; }
.esta-semana .semana-cifra { margin: 6px 0 0; line-height: 1; }
.esta-semana .semana-cifra b { font: 700 64px/1 var(--f-titulo); letter-spacing: -.04em; color: var(--acento); }
.esta-semana .semana-cifra span { font: 600 22px var(--f-titulo); color: rgb(255 255 255 / 70%); }
.esta-semana .semana-que { color: rgb(255 255 255 / 75%); margin: 4px 0 14px; font-size: 15px; }
.esta-semana .semana-linea { font-size: 16px; margin: 0 0 6px; }
.esta-semana .semana-idea { padding: 14px 16px; margin-top: 14px; }
.esta-semana .semana-idea-titulo { font: 500 11px var(--f-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); margin: 0 0 4px; }
.esta-semana .semana-idea p { margin: 0; }
.pasos-carrusel { padding: 18px 20px; }
.pasos-carrusel .lista-guia li { padding: 10px 0 4px; gap: 12px; }
.paso-numero { flex-basis: 36px; height: 36px; font-size: 15px; }
.pasos-carrusel .lista-guia a { font-size: 17px; }
.pasos-nav { margin-top: 8px; }
.pasos-nav .boton-pequeno { padding: 6px 12px; font-size: 12px; }

/* Inicio, tercera pasada (14-oct): tres cifras en fila y la próxima pieza con portada */
.semana-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 16px; }
.cifra-semana b { display: block; font: 700 44px/1 var(--f-titulo); letter-spacing: -.04em; color: var(--acento); }
.cifra-semana b small { font: 600 18px var(--f-titulo); color: rgb(255 255 255 / 60%); letter-spacing: -.01em; }
.cifra-semana span { display: block; margin-top: 6px; font-size: 13px; color: rgb(255 255 255 / 75%); line-height: 1.35; }
.cifra-semana span a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.esta-semana .semana-idea { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 12px 14px; }
.idea-portada { position: relative; display: block; width: 64px; height: 86px; border-radius: 10px; overflow: hidden; background: var(--linea); }
.idea-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idea-portada .veces { top: 4px; left: 4px; font-size: 11px; padding: 3px 6px; }
.esta-semana .idea-quien { margin: 0 0 6px; font-size: 14px; }
.esta-semana .idea-quien a { color: var(--acento-texto); }
.esta-semana .semana-idea .hook-acciones { margin-top: 4px; }
@media (max-width: 860px) { .semana-cifras { grid-template-columns: 1fr 1fr; } }

/* Inicio, cuarta pasada (14-oct): fichas y notas con menos texto */
.pieza .caption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pieza .pie-pieza { margin: 6px 0 0; }
.tu-cuenta .tu-cifra { margin: 6px 0 2px; }