/* Paleta del manual de identidad visual digital; distribución limpia y minimalista. */
:root {
  --azul: #1769d2;
  --azul-profundo: #103b80;
  --azul-hielo: #b8d8fa;
  --verde: #398b43;
  --lima: #80b92f;
  --verde-azulado: #277b72;
  --blanco: #fff;
  --fondo: #f3f7fc;
  --linea: #d9e2ed;
  --linea-suave: #e8eef6;
  --grafito: #253447;
  --suave: #5b6b80;
  --gusta: #398b43;
  --indiferente: #d9a514;
  --incomoda: #e2702f;
  --preocupa: #d03a3a;
  --sombra: 0 1px 2px rgba(16, 59, 128, .05), 0 6px 20px rgba(16, 59, 128, .06);
  --sombra-alta: 0 2px 6px rgba(16, 59, 128, .08), 0 22px 50px rgba(16, 59, 128, .16);
  --muelle: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--fondo); }
body { background: var(--fondo); color: var(--grafito); font-family: Manrope, Inter, Arial, sans-serif; font-size: 16px; line-height: 1.5; margin: 0; }
button, input, textarea { font: inherit; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
svg.logo { fill: currentColor; stroke: none; }
h1, h2, h3 { color: var(--azul-profundo); letter-spacing: -.02em; margin: 0; }
:focus-visible { outline: 3px solid rgba(23, 105, 210, .4); outline-offset: 2px; }

/* ---------- botones ---------- */
.boton { align-items: center; border: 1.5px solid transparent; border-radius: 12px; cursor: pointer; display: inline-flex; font-size: .9rem; font-weight: 700; gap: .45rem; justify-content: center; padding: .6rem 1rem; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.boton svg { fill: none; height: 1rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 1rem; }
.boton:disabled { cursor: not-allowed; opacity: .4; }
.boton--primario { background: var(--azul); box-shadow: 0 8px 20px rgba(23, 105, 210, .28); color: var(--blanco); }
.boton--primario:hover:not(:disabled) { background: var(--azul-profundo); }
.boton--secundario { background: var(--blanco); border-color: var(--linea); color: var(--azul-profundo); }
.boton--secundario:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.boton--fantasma { background: transparent; color: var(--suave); }
.boton--fantasma:hover { color: var(--azul-profundo); }

/* ---------- cabecera ---------- */
.banda { background: linear-gradient(180deg, var(--blanco) 0%, #f7faff 100%); border-bottom: 1px solid var(--linea); }
.cabecera { align-items: end; display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; justify-content: space-between; margin: 0 auto; max-width: 92rem; padding: 3rem clamp(1.25rem, 4vw, 3.5rem) 2.6rem; }
.marca { align-items: center; display: flex; gap: 1rem; margin-bottom: 1.4rem; }
.marca img { display: block; height: auto; width: 6.6rem; }
.marca__sep { background: var(--linea); height: 1.1rem; width: 1px; }
.marca .etiqueta { margin: 0; }
.etiqueta { align-items: center; color: var(--azul); display: inline-flex; font-size: .74rem; font-weight: 800; gap: .55rem; letter-spacing: .14em; margin: 0 0 .8rem; text-transform: uppercase; }
.etiqueta__punto { background: linear-gradient(135deg, var(--azul), var(--verde-azulado)); border-radius: 50%; box-shadow: 0 0 0 4px rgba(23, 105, 210, .12); height: .55rem; width: .55rem; }
.cabecera h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.intro { color: var(--suave); font-size: 1.02rem; line-height: 1.6; margin: .8rem 0 0; max-width: 44rem; }
.cabecera__panel { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; }
.progreso { min-width: 13rem; }
.progreso__texto { color: var(--suave); font-size: .88rem; margin-bottom: .45rem; }
.progreso__texto strong { color: var(--azul-profundo); font-size: 1.15rem; }
.progreso__barra { background: var(--linea-suave); border-radius: 999px; height: .4rem; overflow: hidden; }
.progreso__barra i { background: linear-gradient(90deg, var(--azul), var(--verde-azulado), var(--verde)); border-radius: inherit; display: block; height: 100%; width: 0; }
.cabecera__botones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- tablero ---------- */
.tablero { align-items: stretch; display: grid; gap: 1.6rem; grid-template-columns: 25rem minmax(0, 1fr) 20rem; margin: 0 auto; max-width: 92rem; padding: 5rem clamp(1.25rem, 4vw, 3.5rem) 0; }
.panel { display: flex; flex-direction: column; }
.panel { background: var(--blanco); border: 1px solid var(--linea); border-radius: 24px; box-shadow: var(--sombra); padding: 1.35rem 1.4rem; }
.panel__cab { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; margin-bottom: 1.1rem; }
.panel__cab h2 { font-size: 1.15rem; font-weight: 800; }
.contador { color: var(--suave); font-size: .82rem; font-weight: 600; }
.pista { color: var(--suave); font-size: .84rem; line-height: 1.5; margin: -.3rem 0 1.4rem; }

/* ---------- carrusel ---------- */
.carrusel { min-width: 0; }
.vista { background: var(--fondo); border-radius: 10px; display: inline-flex; padding: .2rem; }
.vista button { background: transparent; border: 0; border-radius: 8px; color: var(--suave); cursor: pointer; font-size: .78rem; font-weight: 700; padding: .3rem .65rem; }
.vista button[aria-pressed="true"] { background: var(--blanco); box-shadow: 0 1px 3px rgba(16, 59, 128, .12); color: var(--azul-profundo); }
.escenario { display: grid; place-items: start center; }
.escenario:has(.listo) { min-height: 0; }
.carrusel__controles { align-items: center; display: flex; gap: .8rem; justify-content: space-between; margin-top: 1.1rem; }
.carrusel__centro { display: grid; gap: .4rem; justify-items: center; }
.flecha { background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 50%; color: var(--azul-profundo); cursor: pointer; display: grid; flex: 0 0 auto; height: 2.5rem; place-items: center; transition: border-color 160ms ease, color 160ms ease; width: 2.5rem; }
.flecha svg { height: 1.15rem; width: 1.15rem; }
.flecha:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.flecha:disabled { opacity: .35; }
.puntos { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.puntos button { background: var(--linea); border: 0; border-radius: 999px; cursor: pointer; height: .45rem; padding: 0; transition: width 260ms var(--muelle), background 200ms ease; width: .45rem; }
.puntos button[aria-current="true"] { background: var(--azul); width: 1.3rem; }

/* La publicación: barra propia (de donde se arrastra) + inserción oficial o vista simplificada. */
.marco { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); overflow: hidden; width: 100%; }
.marco__barra { align-items: center; background: var(--blanco); border-bottom: 1px solid var(--linea-suave); cursor: grab; display: flex; gap: .65rem; padding: .6rem .7rem; touch-action: pan-y; user-select: none; -webkit-touch-callout: none; }
.marco__barra:active { cursor: grabbing; }
.marco__quien { line-height: 1.2; min-width: 0; }
.marco__quien strong { color: var(--grafito); display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marco__quien span { color: var(--suave); display: block; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agarre { align-items: center; color: var(--suave); display: inline-flex; flex: 0 0 auto; font-size: .74rem; font-weight: 700; gap: .3rem; margin-left: auto; }
.agarre svg { height: 1.05rem; width: 1.05rem; }
.marco__cuerpo { background: #f6f7f9; height: clamp(20rem, calc(100vh - 35rem), 36rem); position: relative; }
.marco--destacado .marco__cuerpo { height: clamp(14rem, calc(100vh - 43rem), 28rem); }
.marco__cuerpo iframe { border: 0; display: block; height: 100%; opacity: 0; width: 100%; }
.marco__cuerpo--tiktok { background: #000; }
.marco__cuerpo--tiktok iframe { margin: 0 auto; max-width: 20.25rem; }
.marco__carga { display: grid; inset: 0; place-items: center; position: absolute; }
.marco__carga img { filter: blur(14px) saturate(1.1); height: 100%; inset: 0; object-fit: cover; opacity: .55; position: absolute; transform: scale(1.1); width: 100%; }
.marco__carga span { background: rgba(255, 255, 255, .92); border-radius: 999px; box-shadow: var(--sombra); color: var(--azul-profundo); font-size: .82rem; font-weight: 700; padding: .45rem .9rem; position: relative; }
.marco__pie { align-items: center; border-top: 1px solid var(--linea-suave); display: flex; justify-content: space-between; padding: .55rem .8rem; }
.marco__pie a { align-items: center; color: var(--azul); display: inline-flex; font-size: .82rem; font-weight: 700; gap: .3rem; text-decoration: none; }
.marco__pie a:hover { text-decoration: underline; }
.marco__pie a svg { height: .9rem; width: .9rem; }
.marco--origen { opacity: .3; }
body.arrastrando iframe { pointer-events: none; }
body.arrastrando, body.arrastrando * { cursor: grabbing !important; }

/* Etiqueta de red: logo oficial y color de marca. */
.red { align-items: center; border-radius: 999px; display: inline-flex; flex: 0 0 auto; font-size: .74rem; font-weight: 800; gap: .35rem; padding: .28rem .6rem .28rem .45rem; }
.red svg { height: .9rem; width: .9rem; }
.red--tiktok { background: #111; color: #fff; }
.red--tiktok svg { filter: drop-shadow(1px 0 0 #fe2c55) drop-shadow(-1px 0 0 #25f4ee); }
.red--x { background: #111; color: #fff; padding: .32rem .5rem; }
.red--instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4); color: #fff; }
.red--facebook { background: #0866ff; color: #fff; }
.red--linkedin { background: #0a66c2; color: #fff; }
.red--punto { border: 2px solid var(--blanco); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); height: 1.35rem; justify-content: center; padding: 0; width: 1.35rem; }
.red--punto svg { height: .7rem; width: .7rem; }

.avatar { border-radius: 50%; flex: 0 0 auto; height: 2.2rem; object-fit: cover; width: 2.2rem; }
.avatar--inicial { align-items: center; background: linear-gradient(135deg, var(--azul), var(--verde-azulado)); color: var(--blanco); display: grid; font-size: .85rem; font-weight: 800; place-items: center; }

/* Vista simplificada: medidas fijas, imagen centrada y texto completo con «Ver más». */
.simple { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.simple__media { background: #000; flex: 0 0 auto; height: 19rem; overflow: hidden; }
.simple__media img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.simple--tiktok .simple__media { height: 100%; position: relative; }
.simple--captura .simple__media img { object-fit: contain; }
.simple--tiktok .simple__texto { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82) 35%); bottom: 0; color: #fff; left: 0; position: absolute; right: 0; }
.simple__texto { flex: 1 1 auto; font-size: .9rem; line-height: 1.5; overflow-y: auto; padding: .85rem 1rem 1rem; white-space: pre-line; }
.simple__texto--corto p { -webkit-box-orient: vertical; -webkit-line-clamp: 6; display: -webkit-box; margin: 0; overflow: hidden; }
.simple__texto p { margin: 0; }
.simple__mas { background: none; border: 0; color: var(--azul); cursor: pointer; font-size: .82rem; font-weight: 700; margin-top: .35rem; padding: 0; }
.simple--tiktok .simple__mas { color: #fff; text-decoration: underline; }
.resaltado { color: var(--azul); font-weight: 600; }
.simple--tiktok .resaltado { color: #fff; }

/* Copia compacta que sigue al puntero mientras se arrastra. */
.fantasma { align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; box-shadow: 0 24px 60px rgba(16, 59, 128, .32); display: flex; gap: .7rem; left: 0; padding: .55rem .8rem .55rem .55rem; pointer-events: none; position: fixed; top: 0; width: 17rem; z-index: 100; }
.fantasma img { border-radius: 10px; flex: 0 0 auto; height: 3.4rem; object-fit: cover; width: 2.8rem; }
.fantasma strong { color: var(--azul-profundo); display: block; font-size: .88rem; }
.volando { border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 59, 128, .3); height: 3.4rem; left: 0; object-fit: cover; pointer-events: none; position: fixed; top: 0; width: 2.8rem; z-index: 101; }

/* ---------- termómetro y cajas ---------- */
.indice { align-items: baseline; display: flex; gap: .5rem; }
.indice span { color: var(--suave); font-size: .8rem; font-weight: 600; }
.indice strong { color: var(--azul-profundo); font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.02em; min-width: 3.2rem; text-align: right; }
.medidor__cuerpo { display: grid; flex: 1 1 auto; gap: 1.4rem; grid-template-columns: 2.6rem minmax(0, 1fr); min-height: 0; }
.termo { align-items: center; display: flex; flex-direction: column; position: relative; }
.termo__tubo { background: var(--fondo); border: 2px solid var(--linea); border-bottom: 0; border-radius: 999px 999px 0 0; flex: 1 1 auto; overflow: hidden; position: relative; transition: border-color 220ms ease, box-shadow 220ms ease; width: 1.15rem; }
.termo__mercurio { background: linear-gradient(0deg, var(--preocupa) 0%, var(--incomoda) 33%, var(--indiferente) 66%, var(--gusta) 100%); background-position: bottom; background-size: 100% var(--alto-tubo, 100%); bottom: 0; height: 0; left: 0; position: absolute; right: 0; }
.termo__guia { background: var(--color, var(--azul)); border-radius: 4px; height: 3px; left: -2px; opacity: 0; position: absolute; right: -2px; top: 0; }
.termo__tubo--activo { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color) 18%, transparent); border-color: var(--color); }
.termo__bulbo { background: var(--bulbo, var(--linea)); border: 2px solid var(--linea); border-radius: 50%; box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .12); flex: 0 0 auto; height: 2.6rem; margin-top: -.35rem; width: 2.6rem; z-index: 1; }
.termo__marca { background: none; border: 0; cursor: pointer; height: 1.6rem; left: 50%; padding: 0; position: absolute; transform: translate(-50%, -50%); width: 2.6rem; z-index: 2; }
.termo__marca::before { background: var(--linea); border-radius: 2px; content: ""; height: 2px; left: .1rem; position: absolute; right: .1rem; top: 50%; transition: background 160ms ease; }
.termo__marca:hover::before, .termo__marca:focus-visible::before { background: var(--color); height: 3px; }
.termo__marca span { background: var(--azul-profundo); border-radius: 8px; color: var(--blanco); font-size: .74rem; font-weight: 700; left: calc(100% + .3rem); opacity: 0; padding: .25rem .5rem; pointer-events: none; position: absolute; top: 50%; transform: translate(-.3rem, -50%); transition: opacity 160ms ease, transform 160ms ease; white-space: nowrap; }
.termo__marca:hover span, .termo__marca:focus-visible span { opacity: 1; transform: translate(0, -50%); }

.cajas { display: grid; gap: .9rem; grid-auto-rows: minmax(5.3rem, 1fr); }
.caja { align-content: center; align-items: center; background: var(--blanco); border: 1.5px solid transparent; border-left: 5px solid var(--c); border-radius: 18px; box-shadow: 0 6px 18px rgba(8, 30, 70, .18); cursor: pointer; display: grid; gap: .2rem .9rem; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 5.5rem; padding: .7rem 1rem; position: relative; text-align: left; transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease; width: 100%; }
.caja:hover { background: color-mix(in srgb, var(--c) 5%, white); }
.caja__icono { align-items: center; background: color-mix(in srgb, var(--c) 12%, white); border-radius: 14px; color: var(--c); display: grid; height: 3rem; place-items: center; width: 3rem; }
.caja__icono svg { height: 1.6rem; width: 1.6rem; }
.caja__texto strong { color: var(--azul-profundo); display: block; font-size: 1rem; font-weight: 800; }
.caja__texto small { color: var(--suave); display: block; font-size: .78rem; line-height: 1.35; }
.caja__n { color: var(--c); font-size: 1.9rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.03em; line-height: 1; min-width: 2rem; text-align: right; }
.caja__pila { display: flex; grid-column: 2 / -1; min-height: 2.2rem; padding-left: .3rem; }
.caja__pila button { background: none; border: 0; cursor: pointer; margin-left: -.45rem; padding: 0; position: relative; transition: transform 220ms var(--muelle); }
.caja__pila button:hover { transform: translateY(-3px); z-index: 2; }
.caja__pila img { border: 2px solid var(--blanco); border-radius: 9px; box-shadow: 0 1px 3px rgba(16, 59, 128, .2); display: block; height: 2.2rem; object-fit: cover; width: 1.8rem; }
.caja__pila .red--punto { bottom: -.25rem; height: 1rem; position: absolute; right: -.3rem; width: 1rem; }
.caja__pila .red--punto svg { height: .5rem; width: .5rem; }
.caja__vacia { align-self: center; color: #9aa8b8; font-size: .78rem; margin-left: .45rem; }
.caja--sobre { background: color-mix(in srgb, var(--c) 8%, white); border-color: var(--c); border-style: solid; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent), var(--sombra-alta); }
body.arrastrando .caja { border-color: color-mix(in srgb, var(--c) 40%, white); border-left-color: var(--c); border-style: dashed; border-left-style: solid; }
.caja--resaltada { border-color: var(--c); border-style: solid; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent); }

/* ---------- comentarios ---------- */
.comentario { background: var(--fondo); border-radius: 16px; padding: .9rem; }
.comentario__post { align-items: center; display: grid; gap: .7rem; grid-template-columns: auto minmax(0, 1fr); margin-bottom: .8rem; }
.comentario__post img { border-radius: 10px; height: 3.4rem; object-fit: cover; width: 2.8rem; }
.comentario__post strong { color: var(--azul-profundo); display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comentario__meta { align-items: center; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.comentario label { color: var(--azul-profundo); display: block; font-size: .85rem; font-weight: 700; margin-bottom: .4rem; }
.comentario textarea { background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 12px; color: var(--grafito); display: block; min-height: 7rem; padding: .7rem .8rem; resize: vertical; transition: border-color 160ms ease, box-shadow 160ms ease; width: 100%; }
.comentario textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(23, 105, 210, .14); outline: none; }
.comentario__estado { color: var(--suave); font-size: .76rem; margin-top: .4rem; min-height: 1.1rem; }
.comentario__vacio { color: var(--suave); font-size: .88rem; margin: 0; }
.comentarios__lista { align-content: start; display: grid; flex: 1 1 0; gap: .55rem; list-style: none; margin: 1rem 0 0; min-height: 6rem; overflow-y: auto; padding: 0; }
.comentarios__lista button { align-items: start; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; cursor: pointer; display: grid; gap: .6rem; grid-template-columns: auto minmax(0, 1fr); padding: .55rem; text-align: left; transition: border-color 160ms ease, transform 220ms var(--muelle); width: 100%; }
.comentarios__lista button:hover { border-color: var(--azul-hielo); transform: translateX(2px); }
.comentarios__lista button[aria-current="true"] { border-color: var(--azul); }
.comentarios__lista img { border-radius: 8px; height: 2.6rem; object-fit: cover; width: 2.2rem; }
.comentarios__lista strong { color: var(--azul-profundo); display: block; font-size: .8rem; }
.comentarios__lista p { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--suave); display: -webkit-box; font-size: .78rem; line-height: 1.35; margin: .1rem 0 0; overflow: hidden; }

/* Etiqueta de estado (nivel del termómetro). */
.estado { align-items: center; background: color-mix(in srgb, var(--c, #9aa8b8) 12%, white); border-radius: 999px; color: color-mix(in srgb, var(--c, #5b6b80) 85%, black); display: inline-flex; font-size: .72rem; font-weight: 800; gap: .3rem; padding: .18rem .55rem .18rem .4rem; }
.estado svg { height: .85rem; width: .85rem; }

/* ---------- todas las publicaciones ---------- */
.todas { margin: 0 auto; max-width: 92rem; padding: 0 clamp(1.25rem, 4vw, 3.5rem) 4rem; }
.todas__cab { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; margin-bottom: 1.1rem; }
.todas__cab h2 { font-size: 1.4rem; font-weight: 800; }
.filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtros button { align-items: center; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 999px; color: var(--grafito); cursor: pointer; display: inline-flex; font-size: .8rem; font-weight: 700; gap: .35rem; padding: .32rem .75rem; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; }
.filtros button svg { color: var(--c); height: .9rem; width: .9rem; }
.filtros button[aria-pressed="true"] { background: var(--azul-profundo); border-color: var(--azul-profundo); color: var(--blanco); }
.filtros button[aria-pressed="true"] svg { color: var(--blanco); }
.rejilla { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.mini { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 220ms ease, border-color 220ms ease; }
.mini:hover { border-color: var(--azul-hielo); box-shadow: var(--sombra-alta); }
.mini__cab { align-items: center; display: flex; gap: .6rem; padding: .7rem .8rem; }
.mini__cab .marco__quien { flex: 1 1 auto; }
.mini__media { aspect-ratio: 16 / 10; background: #000; display: block; overflow: hidden; position: relative; }
.mini__media img { display: block; height: 100%; object-fit: cover; object-position: center; transition: transform 500ms ease; width: 100%; }
.mini:hover .mini__media img { transform: scale(1.04); }
.mini__cuerpo { display: flex; flex: 1 1 auto; flex-direction: column; gap: .55rem; padding: .75rem .85rem .85rem; }
.mini__texto { -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--grafito); display: -webkit-box; font-size: .85rem; line-height: 1.45; margin: 0; overflow: hidden; }
.mini__comentario { background: var(--fondo); border-left: 3px solid var(--azul-hielo); border-radius: 0 8px 8px 0; color: var(--suave); font-size: .8rem; font-style: italic; margin: 0; padding: .4rem .6rem; }
.mini__pie { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; margin-top: auto; }
.niveles { background: var(--fondo); border-radius: 10px; display: inline-flex; gap: .15rem; padding: .18rem; }
.niveles button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #8796a8; cursor: pointer; display: grid; height: 1.95rem; place-items: center; transition: background 160ms ease, color 160ms ease; width: 1.95rem; }
.niveles button svg { height: 1.05rem; width: 1.05rem; }
.niveles button:hover { color: var(--c); }
.niveles button[aria-pressed="true"] { background: var(--c); color: var(--blanco); }
.mini__acciones { display: flex; gap: .7rem; }
.mini__acciones a, .mini__acciones button { align-items: center; background: none; border: 0; color: var(--azul); cursor: pointer; display: inline-flex; font-size: .8rem; font-weight: 700; gap: .25rem; padding: 0; text-decoration: none; }
.mini__acciones a:hover, .mini__acciones button:hover { text-decoration: underline; }
.mini__acciones svg { height: .85rem; width: .85rem; }
.rejilla__vacia { color: var(--suave); grid-column: 1 / -1; padding: 2rem; text-align: center; }

/* ---------- terminado ---------- */
.listo { background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px; padding: 2.2rem 1.5rem; text-align: center; width: 100%; }
.listo__icono { background: linear-gradient(135deg, var(--verde-azulado), var(--verde)); border-radius: 50%; color: var(--blanco); display: grid; height: 4rem; margin: 0 auto 1rem; place-items: center; width: 4rem; }
.listo__icono svg { height: 2rem; stroke-width: 2.6; width: 2rem; }
.listo h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.listo p { color: var(--suave); margin: 0; }

/* ---------- aviso con deshacer ---------- */
.aviso { align-items: center; background: var(--azul-profundo); border-radius: 14px; bottom: 1.2rem; box-shadow: 0 16px 40px rgba(16, 59, 128, .35); color: var(--blanco); display: flex; font-size: .9rem; gap: 1rem; left: 50%; max-width: calc(100vw - 2rem); padding: .7rem .8rem .7rem 1.1rem; position: fixed; transform: translateX(-50%); z-index: 90; }
.aviso button { background: rgba(255, 255, 255, .15); border: 0; border-radius: 8px; color: var(--blanco); cursor: pointer; font-weight: 800; padding: .35rem .7rem; }
.aviso button:hover { background: rgba(255, 255, 255, .25); }
.pie { color: var(--suave); font-size: .8rem; padding: 0 1rem 2rem; text-align: center; }

/* ---------- pantallas medianas y pequeñas ---------- */
@media (max-width: 1320px) {
  .tablero { grid-template-columns: 25rem minmax(0, 1fr); }
  .comentarios { grid-column: 1 / -1; }
  .comentarios__lista { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); max-height: none; }
}
@media (max-width: 900px) {
  .tablero { grid-template-columns: 1fr; }
  .carrusel { position: static; }
  .escenario { min-height: 0; }
  .marco__cuerpo { height: 32rem; }
}
@media (max-width: 560px) {
  .cabecera { padding-top: 2rem; }
  .cabecera__panel, .progreso { width: 100%; }
  .panel { border-radius: 18px; padding: 1rem; }
  .medidor__cuerpo { gap: .7rem; grid-template-columns: 2rem minmax(0, 1fr); }
  .termo__tubo { width: .95rem; }
  .termo__bulbo { height: 2.1rem; width: 2.1rem; }
  .caja { gap: .2rem .7rem; padding: .75rem; }
  .caja__icono { height: 2.5rem; width: 2.5rem; }
  .caja__n { font-size: 1.5rem; }
  .marco__cuerpo { height: 30rem; }
  .simple__media { height: 15rem; }
  .agarre b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------- panel del termómetro con degradado ---------- */
.medidor { background: linear-gradient(155deg, var(--azul-profundo) 0%, #1452b0 55%, var(--azul) 100%); border-color: transparent; box-shadow: 0 18px 40px rgba(16, 59, 128, .25); color: var(--blanco); }
.medidor .panel__cab h2, .medidor .indice strong { color: var(--blanco); }
.medidor .indice span, .medidor .pista { color: rgba(255, 255, 255, .78); }
.medidor .termo__tubo { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); }
.medidor .termo__bulbo { border-color: rgba(255, 255, 255, .55); }
.medidor .termo__marca::before { background: rgba(255, 255, 255, .45); }
.medidor .caja__vacia { color: #8b9bb0; }

/* ---------- comentarios con tono suave ---------- */
.comentarios { background: linear-gradient(180deg, #eef5fe 0%, var(--blanco) 55%); }
.comentarios .comentario { background: var(--blanco); border: 1px solid var(--linea); }

/* ---------- botones secundarios con estilo propio ---------- */
.marco__pie a, .mini__acciones a, .mini__acciones button, .simple__mas { align-items: center; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 999px; color: var(--azul-profundo); cursor: pointer; display: inline-flex; font-size: .78rem; font-weight: 700; gap: .3rem; padding: .3rem .7rem; text-decoration: none; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
.marco__pie a:hover, .mini__acciones a:hover, .mini__acciones button:hover, .simple__mas:hover { background: #eaf3fe; border-color: var(--azul); color: var(--azul); text-decoration: none; }
.mini__acciones { gap: .35rem; }
.simple--tiktok .simple__mas { background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .5); color: #fff; text-decoration: none; }
.listo .boton { margin-top: 1rem; }

/* ---------- comentario destacado ---------- */
.destacado { background: #fffaf0; border-top: 1px solid #f2e3bf; padding: .6rem .8rem .7rem; }
.destacado__etiqueta { align-items: center; color: #9a6a00; display: inline-flex; font-size: .7rem; font-weight: 800; gap: .3rem; letter-spacing: .06em; margin-bottom: .45rem; text-transform: uppercase; }
.destacado__etiqueta svg { fill: #f2b705; height: .85rem; stroke: #d99a00; width: .85rem; }
.destacado__burbuja { align-items: start; display: grid; gap: .55rem; grid-template-columns: auto minmax(0, 1fr); }
.destacado__burbuja .avatar { height: 2rem; width: 2rem; }
.destacado__burbuja > div { background: #f0f2f5; border: 2px solid #f2b705; border-radius: 16px; box-shadow: 0 0 0 4px rgba(242, 183, 5, .16); padding: .45rem .7rem; }
.destacado__burbuja strong { color: #050505; display: block; font-size: .82rem; }
.destacado__burbuja p { color: #050505; font-size: .85rem; line-height: 1.4; margin: .1rem 0 .2rem; }
.destacado__burbuja small { align-items: center; color: #65676b; display: inline-flex; font-size: .72rem; gap: .25rem; }
.destacado__reaccion { align-items: center; color: #0866ff; display: inline-flex; font-weight: 700; gap: .15rem; }
.destacado__reaccion svg { height: .8rem; width: .8rem; }
.mini .destacado { border: 1px solid #f2e3bf; border-radius: 12px; }

/* ---------- conclusión ---------- */
.conclusion { margin: 0 auto 2.5rem; max-width: 92rem; padding: 0 clamp(1.25rem, 4vw, 3.5rem); }
.conclusion__hero { align-items: center; background: linear-gradient(120deg, var(--verde-azulado) 0%, var(--azul) 60%, var(--azul-profundo) 100%); border-radius: 24px; box-shadow: 0 20px 44px rgba(16, 59, 128, .25); color: var(--blanco); display: grid; gap: 1.2rem 1.6rem; grid-template-columns: auto minmax(0, 1fr) auto; padding: 1.6rem 1.8rem; }
.conclusion__icono { background: rgba(255, 255, 255, .16); border-radius: 18px; display: grid; height: 3.6rem; place-items: center; width: 3.6rem; }
.conclusion__icono svg { height: 1.9rem; width: 1.9rem; }
.conclusion__kicker { font-size: .74rem; font-weight: 800; letter-spacing: .14em; margin: 0 0 .3rem; opacity: .85; text-transform: uppercase; }
.conclusion__hero h2 { color: var(--blanco); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.conclusion__texto p:last-child { margin: .45rem 0 0; opacity: .9; }
.conclusion__indice { background: rgba(255, 255, 255, .14); border-radius: 18px; padding: .8rem 1.1rem; text-align: center; }
.conclusion__indice strong { display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.conclusion__indice span { font-size: .75rem; font-weight: 700; opacity: .85; }
.conclusion__barra { border-radius: 999px; display: flex; gap: 3px; height: 1.6rem; margin: 1.4rem 0; overflow: hidden; }
.conclusion__barra i { align-items: center; background: var(--c); color: var(--blanco); display: flex; justify-content: center; }
.conclusion__barra b { font-size: .78rem; }
.conclusion__grupos { display: grid; gap: 1.1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grupo { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; border-top: 5px solid var(--c); box-shadow: var(--sombra); padding: .9rem; }
.grupo header { align-items: center; display: flex; gap: .6rem; margin-bottom: .7rem; }
.grupo__icono { background: color-mix(in srgb, var(--c) 12%, white); border-radius: 12px; color: var(--c); display: grid; height: 2.4rem; place-items: center; width: 2.4rem; }
.grupo__icono svg { height: 1.3rem; width: 1.3rem; }
.grupo strong { color: var(--azul-profundo); display: block; font-size: .95rem; }
.grupo small { color: var(--suave); font-size: .76rem; }
.grupo ul { display: grid; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.grupo li { align-items: center; display: flex; font-size: .8rem; gap: .45rem; position: relative; }
.grupo li img { border-radius: 7px; height: 1.9rem; object-fit: cover; width: 1.6rem; }
.grupo li .red--punto { height: 1rem; left: 1rem; position: absolute; top: .9rem; width: 1rem; }
.grupo li .red--punto svg { height: .5rem; width: .5rem; }
.grupo li.vacia, .conclusion .vacia { color: #9aa8b8; font-size: .8rem; }
.conclusion__detalle { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.1rem; }
.conclusion__detalle--citas { grid-template-columns: 1fr; }
.conclusion__analisis { background: var(--blanco); border: 1px solid var(--linea); border-left: 5px solid var(--azul); border-radius: 18px; box-shadow: var(--sombra); margin-top: 1.1rem; padding: 1.1rem 1.3rem; }
.conclusion__analisis ol { display: grid; gap: .55rem; margin: 0; padding-left: 1.2rem; }
.conclusion__analisis li { color: var(--grafito); font-size: .92rem; line-height: 1.5; }
.conclusion__analisis li::marker { color: var(--azul); font-weight: 800; }
.conclusion__redes.conclusion__lista li { grid-template-columns: minmax(0, 1fr) 2.6rem; }
.conclusion__redes.conclusion__lista li > span:first-child { color: var(--azul-profundo); font-size: .84rem; font-weight: 700; }
.conclusion__redes.conclusion__lista li .conclusion__medidor { grid-column: 1 / -1; }
.conclusion__redes.conclusion__lista li small { grid-column: 1 / -1; }
.conclusion__detalle--citas .conclusion__citas ul { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.conclusion__redes, .conclusion__citas { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); padding: 1rem; }
.conclusion h3 { font-size: 1rem; font-weight: 800; margin-bottom: .7rem; }
.conclusion__redes ul, .conclusion__citas ul { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.conclusion__redes li { align-items: center; display: grid; gap: .3rem .7rem; grid-template-columns: 7rem minmax(0, 1fr) 2.6rem; }
.conclusion__redes li small { color: var(--suave); font-size: .74rem; grid-column: 2 / -1; }
.conclusion__medidor { background: var(--fondo); border-radius: 999px; height: .55rem; overflow: hidden; }
.conclusion__medidor i { border-radius: inherit; display: block; height: 100%; }
.conclusion__redes b { color: var(--azul-profundo); font-size: .85rem; text-align: right; }
.conclusion__citas li { border-left: 4px solid var(--c); padding: .2rem 0 .2rem .7rem; }
.conclusion__citas p { color: var(--grafito); font-size: .9rem; font-style: italic; margin: 0; }
.conclusion__citas small { color: var(--suave); font-size: .76rem; }
.conclusion__profundo { background: linear-gradient(135deg, #f4f8ff 0%, var(--blanco) 60%); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); margin-top: 1.1rem; padding: 1.1rem 1.3rem; }
.conclusion__profundo--cargando .profundo__icono svg { animation: giro-detalle 1.4s linear infinite; }
@keyframes giro-detalle { to { transform: rotate(360deg); } }
.profundo__cab { align-items: center; display: flex; gap: .8rem; }
.profundo__cab > div { flex: 1 1 auto; }
.profundo__cab h3 { margin: 0; }
.profundo__cab small { color: var(--suave); font-size: .8rem; }
.profundo__icono { background: var(--azul); border-radius: 12px; color: var(--blanco); display: grid; flex: 0 0 auto; height: 2.4rem; place-items: center; width: 2.4rem; }
.profundo__icono svg { fill: none; height: 1.25rem; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: 1.25rem; }
.profundo__lectura { color: var(--grafito); font-size: .98rem; line-height: 1.6; margin: 1rem 0 0; }
.profundo__bloques { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; }
.profundo__bloque { border-top: 4px solid var(--c); padding-top: .6rem; }
.profundo__bloque h4 { color: var(--azul-profundo); font-size: .88rem; font-weight: 800; margin: 0 0 .4rem; }
.profundo__bloque ul { display: grid; gap: .4rem; margin: 0; padding-left: 1.1rem; }
.profundo__bloque li { color: var(--grafito); font-size: .88rem; line-height: 1.5; }
@media (max-width: 900px) { .profundo__bloques { grid-template-columns: 1fr; } .profundo__cab { flex-wrap: wrap; } }
.conclusion__acciones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

/* ---------- pie con la marca ---------- */
.pie { align-items: center; display: flex; flex-direction: column; gap: .6rem; }
.pie img { height: auto; opacity: .7; width: 5.5rem; }

@media (max-width: 1100px) { .conclusion__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .conclusion__detalle { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .conclusion__hero { grid-template-columns: 1fr; padding: 1.3rem; }
  .conclusion__icono { display: none; }
  .conclusion__grupos { grid-template-columns: 1fr; }
  .conclusion__redes:not(.conclusion__lista) li { grid-template-columns: 6rem minmax(0, 1fr) 2.4rem; }
  .marca img { width: 5.6rem; }
}

/* ---------- tercera sección: conclusión y todas las publicaciones ---------- */
.inferior { border-top: 1px solid var(--linea); margin-top: 6.5rem; padding-top: 5.5rem; }
.inferior .conclusion { margin-bottom: 5.5rem; }
.todas__cab { margin-bottom: 1.8rem; }
.pie { margin-top: 1rem; padding-bottom: 3rem; }
@media (max-width: 1320px) { .comentarios__lista { flex: none; max-height: none; } }
@media (max-width: 900px) { .tablero { gap: 1.25rem; padding-top: 2rem; } .inferior { margin-top: 3rem; padding-top: 2.5rem; } .cajas { grid-auto-rows: auto; } .cabecera { padding-top: 2.2rem; padding-bottom: 2rem; } }